コンテンツ詳細
#WEBデザイン
ホームページをデザインするときに大切なことは？参考になるギャラリーサイトも紹介
mayu（25歳）ウィンタースポーツ・メンタルヘルス・旅行などのジャンルをメインに活動中のフリーライター。
ホームページのデザインは、基本となる考え方や目的のもとで制作されていて、なおかつすぐれたWEBデザインにはいくつかの共通点があります。
今回は、ホームページのデザインにおける考え方や、ユーザーの印象に残りやすいホームページの共通点、そしてデザインスキルを向上させるコツなどを解説します。
参考になるデザインを集めたおすすめのギャラリーサイトも紹介しているので、あわせて参考にしてみてください。
ホームページデザインの基本
ホームページをデザインする際には、美しいサイトを完成させることが目的ではなく、集客や売上などの目標を達成することが目的。
つまりサイトが完成したあとのことを想定し、ホームページを構築するというのが基本です。
そのため、WEBデザインにおいては ユーザー目線での設計・デザインが何よりも求められます。
たとえば「どのデバイスからでも見やすいように設計する」「ユーザーが見やすく、使いやすいと思うデザインにする」という意識を常に持ち、サイトを制作することが重要です。
また、似たような言葉に「グラフィックデザイン」がありますが、これはWEBデザインのようにさまざまなデバイス（PC・スマホ・タブレットなど）を想定したデザインではないことが大きな違いといえます。
ホームページをデザインするときのポイント
ユーザーの印象に残りやすいホームページには、以下のような共通点があります。
✅工夫を凝らしたファーストビュー
✅ターゲットと伝えたいことが明確
✅見やすい・動線がわかりやすいデザイン
✅PC、スマホ、タブレットなど、あらゆるデバイスに対応している
これらの要素を意識してホームページをデザインすることで、コンバージョンに繋がりやすくなります。
それぞれの項目について、詳しく解説していきます。
工夫を凝らしたファーストビュー
印象に残るホームページは、ページが表示されてからスクロールせず確認できる範囲（＝ファーストビュー）に工夫を凝らしていることが多いです。
たとえば、以下のような要素はホームページのファーストビューによく配置されています。
✅インパクトのあるキャッチコピー
✅商品を絞り込むための検索欄
✅タイムリーな情報（セール・ニュースなど）
✅ユーザーの動線を邪魔しないシンプルなデザイン
これらを取り入れることでユーザーを目的の行動まで誘導しやすくなるほか、サイト内の回遊率を上げることにも繋がります。
また、近年はパソコンよりもスマートフォンからのアクセスが圧倒的に多いため、スマートフォンでアクセスしたときのファーストビューに力を入れて設計することが大切です。
ターゲットと伝えたいことが明確
サイトに来てほしいターゲットや、達成したい目標を設定すると、制作するサイトのデザインが目標（＝コンバージョン）に沿ったものになります。
「◯◯代の働く女性」「毎月〇〇PV」「申し込み〇〇件」などと具体的なターゲットやゴールを設定し、それに沿った設計を行なうようにしましょう。
ターゲットや目標を何も設定していない場合と比べると、公開後のコンバージョンにも差がつくはずです。
見やすい・動線がわかりやすいデザイン
ホームページは見た目の美しさだけでなく、ページ全体の見やすさや、動線のわかりやすさも求められます。
つまりホームページデザインではかっこいい・おしゃれといった 見た目のインパクトと、ユーザーを途中で離脱させず、目的の行動まで誘導することの両立が大切です。
購入ボタン、申し込みページなどの目的地へと辿り着けないサイトに対して、ユーザーがストレスを抱いてしまうのも想像に難くありません。
たとえばホームページの場合、
✅見やすい配色や文字の大きさ、文字数である
✅購入ボタンの位置や見た目がわかりやすい
✅名前・住所など入力必須の項目が少ない
などの要素を取り入れ、見やすさ・わかりやすさを向上させています。
PC・スマホ・タブレットなどのデバイスに対応
PC・スマホ・タブレットなど、さまざまなデバイスに対応していることを「マルチデバイス対応」といいます。
表示するデバイスに合わせてホームページのレイアウトを変更し、表示させるように設計することは必須の対応です。
PC用のページをスマホで閲覧したり、スマホ用のサイトをPCで閲覧したりすると違和感が生まれ、この違和感がページからの離脱に繋がることもあるので注意しましょう。
参考になるデザインを集めたギャラリーサイト
参考になるホームページデザインは、それらを集めたギャラリーサイトでまとめてチェックすることが可能です。
ここでは、国内外から集めたさまざまなホームページのデザインが掲載されている人気のギャラリーサイトをピックアップし、ご紹介します。
MUUUUU.ORG
「MUUUUU.ORG」は、数千点以上のホームページデザインが掲載されているギャラリーサイトです。
デザイン性の高さだけでなく、見やすさ・使いやすさを重視したサイトが数多く集まっていて、トレンドをひと目でチェックすることができます。
また、ギャラリーサイト自体も見やすく、ギャラリーのカテゴライズも制作者の目線で設定されているため、参考サイトを探す際に重宝します。
I/O 3000
「I/O 3000」はデザイン事例が豊富で、更新頻度の高さが特徴のギャラリーサイトです。
デザイン検索の方法が多岐にわたり、個性的なデザインも充実しています。
さらに、デザインをランダムに表示させる「シャッフル機能」があるので、デザインにおける何らかのヒントを得られるはずです。
また、国内だけでなく、海外のサイトも含めて高い頻度で追加されます。ホームページデザインのトレンドをチェックする際にもピッタリです。
straightline bookmark
「straightline bookmark」は、2万点以上の掲載数を誇るギャラリーサイト。
国内外のホームページを集めていて、掲載数が多いぶん、探しやすいように検索の選択肢が多いところも魅力です。
また、ギャラリーごとに保存数とお気に入り数が見られるようになっているので、人気や評価が数字で把握できるのも嬉しいポイント。
求める表現のヒントになるデザインがきっと見つかります。
The Best Designs
https://www.thebestdesigns.com/
「The Best Designs」は、海外のホームページを集めたギャラリーサイトです。
世界中の優れたデザインが掲載されていて、運営によるおすすめのコレクションからデザインを探すことができたり、デザイナー名で検索ができたりと、検索方法も多岐にわたります。
また、下層ページまでギャラリーサイト上で閲覧できるのも魅力のひとつです。気になるデザインを詳しくチェックすることができます。
bookma! v3
「bookma! v3」は、独自性の高いデザインが多く掲載されているギャラリーサイトです。
国内だけでなく海外のホームページもあり、気になったデザインをタップするとサイトの全体が閲覧できる仕様となっています。
また、パソコン版とスマートフォン版の両方が載っているのも、参考にしやすいポイントです。
まとめ
この記事では、ホームページのデザインにおける考え方や、ユーザーの印象に残りやすいホームページの共通点、そして参考になるギャラリーサイトなどをご紹介しました。
WEBデザインにおいては、かっこいい・おしゃれという要素のほかに、ユーザー目線での見やすさ、使いやすさを考慮した設計が求められます。
今回ご紹介したポイントをおさえながら、ユーザー目線に立ったホームページの構築にトライしてみてください。