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

ホームページのデザインは、ユーザーが会社に対して持つ印象を左右する要素のひとつです。ホームページは会社についてはもちろん、取り扱う商品やサービスをユーザーに知ってもらうための入口ともいえます。ユーザーが見やすく洗練されたデザインは、コンテンツ内容とともに、ユーザーの会社に対する印象に影響を与えるのです。

しかし、いざホームページデザイン制作に取り組むと、「デザインについての知識がない」「良いデザインが浮かばない」とお困りの方も多いのではないでしょうか。

本記事では、デザインを決める際に参考になるWebデザインのギャラリーサイトをご紹介します。ホームページデザインの基礎とおさえるべきポイント、失敗しないためのコツも解説していますので、デザイン制作がはじめての方や、デザインのインスピレーションが欲しい方に役立てていただければ幸いです。

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

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

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

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

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

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

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

他社のホームページデザインを参考にするメリットは、必要なページを把握できる点です。必要なページを設定することで、ユーザビリティ（使いやすさ）が向上します。他社のホームページにアクセスし、構造をしっかりと押さえてください。

また、デザインの方向性が定まる点もメリットの一つです。ホームページも、企業や提供しているサービスのブランドに合わせてデザインを構築する必要があります。案が思い浮かばない場合は、同業他社のホームページを参考にしましょう。

制作にあたっては、他社に外注する企業もあるでしょう。外注先に完成品のイメージを明確に伝えなければ、納得のいかないデザインで作られる恐れもあります。内製化と外注のいずれにおいても、他社のホームページを参考にすることは大切です。
 

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

• アワード系デザイン
• 日本国内のデザイン
• 海外のデザイン
• スマートフォン対応デザイン
• アニメーション付きデザイン
• ホームページのパーツ別のデザイン
• WordPressなどのCMSに特化したデザイン

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

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

※2022年8月時点

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種類ご紹介します。日本語に適したフォントやレイアウトなどを選定する際にも、参考にしやすいでしょう。

※2022年8月時点
 

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

※2022年8月時点

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種類ご紹介します。

※2022年8月時点

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種類ご紹介します。

※2022年8月時点
 

1GUU（イチグウ）

1GUU

【概要・特徴】

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

【機能】

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

【おすすめポイント】

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

HOVERSTAT.ES

HOVERSTAT.ES

【概要・特徴】

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

【機能】

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

【おすすめポイント】

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

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

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

※2023年8月時点
 

Parts.

Parts.

【概要・特徴】

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

【機能】

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

【おすすめポイント】

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

Modulesss…

Modulesss…

【概要・特徴】

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

【機能】

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

【おすすめポイント】

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

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

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

※2023年8月時点
 

CMS Design

CMS Design

【概要・特徴】

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

【機能】

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

【おすすめポイント】

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

WPデザインギャラリー

WPデザインギャラリー

【概要・特徴】

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

【機能】

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

【おすすめポイント】

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

ホームページは、きれいな見た目やおしゃれさだけを追求すれば良いというものではなく、ユーザーに利用されてこそ価値があります。ユーザーに伝わるホームページデザインを目指すうえで、次の3つのポイントをおさえておきましょう。
 

配色・画像・フォント・文体に一貫性をもたせる

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

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

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

ホームページデザインは、運営側の開発や管理のしやすさ以上に、ユーザーから見た使いやすさやわかりやすさを徹底することが大切です。ユーザーファーストにつながる具体策を、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では、無料のランディングページ制作ツールを提供しています。テンプレートをもとに、簡単な操作でホームページのカスタマイズが可能です。

ホームページはユーザーに利用されてこそ価値があるため、ユーザーファーストで一貫性があり、伝わりやすいデザインであることが何よりも大切です。

デザインの基礎を理解したうえで、Webデザインギャラリーサイトから取り入れられそうな要素があれば、参考にしながら実際にデザイン制作に取り組んでみましょう。他のサイトのデザインを参考にすれば、発見や学びがあるはずです。

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