見やすいデザインのホームページ15選！構成やデザインのポイントも解説

ホームページを見ていて、「どの順番で見れば良いかわからない」「どれがどれを指しているのか分かりにくい」と思ったことはありませんか？ホームページが見にくいと理解に時間を要するため、すぐに離脱されてしまいコンバージョンに繋がりにくいです。

せっかく作成したホームページも、目的を果たせないと意味がありません。コンバージョンに繋がるような見やすいデザインを、見る側の視点に立って考えて作成する必要があります。

本記事では、

• 見やすいホームページはなぜ必要なのか

• 見やすいホームページの構成

• 見やすいホームページのデザイン

• 見やすいホームページ事例15選

の4点について解説していきます。

見やすいホームページはなぜ必要？

では、見やすいホームページはなぜ必要なのでしょうか？その理由として、主に以下の理由があります。

1.離脱を防ぐ

冒頭でも述べたように、ホームページは最終的な目標を達成できないと、作成した意味がありません。資料請求、お問い合わせ、購入等の導線へ促すことができ、コンバージョンへと繋がるメジャーなツールです。何をしている会社なのかわからなかったり、お問い合わせ等のボタンがすぐに見つからないと、せっかく興味を持ってもらってもページから離脱されてしまいます。情報の整理されたシンプルでわかりやすいレイアウトが必要不可欠です。

2.第一印象になる

ホームページは、開いた時の印象が会社や店舗の第一印象となります。

ユーザーは、最初にページを見て、「このサイトは信頼できるのか」「欲しい情報があるか」を瞬時に判断します。見やすいホームページであれば、欲しい情報があるかすぐに判断できる上に、知見のある人が作成しているとわかるので、信頼感を与えることもできます。

3.SEOに有利

Googleの判断基準として、ユーザーが利用しやすいかを重視しており、見やすくて利用しやすいサイトは評価が高くなります。ページを読み込む速度等も関係してくるので、情報が整理されているかどうかは、SEO対策として欠かせないです。

見やすいホームページの構成

次に、見やすいホームページを作成する観点から解説していきます。デザイナーでない方でも、何を意識して作成してもらうべきなのか知っておくことは、今後デザイナーに依頼する際にとても重要です。

1.目的とターゲット

ホームページの目的によって、必要なコンテンツやデザインが変わるため、まずは目的とターゲットを明らかにしておく必要があります。

例えば、商品の販売がメインの会社であれば、商品説明、価格など必要最低限の情報に加えて、購入までの導線を作成する必要がありますし、採用がメインの会社であれば、会社の雰囲気や社員の声が伝わるコンテンツが必要です。

個人向けか、法人向けかでもターゲット層が大きく変わってくるので、それぞれに適した内容を考えることが大事です。

2.導線の設計

冒頭でも述べたように、ホームページでは、コンバージョンにつながる導線が重要になってきます。

まず最初に目に入るセクションであるファーストビューは、ユーザーの興味をひく最大のポイントです。使用する画像やキャッチコピー、お問い合わせ・資料ダウンロードなどのボタンで構成し、どんな雰囲気でどんなことをしているのか・何ができるのか・どこから目的のページへ飛べるのか瞬時にわかる構成にしておく必要があります。

それに加えて、特徴（強み）や実績、必要であれば料金表など、ユーザーの抱える疑問を解決していく形でコンテンツを並べ、気になったらすぐに行動に移せるように、ユーザーが欲しいと思う位置（それぞれのセクションの最後など）にリンクやボタンを設置しましょう。

細かいですが、フォームの入力事項も簡単なものにするのが、コンバージョンに繋げるポイントです。

3.スマートフォンのデザインについて

ホームページは、パソコンだけでなく、スマートフォンからも見られることが多いです。画面幅が大きく変わってくるので、スマートフォンにもパソコンとは別の見やすいポイントがあります。

スマートフォンはパソコンと比べて表紙範囲が狭くなってしまうため、文字の読みやすさが重要です。パソコンでは、見出しやキャッチコピーなどの強調したい部分と本文の文字サイズに差がありますが、画面の表示範囲が限られるスマートフォンでは、全体的に文字を大きめに設定することで、より読みやすくなります。

文字だけでなく、ボタンも指で押しやすい大きさを心がけ、コンバージョンに繋がるような重要なCTA（お問い合わせなど）は、親指が届きやすい位置に配置することがおすすめです。

また、メニューバーはスマートフォンの表示範囲では入りきらないため、ハンバーガーメニューでスッキリまとめます。

見やすいホームページのデザイン

構成ができたら、次に注目してほしいのはデザインについてです。ホームページでは、デザインにもいくつか決まりがあります。

1.レイアウト

レイアウトとは、物の配置・配列のことを言います。レイアウトを考える上で重要なのは、視線誘導です。視線誘導にもいくつかパターンがあり、以下の3つが一般的に使われている構成です。

• F型（エフ型）

• Z型（ゼット型）

• N型（エヌ型)

それぞれについて簡単に説明していきます。

• F型（エフ型）

F型は、視線が左から右へ、上から下へと動いていく構成のことです。主に文字の多いもので使われており、文章をしっかりユーザーに読んでもらいたい時に有効ですが、長い文章はどうしても離脱率が高くなってしまうため、重要な情報は序盤〜中盤にかけて伝えましょう。

・Z型（ゼット型）

Z型は、左上→右上→左下→右下の順番に、視線が誘導される構成です。画像をたくさん使用する際に効果的で、一覧表示や表を用いる際はZ型を意識しましょう。

3.N型（エヌ型)

N型は、視線が右上→右下→左上→左下と動く構成です。縦書きのレイアウトによく使用されるため、旅館など和風をモチーフにしているページでよく見られます。

2.デザインの原則

デザインをする上で、守るべき以下の4つの決まりがあります。これが崩れていると、見えにくさの原因なりやすいため、必ず意識しましょう。

1. 近接

2. 整列

3. 反復

4. 対比

それぞれについて解説します。

1.近接

近接は、関係のある項目を近くに配置してグループ化することです。

左の悪い例は文字の間隔が離れていることで、どこまでがひとまとまりか分かりづらいですが、右の良い例は、関係のある要素ごとにまとまっているためグルーピングがわかりやすく見やすいです。

2.整列

整列は、名前の通りそれぞれのコンテンツを揃えて配置することです。

左の悪い例は、要素がバラバラで見えにくいのに対して、右のいい例は、上下左右のラインが揃っており、まとまって見えます。

3.反復

反復は、一つの要素を繰り返し使用することです。

左の悪い例では、3つとも同様の意味合いを持つ要素にも関わらず、バラバラの見出しで見づらいですが、右の良い例は、3つとも全て同じ見出し・つくりでまとめられているため、見えやすいです。

4.対比

対比とは、文字の大きさや色でコントラストをつけるデザインです。

左の悪い例では、全ての文字が同じ大きさで、重要なところが一目でわかりにくいのに対して、右の良い例は、文字や色の大きさを変えて要素を差別化することで、強調すべきところがわかりやすく見えやすいです。

3.テキスト

テキストはホームページに必要不可欠です。文章はもちろん、見出しやキャッチコピー、図やボタンにも用いるため、使用頻度の高い要素です。

たくさん出てくる要素を綺麗にまとめて、見やすいデザインを作成するために、以下の2つを意識するようにしてみてください。

• フォントの統一

  フォントがバラバラだと、文字の視認性が悪く読みづらいです。デザインとして何らかの意図がない限りは統一しましょう。

• テキストサイズ

  適したテキストサイズは、ホームページのデザインによって変わりはするものの、どのホームページにも基準になるサイズがあります。

  基本的に、読みやすいとされているテキストサイズは15〜18px、行間は1.5〜2と言われています。勿論、実際の見えやすさが大事なので、デザインによって変える必要はありますが、困ったら意識して作成してみてください。

4.配色

見やすいホームページには配色も重要です。ホームページで主に使用する色はいくつか種類があり、

• メインカラー：メインとなる一番主張したい色

• ベースカラー：一番使用する量・頻度が多い色

• アクセントカラー：そのページのアクセントになる差し色

の3つです。

おすすめのカラーの比率としては、

• メインカラー：25%

• ベースカラー：70%

• アクセントカラー：5%

を意識して作成するとバランスの良い配色になります。もちろん、テキストと同じくデザインによって色数もバランスも変える必要がありますが、迷った時の指標として頭に入れておくと便利です。

ボタン

ボタンは、お問い合わせや資料請求に繋がる大事な要素です。ボタンとわかりやすく、「押せる」ことが見てわかるデザインにしましょう。

上の悪い例は、一色で構成されており「押せる」とわかりづらいのに対し、下の良い例は、立体感があり「押せる」と見て思えるデザインです。

せっかくのコンバージョンの機会を逃さないように、ユーザーの行動を促すデザインを意識しましょう。

見やすいホームページ事例15選

上記で述べた「見やすい」と思ってもらえる要素を踏まえて、見やすいと思うホームページを15個厳選しましたので、ご紹介します。

1.KIRIN「午後の紅茶」

https://www.kirin.co.jp/softdrink/gogo/

KIRINの午後の紅茶商品サイトです。

製品のイメージカラーを使用しつつ、グラデーションを使って高級感のあるデザインに仕上げられています。商品コンテンツをZ型に配置し、それぞれに詳細ページへ促すボタンがあることでユーザーの興味を引き、購買意欲を増進させます。

製品が作られる過程を載せることで、安心感にもつながります。

2.ホンダ

https://www.honda.co.jp/auto/

車を取り扱うHONDAの公式サイトです。

ホンダのホームページは、スタイリッシュかつシンプルなデザインで、ブランドのイメージを崩すことなく、セクションがわかりやすいデザインになっています。異なったコンテンツでも、同じ並べ方を使用していることで、迷うことなく操作できます。

「販売店舗検索」「カタログ請求」など、販売に重要なCTAを追従させることで、コンバージョンに比較的つながりやすいデザインです。

3.SUUMO

https://suumo.jp/

住宅・不動産の情報サイトSUUMOです。

SUUMOは、ファーストビューでエリア別のマップに加えて「借りる」「買う」「建てる」と行動別に分かれたコンテンツが用意されており、開いて瞬時に目的のページへ行くことができます。お問い合わせや相談予約の導線も整っており、検索機能も豊富で、住宅について悩んでいるユーザーが利用しやすい構成です。

4.ノムラクリーニング

https://nc-nomura.com/gaikou_nisinomiya/index.html（制作：株式会社ノックデザイン）

ノムラクリーニングは、関西を拠点に展開する集配クリーニングの会社です。

クリーニング店には必要不可欠な清潔さが伝わるファーストビューに、取扱時間と集配手数料が0円である特徴を大きく表示されています。一度スクロールするだけでキャンペーン内容と依頼の導線が出てくる仕様になっており、知りたい情報のキャッチからCTAまでの導線が簡潔です。

以降もイラストや写真を多様することで特徴が一目でわかりやすく伝えられるデザインです。

5.FAMIT

https://www.famit.info/（制作：株式会社ノックデザイン）

ファミットは、大阪を中心とした住宅設備機器・配管資材の卸売業を行っています。

ファーストビューにで働く社員の様子を流すことで安心感と信頼を訴求。F型の視線誘導で入ってきやすい内容と、大きくCTAを配置することで、ページの見方がわかりやすくストレスなく見ることができる構成です。

アクセントカラーにロゴに使用している明るいオレンジを使用することで、「お問い合わせ」が目立つデザインにもなっています。

6.キチナングループ

https://www.kichinan.co.jp/

キチナングループは、主に物流を軸にしたロジスティクスサービスを提供している会社です。

先ほどと同様にファーストビューに仕事中の様子と従業員の顔がわかる動画を使用して、安心感と信頼感を訴求しており、セクションごとに色面で分けられているため非常に見やすいです。

カラーリングも青系統でまとめられ、企業情報が図解と具体的な数字で表されているため、複雑な情報も一目でわかるように工夫されています。

7.ホテルグランヴィア大阪

https://www.granvia-osaka.jp/

ホテルグランヴィア大阪は、大阪にある宿泊・宴会・レストラン等が備わっている、ホスピタリティーに溢れたホテルです。

開いてすぐに、宿泊・レストラン・宴会の項目でタブが分かれており、それぞれ予約や空室状況へと進むことができる導線で、左にも一覧の形でメニューバーは表示できるようになっています。ホテルを利用するユーザーにとって瞬時に目的のページへ飛べる、非常に利用しやすいサイトです。

また、キャンペーンや割引など、ユーザーにとって興味のあるコンテンツを、ページ内はもちろん、ファーストビューでスライドショー形式で流している点も、新しい情報をインプットできるので、ユーザーに親切です。

8.京都水族館

https://www.kyoto-aquarium.com/index.html

京都水族館は、京都駅からほど近いところにある公園の中の水族館です。

ファーストビューには営業時間、アクセス、フロアの案内や料金など、訪れる際に知りたい情報へすぐに飛べる構成になっています。

他のサイトではあまり見ないシチュエーション別のモデルコースが用意されており、ユーザーに寄り添った親切なデザインです。チケットの購入アイコンは常に右側に追従する形で設置されており、導線が整えられています。

9.グロースピリット

https://growspirit.jp/（制作：株式会社ノックデザイン）

グロースピリットは、採用支援等を通じてクライアントの成長を支える人事支援サービスの会社です。

サービスのセクションでは、図解を用いて会社のカラーである赤を使ってわかりやすくまとめています。サービスの詳細ではZ型の視線誘導で、関連するセクションは同様の構成でまとめる反復を使用しています。

事業別にもページがあることで、複数のサービスを整理されている且つ、それぞれ同じ構成で作られているので、読み進めやすいデザインです。

10.タイキ建設

https://taiki-kensetsu2011.com/（制作：株式会社ノックデザイン）

タイキ建設は、足場の組立・解体をはじめ、建設業を幅広く手掛ける企業です。

全体的にシンプルな色味でまとめつつ、業界特有の怖いイメージを払拭するようなファーストビューと、仕事内容や他の従業員写真を多用することで、信頼や安心感につなげます。

「従業員の声」や「一日体験」のセクションを設けることで、建設業に興味のあるユーザーへ届けたい情報をわかりやすく届けられる設計になっています。

11.ノックデザイン

https://nock-design.com/（制作：株式会社ノックデザイン）

株式会社ノックデザインは、大阪を拠点にブランド戦略から実装、SNSマーケティングまで幅広く手がけるデザイン会社です。

基本はモノトーンでまとめられたサイトに、アクセントカラーで明るい緑と紫を使用しており、「資料ダウンロード」と「相談」のCTAが際立つカラーリングです。

サービス内容の幅が広いため、プルダウンでまとめて目的のページにすぐに飛べる工夫が施されており、それぞれ同様の構成でどこに何の情報があるのか理解しやすい構成となっています。

12.日清医療食品

https://www.nifs.co.jp/

日清医療食品は、全国的に有名なカップヌードルやチキンラーメン等を含む開発・販売に携わる食品メーカーです。

食に関する様々なサービスを展開している上に、自社コンテンツも多いですが、導線設計が整っているので見づらくなることが無い構成です。強みや実績は図を使用して大きく表示し、事例紹介ではお客様の声が掲載されているので信頼を得られます。

インフォメーションの箇所では、定期的に情報が更新される分、ジャンルで分けられているため、ユーザーは特定の情報を得やすくなっています。

13.びっくりドンキー

https://www.bikkuri-donkey.com/

びっくりドンキーは、株式会社アレフが運営する、主にハンバーグを取り扱う飲食店です。

ファーストビュー〜ピックアップで、メイン商品であるハンバーグや、キャンペーン中のデザート等でユーザーの興味を引きつつ、横に並ぶコンテンツ群で、商品に関する情報が比較的得やすいです。

ヘッダーにはユーザーの気になる情報が揃えられており、必要な情報に迅速にアクセスできます。独自の可愛らししイラストを使用したCTAも、ボタンへと誘導するポイントです。

14.朝日合金株式会社

https://www.asahi-gokin.co.jp/

朝日合金株式会社は、金属加工品の製作や避雷針設備の製作・取付工事を手掛ける企業です。

メインになるカラーの赤色を要所要所で用いることで、ページのメリハリがついて見やすいデザインです。

たくさん取扱製品のコンテンツがありますが、カーソルの位置に合わせて、選択しているところの色が変わるので、ユーザーがどこを見ているのか分かりやすいです。職場や働いている時の写真を多く取り扱っていることもあり、信頼感を与えます。

15.FELISSIMO

https://www.felissimo.co.jp/gopeace/

FELISSIMOは、ファッション、生活雑貨、食品などの自社企画商品を中心に、カタログやウェブサイトを通じて販売するダイレクトマーケティング事業を展開しています。

GO!PEACEというプロジェクトのホームページで、ユニークでクリエイティブな商品を展開するFELISSIMOのイメージを崩さないポップなデザインを残しつつ、四角をモチーフに統一感のあるデザインです。

ほとんどのコンテンツが四角で作成されていますが、大きさの違いや色づかいで、異なるセクションであることが視覚的にわかりやすく、検索機能ではユニークなワード検索が可能で、ユーザーにクリエイティブな体験を与えてくれます。

見やすいホームページでコンバージョン率を上げる

冒頭でも述べたように、見やすいホームページを作ることは、ユーザーの離脱を防ぐ点で非常に重要です。情報が整理されておらず、どこを見ればよいのかわからないサイトでは、目的の情報を見つけるのに時間がかかり、結果的に離脱してしまう可能性が高くなります。

私たちが日常的に、情報収集等で何気なく見ているホームページは、ただ単に情報が掲載されているだけでなく、構成・デザインから様々な工夫がされています。内容でも触れているように、視認性の高いフォントの選定、コントラストを効かした配色、整理されたナビゲーション、ユーザーが求める情報へ瞬時にたどり着ける動線設計など、さまざまなポイントで考慮されているのです。

特に、企業のホームページでは、第一印象として影響を与える可能性があります。見づらいデザインや複雑な構成のサイトは、企業の信頼性を損なうかもしれません。一方で、シンプルで分かりやすく、直感的に操作できるサイトは、ユーザーにとって好印象を与え、コンバージョンの向上にも繋がります。

紹介した事例なども参考にしながら、サイトの構成とデザインの両面に配慮し、ユーザーにとって使いやすいホームページを目指しましょう。