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