ホームページを作る時、どんなデザインがよいのか、なかなかイメージが掴めない方は多いでしょう。迷った時は、ギャラリーサイトなどで情報を集めながら、カラーやフォントなど、デザインの方向性を固めていくのがおすすめです。この記事では、思わず参考にしたくなる、おしゃれでかっこいいホームページやギャラリーサイトをまとめました。

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

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

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

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

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

参考にしたくなるギャラリーサイト10選

ここでは、それぞれの概要や特徴などに触れながら、おすすめのギャラリーサイトを紹介します。サイトによってデザインの傾向や使いやすさ、更新頻度などが異なるので、自分に合ったものを探してみてください。

SANKOU!

引用元:SANKOU!(https://sankoudesign.com/

「SANKOU!」は、国内を中心にさまざまなジャンルのウェブサイトを扱っています。SANKOU!の特徴は、業種や配色、デザインの方向性、レイアウトなど多様な角度からデザインを検索できること。「こういうサイトが作りたい!」というイメージが決まっている人は、好みのウェブサイトを探しやすいでしょう。

MUUUUU.ORG

引用元:MUUUUU.ORG(https://muuuuu.org/

「MUUUUU.ORG」は、高クオリティの縦型サイトに特化したギャラリーです。オーソドックスで使いやすく、デザイン性の高いウェブサイトを厳選しています。情報設計に優れたサイトも多いので、これからホームページを作る人は参考にしやすいでしょう。デザインの系統や業種、カラーなどで絞り込んで検索することもできます。

I/O 3000

引用元:I/O 3000(https://io3000.com/

「I/O 3000」は、国内外のおしゃれなホームページを扱うギャラリーサイトです。日本だけでなく、海外のサイトも見られるので、デザインの幅を広げたい時や、個性的なデザインを取り入れたい時などに役立ちます。検索タグには、サイトをランダムで表示するシャッフル機能があり、イメージするデザインの検索方法がわからない方でも、好みのデザインを見つけやすいでしょう。

URAGAWA

引用元:URAGAWA(https://uragawa.work/

「URAGAWA」は、「クリエイティブの裏側データベース」をコンセプトに運営されているギャラリーサイトです。それぞれのウェブサイトに制作会社の名前が記載されており、会社ごとの制作物を一覧で見ることができます。また、アワード受賞やランキングなど、ユニークな検索タグが特徴で、ほかのギャラリーサイトとは違った視点でウェブサイトを探せるでしょう。

CSS Design Awards

引用元:CSS Design Awards(https://www.cssdesignawards.com/

「CSS Design Awards」は、世界中の人々が優れたウェブサイトを投稿するギャラリーサイトです。見た目のおしゃれさだけでなく、UXやUIも考慮した上でデザインを評価しているため、消費者が使いやすいと感じるウェブサイトが豊富に揃っています。デザイン性と利便性を兼ね備えた、ワンランク上のデザインを目指したい人におすすめです。

Web Design Clip

引用元:Web Design Clip(https://www.webdesignclip.com/

「Web Design Clip」では、国内外の洗練されたウェブサイトを扱っています。Web Design Clipの特徴は、デザイン事例1つ1つのクオリティが高く、レスポンスデザインの掲載数が豊富なこと。PCだけでなく、スマホやタブレットなどに対応した、さまざまなレスポンスデザインを見ることができます。

81-web.com

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

「81-web.com」で扱っているのは、国内のデザイン性に優れたウェブサイトです。気になるデザインを見つけたら、ページを移動せずにひと目で業種やカラー、フォントなどを確認できるため、「多くのサイトを見て好みのイメージを探したい」という人に重宝します。使いやすく、クオリティの高いギャラリーサイトを探している人におすすめです。

straightline bookmark

引用元:straightline bookmark(http://bm.straightline.jp/

「straightline bookmark」は、国内外のウェブサイトを2万件以上掲載している、大型のギャラリーサイト。straightline bookmarkの特徴は、会員登録をすれば、デザインのお気に入り登録やブックマークができることです。それらの数を見ることで、人気のウェブサイトを客観的に判断することもできます。

bookma!

引用元:bookma!(https://bookma.torch.blue/

PC用とスマホ用のデザインを一覧で見たい人におすすめなのが、ギャラリーサイト「bookma!」です。レスポンシブデザインを1画面で並べて表示できるので、それぞれを比較したい時などに重宝するはず。検索機能は最小限で、キーワード検索のみなので、あらかじめ調べたいワードをピックアップしておくとよいでしょう。

AGT smartphone design gallery

引用元:AGT smartphone design gallery(http://agtsmartphonedesign.com/

「AGT smartphone design gallery」は、スマートフォンやiPhone向けのウェブサイトに特化したギャラリーです。国内のウェブサイトを中心に、質の高いレスポンシブデザインを数多く掲載しています。ウェブサイトにカーソルを合わせると、ページを移動せずにスクロールしたデザインを見られるため、多くの事例を流し見したい時などに便利です。

おしゃれな企業・ECサイト10選

ここでは、ぜひホームページの参考にしたい、おしゃれな企業・ECサイトをまとめました。配色やフォントなど、デザインに迷っている人はぜひ参考にしてください。

株式会社デンソー

引用元:株式会社デンソー(https://www.denso.com/jp/ja/

株式会社デンソーは、世界中に自動車技術やシステム、製品などを提供するグローバルな自動車部品メーカーです。日常にフォーカスした温かみのある画像を全面に使用し、企業イメージがひと目でわかるデザインに。配色は白を基調とし、アクセントとしてブランドカラーの赤を取り入れています。

福助株式会社

引用元:福助株式会社(https://f-fukuske.jp/fukuske/

足袋装束店として1882年に創業し、現在は靴下やストッキング、下着などを販売している福助株式会社の公式サイト。商品の美しさや質の高さを表現した、色とりどりの写真が魅力です。複数の写真が切り替わるアニメーションを使用し、さまざまなバリエーションで商品を見ることができます。

株式会社ユニクロ

引用元:株式会社ユニクロ(https://www.uniqlo.com/jp/ja/contents/lifewear-magazine/

世界中で高品質なカジュアルウェアを届ける、株式会社ユニクロ。日本では、ファストファッションを代表する企業として、幅広い年齢層の人々に親しまれています。ユニクロの公式サイトは、アニメーションを効果的に使用した賑やかな雰囲気が特徴。思わずクリックしたくなる、動くアイキャッチ画像がユニークです。

Sansan株式会社 DSOC

引用元:Sansan株式会社 DSOC(https://sansan-dsoc.com/about/

Sansan株式会社の子会社であるSansan株式会社 DSOCは、名刺のデータ化やデータの分析・活用などを行っています。公式サイトは、写真をほとんど使用していないUIと、モノクロで統一した配色が特徴的。フォントの太さや余白、配置などを工夫することで、視覚的に情報を見やすくまとめています。

MoMA Design Store

引用元:MoMA Design Store(https://www.momastore.jp/shop/default.aspx

独創的な展示と、世界最高峰の近・現代美術のコレクションで有名なニューヨーク近代美術館(MoMA)。MoMA Design Storeでは、MoMAのキュレーターが選定したデザイン性の高い雑貨を取り揃えています。公式サイトは、白を基調としたシンプルなデザイン。背景色を無彩色にすることで、商品の写真が引き立ちます。

ベクスト株式会社

引用元:ベクスト株式会社(https://www.vext.co.jp/

ベクスト株式会社では、文書情報を解析し、価値ある情報を効率的に抽出するツールを提供しています。ウェブサイトの特徴は、キャッチフレーズを印象付ける、ファーストビューのアニメーション。余白を大きく取り全面に表示することで、ひと目で企業のイメージが伝わってきます。

TAO TAJIMA

引用元:TAO TAJIMA(http://taotajima.jp/

こちらはディレクター・映像作家TAO TAJIMAの公式ホームページ。スクロールに合わせて文字ごと動くアニメーションが印象的です。スクロールで下にスライドするのではなく、画面が切り替わり、制作した作品が次々と表示されます。動画をふんだんに使用した独創的なウェブサイトです。

株式会社CRAZY

引用元:株式会社CRAZY(https://www.crazy.co.jp/

株式会社CRAZYは、「本質的に 美しく ユニークに」をモットーに、ウェディングプロデュースやイベントなどを行っています。ファーストビューにメッセージを表示し、企業理念をわかりやすく表現。画像も人物中心のものを多く使用し、人々の繋がりを大切にする企業の姿勢をよく表しています。

Ron Herman

引用元:Ron Herman(https://ronherman.jp/

Ron Hermanは、1976年にロサンゼルスで誕生したファッションブランドです。白を基調としたシンプルな背景に、上品なフォントが可愛らしいウェブサイト。余白を広く取り、大小さまざまなサイズの写真をちりばめた、ファッション雑誌のようなデザインが印象的です。

博報堂アイ・スタジオ

引用元:博報堂アイ・スタジオ(https://www.i-studio.co.jp/

博報堂アイ・スタジオは、デジタル領域に特化した制作会社です。公式サイトは、白と黒を基調とした、かっちりとした雰囲気。ファーストビューには、企業メッセージとして制作物を使用した動画が流れます。

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

おしゃれで使いやすいホームページには、どのような特徴があるのでしょうか。ここでは、ホームページデザインで気をつけるべきポイントを紹介します。

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

ファーストビューには、ユーザーにサイトの雰囲気を伝える役割があります。優れたホームページは、ファーストビューを見れば、何をしている会社なのかがひと目でわかるもの。まずは、ファーストビューでユーザーの興味関心を惹きつけ、そこから商材や企業情報など、ほかの情報が結びつくようなレイアウトを考えましょう。

基本の色はメインカラーとアクセントカラーの2色にまとまっているか

ホームページ多くのカラーを使用しすぎると、ごちゃごちゃとした印象になりがちです。背景に使用するベースカラーのほかは、サイトの印象を決定するメインカラー、特に目立たせたい部分のみ使用するアクセントカラーの2種類にとどめるとよいでしょう。文字の色もこれらを意識し、色が増えすぎないように注意してください。

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

レイアウトに情報を詰めこみすぎると、どこを見てよいのかがわからず、メッセージが伝わりにくいホームページになってしまいます。レイアウトはシンプルにまとめ、何を一番伝えたいのか優先順位を持って情報を絞り込むと、すっきりとしたデザインになります。フォントの大きさや余白などで、ビジュアルヒエラルキーを明確にするとなおよいでしょう。

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

ホームページを見るのは、PC画面だけではありません。スマートフォンやタブレットなどでサイトを訪れると「画像が大きすぎて見にくい」などのトラブルが発生する事例は案外多いものです。その時点でユーザーが読むのをやめてしまうケースもあるので、どの端末でも使いやすいように、レスポンシブデザインを導入しましょう。

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

色調や書体、文体、画像、フォントなどもサイトの第一印象に大きく影響を及ぼします。統一感のあるトーンで配色をまとめても、フォントの雰囲気が合っていないとちぐはぐな印象になってしまうことも。企業のイメージやターゲットとしたい層などを考慮した上で、トンマナやフォントに一貫性を持たせるとよいでしょう。

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

見た目のおしゃれさを優先するあまり、ユーザーにとって使いにくいデザインになっては意味がありません。ユーザーにとって見やすいか、使いやすいかを大前提に、企業イメージにあったホームページを作れれば理想的です。サイトを立ち上げた後も、ヒートマップなどの解析ツールを利用して、UIやUXの改善を図るのもおすすめです。

まとめ

ホームページのデザインで迷っている方は、まずギャラリーサイトなどで、配色やレイアウトといった構成情報を集めましょう。ファーストビューが印象的か、画像やフォント・配色・レイアウトに一貫性があるか、ユーザーにとって使いやすいホームページであるかなど考慮しながら、理想のデザインを探してみてください。

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

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

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

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

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