ホームページのデザインに迷っているなら、他社事例を参考にしてみましょう。自社と同じ業種や、雰囲気の近いホームページの事例を揃えておくとイメージを具体化させやすくなります。

→ダウンロード: 5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

今回は、様々なホームページのデザインを一度に確認できるギャラリーサイトを厳選してご紹介します。それぞれ掲載しているホームページの傾向が異なるため、都度使い分けてみましょう。あわせて、ホームページのデザインで押さえるべきポイントも解説します。

ぜひ参考にしてみてください。

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

ホームページのギャラリーサイト19

ではさっそく、ホームページデザインの参考事例まとめサイトを19紹介していきます。それぞれの概要や特徴、おすすめポイントを解説しているので、案件に合ったサイトを見つけていただければと思います。(2020年5月7日時点)
 

1.Web Design Clip

事例の数:5,285件
更新頻度:★★★★☆
検索機能:★★★★★
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

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

【概要・特徴】            
「Web Design Clip」は、国内外の洗練されたデザインを掲載しているギャラリーサイトです。「Web制作担当者のインスピレーションを刺激するようなサイトを集めている」と謳っているだけあって、思わず目を奪われる事例が並んでいます。

検索機能が特徴的でメインカラーだけでなくサブカラーからの検索や、サイトレイアウトからの検索も可能です。配色や部分的な参考事例を探す場合にも役立つでしょう。
 

2.MUUUUU.ORG

事例の数:4,486件
更新頻度:★★★★★
検索機能:★★★★★
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • 縦長デザインを探している人に特におすすめ
  • デザイン性に優れたサイト厳選している
  • 情報設計の参考にもなる

【概要・特徴】            
「MUUUUU.ORG」は、デザイン性に優れた縦長サイトのみを集めたギャラリーサイトです。縦長といえばランディングページを想像するかもしれませんが、LP以外のWebサイトも掲載されています。デザインだけでなく情報設計でも参考になる事例が多く、実務に取り入れやすいでしょう。

ちなみにMUUUUU.ORG自体も縦長です。ページ移動なくスクロールで見れるので、読み込み時間のストレスが少なく、縦長のメリットを自サイトでも体現しています。
 

3.straightline bookmark

事例の数:24,860件
更新頻度:★★★★☆
検索機能:★★★★☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • 掲載数が多く、クオリティの高いデザインを探せる
  • サムネイルの下に「いいね数」と「ブックマーク数」があり、人気傾向を把握できる

【概要・特徴】            
「straightline bookmark」は、掲載数2万件以上という事例の豊富さが特徴のギャラリーサイトです。検索は、カラー・カテゴリー・レイアウトのほか、javascriptやflashなどの動作で絞ることもできます。

会員登録(無料)をすると、「いいね」やブックマークができます。また、他の会員ユーザーがブックマークしたものも見れるので、検索機能とは違った視点からデザインを探せるはずです。
 

4.81-web.com

事例の数:3,443件
更新頻度:★★★★☆
検索機能:★★★★★
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • 国内の秀逸な事例が集められている
  • サムネイル表示により、サイトへ遷移する必要がない
  • カテゴリやカラーだけでなく、タグでの検索もできる

【概要・特徴】            
「81-web.com」は、国内のサイトに対象を絞ったギャラリーサイトです。Web制作に役立つことを意識しており、検索や閲覧がしやすいUIになっています。

サムネイル下にあるPCマークを押すと、事例ページのスクリーンショットが表れ、サイトへわざわざ移ることなく一目で雰囲気を判断できます。+のマークを押すとブックマークできるのも、便利で良いですね。
 

5.I/O 3000

事例の数:4,081件
更新頻度:★★★★★
検索機能:★★★★★
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • サムネイルが大きくて、ギャラリーが見やすい
  • 検索タグが多く、求めているサイトを探しやすい

【概要・特徴】            
「I/O 3000」は、シンプルなものからポップなものまで、国内外のさまざまな事例を見やすくまとめたサイトです。スクロールしていくと自動ロードされていくタイプですが、非常に軽く、スピーディーに閲覧できます。

毎月20件近く更新されており、常に新しいデザインをチェックできます。
 

6.SANKOU!

事例の数:2,278件
更新頻度:★★★★☆
検索機能:★★★★★
見やすさ:★★★★★
表示速度:★★★★☆

【おすすめポイント】

  • 豊富な検索タグにより、いろいろな角度から調べ物ができる
  • フィルター機能もあり、複数のタグを組み合わせて検索できる

【概要・特徴】            
「SANKOU!」は、国内のセンスの良いデザイン事例を集めたギャラリーサイトです。
検索タグが豊富で、カテゴリ・色・テイスト・機能など多様な調べ方ができます。「奇抜・派手・珍しい配色」「組み合わせが効いた配色」など、他にないユニークなタグも。

またフィルター機能もあり、複数のタグを組み合わせた検索も可能です。今まで考えてもみなかったデザインに出会えるかもしれません。
 

7.S5-Style

事例の数:7,420件
更新頻度:★★★☆☆
検索機能:★★★★★
見やすさ:★★★★☆
表示速度:★★★☆☆

【おすすめポイント】

  • 様々なテイストのハイセンスなデザインに出会える
  • AND・OR検索ができ、目的に合った事例が見つかりやすい

【概要・特徴】            
「S5-Style」は国内外の7,000以上の事例を掲載しており、どれも高品質です。

検索機能も充実しておりタグが豊富なほか、AND・OR検索も可能です。これにより膨大な量の事例から、自分が求めるデザインのヒントをピンポイントに探し当てられるでしょう。
 

8.bookma! v3

事例の数:722件
更新頻度:★★★☆☆
検索機能:★★☆☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • PC用とスマホ用のデザインが並列表示され、一目で各デバイスの表示が確認できる

【概要・特徴】            
「bookma! v3」は、無駄のないシンプルなギャラリーサイトです。カテゴリーやタグ検索も省略され、キーワード検索のみとなっています。この点では、ほかのサイトに比べ使いにくく感じるかもしれません。

上部にある各デバイスのマークで、PC用とレスポンシブデザインを並列させるか、どちらか一方だけを表示するか選べます。レスポンシブも1画面で比較確認できるのは、他サイトにはない便利なポイントです。
 

9..SG_BOOKMARK

事例の数:2,685件
更新頻度:★★★☆☆
検索機能:★★★☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • 洗練されたデザイン事例が豊富
  • 単に見た目が良いだけでなく、使いやすく見やすいサイトが集められている

【概要・特徴】            
「.SG_BOOKMARK」は、「よくできているサイト」を厳選していると謳う通り、デザインと利便性を両立した事例だけを揃えています。オシャレなだけではダメなのがホームページのデザイン。.SG_BOOKMARKの事例には、ユーザーファーストを考える上で参考になる点が多々あります。

検索はカテゴリ毎のタグのみとシンプルですが、種類が多いため困ることは少ないでしょう。
 

10.CSS mania

事例の数:31,104件
更新頻度:☆☆☆☆☆
検索機能:★★☆☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • 世界中のCSSで作られたデザインを閲覧できる

【概要・特徴】            
「CSS mania」は、優れたデザインのCSS製サイトを世界中から集めたギャラリーです。
3万件を超える圧倒的な情報量が魅力ですね。更新は2018年2月で止まっていますが、参考事例を探すには十分なボリュームでしょう。
 

11.Grids

事例の数:517件
更新頻度:★☆☆☆☆
検索機能:★★★☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • デザインルールが一目でわかり実務的に使える
  • Web以外に紙や写真も分析しており、さまざまな媒体の研究ができる

【概要・特徴】            
「Grids」では、スクリーンショット上にレイアウト用のガイドが書き込まれており、全体のバランスを一目で理解しやすい設計になっています。
1つ1つの事例が丁寧に分析されていて、デザイナーだけでなくエンジニアも参考にできるギャラリーです。
 

12.WPデザインギャラリー

事例の数:443件
更新頻度:★☆☆☆☆
検索機能:★★★☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

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

【概要・特徴】            
「WPデザインギャラリー」は、その名の通りWordPressに特化したデザインギャラリーです。Webサイトの多くがWordPressで作られていますから、参考にしやすいのではないでしょうか。

サムネイル上にカーソルを置くと、事例についての簡単なコメントが表示されます。デザインの特徴や雰囲気を掴んでからリンクを開くか判断できるので、リサーチの時間短縮に便利です。
 

13.TCD MUSEUM

事例の数:356件
更新頻度:★★☆☆☆
検索機能:★☆☆☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • WordPress製のオシャレなサイトが多数掲載されている

【概要・特徴】            
「TCD MUSEUM」は、TCDというWordPressテーマで作られたサイトを集めたギャラリーです。TCDは国内トップクラスのシェアを誇るテーマで、その分、秀逸な事例が揃っています。

前述のWPデザインギャラリーとともに重宝するはずです。ただ、検索ができない点は少し不便かもしれません。
 

14.Wix公式

事例の数:687件
更新頻度:ー
検索機能:ー
見やすさ:★★★★★
表示速度:★★☆☆☆

【おすすめポイント】

  • 世界中のWix製ホームページ作成事例が充実している

【概要・特徴】            
「Wix」は、ドラッグ&ペーストの簡単な操作で本格的なホームページが作れる世界的に人気のサービスです。公式ブログでは制作事例を多数掲載しており、Webデザイナーにとっても参考になる情報が得られます。

以下に、該当の記事をご紹介しますね。

15.DesignAwards.Asia

事例の数:1,018件
更新頻度:ー
検索機能:★★★★★
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • アジアのデザイナーが選んだ優れたデザインが集まるサイト
  • 創造性、内容、ビジュアルで評価されたものが見つかる

【概要・特徴】            
「DesignAwards.Asia」は、アジア圏の秀逸なデザインの事例を多数収録したギャラリーです。各国のデザイナーによる審査をクリアしなければ掲載されず、デザイン性に優れた事例のみを閲覧できます。

価値観が異なる海外の人々にも評価されるデザインとはどういうものなのか、ハイレベルな視点で参考になるサイトです。
 

16.iPhoneデザインボックス

159021055121683

事例の数:672件
更新頻度:★★☆☆☆
検索機能:★★★☆☆
見やすさ:★★★★☆
表示速度:★★★★★

【おすすめポイント】

  • iPhoneでの表示に特化

【概要・特徴】            
「iPhoneデザインボックス」は、iPhoneでの表示に特化したギャラリーです。見た目だけでなく、UIにも優れたサイトを紹介しています。

サムネイルをクリックするとiPhoneとPCの表示例が出てきます。その下には関連カテゴリーのデザインや人気のデザインがピックアップされており、検索の手間を軽減できるはずです。

 

17.CSS Design Awards

 

事例の数:7,922件
更新頻度:ー
検索機能:★★★★☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • 世界でどのようなWebデザインが評価されているのかがわかる
  • UI/UXに優れたデザインを学べる

【概要・特徴】            
「CSS Design Awards」もユーザー投票型のサイトです。世界中から作品が日々投稿されており、掲載数は8,000近くにもなります。

このサイトの特徴は、デザインの評価軸にUI/UXと先進性が含まれる点。見た目だけでなく、ユーザーの利便性と利用体験も重視しているのです。反応の取れるホームページ作りを目指すうえで、ここの事例は積極的に参考にしたいですね。
 

18.Responsive Web Design JP

事例の数:2,866件
更新頻度:★★☆☆☆
検索機能:★★★★☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

  • ハイクオリティなレスポンシブデザインが見つかる

【概要・特徴】            
「Responsive Web Design JP」は、国内の秀逸なレスポンシブデザインを集めたギャラリーサイトです。PC・タブレット・スマホそれぞれの表示が並び、クリックすると外部ページに遷移するシンプルな構造になっています。

デバイスごとの表示を一覧で確認できるのは、モバイルファーストの時代において便利な機能ですね。
 

19.AGT

事例の数:472件
更新頻度:★☆☆☆☆
検索機能:★★★☆☆
見やすさ:★★★★★
表示速度:★★★★★

【おすすめポイント】

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

【概要・特徴】            
「AGT」は、国内外のスマホ・iPhone向けの質の高いサイトを集めたギャラリーサイトです。サムネイルをクリックすると、スクリーンショットでデザイン全体を確認できます。

Responsive Web Design JPとあわせて、モバイル用の参考にどうぞ。
 

以上、ホームページデザインの参考になるギャラリーサイト19選を紹介しました。それぞれの特徴を把握し、目的に応じて使い分けてください。
 

ホームページのデザインでおさえるべき7つのポイント

ホームページは、ただ綺麗な見た目にすればいいというものではありません。

「結局何を伝えたいサイトなのかわからない」
「どこに必要な情報があるのかわからない」

このような印象を与えてしまうと、ユーザーはすぐに離脱してしまうでしょう。

では、どういう点に気をつけるべきなのでしょうか。ホームページのデザインを設計する上で押さえるべきポイントを解説します。
 

1:ファーストビューでユーザーの心をつかむ

まずは、ファーストビューにこだわりましょう。ユーザーの興味関心をひく文言を見やすく配置し、読み進めたくなるようなレイアウトを意識します。

また、ユーザーが求めている情報が十分含まれているのかも重要です。

  • 何をしている会社かが一目でわかる
  • 他社と何が違うかが明確になっている
  • 客観的な実績や表彰が掲載されている
  • 商材の価値を訴求できている
  • ユーザーの興味や共感を引き出せている
  • 問い合わせや申込がすぐにできる

これらの要件をなるべく満たし、自社がユーザーへ訴求したいことを分かりやすく伝えられるファーストビューを目指しましょう。
 

2:ビジュアルヒエラルキーを明確にする

ビジュアルヒエラルキーとは、要するに「視覚情報の優先順位付け」のこと。デザインにおける各要素の位置や色、サイズを調整し、重要な情報ほど目立たせるようにするわけです。

例えば下のSpotifyの例を見てみましょう。黄色の背景の中で、「今すぐ登録する」の緑のCTAボタンが目立っていますね。当サイトでは、この情報がビジュアルヒエラルキーの一番上にあるわけです。

音楽発見サービス - Spotify

このように伝える情報を絞りさらに優先度も付けてデザインすると、ホームページ全体がスッキリしますし、ユーザーにとっても使いやすくもなります。自社のビジュアルヒエラルキーはどうすべきか、制作前によく考えてみましょう。
 

3:レイアウトやメッセージはシンプルに

ビジュアルヒエラルキーに関連した話になりますが、レイアウトやメッセージはシンプルにまとめましょう。情報を盛り込みすぎると、ユーザーはどこを見ればよいかわからず、離脱してしまいます。
 

4:ナビゲーションバーを付ける

次は、ホームページにナビゲーションバーを付け、ユーザーが目的地へたどり着きやすいようサポートすること。先ほどのSpotifyの例だと、最上部のこの部分ですね。

自分が普段Webサイトを閲覧する時を思い出すとわかるかと思うのですが、ナビゲーションがない場合どのように情報を探せばいいか迷ってしまうはずです。理想は、どこをクリックすべきか迷わせない設計です。 コンテンツを示すのに加え、各ページにパンくずリストを置くのも有効ですね。

また、ナビに表示する言葉は一発で理解してもらえるものにしましょう。
 

5:配色や画像、書体・文体などに一貫性をもたせる

ホームページ全体の配色や画像、書体・文体に一貫性を持たせるのも重要です。ただ、すべてのページを同じレイアウトにすべきというわけではありません。ランディングページ、ヘルプページ、ブログなど、別サイトとして運営しているか、サブドメインで区別している場合は、それぞれで統一されていれば問題ないでしょう。
 

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

スマートフォンやタブレットで見るとページが画面内に収まっていなかったり、画像がやたら大きかったりするのはよくあることです。ただ、その場合ユーザビリティを損ねてしまい、離脱される可能性が高くなります。モバイルフレンドリーかどうかは、SEOにおいても重要です。

レスポンシブデザインを導入するなど、どのデバイスでも問題なく表示できるようにしておきましょう。
 

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

ここまで紹介してきたポイントは、いずれもユーザーファーストな思考に基づくものです。ユーザーが見やすいか、使いやすいかを徹底して考えてみてください。

そのためには、ホームページの見た目や利便性に対するユーザーからのフィードバックを収集し、改善していかなければなりません。ユーザーに直接ヒアリングするのも良いですし、Googleアナリティクスやヒートマップを使うのも良いでしょう。
 

デザインは「誰にとって使いやすいのか」を意識する

今回紹介したギャラリーサイトだけでも相当な数のホームページをチェックできるはずです。優れていると感じたり気に入ったりした事例は、リンク切れで見れなくなる場合を考慮してスクリーンショットをを撮って保存しておくとよいでしょう。

集客にせよ採用にせよ、目的を達成できるホームページデザインには、ある程度の成功法則があります。全てに共通しているポイントは、「ターゲットユーザーにとって見やすく、使いやすいデザインになっているか」。自社のブランドイメージを反映させつつ、いかにターゲットユーザーが快適に利用できるデザインにできるか。ギャラリーサイトを参考に模索してみましょう。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

 5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

元記事発行日: 2020年6月04日、最終更新日: 2021年5月25日

トピック::

ホームページ