こんにちは、編集長のカワウソです！
イメージがない状態からホームぺージを作るのは難しいですよね。
とくに初心者の方であれば、「どんなページが必要か分からない」「どんなデザインがよいか分からない」と困ることも多いはず。
そこで今回は、他社のホームぺージがまとめて閲覧できる「ギャラリーサイト」10個と、参考になる企業サイトを10個紹介します。
カワウソ
この記事は次のような人におすすめ！
- 初めてホームページを作る人
- ホームぺージの構成やデザインで迷っている人
- 参考になるホームページを探している人
この記事を読めば、これから作るホームぺージについて具体的なイメージを持てるため、プロジェクトが円滑に進められるようになります。
最初に「他社のホームぺージを参考にするメリット」を解説しますが、「すぐにギャラリーサイトを見たい」という方は以下のリンクをクリックしてください。
それではどうぞ！
目次
他社のホームぺージを参考にするメリット
他社のホームぺージを参考にするメリットは以下の通りです。
- どんなページが必要かわかる
- デザインの方向性が定まる
- イメージを明確に伝えられる
どんなページが必要かわかる
必要なページが分からなければ、ホームぺージ作成が前に進みません。
そもそもホームぺージは会社の目的を達成するために作ります。
まず、目的を達成するためにどんなページが必要か、他社のホームぺージを参考に考えてみましょう。
「ホームぺージの目的が定まっていない」という方は、以下の記事を参考にしてください。
もう悩まない！初めて作る企業ホームページの目的と役割
以下の記事では、ホームぺージの種類別に目的を解説しています。
ホームページとは？Webサイトとの違いや種類を徹底解説
デザインの方向性が定まる
「ホームぺージのデザイン」と一口にいっても、さまざまな要素から構成されています。
どんな「レイアウト」にすれば見やすくなるのか、どんな「カラー」にすれば自社のイメージと合うのか、など考えることは多いです。
また、ひとつひとつの要素をゼロから組み立てたとしても、全体のバランスが悪ければ目的を達成するホームぺージは作れません。
他社のホームページは「すでに完成した状態」であるため、それなりにバランスが整っています。
まずはイメージと近いホームぺージをいくつか探し出し、どんな要素があるのか抽出してみましょう。
※「ホームぺージのレイアウトって何？」という方は以下の記事をご参考ください。
ホームページレイアウトの基本！目的別の選び方をわかりやすく解説
イメージを明確に伝えられる
中にはホームぺージ作成をフリーランスやWeb制作会社に依頼しようと考えている方もいるのではないでしょうか。
「プロに頼めば理想のホームぺージが作れる！」そう考えたいところですが、現実は少し違います。
お互いの意思疎通がうまくとれず、失敗するケースは珍しくありません。
言葉でホームぺージの理想像を相手に伝えたとしても、お互いが同じイメージを共有できていなければ、失敗してしまいます。
あくまでもホームぺージは閲覧するもの。であれば、言葉ではなくビジュアルとして参考のホームぺージを提示したほうが、同じイメージを共有しやすいです。
ホームぺージデザインの参考になるギャラリーサイト10選
それではおすすめのギャラリーサイトを紹介していきます。
ギャラリーサイトの特性ごとに紹介しています。
| ギャラリー サイト名 |
特徴 | 対象 サイト |
キーワード 検索 |
カラー 検索 |
レイアウト 検索 |
| 現代デザイン | 業種カテゴリ が豊富 |
国内 | 〇 | – | – |
| MUUUUU.ORG | 業種カテゴリ が豊富 |
国内／海外 | – | 〇 | – |
| 81-web.com | 業種カテゴリ が豊富 |
国内 | – | 〇 | – |
| I/O 3000 | スライドショー が使える |
国内／海外 | 〇 | 〇 | – |
| S5-Style | AND・OR 検索が可能 |
国内 | – | 〇 | – |
| Parts. | パーツから探せる | 国内 | – | – | – |
| SANKOU! | PC／SP 切替表示 |
国内 | – | 〇 | 〇 |
| bookma! | PC／SP 同時or切替表示 |
国内 | 〇 | – | – |
| Responsive Web Design JP | PC／SP／TB 同時表示 |
国内 | 〇 | 〇 | – |
| Web Design Clip | WordPress サイトが探せる |
国内／海外 | 〇 | 〇 | 〇 |
※ギャラリーサイト名をクリックすると、個別にジャンプ可能です。
業種カテゴリが豊富なギャラリーサイト
参考になるホームぺージを探すなら、まず「業種」から検索してみてください。
業種が変わるだけで、ホームぺージのデザインはガラッと変わります。
たとえば、「建築」と「美容」ではイメージが大きく異なりますよね。
自社と同じ、もしくは近い業種であれば、参考になるホームページが早く見つけられます。
現代デザイン
出典：現代デザイン
| 対象 | 国内 |
| 業種カテゴリ数 | 36種類 |
| キーワードから探す | 〇 |
| カラーから探す | – |
| レイアウトから探す | – |
現代デザインは、トップぺージと下層ページの両方を一度に確認できるギャラリーサイトです。
多くのギャラリーサイトは、トップぺージのファーストビュー（アクセスして最初に表示される領域）のキャプチャーのみ掲載しています。
ホームぺージ全体の雰囲気を確認するためには、それぞれアクセスしなければならないため時間がかかります。
しかし、現代デザインはトップぺージと下層ページの両方を掲載しているため、ギャラリーサイト上でホームぺージ全体の雰囲気を掴めます。
その他、「ブックマーク」機能が使えます。お気に入りのホームぺージを見失う心配がないため便利です。
MUUUUU.ORG
出典：MUUUUU.ORG
| 対象 | 国内／海外 |
| 業種カテゴリ数 | 29種類 |
| キーワードから探す | – |
| カラーから探す | ◯ |
| レイアウトから探す | – |
MUUUUU.ORGは、縦長デザインのホームぺージを厳選して紹介しているギャラリーサイトです。
近年、スマホでインターネットを利用するユーザーが増えました。その結果、スマホで閲覧しやすいホームぺージが求められるようになり、縦長デザインが普及しました。
キーワード検索こそできないものの、業種、デザイン、カラー、ホームぺージの種類などさまざまなカテゴリから探せます。
海外サイトもヒットするため、デザイン性の高いホームぺージを作りたい方におすすめです。
81-web.com
出典：81-web.com
| 対象 | 国内 |
| 業種カテゴリ数 | 25種類 |
| キーワードから探す | – |
| カラーから探す | ◯ |
| レイアウトから探す | – |
81-web.comは、業種はもちろん、フォントから探せるギャラリーサイトです。
今回紹介するギャラリーサイトのうち、フォントから探せるのは81-web.comのみです。
「フォントの違いによる印象の変化」を確認できるため、ホームページの細かい部分を追い込む際に重宝します。
海外サイトは掲載されていません。逆に国内サイトに絞り込んで確認したい方にとっては見やすいでしょう。
便利な機能があるギャラリーサイト
便利な機能があり、参考になるホームページを探しやすいギャラリーサイトを紹介します。
I/O3000
出典：I/O 3000
| 対象 | 国内／海外 |
| 機能 | スライドショー |
| キーワードから探す | ◯ |
| カラーから探す | ◯ |
| レイアウトから探す | – |
I/O 3000は、各ホームぺージを「スライドショー」で見れるギャラリーサイトです。
画面右下のボタンをクリックすると、スライドショーが起動します。
マウスで操作しなくても、次々に参考サイトが自動で表示されます。パッと見て直観的に良いものを選びたい方におすすめです。
また、一つ一つ大きく表示されるため、会議など複数名で閲覧する際にも便利です。
その他、キーワード検索できるのも嬉しいポイントです。
S5-Style
出典：S5-Style
| 対象 | 国内 |
| 機能 | AND・OR検索 |
| キーワードから探す | – |
| カラーから探す | ◯ |
| レイアウトから探す | – |
S5-Styleは、絞り込み条件で「AND・OR検索」ができるギャラリーサイトです。
たとえば、カテゴリの「Creative」をイラスト、「Color」をイエローでAND検索すると、黄色のイラストが用いられたホームぺージのみヒットします。
ホームぺージをいくつか見て、だんだんと欲しい要素が絞り込めてきた方におすすめです。よりイメージに近いホームぺージを探し出せます。
今回紹介するギャラリーサイトの中では、一番掲載数が多いです。
Pats.
出典：Pats.
| 対象 | 国内 |
| 機能 | パーツから探せる |
| キーワードから探す | – |
| カラーから探す | – |
| レイアウトから探す | – |
Pats.はSaaS（サース）のサービスサイトをパーツ単位で参考にできるギャラリーサイトです。
「ヘッダー」「メインビジュアル」といった基本パーツはもちろん、「悩み・課題解決」「導入事例」など、サービスサイト特有のパーツから、参考のホームぺージを探せます。
また、「サービスの申し込み数を増やす」ための導線を参考にできます。
たとえば、「お問い合わせ」のパーツから探すと、各社の「問い合わせフォーム」が確認できます。
ユーザーがストレスを感じて問い合わせフォームから離脱しないように、必須項目を分かりやすく表示したり、入力例を表示したりなど、各社それぞれの工夫を参考にできます。
サービスサイトやBtoBサイトを作る方は、ぜひ参考にしてください。
BtoBサイトを成功させる法則！コツは「型」を知ること
スマホサイトを閲覧できるギャラリーサイト
スマホサイト（ホームぺージをスマホで閲覧した状態）で確認できるギャラリーサイトを紹介します。
SANKOU!
出典：SANKOU!
| 対象 | 国内 |
| 表示 | パソコンサイト／スマホサイト（切替表示） |
| キーワードから探す | – |
| カラーから探す | 〇 |
| レイアウトから探す | 〇 |
SANKOU!は、パソコンサイト（画面）とスマホサイト（画面）の切替ができるギャラリーサイトです。
デフォルトはパソコンサイトですが、画面右にある「スマホアイコン」を押せば、スマホサイトに切り替わります。
本来スマホサイトを確認するには、スマホでアクセスするか、パソコンでアクセスしたのち、ブラウザの開発者用ツールを用いなければなりません。
しかし、SANKOU!なら手間をかけずに、ギャラリーサイト上でスマホサイトが確認できます。
その他、1カラム、2カラム、グリッドレイアウトなど「レイアウト」から探せるのも特徴の一つです。
bookma!
出典：bookma!
| 対象 | 国内 |
| 表示 | パソコンサイト／スマホサイト（同時or切替表示） |
| キーワードから探す | 〇 |
| カラーから探す | – |
| レイアウトから探す | – |
bookma!は、パソコンサイトとスマホサイトが横並びで見れるギャラリーサイトです。
レスポンシブサイトを作る前に、パソコンとスマホでどのように表示が切り替わるのか実例を見たい方におすすめです。
ユーザーのデバイスに応じ、ホームページの表示サイズを自動で変えるデザイン。作るホームぺージは一つでも、パソコン・スマホ・タブレットなど、ありとあらゆるデバイスに最適化したぺージを表示できます。
画面上部の「スマホアイコン」をクリックすれば、スマホサイトだけを一覧にすることもできます。
1サイトごとに大きく表示されるため、見やすいです。
Responsive Web Design JP
| 対象 | 国内 |
| 表示 | パソコン／スマホ／タブレット（同時表示） |
| キーワードから探す | ◯ |
| カラーから探す | ◯ |
| レイアウトから探す | – |
Responsive Web Design JPは、スマホ、タブレット、パソコンが横並びで一覧表示されるギャラリーサイトです。
bookma!同様にレスポンシブサイトを作る方におすすめです。
デバイス（画面の横幅）が変化した場合に、どのようにメニューやコンテンツの配置が変化するのかを確認しやすいです。
WordPressサイトを探せるギャラリーサイト
ホームぺージ作成の手段として「WordPress（ワードプレス）」を使う予定の方も多いと思います。
その中でも、「WordPressでどんなホームぺージが作れるのか、いまいちイメージが湧かない」という方に、おすすめのギャラリーサイトがあります。
なぜ？WordPressが会社のホームページ制作に適している理由
Web Design Clip
| 対象 | 国内／海外 |
| 特徴 | カテゴリタグに「WordPress」がある |
| キーワードから探す | ◯ |
| カラーから探す | ◯ |
| レイアウトから探す | ◯ |
Web Design Clipは、さまざまな検索軸から探せるギャラリーサイトです。
国内サイトやスマホサイトに絞ったり、業種やカラーから探せたりと便利です。
WordPressで制作されたサイトを絞り込むためには、画面右上のハンバーガーメニュー（三本線マーク）の中にある「Tag（タグ）」を使いましょう。
カワウソ
ホームぺージ作りで参考になる企業サイト10選
ここからは、ホームページ作りで参考になる企業サイトを業種別に紹介していきます。
今回ご紹介する業種カテゴリは以下の10種類です。
企画・制作・開発
「企画・制作・開発」の業種は「BtoBサイト」と呼ばれるように、ターゲットが一般消費者ではなく、企業になることが多いです。
BtoBサイトの目的は商談機会の創出。ユーザーからの「問い合わせ」や「資料請求」を獲得する狙いがあります。
株式会社ビジネス アソシエイツのホームぺージは、ヘッダーに「資料請求」を配置していたり、画面右側に「CONTACT」を固定表示していたりします。
ユーザーがいつでもアクションが取れるようにするための工夫です。
また、顧客情報を獲得する目的で、ユーザーにホワイトペーパー（お役たち資料）を無償提供しています。ここで得た顧客情報はのちに、電話やメールで営業をかける際に利用できます。
ホームページからの問い合わせを増やしたい方は、ぜひ参考にしてください。
飲料・食品・グルメ
出典：ねこねこ食パン
「飲料・食品・グルメ」の業種の場合、ユーザーに「美味しそう」「食べてみたい」と思わせる必要があります。
解像度が高い写真を用いれば、商品の全体像だけでなく、素材の質感まで伝えられます。
また、商品の見た目や素材などのこだわりを思う存分アピールしましょう。
ねこねこ食パンの場合、トップぺージのメインビジュアルで、本物の猫を用いてインパクトを出しつつ、「国産小麦」「ミルク100％」といった素材のこだわりも明確に提示しています。
デザイン・アート
「デザイン・アート」の業種から紹介するのは、株式会社APOLLO一級建築士事務所のスタイリッシュかつ説得力のあるホームページです。
ユーザーがマイホームのデザインを建築事務所に依頼する際、数社相見積もりを取るのが一般的です。
その際、ホームぺージのクオリティが低いと候補から外される可能性が高くなります。
デザインそのものをサービスにしている会社は、ホームぺージを見た顧客が期待できるようにしましょう。
その他、高額な商品を購入するユーザーは何より失敗を恐れます。
すでに手がけた建築物があるなら、実績として紹介して、ユーザーに安心感を与えましょう。
ファッション
出典：コンバース
「ファッション」の業種からご紹介するのは、コンバースのホームぺージです。
ファッションは総合的な要素から形成されるものですが、間違えると何がテーマなのか分かりづらくなってしまいます。
コンバースのホームぺージは、ファッション性を感じさせながらも、自社が何のブランドか明確に提示しています。
その他、ヘッダーのメガメニュー「PRODUCTS」には、ブランドごとにロゴが掲載されています。
アイテム数（品番数）が多くても、ユーザーが目当ての商品をすぐに探せるように工夫されています。
くらし・住まい・環境
出典：相羽建設株式会社
「くらし・住まい・環境」のカテゴリからは、相羽建設株式会社のホームぺージをご紹介します。
相羽建設株式会社のホームぺージは単に住宅を紹介するだけでなく、「豊かな暮らし」がイメージできるように、人物写真を効果的に用いています。
ユーザーは「豊かな暮らし」を得るために住宅を購入します。住宅購入は目的を達成するための手段です。
ホームぺージを見たユーザーが「明るい未来」を想像できるようにしましょう。
雑貨・家具・文具
出典：D&DEPARTMENT
「雑貨・家具・文具」のカテゴリからは、D&DEPARTMENTのホームぺージを紹介します。
商品が多くてもユーザーがすぐに探せるように、「商品カテゴリ」「ブランドから探す」「都道府県から探す」「季節のおすすめ」などさまざまな導線が設計されています。
また「読む（TEXT）」には、ユーザーにとって価値の高いさまざまなコンテンツが用意されています。
たとえば、「使ってみました」では、スタッフによる商品レビューが記載されています。
スペックだけでは分からない商品の善し悪しを伝えられれば、ユーザーが商品を購入するための判断材料になります。
健康・医療・製薬
出典：かわぞえ医院
「健康・医療・製薬」のカテゴリからは、かわぞえ医院のホームぺージをご紹介します。
健康・医療・製薬のカテゴリにおいては、ユーザーが不安や心配を抱えているケースが多いです。そのため、ユーザーが安心感を覚えるホームぺージを作るようにしましょう。
かわぞえ医院のホームぺージは、院長はもちろん、その他スタッフの笑顔が印象的で、患者に寄り添う優しいイメージが伝わってきます。
また、来院患者のために「診察時間」や「アクセス」をトップぺージに配置しているのも親切です。
このようにトップぺージにユーザーが知りたい情報を掲載すれば、ユーザーが探さずに済みます。
旅行・観光・宿泊
出典：とまとと
「旅行・観光・宿泊」のカテゴリからは、「とまとと」のホームぺージをご紹介します。
「旅行・観光・宿泊」関連のホームぺージでは、「場所」としての魅力はもちろん、ユーザーがどんな「体験」をできるか提示することが重要です。
そのため、実際にお客さんが楽しんでいる様子を掲載しているケースが多いです。
その他、「ギャラリー」から魅力的な写真を閲覧できます。じつはこれ、Instagramと連携しています。
Instagramを更新すれば、自動的にホームぺージも更新されるため、手間が減ります。
Instagramで旅行先を探すユーザーもいるため、効果的に活用しましょう。
PC・家電・電子機器
出典：foop
「PC・家電・電子機器」のカテゴリからは、foopのホームぺージをご紹介します。
自宅で水耕栽培できるのがfoopの特徴ですが、「子供と成長を楽しめる」「コミュニケーションのきっかけになる」など、「食べる以外」の部分についても訴求しています。
「PC・家電・電子機器」関連のホームぺージでは、単に商品のスペックや最先端技術を掲載するだけでなく、顧客が得られる価値を掲載するようにしましょう。
また、家電を部屋に置いた写真を掲載するなど、ユーザーが購入後の生活をよりイメージしやすいように工夫しましょう。
部屋の雰囲気と合うか、どれくらいのサイズ感かなど、ユーザーが直観的に判断できるようになります。
美容・コスメ
出典：Beauteen
「美容・コスメ」のカテゴリからは、Beauteenのホームぺージをご紹介します。
Beauteenが取り扱うのはヘアカラー商品。上半身カットの写真だけを用いたり、髪に動きをつけたりして、ユーザーの目線が自然と「髪」にいくように工夫しています。
「美容・コスメ」は「ファッション」と同じく、総合的な要素から形成されるものです。そのため、主体が何なのか明確に提示することが大切です。
その他、ホームぺージで使用する文言が薬機法違反にならないか、入念にチェックするようにしましょう。
まとめ
今回は、ホームぺージデザインの参考になるギャラリーサイト10選と企業サイト10選を紹介しました。
- 他社のホームぺージを参考にするメリットは主に3つある
- 「ギャラリーサイト」を使えば、他社のホームぺージが一覧で見られる
- ホームぺージは自社と同じ、もしくは近い「業種」だと参考にしやすい
ホームぺージのデザインは開設したあとに大きな変更を加えることが難しいです。
後悔しないためには、参考になるホームぺージをいくつか収集したのちに、使い勝手について社内で議論することをおすすめします。
それでは素敵なホームぺージの完成を祈っております。
以上、最後まで読んでいただきありがとうございました！
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、15万社の導入実績があります。
7月21日18時まで初期費用0円&月額料金20%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【超初心者向け】会社ホームページの作り方
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
