コンテンツ詳細
#WEBデザイン
いいWEBサイトデザインの共通点って？参考になるギャラリーサイトも紹介
この記事を書いている人
mayu（25歳）ウィンタースポーツ・メンタルヘルス・旅行などのジャンルをメインに活動中のフリーライター。
人気が高く、コンバージョンにも繋がりやすいWEBサイトのデザインには、いくつかの共通点があります。
WEBサイト制作にあまり慣れていない段階では、これらのサイトで使われるテクニックを参考に、制作を進めていくことがおすすめです。
今回は WEBサイトのデザインにおいて意識すべきポイントや、参考になるWEBサイトを集めたおすすめのギャラリーサイトをご紹介します。
優れたWEBサイトの共通点
ユーザーの印象に残りやすいWEBサイトには、以下のような共通点があります。
✅ターゲットと伝えたいことが明確
✅見やすい・動線がわかりやすいデザイン
✅PC、スマホ、タブレットなど、あらゆるデバイスに対応している
これらの要素を意識してWEBサイトをデザインすることで、コンバージョンにも繋がりやすくなるはずです。
クライアントからの要望を取り入れつつ、レイアウト（＝デザインの設計図）の時点で落とし込めるよう、心がけるのが望ましいでしょう。
それぞれの項目について、詳しく解説していきます。
ターゲットと伝えたいことが明確
サイトに来てほしいターゲットや、達成したい目標を設定すると、制作するサイトのデザインが目標（＝コンバージョン）に沿ったものになります。
「◯◯代の働く女性」「毎月〇〇PV」「申し込み〇〇件」などと具体的なターゲットやゴールを設定し、それに沿った設計を行なうようにしましょう。
ターゲットや目標を何も設定していない場合と比べると、公開後のコンバージョンにも差がつくはずです。
見やすい・動線がわかりやすいデザイン
WEBデザインでは見た目の美しさだけでなく、見た目と機能性（＝UI）の両立が求められます。
つまり サイト制作においては、かっこいい・おしゃれといった見た目のインパクトと、ユーザーを途中で離脱させず、目的の行動まで誘導できるかも重要ということです。
購入ボタン、申し込みページなどの目的地へと辿り着けないサイトに対して、ユーザーがストレスを抱いてしまうのも想像に難くありません。
たとえばWEBサイトの場合、
✅見やすい配色や文字の大きさである
✅ボタンの位置や見た目がわかりやすい
✅項目が整頓されている
✅余白がある
などの要素を取り入れ、見やすさ・わかりやすさを向上させています。
PC・スマホ・タブレットなどのデバイスに対応
PC・スマホ・タブレットなど、さまざまなデバイスに対応していることを「マルチデバイス対応」といいます。
「レスポンシブコーディング」という方法で、表示するデバイスに合わせてレイアウトを変更します。
端末によって最適なレイアウトのページを表示させるように設計することは、今では必須の対応です。
優れたサイトを制作するためにはには
印象に残るサイトの共通点として述べた「独創性」は、デザインを制作する技術にも直結する部分です。
ここでは、優れたサイトをデザインするために効果的で、なおかつ代表的な方法を紹介します。
優れたサイトデザインを参考にする
デザイン制作の技術を磨くには、 「どんなデザインが良しとされているか」を知ることが1番の近道です。
人気のサイトや売上が高いサイトをチェックし、「なぜこのデザインが効果的なのか」を徹底的に観察することで、少しずつヒントが見えてきます。
かっこいい・おしゃれという要素だけでなく、ユーザーの行動を促しやすいWEBサイトを制作するためにも、トレンド感がありながらコンバージョンも高いデザインを日頃からチェックしましょう。
いくらかっこいいデザインのサイトであっても、動線がわかりにくいだけでユーザーが離脱してしまいます。
とにかく数をこなす
優れたデザインをチェックして目が養われたら、それらを実際につくってみる（＝モデリング）という練習も効果的です。
「このデザインはどのように作られているか？」を、実際に手を動かして追求することで、デザインにおける経験値を上げることができます。
練習用に模写したデザインをそのまま制作物に使用するのはNGですが、とにかく数をこなすうちに自身のレパートリーが増えていき、実際の業務にも技術を活かせるようになるのです。
デザインの参考になるギャラリーサイト
優れたデザインや、現在トレンドになっているデザインは、それらをまとめたギャラリーサイトでまとめてチェックすることが可能です。
ここでは、国内外のWEBサイトを集めた人気のギャラリーサイトをピックアップし、ご紹介します。
h3：MUUUUU.ORG
「MUUUUU.ORG」は、制作者が参考にしやすいデザインを集めたギャラリーサイトです。
デザイン性の高さだけでなく、見やすさ・使いやすさを重視したサイトが数多く集まっていて、トレンドをひと目でチェックすることができます。
また、ギャラリーサイト自体も見やすく、ギャラリーのカテゴライズも制作者目線であるため、参考サイトを探す際にとても重宝するはずです。
I/O 3000
「I/O 3000」はデザイン事例が豊富で、更新頻度の高さが特徴のギャラリーサイトです。
デザイン検索の方法が多岐にわたり、個性的なデザインも充実しています。
さらに、デザインをランダムに表示させる「シャッフル機能」があるので、デザインにおける何らかのヒントを得られるはずです。
また、国内だけでなく、海外のサイトも含めて高い頻度で追加されます。トレンドのチェックにもピッタリです。
straightline bookmark
「straightline bookmark」は、2万点以上の掲載数を誇るギャラリーサイト。
国内外のWEBサイトを集めていて、掲載数が多いぶん、探しやすいように検索の選択肢が多いところも魅力です。
また、ギャラリーごとに保存数とお気に入り数が見られるようになっているので、人気や評価が数字で把握できるのも嬉しいポイント。
求める表現のヒントになるデザインがきっと見つかります。
The Best Designs
https://www.thebestdesigns.com/
「The Best Designs」は、海外のWEBサイトを集めたギャラリーサイトです。
世界中の優れたデザインが掲載されていて、運営によるおすすめのコレクションからデザインを探すことができたり、デザイナー名で検索ができたりと、検索方法も多岐にわたります。
また、下層ページまでギャラリーサイト上で見られるのも魅力のひとつです。気になったデザインを詳しくチェックできるとあって、アイデア探しに活用できるでしょう。
bookma! v3
「bookma! v3」は、独自性の高いデザインが多く掲載されているギャラリーサイトです。
国内だけでなく海外のWEBサイトもあり、気になったデザインをタップするとサイトの全体が閲覧できる仕様となっています。
また、パソコン版とスマートフォン版の両方が載っているのも、参考にしやすいポイントです。
まとめ
この記事では、WEBサイトのデザインにおいて意識すべきポイントや、参考になるWEBサイトを集めたおすすめのギャラリーサイトをご紹介しました。
WEBサイト制作にあまり慣れていない段階では、これらのサイトで使われるテクニックを取り入れ、制作を進めていくことがおすすめです。
人気が高く、コンバージョンにも繋がりやすいWEBサイトデザインを参考にしながら、素敵なサイトを制作してください。