【2024年版】ホームページデザインのおすすめ参考サイト20選

ホームページを制作するにあたって、どのようなデザインにするかは悩みどころです。デザイン1つでユーザーに与える印象が大きく左右されるため、自社のイメージに合ったデザインを失敗なく実現したいと考えている事業者様も多いことでしょう。

ウェブサイトテーマとテンプレート

あらかじめ用意されたウェブサイトテーマやテンプレートを利用して、簡単に高品質なホームページを制作しましょう。

• カスタマイズ可能なテーマでウェブサイトを無料で構築
• 編集可能なテーマを使用しサイトのイメージを一新
• あらゆるデバイスに対応するレイアウトで顧客とつながる
• コンテンツ作成プロセスをシンプルに

今すぐ無料で試す→

本記事では、ホームページデザインの参考になる一覧サイト20選をまとめて紹介しています。ホームページデザインで押さえておきたいポイントや、失敗しないためのコツもあわせて解説していますので、ぜひ参考にしてください。

まずは、ホームページデザインの基礎を理解しておきましょう。基礎を理解することで、デザインという抽象的な概念を具体的に捉えられるようになるはずです。

ホームページデザインの基本要素として、大きく次の3つが挙げられます。

• レイアウト
• 配色
• フォント

ホームページデザインに用いられるレイアウトの代表例は、次の図の通りです。複雑なレイアウトではなく、ユーザーが見やすく、わかりやすいシンプルなレイアウトを心がけましょう。

配色には、会社のイメージと一致しやすいコーポレートカラーなどを用いるのが一般的です。ベース・メイン・アクセントカラーを2～3色に絞り、視認性を意識して決めるとよいでしょう。

フォントもサイト全体の印象を左右する要素です。無償で使えるフリーフォントを使う場合は、利用規約やライセンス情報を確認した上で使用しましょう。

いずれの要素も、おしゃれさや目新しさ以上に、ユーザーにとって使いやすく、わかりやすいことを前提として決定してください。

ホームページデザインを検討する際には、他社の既存サイトを参考にすることをおすすめします。他社のホームページデザインを参考にすることで、下記の3つのメリットを得られるからです。

制作する必要があるページを把握しやすくなる

すでに公開されているホームページを参照することで、どのようなページを制作する必要があるのかが把握できます。自社が想定している規模のホームページがどのようなページ構成になっているのかがわかり、パターンがつかめるからです。

他社ホームページをユーザーの目線で見ていくことは、ユーザビリティ（使いやすさ）の感覚を理解する上でも重要なポイントです。「使いやすい」「見やすい」と感じたホームページに関して、なぜそう感じるのかを分析しておくとよいでしょう。
 

デザインの方向性が定まりやすくなる

複数のホームページを見ていく中で、デザインの方向性が定まりやすくなるというメリットもあります。ホームページは企業イメージや提供している商品・サービスのイメージに合わせてデザインすることが重要です。自社が想定しているイメージに近いサイトを参考にすることにより、目指すべき方向性が明確になるでしょう。
 

外注先に完成イメージを伝えやすくなる

ホームページを制作するにあたり、外部に業務を依頼するケースも想定されます。外注先に完成イメージを伝える際、言葉だけで説明するよりも「このサイトのようなイメージで」と伝えたほうが完成形をイメージしやすいでしょう。

仮にすべての工程を内製する場合でも、担当者間でイメージのすり合わせをしておくことは重要なポイントの1つです。いくつかのサンプルを選出しておくことで、社内外のメンバーにイメージを共有しやすくなる点は大きなメリットといえます。
 

ここからは、ホームページデザインの参考事例やリンク集をまとめた、おすすめのギャラリーサイトを、次の項目別に16種類ご紹介します。各サイトの特徴・機能や、おすすめポイントを解説しているので、デザインの方向性を決める際や、ヒントがほしいときにお役立てください。

• アワード系デザインギャラリーサイト
• 日本国内のデザインギャラリーサイト
• 海外のデザインギャラリーサイト
• スマートフォン対応デザインギャラリーサイト
• アニメーション付きデザインギャラリーサイト
• ホームページのパーツ別のデザインギャラリーサイト
• WordPressなどのCMSに特化したデザインギャラリーサイト
• 便利な機能が利用できるデザインギャラリーサイト
   

アワード系のWebデザインギャラリーサイト3選

アワード系とは、世界中からの候補・投票によって選ばれた、クリエイティブなデザインを閲覧できるギャラリーサイトです。

※2024年10月時点

Awwwards

Awwwards

【概要・特徴】

「Awwwards」は、毎月、多くの受賞デザインが発表される、老舗のアワード系サイトです。デザインへの投票・ノミネートができるほか、世界中のデザイナーや開発者とつながることのできる、コミュニティとしての役割も果たしています。

【機能】

• 条件検索機能（賞・カテゴリー・タグ・テクノロジー・配色・国別）
• 日・週・月・年ごとの並べ替え機能

【おすすめポイント】

• 世界でどのようなWebデザインが評価されているのかがわかる
• 更新頻度が高く、最新のデザイントレンドがわかる
   

Digital Design Award

Digital Design Award

【概要・特徴】

「Digital Design Award」は、イタリアのデジタルクリエイティブにおける重要な作品が選出される、投票形式のデザイン一覧サイトです。審査員による投票に加え、登録ユーザー全員による投票も可能です。

【機能】

• カテゴリー検索機能（Webサイト・Eコマース・アプリ・ゲーム・VR／AR／MR）
• ソート機能（週・月・年）

【おすすめポイント】

• 世界的なアパレルブランドや高級消費財系のデザインが多数掲載されている
• VRやARなどの最新技術を用いたデザインの参考になる
   

The FWA

The FWA

【概要・特徴】

「The FWA」は、2000年5月にイギリスで開設された、アワード系のデザイン一覧サイトです。35か国以上から、500名以上の審査員が参加しています。

【機能】

• ライブ審査機能（提出されたプロジェクトの審査をライブで視聴できる）
• フィルター検索機能
• 日付検索機能

【おすすめポイント】

• プロジェクトに関するコメントや制作者に対する質問、フォーラム的な議論もできる
   

日本国内のWebデザインギャラリーサイト3選

日本国内のWebデザインに限定したギャラリーサイトを、3種類ご紹介します。日本語に適したフォントやレイアウトなどを選定する際にも、参考にしやすいでしょう。

※2024年10月時点

81-web.com

81-web.com

【概要・特徴】

「81-web.com」は、国内の秀逸な事例が集められたデザインギャラリーサイトです。Web制作に役立つことを意識しており、検索や閲覧がしやすいUIになっています。

【機能】

• 検索機能（カテゴリー・タグ・配色別）
• ブックマーク機能

【おすすめポイント】

• サムネイルにカーソルを合わせると、使用されているカテゴリー・配色・フォント・タグなどが表示される
• サムネイル下のパソコンマークをクリックすると、事例ページのスクリーンショットが表れ、サイトへ遷移することなく一目で雰囲気を判断できる
   

Web Design Clip

Web Design Clip

【概要・特徴】

「Web Design Clip」は、日本国内の洗練されたデザインを掲載しているギャラリーサイトです。サイトの運営方針として、「Web制作担当者のインスピレーションを刺激するようなサイトを集めている」とうたっており、思わず目を奪われる事例が並んでいます。

【機能】

• 検索機能（メインカラー・サブカラー・レイアウト・カテゴリー・タグ別）

【おすすめポイント】

• 国内外の高品質で洗練されたデザインが集められている
• 掲載数豊富で更新頻度も高く、トレンドを掴みやすい
• レスポンシブデザインも多数掲載されている
   

ikesai.com（イケサイ）

ikesai.com

【概要・特徴】

「イケサイ」はその名の通り、国内の「イケてるサイト」を集めたギャラリーです。一目見たら記憶に残るような印象的なサイトが多々あり、見識の幅を広げるのに役立ちます。

【機能】

• 検索機能（業種・配色別）

【おすすめポイント】

• 業種別カテゴリー検索ができるため、競合リサーチなどにも有用
   

海外のWebデザインギャラリーサイト3選

海外のWebデザインギャラリーサイトは、国内のデザインとはレイアウトや配色などが異なります。新鮮なインスピレーションを得たい方は、ぜひ参考にしてみてください。

※2024年10月時点

Landingfolio

Landingfolio

【概要・特徴】

「Landingfolio」は、海外のWebデザインを紹介しているサイトです。「トップページ」「会社概要ページ」「ログインページ」「エラーページ（404ページ）」「ヘッダー」「フッター」など、ホームページを構成する各ページや領域別に、デザインを閲覧できます。

【機能】

• 検索機能（デバイス・配色・業種別）
• レコメンド機能（似たデザインの提案）

【おすすめポイント】

• 「Figma」「Webflow」などのデザイン制作ツールや、「Vue」「React」などのライブラリといった、700以上のコンポーネント別ギャラリーも掲載している
   

Site Inspire

Site Inspire

【概要・特徴】

「Site Inspire」は、Webデザインや機能を紹介しているギャラリーサイトです。掲載されているサイトは、ロンドンを拠点とするデジタル スタジオ「Howells Studio」によって選出されています。

【機能】

• 検索機能（スタイル・タイプ・テーマ・プラットフォーム別）

【おすすめポイント】

• 各プロジェクトのサムネイルが小さいため、大量のデザインを確認しやすい
• EC構築サービスのShopifyなど、プラットフォーム別の検索ができる
   

Land-book

Land-book

【概要・特徴】

「Land-book」は、デザイナーや開発者のために設立されたWebデザインギャラリーサイトです。「Webflow templates」から、デザインテンプレートを購入することもできます。

【機能】

• 検索機能（スタイル・業種・タイプ別）
• ソート機能（新しい順、人気順、閲覧数の多い順）

【おすすめポイント】

• ランディングページ・ポートフォリオ・ブログ・ストアなど、さまざまなタイプのWebサイトデザインを参照できる
   

スマートフォン対応デザインに特化したWebデザインギャラリーサイト3選

ホームページは、閲覧する端末によって見え方が異なるため、ユーザーの視認性を考慮すると、デザインも工夫しなければなりません。

近年では、デバイスの画面サイズによってデザインを自動で最適化できるレスポンシブデザインも注目されています。ここでは、スマートフォン対応デザインの参考になるWebデザインギャラリーサイトを、3種類ご紹介します。

※2024年10月時点

bookma!

bookma!

【概要・特徴】

「bookma!」は、無駄のないシンプルなギャラリーサイトです。上部にある各デバイスのマークで、パソコン用とレスポンシブデザインを並列させるか、どちらか一方だけを表示するか選べます。

【機能】

• キーワード検索機能

【おすすめポイント】

• レスポンシブデザインを1画面に並べて比較し、確認できる
• 検索機能を限定しているため、サイトがシンプルで使いやすい
   

Responsive Web Design JP

Responsive Web Design JP

【概要・特徴】

「Responsive Web Design JP」は、優れたレスポンシブデザインのサイトを国内外から集めたギャラリーです。スマートフォン、タブレット、パソコンの表示が一覧で並んでいるのが特徴的です。

【機能】

• 検索機能（カテゴリー・配色・技術・タイプ別）

【おすすめポイント】

• 色別や業種別のほか、技術仕様ごとに検索できる
• デバイスごとの表示が一目で確認できる
   

AGT smartphone design gallery

AGT smartphone design gallery

【概要・特徴】

「AGT」は、国内外のスマートフォン向けの質の高いサイトを集めたギャラリーサイトです。サムネイルにカーソルを合わせると、実際のホームページへ遷移することなく、サイトの全体像を把握できるため、リサーチを効率的に行えます。

【機能】

• マウスオーバーでデザイン全体を確認できる

【おすすめポイント】

• クオリティの高い、スマートフォン向けのデザインが見つかる
   

アニメーション付きのWebデザインギャラリーサイト2選

ホームページにアニメーションを使って動きを付けると、独自の表現となりユーザーの目を引きやすくする効果が期待できます。アニメーション付きのホームページデザインに特化したギャラリーサイトを、2種類ご紹介します。

※2024年10月時点
 

1GUU（イチグウ）

1GUU

【概要・特徴】

「1GUU（イチグウ）」は、動きのあるホームページデザインを多く紹介しているギャラリーサイトです。アニメーション付きのサムネイルで、実際のサイトに遷移しなくてもどのように動くか雰囲気がわかるため、多くのデザインを効率的にリサーチできます。

【機能】

• 検索機能（国・業種別）

【おすすめポイント】

• アニメーション付きサムネイルでわかりやすい
• 国別フィルターで世界中のデザインにアクセスできる
   

HOVERSTAT.ES

HOVERSTAT.ES

【概要・特徴】

「HOVERSTAT.ES」は、アニメーション付きのホームページデザインに特化したギャラリーサイトです。実際の動きやエフェクト効果を動画で紹介しているため、サイトの全体像を把握しやすいのが特徴です。

【機能】

• サムネイルにマウスオーバー（ホバー）すると、動きを確認できる
• アーカイブ検索機能（年度・カテゴリー・タグ別）

【おすすめポイント】

• ボタンにカーソルを合わせたときにどのように作用するかといった、インタラクションデザインを多く知ることができる
• 実際のサイトに遷移することなくアニメーションのイメージをつかめる
   

ホームページのパーツ別のデザインをチェックできるギャラリーサイト2選

ホームページはヘッダー（ページの上部）やフッター（ページの下部）のように、パーツごとにデザインを構築すると魅力もより上がります。ここでは、パーツ別のデザインをチェックできるギャラリーサイトについて2つ紹介しましょう。

※2024年10月時点
 

Parts.

Parts.

【概要・特徴】

「Parts.」は、ホームページのパーツごとにデザインを確認できるギャラリーサイトです。「ヘッダー」「フッター」「CTA」「パンくず」（ユーザー用の階層誘導表示）と、ホームページの構築に役立つ要素のデザインが数多く掲載されています。

【機能】

• サムネイルの表示方法を1列または2列のどちらかを選べる

【おすすめポイント】

• 「ヘッダー」や「CTA」などホームページの要素、機能ごとにデザインを参考にできる
• サムネイルをクリックして拡大するか、鎖アイコンをクリックして実際のページに移動するかを選べる
• サムネイルをクリック後「このサイトのパーツ一覧へ」のボタンを押すと、実際のホームページへ移動しなくとも全てのデザインを閲覧できる
   

Modulesss…

Modulesss…

【概要・特徴】

「Modulesss…」は、21個のカテゴリに分けてホームページのデザインを参考にできるギャラリーサイトです。SNS広告バナーやグラフ・チャート、ポップアップと細かいパーツまで多くのデザインをリサーチできます。

【機能】

• カテゴリを選択できるダイアログボックス
• サムネイルの表示方法を2〜5列の範囲で選べる
• ソーシャルボタン

【おすすめポイント】

• サムネイルをクリックして拡大するか、直下に掲載されているリンクから実際のページに移動するかを選べる
• ホームページに必須といえるパーツ、設定すると見映えがさらに良くなるパーツなど、用途に応じてさまざまなデザインを閲覧できる
   

WordPressなどのCMSに特化したWebデザインギャラリーサイト2選

ホームページ運用に、CMS（コンテンツ管理システム）を用いている会社も多いでしょう。WordPressなどのCMSで構築されたデザインを集めたギャラリーサイトを、2種類ご紹介します。

※2024年10月時点
 

CMS Design

CMS Design

【概要・特徴】

「CMS Design」は、WordPressをはじめとするCMS（コンテンツ管理システム）で作られたサイトを集めたギャラリーです。日本語サイトに限定した、秀逸なデザインが揃っています。

【機能】

• 検索機能（業種、配色）

【おすすめポイント】

• CMSで構築されたデザイン性の高いサイトが多数掲載されている
   

WPデザインギャラリー

WPデザインギャラリー

【概要・特徴】

「WPデザインギャラリー」は、その名の通りWordPressに特化したデザインギャラリーです。デザインの特徴や雰囲気を掴んでからリンクを開くか判断できるので、リサーチの時間短縮に便利です。

【機能】

• サムネイル上にカーソルを置くと、事例に関するコメントが表示される

【おすすめポイント】

• WordPressのデザインに特化している
• 国内のいろいろな種類のサイトが網羅されている
   

数多くのホームページを効率よくチェックしたいと考えている方も多いでしょう。便利な機能を活用することで、Webデザインを効率よく確認できるギャラリーサイトを2種類ご紹介します。

※2024年10月時点
 

ちょうどいい

ちょうどいい

【概要・特徴】

「ちょうどいい」はサイト名の通り、さまざまなホームページの「ちょうどいい」部分に絞ってデザインを参照できるギャラリーサイトです。「ちょうどいいポイント」を確認することで、各ホームページの特徴やデザイン工夫されている点の要旨がわかります。

【機能】

• 各ホームページの「ちょうどいいポイント」
• 色のトーンやデザインのテイストなど、多彩な条件による検索機能

【おすすめポイント】

• デザインに詳しくない方でも要点を理解しやすい
• イメージするホームページの特徴から検索できる
   

1GUU

1GUU

【概要・特徴】

「1GUUは、ホームページの一覧でアニメーションを含めて確認できるギャラリーサイトです。各ホームページを開かなくても、サムネイルの状態で動きのある表現を確認できます。動きも含めてホームページのイメージをつかみたい場合に最適です。

【機能】

• グラフィックの種類やパターンによる検索機能
• 60カ国以上の海外サイトに対応

【おすすめポイント】

• トップページのアニメーションを一覧で確認できる
• 日本だけでなく世界的なトレンドをつかめる
   

ホームページは、外見上きれいでおしゃれに見えればよいというものではありません。ユーザーにとって見やすく、必要な情報をすばやく探せるデザインにすることが重要です。ユーザーに伝わるホームページのデザインを目指す上で、押さえておきたいポイントを紹介します。
 

デザインに一貫性をもたせる

ホームページは複数のページで構成されており、各ページのUI（ユーザーインターフェース）が大きく異なるとユーザーの混乱を招きます。UIとは、ユーザーの目に直接触れる接点のことであり、Webサイトの見た目にあたるものです。

ページを見たときの印象に違和感があると離脱につながるため、デザイン設計では全体の配色・画像・フォント・文体に一貫性をもたせることが大切です。

統一感のあるデザインにするには、次に挙げるデザインの4原則を押さえておく必要があります。

• 近接：要素同士を近くに配置し、グループ化する。
• 整列：要素を規則的に整列して配置し、視覚的な秩序を生み出す。
• 反復：要素を規則的に繰り返し、情報を階層化する。
• 対比：要素を比較して際立たせ、デザインに抑揚をもたせる。

デザインの4要素を意識して、一貫性のあるサイトデザインを構築しましょう。
 

ユーザーファーストを徹底する

ホームページデザインは、運営側の開発や管理のしやすさ以上に、ユーザーから見たときの使いやすさやわかりやすさを徹底することが大切です。ユーザーファーストに徹することが、結果として検索エンジンの評価を高めることにもつながります。ユーザーにとって使いやすいサイトは、検索エンジンのクローラーにとっても構造や内容を理解しやすいサイトといえるからです。ユーザーファーストにつながる具体策を、3つご紹介します。
 

ファーストビューでユーザーが最も知りたい情報を伝える

ホームページを見たユーザーに対して、「結局何を伝えたいサイトなのかわからない」「どこに必要な情報があるのかわからない」といった印象を与えてしまうと、ユーザーはすぐに離脱してしまうかもしれません。

ユーザーが最初に目にするファーストビューでは、ユーザーが最も知りたい情報を伝えることが必要不可欠です。まずは、求める情報を提供し、安心してホームページを周遊してもらえるようにしましょう。
 

視覚情報の優先順位を明確にして見やすくする

いくら正しい情報が書かれていたとしても、どこに注目すべきかわからないホームページでは、その内容が伝わりにくいものです。

情報量が多いときは、重要な点やとくに注目してほしい部分の位置・色・サイズなどを調整して強調しましょう。ユーザーが情報を把握・理解しやすくなります。
 

ナビゲーションバーでわかりやすくする

ユーザーが目的の情報やページへたどり着きやすいようにするには、メニュー一覧などのコンテンツを表示させるためのナビゲーションバーを設置するとよいでしょう。ナビゲーションバーとは、Spotifyのサイトを例にすると、最上部のこの部分です。

ナビゲーションバーは、誰でも感覚的に操作できるよう、シンプルでわかりやすい構造にしてください。
 

どのデバイスでもデザインが崩れないようにする

ホームページは、パソコン・スマートフォン・タブレットなどのいずれのデバイスで表示した際にも、デザインが崩れないようにする必要があります。

画面サイズに応じてデザインを切り替えられる「レスポンシブデザイン」を導入すれば、それぞれのデバイスに適したデザインでホームページを表示できます。

ホームページのデザインに必要なスキル

ホームページで魅力的なデザインを作成するには、基礎知識に加えて専門的なスキルも求められます。デザインツールの使い方のみならず、HTMLやCSSといったコーディングの知識も習得しなければなりません。それぞれのスキルの身に付け方を紹介します。

デザインツールの操作スキル

ホームページを作成する際には、デザインツールを使いこなす必要があります。主なデザインツールの例として、Adobe Illustrator（アドビイラストレーター）やCanva（キャンバ）が挙げられます。

Canvaを中心に、無料で使用できるタイプも少なくありません。ただし、より多彩なデザインを使いたい場合は有料プランでの契約をおすすめします。Adobe IllustratorとCanvaの具体的な特徴については、下記の記事で詳しく紹介しています。

HTMLやCSSなどのコーディングスキル

ホームページのデザイン作成では、HTMLやCSSなどのコーディングの知識も重要です。HTMLはWebページの基礎をつくるための言語、CSSは背景やレイアウトの設定に関する言語を指します。コーディングにはさまざまな種類があるものの、この2つをまずは押さえてください。

コーディングの知識を習得する余裕がない場合は、外注する選択肢もあります。外注にかかる費用や業務上の負担を考慮した上で、最もふさわしいと思う方法を選びましょう。

ホームページデザインはクリエイティブな領域でもあるため、固定された正解がなく、試行錯誤していかなければなりません。次に紹介する3つのコツを意識して制作に取り組むことで、成功に近づきやすくなるはずです。

デザインの前にサイト構成・設計を決める

デザイン制作の経験がない段階では、デザインの全容を決めるのは難しいかもしれません。ホームページデザインを設計する際には、最初にサイト構成・設計を決めてからデザインを考え始めるとスムーズです。

なぜなら、デザインを決めたあとで盛り込むべきコンテンツが増えると、デザインをやり直さなければならなくなるためです。

最新トレンドを意識する

ホームページデザインは、時流や新しい技術の普及などに影響を受けるため、その時々のトレンドがあります。
たとえば、2006年頃からはアニメーションやフラットデザインを取り入れたデザインが流行し、昨今だとダークモードやVR・ARを取り入れたデザインなどが多く見られるようになってきました。

必ずしもトレンドをすべて取り入れる必要はありません。しかし、同業他社のホームページデザインはユーザーから比較されやすい側面があるため、似た業種のトレンドを把握しておくと、差異化に役立ちます。

Webデザインのトレンドや歴史に興味のある方は、こちらもご覧ください。

対応が難しい場合はデザイン制作ツールを活用する

ホームページには多様なデザインがあるからこそ、最適解が見つからず悩んでしまうかもしれません。自社でデザインを一から考えるのが難しそうであれば、デザイン制作ツールや、デザイン制作会社なども活用するとよいでしょう。

HubSpotでは、無料のランディングページ制作ツールを提供しています。テンプレートをもとに、簡単な操作でホームページのカスタマイズが可能です。

運用のしやすさを考慮したデザインにする

ホームページは一度完成すれば終わりではありません。サイトの更新やコンテンツの追加による継続的なブラッシュアップが不可欠です。運用の難易度が高いサイトデザインにしてしまうと、運用コストが膨張する原因にもなりかねません。できるだけシンプルで運用しやすいデザインにすることが大切です。

とくにコンテンツの追加や更新については、自社で実施できるようにしておくほうが作業時間やコストの削減につながります。たとえばCMSなら、使用頻度の高いオブジェクト（サイト上で使用する部品）を登録しておき、簡単に呼び出すことも可能です。このように運用の負担を軽減するための対策を講じておくことも、重要なポイントの1つといえるでしょう。
 

今回紹介したホームページギャラリーサイトを参照することで、さまざまな企業のホームページデザインを閲覧できます。デザインの基礎を理解した上で、他社サイトのデザインやユーザビリティを分析し、自社サイトに取り入れられそうな要素を見つけていきましょう。

ホームページの見た目だけでなく、ユーザーにとっての使いやすさを意識することにより、伝わりやすく好感をもってもらえるホームページを構築できるはずです。

おしゃれなデザインやかっこいいデザインは、こちらでもご紹介しています。デザイン選定の参考にご活用ください。