- WEBサイトのデザインってどうやって考えたらいいの?
- WEBサイトのデザインに失敗したくないから、ポイントを知りたい
- 自社と同じようなサイトのデザインをみて参考にしたい
と思っていませんか?
WEBサイトのデザインでは、以下のポイントを抑えておくことが重要です。
- WEBサイト制作の目的を確認する
- WEBサイトをみてほしいユーザーのターゲットを決める
- WEBサイトのコンセプトを決める
本記事では、WEB制作のプロである「NERD株式会社」が
WEBデザインのポイントと、参考になるデザインのまとめサイトをご紹介していきます。WEBサイトのデザインで失敗しないために、あらかじめ手順やポイントを把握しておきましょう!
失敗しないためのWEBデザイン3つのポイント

ここではWEBサイトのデザインに失敗しないためのポイントをご紹介します。
WEBサイトのデザインを考えるときは、以下のポイントを参考にしてみてください。
- WEBサイト制作の目的を確認する
- WEBサイトをみてほしいユーザーのターゲットを決める
- WEBサイトのコンセプトを決める
では早速、WEBデザインのポイントについて、ひとつずつ解説していきます。
①WEBサイト制作の目的を確認する
![]()
WEBサイトのデザインを考えはじめる前に、
まずはWEBサイトを制作する目的を確認しておきましょう。目的とは、「WEBサイト制作で達成したいこと」であり、制作のゴールになるものです。
WEBサイトを制作する目的には、以下のようなものが挙げられます。
- 販売促進(商品やサービスを知ってもらい、成約につなげたい)
- 会社紹介(自社の強みや特徴を紹介し、信頼性向上や集客につなげたい)
- 採用(学生や転職希望者からの応募数を増やしたい)
目的によってWEBサイトの構成が異なります。
例えば、販売促進で資料請求してもらうなど目的が明確であれば、ランディングページ(LP)という1枚のページで商品やサービスを紹介するWEBページが適しています。一方、サービスや商品を詳しく紹介したい場合には、サイトを訪れた人が見やすいようにサービスごとにページを分けるなどの工夫が必要になるでしょう。
ランディングページについては、下記の記事で詳しく解説しています。
成果につながるランディングページの制作方法をプロが解説
どれほど見た目がかっこよくても、目的に合わない構成になっていては良いWEBサイトとはいえません。まずはじめに、
WEBサイトを制作する目的を確認しておくことが重要です。
②WEBサイトをみてほしいユーザーのターゲットを決める
![]()
WEBサイト制作の目的が確認できたら、
WEBサイトをみてほしいユーザーのターゲットを決めましょう。ターゲットを決めることで、「WEBサイトにどのような内容が必要なのか」が明確になります。
例えば、採用サイトで学生をターゲットとする場合には、会社によって選考時期や流れが異なるため、スケジュールや選考の流れに関しての情報が必要になるでしょう。一方、転職希望者がターゲットであれば、通年で行なっている中途採用のページに載せる内容としては適していないといえます。
ターゲットを決めないままWEBサイト制作を進めてしまうと、思っていたような成果がでないWEBサイトになるリスクがあります。
成果がでるWEBサイトをつくるためには、サイトをみてほしいユーザーのターゲットを決めることが重要です。
③WEBサイトのコンセプトを決める
![]()
WEBサイトのデザインをはじめる前に、
WEBサイトのコンセプトを決めておきましょう。コンセプトとは、「WEBサイトでどのようなことを伝えたいかの基本的な考え方」であり、「デザインの良し悪しの判断基準」になるものです。コンセプトによってWEBサイトのデザインは大きく異なります。
例えば、コンセプトを「信頼される会社」と設定した場合には、ポップなデザインではなくフォーマルなしっかりとした印象を与えられるデザインが望ましいでしょう。
そして、サイト全体のメインカラーも重要な要素の一つです。
メインカラーでサイト全体の印象が大きく変わるため、「サイトを通してどのようなことをターゲットに伝えたいか」を考えて最適な色を選びましょう。
カラーから抱く印象の例
・赤:情熱、生命力、激しさ
・オレンジ:活気、親しみ、明るい
・黄:希望、にぎやか、かわいい
・緑:やすらぎ、安全、新鮮
・青:さわやか、誠実、信頼 など |
出展:
【こんなにも凄い】色が人の心理と行動に与える影響とは
WEBサイトのデザインをはじめる前に、
WEBサイトのコンセプトを決めることが重要です。
参考にしたいWEBデザインのまとめサイト5選
![]()
WEBサイトのデザインを考えるときに重要なのが、
世の中のWEBサイトをみて参考にすることです。ここからは、WEB担当者におすすめの「WEBサイトのデザインまとめサイト5選」を紹介していきます。
①LP ARCHIVE
LP ARCHIVE
ランディングページのデザイン登録数No.1のサイトです。
検索窓に業種や商品名などを入力すると、キーワードに合致したサイトが一覧で表示されます。カラーやイメージから探すこともできるので、ランディングページをお探しの方におすすめです。
②MUUUUU.ORG
MUUUUU.ORG
コーポレートサイトからECサイトまで幅広いジャンルのサイトが豊富にあります。クオリティの高いECサイトのデザインが見れることも大きな特徴です。
③SANKOU!
SANKOU!
日本のさまざまな業種のサービスサイトが豊富にあるのが特徴です。レイアウトやアニメーションなどの条件からページを探すことができます。
④Web Design Clip
Web Design Clip
特徴としては、「採用サイト・転職・求人」というカテゴリーで検索することができます。レイアウトやメインカラーからサイトを探したいという方にもおすすめです。
⑤1-web.com
81-web.com
更新頻度が高く、平均的に1日に1サイトが追加されます。フォントの名前で検索できる点が大きな特徴です。
WEBデザインを本で学びたい人におすすめの3冊
WEBは無料で情報が得られるから便利だけど、しっかり情報がまとまっている本を参考にしたいという方も多いのではないでしょうか。そこで、いつでもデスクに置いておきたい
WEBデザインが学べる本3冊を紹介します。
①Webデザイン良質見本帳
Webデザイン良質見本帳
業種やサイト種別から参考になるWEBサイトのデザインを調べたい、そんな人におすすめの1冊です。
業界ごと、色ごと、Webサイトのタイプごとに優れたWebデザインが多数掲載されているので、とても参考になります。
②2万回のA/Bテストからわかった 支持されるWebデザイン事例集
2万回のA/Bテストからわかった 支持されるWebデザイン事例集
大手企業のテストで検証済みの
成果がでた事例からWEBデザインが学べる1冊です。
ユーザーの気持ちを考えて、ユーザーが迷わない導線を設計したり、ユーザーがストレスを感じないWEBサイトを設計することが必要になってきます。この本ではそのような事例をクイズ形式で学べるのでおすすめです。
③同じ素材&テキストなのに、こんなに違う! デザインのネタ帳
同じ素材&テキストなのに、こんなに違う! デザインのネタ帳
4人のデザイナーが自分の作品をプレゼンするコンペ形式でデザインレイアウトが学べる、面白い切り口で書かれている1冊です。
1テーマにつき4つのデザインが提案されていて、それぞれの
デザインの意図やポイントが学べます。
おまけ:WEBサイト制作におすすめの写真サイト5選
![]()
WEBサイト制作では、サイト種別に関わらず写真が必要になる場面が多いです。
しかし、写真をすべて自社で準備するのは大変で、撮影を外部にお願いする場合は費用がかかります。そこで、
WEB制作におすすめの写真サイトを5つほど紹介します。
NERDにご依頼いただいた場合は、お客様のサイトの雰囲気にあった最適な写真を選定し、WEBサイトを制作することが可能です。有料の画像を追加料金なしで提供できることもあるので、質の高い素材をお得に使用いただけます。
① 無料サイト:写真AC
写真AC
日本人の人物写真に特化しているため、コーポレートサイトや採用サイトなどに使いやすい写真が豊富にあります。
写真は無料で使用できますが、ダウンロードするためには会員登録が必要です。注意点としては、無料会員は1日で検索できる回数やダウンロード回数に制限があります。
② 無料サイト:O-DAN
O-DAN
会員登録不要で、世界中のフリー画像サイトをまとめて検索できるサイトです。
一つ一つのサイトを開きながら画像を探すという手間を省く事ができます。かっこいい雰囲気やお洒落な写真をお探しの方に、おすすめです。写真ACのような、検索回数やダウンロード回数の制限などもありません。
③有料サイト:Adobe Stock
Adobe Stock
Adobe社が運営するサービスで高画質な画像やイラストを購入できるサイトです。有料のサービスになりますが、コストに見合った高いクオリティの写真を取得することができます。
④有料サイト:pixta
pixta
Adobe Stockと比べて、日本人の素材が豊富な写真サイトです。定額プランであれば、ダウンロードの未利用分を翌月以降に繰り越しすることが可能なので、使わない月があっても安心して使えます。
⑤有料サイト:Shutterstock
Shutterstock
3億以上の画像から選べる、圧倒的な素材数が魅力のサイトで、WEBサイトで使い勝手の良いアイコンやイラストなどの素材も充実しています。最近では、日本でも知られるようになってきましたが、それでも海外利用者の方が圧倒的に多いので、日本人の画像は少なめです。
WEBデザインのまとめ
![]()
WEBサイトのデザインを考える前に、まずは
WEBサイト制作の目的を明確に決めておきましょう。そして
ターゲットを設定し、
WEBサイトのコンセプトを決めていきます。目的、ターゲット、コンセプトが決まったら、
WEBデザインのまとめサイトを参考にしながら、どのようなサイトをつくっていくのか具体的に考えましょう。
WEBサイト制作で失敗しないためには、
WEB制作のプロに相談することがおすすめです。
WEB制作会社であれば、目的を果たすためにターゲットやコンセプトに合わせたデザイン性と安全性が高い効果的なWEBサイトを制作できます。
なかでもNERD株式会社は
BtoCやBtoBを問わず、さまざまな業種のWEBサイトを制作可能です。作って終わりではなく、公開後も保守・運用を行い
ゴール達成に向けてサポートしています。
WEBサイト制作でお困りのことがあれば、どうぞお気軽にNERDまでご相談ください。
【NERD株式会社に相談する】
弊社は、東京都墨田区にあるWEBサイト制作会社です。「制作」「マーケティング」「プロダクト」の3つを強みに、これまでに培った「成功するノウハウ」を活かしたWEBサイト制作を得意としています。
以下から弊社のサービス資料・お役立ち資料をダウンロードできますので、皆様のWEBサイト運用に活用していただけますと幸いです。