自社のホームページを作る際、さまざまなデザインに触れてイメージを固めていきたいと考える方も多いのではないでしょうか。ここでは、ホームページのデザインの参考になるギャラリーサイトをご紹介します。デザイン選択のポイントについても触れていますので、自社に合ったデザインを見つけるための判断材料として活用してください。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。

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

ここでは、おすすめのギャラリーサイトを7つ厳選してご紹介していきます。サイトごとにデザインの掲載数や機能(検索機能など)が異なりますので比較できるようにそれぞれのおすすめポイントも解説します。ご自身の目的や希望するデザインに合ったギャラリーサイトを見つけてみてください。

SANKOU!

引用元:SANKOU!ホームページ(https://sankoudesign.com/

SANKOU!は2,383個(2021年5月9日現在)のデザイン例を掲載しています。Webサイト、ランディングページ(※)、コンテンツページなど目的や種類、デザイン性、色などさまざまなカテゴリーからデザインを検索できます。サイト詳細を見ると「雑誌風なレイアウト・あしらい」「要素が動く」など細かいタグ付けがされているため、直感的にタグを選ぶこともできます。また、お気に入り機能もあるので気に入ったデザインを保存して後で比較することもできます。

※ランディングページとは、サイトを訪れた人が検索結果や広告から目的のサイトをクリックした結果、最初に表示されるページのことです。1ページ完結でストーリー仕立てとなっているものが多いです。

straightline bookmark

引用元:straightline bookmarkホームページ(http://bm.straightline.jp/all

straightline bookmarkは26,067個(2021年5月9日現在)の豊富なデザインをそろえており、おしゃれでかっこよいものばかりです。タグリストには色(colors)やジャンル(genres)、言語、パターン(型)などの分類がされているためイメージに近いものを検索することができます。サムネイルは大きさを変更することができるので、一度に探したい場合は縮小して、じっくり見たい場合は拡大して検索するなどしてスムーズに進めることができるでしょう。

ユーザー情報を登録すれば「my favorites」というお気に入り機能を使って好きなデザインを保存することができます。また、お気に入り数がサムネイルの下に表示されるため、何人がお気に入り登録をしたのかがわかります。

MUUUUU.ORG

引用元:MUUUUU.ORGホームページ(https://muuuuu.org/

MUUUUU.ORGは4,093個(2021年5月9日現在)のデザインを掲載しています。SANKOU!と同様に、業界やデザイン、型や色ごとにデザインの種類を選択して検索することができます。

サイトのファーストビューにあたる「LINEUP」はクオリティが高い順に縦に長いサイトを厳選して紹介するページです。デザイン性が高く、非常に見やすいデザインの中に重要な内容が盛り込まれたサイトばかりです。

I/O 3000

引用元:I/O 3000ホームページ(https://io3000.com/

I/O 3000は国内外からホームページ制作の参考になるサイトをピックアップしており、4,000個以上のデザインが掲載されています。大きいサムネイルで見やすく、豊富な種類のタグからデザインを選択して検索することが可能です。

また、サムネイル右下の「+」ボタンを押すとサイトに付けられたカテゴリーやタグの種類が表示されるため、選んだサイトと同じようなものを検索するのに便利です。日々新しいサイトが追加されており、常に新しいデザインが確認できるのも特徴のひとつです。また、日本ではあまり見かけない海外の珍しいデザインなどもあるため、変わったデザインを考えている方にもおすすめです。

CSS Design Awards

引用元:CSS Design Awardsホームページ(https://www.cssdesignawards.com/

CSS DESIGN AWARDSという国際的なWebデザインの表彰制度にノミネートや受賞されたサイトのデザインが約8,000個掲載されています。ノミネートの段階でかなりデザイン性が高く、受賞作になると思わず上から下まで見入ってしまうようなサイトが多くあります。すべて英語表記ですが、色や業界などのカテゴリーのタグで検索できます。

Web Design Clip

引用元:Web Design Clipホームページ(https://www.webdesignclip.com/

Web Design Clipが掲載するサイト数は日本のものだけで3,032個(2021年5月9日現在)、海外は500個以上のデザインを取り扱っています。ランディングページやスマートフォン用など細かく分類されており、作成したい種類ごとに検索することができます。また、日本語表記であるため操作も簡単です。業種のカテゴリー検索はもちろん、タグも「いいね!」「やわらかい」など細かく分類されており、直感で検索することができる仕組みが備わっています。

81-web.com

引用元:81-web.com(https://81-web.com/

81-web.comは日本国内の優れたサイトのみを集めたギャラリーサイトで掲載数は約3,500個となっており、日々追加されています。サムネイルの段階で「パソコン(pc)」「スマートフォン(sp)」それぞれの画面イメージを確認することができます。無限スクロールになっているのですが、重くならずスムーズにスクロールすることができるのでストレスを感じずに検索することができます。

また、タグも複数選択して検索することができるためイメージに近いサイトを絞り込んで選ぶことができるのも便利なポイントです。さらに、サムネイル右下の「+」を押すだけでお気に入り(Fav)に登録されるため、後で比較しやすくなっています。

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

ホームページデザインのイメージができたらいよいよ作成に取り掛かることになりますが、その際に欠かせない7つのポイントがあります。ここではそれぞれを簡単に解説していきます。

ファーストビューでユーザーの興味関心を惹きつけられるか

ファーストビューとはWebページにアクセスした最初の段階で表示される(スクロールしない段階の)部分を指します。この段階でユーザーに対して「何をしている会社なのか」「他社との違い」「実績や表彰」「商品の価値」といった情報をできるだけ伝えて、ユーザーの興味や関心を引くことができるレイアウトにする必要があります。

ビジュアルヒエラルキー(視覚情報)の優先順位を明確にできているか

ビジュアルヒエラルキーは「視覚的階層」ともいわれ、デザインにおいては目で見た情報に優先順位をつけることで、重要な情報の文字のサイズや色を変更する、アンダーバーを付ける、マーカーを引くなどして目立たせることによって実現されます。例えば一目で見てタイトルと認識できる文字サイズにする、「登録する」などのボタンの色を背景の補色にして目立たせるなどの方法があります。

レイアウトや情報がシンプルでわかりやすいか

ビジュアルヒエラルキーとも関係性がある部分であり、あらゆる情報を詰め込んでしまうと「何が重要なのか」を伝えることができなくなり、サイトから離れてしまいます。そのため、情報量を調整してシンプルでわかりやすい内容にすることが大切です。

ナビゲーションバーがあるか

ナビゲーションバーとはサイト内の目的地へ移動する際に使われるサポートメニューのことです。例えば、サイト内から会社の詳細を見たい場合には「会社概要」や「ABOUT」などのボタンを押すと会社概要のページに移動します。もちろんナビゲーションバーが無くてもサイトは成り立ちますが、ユーザーが目的地に辿り着きやすくなるという点においては必要性が高いものといえます。

レスポンシブ対応されているか

レスポンシブ対応とは、パソコンやスマートフォンなどの端末に応じて表示することができるようにすることです。スマートフォンでサイトを開いた場合に文字が小さすぎて拡大しないと読めないものがありますが、それはパソコンのサイト画面がそのまま縮小して表示されたためです。

拡大してスクロールすれば読めますが、読みにくく面倒であるためユーザーは離れてしまいます。レスポンシブ対応して、端末を問わず同じように見ることができるようにしておいた方がよいでしょう。

トンマナ、フォントに一貫性があるか

トンマナは「トーン&マナー」の略で、デザインに一貫性を持たせることで、パソコンにおけるフォントは「文字の種類」のことです。ホームページ画面の色やデザイン、文字の種類がバラバラだと統一性が無いため読みにくくなります。また、技術の進歩によってデバイス内のフォントでなければ読めないというわけではなくなりましたが、読みにくいフォントは避けた方がユーザーがより見やすくなるでしょう。

ユーザーファーストが徹底されているか

ファーストビューからフォントに至るまで、すべてはユーザーを第一に考えた「ユーザーファースト」に基づいています。ユーザーが見やすく、使いやすいサイトでなければユーザーは離れてしまいますので、最終的には会社のためになりません。

デザインや内容にこだわるだけでなく、ユーザーのフィードバックを収集したり第三者から意見を聞いてみたり、直接ユーザーからヒアリングを行ったりして常に改善するようにしてユーザーファーストを徹底していくことが重要です。

まとめ

ホームページデザインの参考となるギャラリーサイトと、デザイン作成時のポイントをご紹介しました。ギャラリーサイトにはそれぞれ特色があり、検索機能もさまざまです。ご自身の作成するホームページの目的やイメージするものに合ったものを見つけてみてください。

また、ホームページを作成する際には見やすさや使いやすさを意識し、ユーザーファーストを徹底できる内容となるよう計画していくことが重要です。これらのポイントについてもぜひおさえておいてください。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。