ホームページを制作するにあたって、どのようなデザインにするかは悩みどころです。デザイン1つでユーザーに与える印象が大きく左右されるため、自社のイメージに合ったデザインを失敗なく実現したいと考えている事業者様も多いことでしょう。
本記事では、ホームページデザインの参考になる一覧サイト20選をまとめて紹介しています。ホームページデザインで押さえておきたいポイントや、失敗しないためのコツもあわせて解説していますので、ぜひ参考にしてください。
HubSpotのホームページテーマ・テンプレートを使用すれば、ブランドイメージに合ったホームページを簡単に作成できます。コンテンツ作成プロセスをシンプルにして、マーケティング担当者と開発者の効率化を実現しましょう。
HubSpotのホームページ作成機能は無料からご利用いただけるため、お気軽に試してみてください。
まずは、ホームページデザインの基礎を理解しておきましょう。基礎を理解することで、デザインという抽象的な概念を具体的に捉えられるようになるはずです。
ホームページデザインの基本要素として、大きく次の3つが挙げられます。
ホームページデザインに用いられるレイアウトの代表例は、次の図の通りです。複雑なレイアウトではなく、ユーザーが見やすく、わかりやすいシンプルなレイアウトを心がけましょう。
配色には、会社のイメージと一致しやすいコーポレートカラーなどを用いるのが一般的です。ベース・メイン・アクセントカラーを2～3色に絞り、視認性を意識して決めるとよいでしょう。
フォントもサイト全体の印象を左右する要素です。無償で使えるフリーフォントを使う場合は、利用規約やライセンス情報を確認した上で使用しましょう。
いずれの要素も、おしゃれさや目新しさ以上に、ユーザーにとって使いやすく、わかりやすいことを前提として決定してください。
ホームページデザインを検討する際には、他社の既存サイトを参考にすることをおすすめします。他社のホームページデザインを参考にすることで、下記の3つのメリットを得られるからです。
すでに公開されているホームページを参照することで、どのようなページを制作する必要があるのかが把握できます。自社が想定している規模のホームページがどのようなページ構成になっているのかがわかり、パターンがつかめるからです。
他社ホームページをユーザーの目線で見ていくことは、ユーザビリティ（使いやすさ）の感覚を理解する上でも重要なポイントです。「使いやすい」「見やすい」と感じたホームページに関して、なぜそう感じるのかを分析しておくとよいでしょう。
複数のホームページを見ていく中で、デザインの方向性が定まりやすくなるというメリットもあります。ホームページは企業イメージや提供している商品・サービスのイメージに合わせてデザインすることが重要です。自社が想定しているイメージに近いサイトを参考にすることにより、目指すべき方向性が明確になるでしょう。
ホームページを制作するにあたり、外部に業務を依頼するケースも想定されます。外注先に完成イメージを伝える際、言葉だけで説明するよりも「このサイトのようなイメージで」と伝えたほうが完成形をイメージしやすいでしょう。
仮にすべての工程を内製する場合でも、担当者間でイメージのすり合わせをしておくことは重要なポイントの1つです。いくつかのサンプルを選出しておくことで、社内外のメンバーにイメージを共有しやすくなる点は大きなメリットといえます。
ここからは、ホームページデザインの参考事例やリンク集をまとめた、おすすめのギャラリーサイトを、次の項目別に16種類ご紹介します。各サイトの特徴・機能や、おすすめポイントを解説しているので、デザインの方向性を決める際や、ヒントがほしいときにお役立てください。
アワード系とは、世界中からの候補・投票によって選ばれた、クリエイティブなデザインを閲覧できるギャラリーサイトです。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
Awwwards |
非公開（数万点以上） |
|
Digital Design Award |
非公開 |
|
The FWA |
非公開 |
※2024年10月時点
【概要・特徴】
「Awwwards」は、毎月、多くの受賞デザインが発表される、老舗のアワード系サイトです。デザインへの投票・ノミネートができるほか、世界中のデザイナーや開発者とつながることのできる、コミュニティとしての役割も果たしています。
【機能】
【おすすめポイント】
【概要・特徴】
「Digital Design Award」は、イタリアのデジタルクリエイティブにおける重要な作品が選出される、投票形式のデザイン一覧サイトです。審査員による投票に加え、登録ユーザー全員による投票も可能です。
【機能】
【おすすめポイント】
【概要・特徴】
「The FWA」は、2000年5月にイギリスで開設された、アワード系のデザイン一覧サイトです。35か国以上から、500名以上の審査員が参加しています。
【機能】
【おすすめポイント】
日本国内のWebデザインに限定したギャラリーサイトを、3種類ご紹介します。日本語に適したフォントやレイアウトなどを選定する際にも、参考にしやすいでしょう。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
81-web.com |
4,649 |
|
Web Design Clip |
5,156 |
|
ikesai.com |
合計件数の記載なし |
※2024年10月時点
81-web.com
【概要・特徴】
「81-web.com」は、国内の秀逸な事例が集められたデザインギャラリーサイトです。Web制作に役立つことを意識しており、検索や閲覧がしやすいUIになっています。
【機能】
【おすすめポイント】
【概要・特徴】
「Web Design Clip」は、日本国内の洗練されたデザインを掲載しているギャラリーサイトです。サイトの運営方針として、「Web制作担当者のインスピレーションを刺激するようなサイトを集めている」とうたっており、思わず目を奪われる事例が並んでいます。
【機能】
【おすすめポイント】
【概要・特徴】
「イケサイ」はその名の通り、国内の「イケてるサイト」を集めたギャラリーです。一目見たら記憶に残るような印象的なサイトが多々あり、見識の幅を広げるのに役立ちます。
【機能】
【おすすめポイント】
海外のWebデザインギャラリーサイトは、国内のデザインとはレイアウトや配色などが異なります。新鮮なインスピレーションを得たい方は、ぜひ参考にしてみてください。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
Landingfolio |
1,465 |
|
Site Inspire |
3,092 |
|
Land-book |
非公開 |
※2024年10月時点
【概要・特徴】
「Landingfolio」は、海外のWebデザインを紹介しているサイトです。「トップページ」「会社概要ページ」「ログインページ」「エラーページ（404ページ）」「ヘッダー」「フッター」など、ホームページを構成する各ページや領域別に、デザインを閲覧できます。
【機能】
【おすすめポイント】
【概要・特徴】
「Site Inspire」は、Webデザインや機能を紹介しているギャラリーサイトです。掲載されているサイトは、ロンドンを拠点とするデジタル スタジオ「Howells Studio」によって選出されています。
【機能】
【おすすめポイント】
【概要・特徴】
「Land-book」は、デザイナーや開発者のために設立されたWebデザインギャラリーサイトです。「Webflow templates」から、デザインテンプレートを購入することもできます。
【機能】
【おすすめポイント】
ホームページは、閲覧する端末によって見え方が異なるため、ユーザーの視認性を考慮すると、デザインも工夫しなければなりません。
近年では、デバイスの画面サイズによってデザインを自動で最適化できるレスポンシブデザインも注目されています。ここでは、スマートフォン対応デザインの参考になるWebデザインギャラリーサイトを、3種類ご紹介します。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
bookma! |
非公開 |
|
Responsive Web Design JP |
4,096 |
|
AGT smartphone design gallery |
474 |
※2024年10月時点
【概要・特徴】
「bookma!」は、無駄のないシンプルなギャラリーサイトです。上部にある各デバイスのマークで、パソコン用とレスポンシブデザインを並列させるか、どちらか一方だけを表示するか選べます。
【機能】
【おすすめポイント】
【概要・特徴】
「Responsive Web Design JP」は、優れたレスポンシブデザインのサイトを国内外から集めたギャラリーです。スマートフォン、タブレット、パソコンの表示が一覧で並んでいるのが特徴的です。
【機能】
【おすすめポイント】
【概要・特徴】
「AGT」は、国内外のスマートフォン向けの質の高いサイトを集めたギャラリーサイトです。サムネイルにカーソルを合わせると、実際のホームページへ遷移することなく、サイトの全体像を把握できるため、リサーチを効率的に行えます。
【機能】
【おすすめポイント】
ホームページにアニメーションを使って動きを付けると、独自の表現となりユーザーの目を引きやすくする効果が期待できます。アニメーション付きのホームページデザインに特化したギャラリーサイトを、2種類ご紹介します。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
1GUU |
非公開 |
|
HOVERSTAT.ES |
非公開 |
※2024年10月時点
【概要・特徴】
「1GUU（イチグウ）」は、動きのあるホームページデザインを多く紹介しているギャラリーサイトです。アニメーション付きのサムネイルで、実際のサイトに遷移しなくてもどのように動くか雰囲気がわかるため、多くのデザインを効率的にリサーチできます。
【機能】
【おすすめポイント】
【概要・特徴】
「HOVERSTAT.ES」は、アニメーション付きのホームページデザインに特化したギャラリーサイトです。実際の動きやエフェクト効果を動画で紹介しているため、サイトの全体像を把握しやすいのが特徴です。
【機能】
【おすすめポイント】
ホームページはヘッダー（ページの上部）やフッター（ページの下部）のように、パーツごとにデザインを構築すると魅力もより上がります。ここでは、パーツ別のデザインをチェックできるギャラリーサイトについて2つ紹介しましょう。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
Parts. |
記載なし |
|
Modulesss… |
3,508 |
※2024年10月時点
【概要・特徴】
「Parts.」は、ホームページのパーツごとにデザインを確認できるギャラリーサイトです。「ヘッダー」「フッター」「CTA」「パンくず」（ユーザー用の階層誘導表示）と、ホームページの構築に役立つ要素のデザインが数多く掲載されています。
【機能】
【おすすめポイント】
【概要・特徴】
「Modulesss…」は、21個のカテゴリに分けてホームページのデザインを参考にできるギャラリーサイトです。SNS広告バナーやグラフ・チャート、ポップアップと細かいパーツまで多くのデザインをリサーチできます。
【機能】
【おすすめポイント】
ホームページ運用に、CMS（コンテンツ管理システム）を用いている会社も多いでしょう。WordPressなどのCMSで構築されたデザインを集めたギャラリーサイトを、2種類ご紹介します。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
CMS Design |
1,992 |
|
WPデザインギャラリー |
443 |
※2024年10月時点
【概要・特徴】
「CMS Design」は、WordPressをはじめとするCMS（コンテンツ管理システム）で作られたサイトを集めたギャラリーです。日本語サイトに限定した、秀逸なデザインが揃っています。
【機能】
【おすすめポイント】
【概要・特徴】
「WPデザインギャラリー」は、その名の通りWordPressに特化したデザインギャラリーです。デザインの特徴や雰囲気を掴んでからリンクを開くか判断できるので、リサーチの時間短縮に便利です。
【機能】
【おすすめポイント】
数多くのホームページを効率よくチェックしたいと考えている方も多いでしょう。便利な機能を活用することで、Webデザインを効率よく確認できるギャラリーサイトを2種類ご紹介します。
|
サイト名 |
掲載中のデザイン数 |
|---|---|
|
ちょうどいい |
2,233 |
|
1GUU |
非公開 |
※2024年10月時点
【概要・特徴】
「ちょうどいい」はサイト名の通り、さまざまなホームページの「ちょうどいい」部分に絞ってデザインを参照できるギャラリーサイトです。「ちょうどいいポイント」を確認することで、各ホームページの特徴やデザイン工夫されている点の要旨がわかります。
【機能】
【おすすめポイント】
【概要・特徴】
「1GUUは、ホームページの一覧でアニメーションを含めて確認できるギャラリーサイトです。各ホームページを開かなくても、サムネイルの状態で動きのある表現を確認できます。動きも含めてホームページのイメージをつかみたい場合に最適です。
【機能】
【おすすめポイント】
ホームページは、外見上きれいでおしゃれに見えればよいというものではありません。ユーザーにとって見やすく、必要な情報をすばやく探せるデザインにすることが重要です。ユーザーに伝わるホームページのデザインを目指す上で、押さえておきたいポイントを紹介します。
ホームページは複数のページで構成されており、各ページのUI（ユーザーインターフェース）が大きく異なるとユーザーの混乱を招きます。UIとは、ユーザーの目に直接触れる接点のことであり、Webサイトの見た目にあたるものです。
ページを見たときの印象に違和感があると離脱につながるため、デザイン設計では全体の配色・画像・フォント・文体に一貫性をもたせることが大切です。
統一感のあるデザインにするには、次に挙げるデザインの4原則を押さえておく必要があります。
デザインの4要素を意識して、一貫性のあるサイトデザインを構築しましょう。
ホームページデザインは、運営側の開発や管理のしやすさ以上に、ユーザーから見たときの使いやすさやわかりやすさを徹底することが大切です。ユーザーファーストに徹することが、結果として検索エンジンの評価を高めることにもつながります。ユーザーにとって使いやすいサイトは、検索エンジンのクローラーにとっても構造や内容を理解しやすいサイトといえるからです。ユーザーファーストにつながる具体策を、3つご紹介します。
ホームページを見たユーザーに対して、「結局何を伝えたいサイトなのかわからない」「どこに必要な情報があるのかわからない」といった印象を与えてしまうと、ユーザーはすぐに離脱してしまうかもしれません。
ユーザーが最初に目にするファーストビューでは、ユーザーが最も知りたい情報を伝えることが必要不可欠です。まずは、求める情報を提供し、安心してホームページを周遊してもらえるようにしましょう。
いくら正しい情報が書かれていたとしても、どこに注目すべきかわからないホームページでは、その内容が伝わりにくいものです。
情報量が多いときは、重要な点やとくに注目してほしい部分の位置・色・サイズなどを調整して強調しましょう。ユーザーが情報を把握・理解しやすくなります。
ユーザーが目的の情報やページへたどり着きやすいようにするには、メニュー一覧などのコンテンツを表示させるためのナビゲーションバーを設置するとよいでしょう。ナビゲーションバーとは、Spotifyのサイトを例にすると、最上部のこの部分です。
ナビゲーションバーは、誰でも感覚的に操作できるよう、シンプルでわかりやすい構造にしてください。
ホームページは、パソコン・スマートフォン・タブレットなどのいずれのデバイスで表示した際にも、デザインが崩れないようにする必要があります。
画面サイズに応じてデザインを切り替えられる「レスポンシブデザイン」を導入すれば、それぞれのデバイスに適したデザインでホームページを表示できます。
ホームページで魅力的なデザインを作成するには、基礎知識に加えて専門的なスキルも求められます。デザインツールの使い方のみならず、HTMLやCSSといったコーディングの知識も習得しなければなりません。それぞれのスキルの身に付け方を紹介します。
ホームページを作成する際には、デザインツールを使いこなす必要があります。主なデザインツールの例として、Adobe Illustrator（アドビイラストレーター）やCanva（キャンバ）が挙げられます。
Canvaを中心に、無料で使用できるタイプも少なくありません。ただし、より多彩なデザインを使いたい場合は有料プランでの契約をおすすめします。Adobe IllustratorとCanvaの具体的な特徴については、下記の記事で詳しく紹介しています。
ホームページのデザイン作成では、HTMLやCSSなどのコーディングの知識も重要です。HTMLはWebページの基礎をつくるための言語、CSSは背景やレイアウトの設定に関する言語を指します。コーディングにはさまざまな種類があるものの、この2つをまずは押さえてください。
コーディングの知識を習得する余裕がない場合は、外注する選択肢もあります。外注にかかる費用や業務上の負担を考慮した上で、最もふさわしいと思う方法を選びましょう。
ホームページデザインはクリエイティブな領域でもあるため、固定された正解がなく、試行錯誤していかなければなりません。次に紹介する3つのコツを意識して制作に取り組むことで、成功に近づきやすくなるはずです。
デザイン制作の経験がない段階では、デザインの全容を決めるのは難しいかもしれません。ホームページデザインを設計する際には、最初にサイト構成・設計を決めてからデザインを考え始めるとスムーズです。
なぜなら、デザインを決めたあとで盛り込むべきコンテンツが増えると、デザインをやり直さなければならなくなるためです。
ホームページデザインは、時流や新しい技術の普及などに影響を受けるため、その時々のトレンドがあります。
たとえば、2006年頃からはアニメーションやフラットデザインを取り入れたデザインが流行し、昨今だとダークモードやVR・ARを取り入れたデザインなどが多く見られるようになってきました。
必ずしもトレンドをすべて取り入れる必要はありません。しかし、同業他社のホームページデザインはユーザーから比較されやすい側面があるため、似た業種のトレンドを把握しておくと、差異化に役立ちます。
Webデザインのトレンドや歴史に興味のある方は、こちらもご覧ください。
ホームページには多様なデザインがあるからこそ、最適解が見つからず悩んでしまうかもしれません。自社でデザインを一から考えるのが難しそうであれば、デザイン制作ツールや、デザイン制作会社なども活用するとよいでしょう。
HubSpotでは、無料のランディングページ制作ツールを提供しています。テンプレートをもとに、簡単な操作でホームページのカスタマイズが可能です。
ホームページは一度完成すれば終わりではありません。サイトの更新やコンテンツの追加による継続的なブラッシュアップが不可欠です。運用の難易度が高いサイトデザインにしてしまうと、運用コストが膨張する原因にもなりかねません。できるだけシンプルで運用しやすいデザインにすることが大切です。
とくにコンテンツの追加や更新については、自社で実施できるようにしておくほうが作業時間やコストの削減につながります。たとえばCMSなら、使用頻度の高いオブジェクト（サイト上で使用する部品）を登録しておき、簡単に呼び出すことも可能です。このように運用の負担を軽減するための対策を講じておくことも、重要なポイントの1つといえるでしょう。
今回紹介したホームページギャラリーサイトを参照することで、さまざまな企業のホームページデザインを閲覧できます。デザインの基礎を理解した上で、他社サイトのデザインやユーザビリティを分析し、自社サイトに取り入れられそうな要素を見つけていきましょう。
ホームページの見た目だけでなく、ユーザーにとっての使いやすさを意識することにより、伝わりやすく好感をもってもらえるホームページを構築できるはずです。
おしゃれなデザインやかっこいいデザインは、こちらでもご紹介しています。デザイン選定の参考にご活用ください。