せっかくホームページを作るなら、デザインにこだわっておしゃれなホームページを作成したいですよね。

しかし、実際にホームページデザインを考えるとなると

・どうすればユーザーの目に止まるデザインになるかわからない
・おしゃれなデザインにするには何に工夫したらいいのかわからない
・デザインの参考になるホームページが見たい


といった悩みや要望が浮かんでくるでしょう。

そこで、本記事では、ホームページデザインを考えるときに便利な、優れたホームページをまとめたギャラリーサイトやおしゃれなデザインの企業ホームページを紹介しています。また、デザイン設計時に注意すべきポイントについても解説しています。

是非参考にしてください。

おしゃれなホームページデザインはsiteflowにお任せ!

初期費用0円、月額9,000円~ホームページ作成可能なので
手軽に始めやすく続けやすいサービスです。

・豊富な制作実績からおしゃれなデザインを提案
・飲食業界や美容業界など幅広い業種に対応可能
・プロが高品質なホームページを作成

まずは無料相談からお試しください。

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

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

1. 株式会社デンソー

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

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

2. 福助株式会社

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

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

3. 株式会社ユニクロ

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

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

4. Sansan株式会社 DSOC

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

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

5. MoMA Design Store

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

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

6. ベクスト株式会社

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

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

7. TAO TAJIMA

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

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

8. 株式会社CRAZY

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

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

9. Ron Herman

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

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

10. 博報堂アイ・スタジオ

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

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

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

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

1. SANKOU!

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

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

2. MUUUUU.ORG

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

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

3. I/O 3000

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

「I/O 3000」は、国内外のおしゃれなホームページを扱うギャラリーサイトです。日本だけでなく、海外のサイトも見られるので、デザインの幅を広げたい時や、個性的なデザインを取り入れたい時などに役立ちます。

検索タグには、サイトをランダムで表示するシャッフル機能があり、イメージするデザインの検索方法がわからない方でも、好みのデザインを見つけやすいでしょう。

4. URAGAWA

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

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

5. CSS Design Awards

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

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

6. Web Design Clip

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

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

7. 81-web.com

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

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

8. straightline bookmark

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

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

9. bookma!

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

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

10. AGT smartphone design gallery

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

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

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

おしゃれで使いやすいホームページには、どのような特徴があるのでしょうか。ここでは、実際に弊社ホームページ作成サービスsiteflowで作成した、コミュニティ運営の事業を運営している株式会社Q’sのホームページを用いて、ホームページデザインで気をつけるべきポイントを紹介します。

引用元:株式会社Q’sホームページ(https://q-s.biz/

1. ファーストビューのインパクト

ファーストビューには、ユーザーにサイトの雰囲気を伝える役割があります。そのため、ファースビューでどれだけユーザーの興味関心を惹きつけられるかが重要なのです。

優れたホームページは、そのほとんどがファーストビューを見れば、何をしている会社なのかがひと目でわかる設計になっています。

まずは、ファーストビューでユーザーの興味関心を惹きつけ、そこから商材や企業情報など、ほかの情報が結びつくようなレイアウトを考えましょう。

当サイトは、ファーストビューに人が写っている写真を豊富に使用していたり、「みんなにあたたかい食卓がある地域社会をつくる」というキャッチフレーズが大きく表示されていたりと、ひと目でメインメッセージが伝わるように設計されています。

2. メインカラーとアクセントカラーの2色にまとめる

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

文字の色もこれらを意識し、色が増えすぎないように注意してください。

実際に当サイトでも、アクセントカラーである黄色がベースカラーの白色に良く映えています。画像も多用されていますが、基本の色がシンプルにまとまっているため、全体的に統一感のある印象です。

引用元:株式会社Q’sホームページ(https://q-s.biz/collaboration

3. レイアウトや情報はシンプルにわかりやすくする

1ページに情報を詰めこみすぎると、どこを見てよいのかがわからず、メッセージが伝わりにくいホームページになってしまいます。そのため、レイアウトはシンプルにまとめ、何を一番伝えたいのか優先順位を持って情報を絞り込むと、すっきりとしたデザインになります。

フォントの大きさや色、余白などを上手に使ってビジュアルヒエラルキーを明確にするとなおよいでしょう。

当サイトでは、コミュニティ運営の事業を行っていることを伝えるため、人が写った写真が豊富に使われています。このように、文字やコンテンツを必要以上に増やさずとも重要なメッセージをユーザーに届けることができるのです。ぜひ真似してみてはいかがでしょうか。

また、レイアウトについても各コンテンツが画像と説明文のブロックとしてで統一されているため、とてもみやすい配置、構成になっているのです。そして、各ブロックに「詳しくはこちら」と書かれたボタンが設置されていることからも、情報をシンプルにまとめる工夫がみられます。

引用元:株式会社Q’sホームページ(https://q-s.biz/community

4. レスポンシブデザインに対応する

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

また、レスポンシブ対応はGoogleが推奨しているので、適応することで自然と検索エンジンからの評価が上がることも期待できます。

すでにホームページを持っているという方は、自分でコーディングを行うか、ウェブデザイナーやホームページ制作会社に依頼することで、レスポンシブ対応にすることができます。

これからホームページを作成する方は、制作会社にレスポンシブ対応を希望する旨を伝えましょう。現在はほとんどの制作会社はレスポンシブ対応のノウハウを持っているので、対応してもらえるはずです。ただし、会社によっては追加料金が発生するので注意してください。

レスポンシブ対応について詳しく知りたい方は、以下の記事をご覧ください。レスポンシブ対応の解説や、レスポンシブ対応にしないことのリスクなどを掲載しています。

弊社ホームページ作成サービスsiteflowが作成するホームページは、レスポンシブデザインにも対応しています。

5. トンマナ・フォントの一貫性を意識する

色調や書体、文体、画像、フォントなどもサイトの第一印象に大きく影響を及ぼします。統一感のあるトーンで配色をまとめても、フォントの雰囲気が合っていないとちぐはぐな印象になってしまうことも。

企業のイメージやターゲットとしたい層などを考慮した上で、トンマナやフォントに一貫性を持たせるとよいでしょう。

当サイトでは、シンプルなフォントで画像の色味にも一定の統一感があるのでとても綺麗にまとまっています。また、暖色の黄色をアクセントカラーとしている点も、「みんなにあたたかい食卓がある地域社会をつくる」というコンセプトに合っています。

引用元:株式会社Q’sホームページ(https://q-s.biz/kitchen

6. ユーザーファーストを徹底する

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

当サイトでは、ページの上部にメニューバーが設置されているため、サイトを訪れたユーザーが目的の情報に辿り着きやすいよう工夫がされています。

引用元:株式会社Q’sホームページ(https://q-s.biz/

UI・UXついて

この章でもすでに登場した単語ですが、ユーザーファーストを意識してホームページを設計しようとした場合、UIとUXが鍵になります。それでは、UIとUXが何を意味するのかみていきましょう。

まず、UIとは「ユーザーインターフェース」の略で、ホームページの操作性やデザイン性のことを指します。具体的にはホームページそのもののデザインやフォント、色などがそれにあたります。

ユーザーにとって必要な情報がどこに書かれているのかが分かりやすいデザインにすることや、重要な情報やユーザーにとって有益な情報が他の内容と比較して目立ちやすいようにフォントや配色を工夫することがUIの充実度を高めるでしょう。

次に、UXについてです。UXとは「ユーザーエクスペリエンス」の略で、製品やサービスを通じて得られる体験のことであり、ホームページにおけるUXは「簡単に問い合わせができた」「すぐに知りたい情報が手に入った」というようなことです。

ただし、UXは主にUIの充実によって間接的に感じてもらえる満足度なので、ホームページのデザインを考える時にはUIの充実にフォーカスしてみるのがいいかもしれません。

おしゃれなホームページに強いホームページ制作会社5選

ここまでホームページデザインのギャラリーサイトや、デザインを見る上で参考にするべきポイントについて説明しましたが、予算に余裕があればホームページの制作会社に依頼することもおすすめです。ここでは制作会社をいくつか紹介しますので、ぜひ参考にしてみてください。

GIG

引用元:GIGホームページ(http://gig-inc.com/

GIGは高品質かつ素早い開発スピードを武器とする制作会社で、日本航空(JAL)やChatwork、サッポロホールディングス(サッポロビール)など、多業種の企業との取引実績を持っています。GIGもWebサイトの制作のほか、保守運用、WEBマーケティングやコンサルティングなど、広範なサービスを提供しています。

イメージソース

引用元:イメージソースホームページ(https://imagesource.jp/

イメージソースは「カンヌ広告祭」をはじめ多数の著名な広告賞を獲得している実績豊富な制作会社です。イメージソースは大企業のイベントサイトやインスタレーションの制作などを数多く手掛けているほか、人気バンドBUMP OF CHICKENのWebサイト制作にも携わるなど、様々な領域で魅力的なコンテンツを長年作り続けています。

D2Cdot

引用元:D2Cdotホームページ(https://www.d2cdot.co.jp/)

D2Cdotは、NTTドコモ系列のWeb広告会社です。D2Cdotは日清やアサヒ、明治のような食品関連のWebサイトやプロモーションの制作に数多く携わっています。アーンドメディアも含めた幅広いメディア戦略をサポートしているのも特長です。

Goodpatch

引用元:Goodpatchホームページ(https://goodpatch.com/

2011年創業のGoodpatchは、東京以外にドイツにもスタジオを持つ新進気鋭のUI/UXデザイン会社です。デジタル製品のUI/UXデザインを武器に事業を拡大してきたGoodpatchは、製品開発はもちろん、ビジネスモデルのデザインや、ブランドイメージのデザインなど、あらゆる領域における「デザイン」をサポートしています。

THE GUILD

引用元:THE GUILDホームページ(https://theguild.jp/

THE GUILDは東京の港区と渋谷区に拠点を持つWeb制作会社です。THE GUILDはファッションブランドBEAMSのECサイトや、VODサービスU-NEXTのUIデザインの開発などを手掛けており、視認性や使いやすさに優れたUIを提供しています。

以下の記事では、ホームページ制作を外注する際の制作の流れや相場、注意点について解説していますので、外注を検討している方は是非参考にしてください。

まとめ

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

低価格でおしゃれなホームページを作りたいならsiteflowがおすすめ!

おしゃれなホームページデザインを作るとなると
費用がかさみ、予算オーバーしてしまうという方も多いでしょう。

ホームページ作成サービスsiteflowなら、

・初期費用0円、月額9,000円~の低価格
・プロが作成するから低価格でも高品質な出来栄え
・豊富な制作実績があり多業種のホームページを作成可能

おしゃれなデザインが魅力的だけど費用が高くて諦めかけていた方も
まずは一度、無料相談をお試しください。