サイトのトップページを決める!デザインのポイントと必要な要素とは

サイトのトップページを決めるデザイン

更新日:2017年09月12日 | 公開日:2017年05月18日

普段ネットで情報を探しているとき、トップページを見てそのサイトを「読んでみようかな」「読まなくていいや」と判断することはありませんか?

トップページを見てもどんな情報が得られるのかが分からないサイトを、わざわざ時間を割いてまで読もうとは思わないですよね? それだけサイトにおいてトップページが果たす役割はとても重要なのです。もしあなたがすでにサイトを持っていてPV数が少ない…という場合には、トップページに原因がある可能性が高いと言えるでしょう。

「でも、ほかのサイトより斬新で目立つデザインなんだけど!」と思わず反論したくなる人もいるかもしれませんが、それでPV数が上がると考えているのであれば大きな間違いです。

どんなに目を引くデザインのトップページであっても、訪れたユーザーが「どんなサイトなのか」を理解できないような作りでは、当然ながらサイトから離脱されてしまいます。ユーザーにとって見やすく、使いやすいトップページをデザインすることこそが、PV数を増やすカギになるのです。

この記事では新たにサイトを作成する人やサイトのPV数に伸び悩んでいる人を対象に、トップページをデザインする際のポイントや必要な要素について説明します。

トップページのデザインをしっかりと考えることで、あなたのサイトにも多くのユーザーが訪れるようになりますよ!

1. トップページをデザインする際のおもなポイント

ノートパソコンとメガネ

1-1. 業種によって見せ方のポイントは異なります

「ユーザーにとって見やすく、使いやすいトップページを」と言われても、デザインのパターンだけでもいろいろとありすぎて、いまいちピンとこないのが正直なところですよね?
業種によってそれぞれ見せ方にポイントがあるので、そこを押さえたうえでトップページをデザインすれば迷うこともないはずです。

この項目では業種別に最適な王道のデザインについて説明します。

≪業種その1≫ 建築会社の場合

建築会社におけるトップページのポイントは、一目で建築会社だと分かる建物の写真です。

建築会社のサイトを訪れるユーザーが知りたいのは、その会社がどういう建物を手掛けてきたかということです。
そのため、過去に手掛けた自信作の写真をメインに置き、その作品の内装だったりほかの作品だったりを下部に配置するデザインが効果的だと言えます。

≪業種その2≫ 不動産会社の場合

不動産会社におけるトップページのポイントは、目に入る位置に検索機能を持ってくることです。

不動産会社のサイトを訪れるユーザーは物件を探しているわけですから、画面をスクロールしなくても見える位置に検索機能を持ってくることが最も大切です。
また、「この物件いいな~」と思わせる写真を配置することも、PV数を伸ばす要素のひとつになります。

≪業種その3≫ アパレルショップの場合

アパレルショップのトップページでは、メインカテゴリーとサブカテゴリーの配置がポイントです。

メインカテゴリーとなる「レディース」「メンズ」「キッズ」などの大分類は上部に、サブカテゴリーとなる「トップス」「アウター」「シューズ」などの小分類は左側に配置します。
人の目線は左上から右下へと「Z」の形で移動するため、ユーザーは効率よく商品を探すことができます。

なお、セールやキャンペーンなどのお得情報を大きく載せるなど、ユーザーの購買意識を高める工夫も必要です。

≪業種その4≫ 飲食店の場合

飲食店のトップページには、お店の看板メニューや期間限定のメニューなどを大きく掲載するのがポイントです。

飲食店の場合はサイトを通じてお店に足を運んでもらうことが最終目標であるため、メニューのおいしさを伝えることが重要になってきます。
思わずお店に行きたくなるような写真をメインに載せることで、来客数の増加が見込めます。また、お店を訪れる際の目印となるロゴマークや分かりやすい地図を掲載することも忘れないようにしましょう。

≪業種その5≫ 美容院の場合

美容院におけるトップページのポイントは、ステキだと思わせる髪型をした女性の写真です。

美容院のサイトを見るユーザーは髪を切りたいと考えているだけでなく、理想の髪型にしてくれるお店を探しています。
そのため、「自分もこんな髪型にしたい!」と思わせると同時に、技術力を証明できる写真を前面に持ってくることがユーザーの来店につながります。

≪業種その6≫ 病院の場合

病院のトップページをデザインするうえでのポイントは、受付時間や休診曜日の案内を一目で分かる位置に表示することです。

病院の案内やどんな診療を行っているのかを掲載することはもちろん必要ですが、サイトを訪れるユーザーの多くが知りたいと思う情報は受付時間や休診曜日です。
「アパレルショップ」の項目でも説明したように人の視線は左から右に移動するため、受付時間の案内は左側に配置するとより効果的に見せることができます。

ここでは6つの業種でのポイントについて取り上げましたが、このほかの業種も参考にできる点があると思います。「人の目線は左から右、上から下へ移動するもの」ということを意識して、トップページで最も見せたいポイントを配置するよう心掛けましょう。

1-2. ポイントを押さえたうえでレイアウトを考える

業種によって異なるデザインのポイントを押さえた後は、効果的に見せられるレイアウトを考えます。
レイアウトはユーザーの見やすさや使いやすさに直結するものなので、まずはどういう種類があるのかを説明します。

グリッド・レイアウト

グリッド・レイアウトとは、画面を縦と横の直線で格子状に分割し、これらを組み合わせてテキストや画像の大きさと配置を決定するデザイン手法のひとつです。
方眼紙のように同一の大きさの正方形に分割したものをいくつか組み合わせ、要素や余白を構成します。

また、PCやスマートフォンなど、さまざまなデバイスにも対応しやすい「可変グリッド・レイアウト」と呼ばれるものがあり、ブラウザの表示領域に合わせてコンテンツの幅や位置を可変させる「リキッド・レイアウト」や今流行りの「レスポンス・デザイン」などが該当します。

フリー・レイアウト

フリー・レイアウトとは、あらかじめ決められた幅に合わせてテキストや画像を配置するデザイン方式です。
情報量が豊富なサイトでよく使われるレイアウトで、どの画面サイズで見ても同じ幅でコンテンツを表示することができます。

ただし、ページ幅が決められているため、デバイスによっては見づらくなってしまうのが難点です。

「財務省」の公式サイト
出典財務省

カラム・レイアウト

コンテンツを縦に何列配置するかによって、レイアウトの種類が異なる方法です。
縦1列の配置を「1カラム・レイアウト」と言い、フルスクリーンでページを表示させたい場合に適しています。
また、メインコンテンツにサイドバーを1つ追加したものを「2カラム・レイアウト」、2つ追加したものを「3カラム・レイアウト」と言い、必要なコンテンツに合わせてカラム数を増やすことができます。

ちなみに、カラム・レイアウトはサイト制作ツールのテンプレートによく採用されているため、ポピュラーなレイアウトだと言えるでしょう。

「TSUTAYA」の公式サイト
出典TSUTAYA

代表的なものとして3つのレイアウトを取り上げましたが、このほかにもさまざまな種類があり、新しいレイアウトも次々と誕生しています。
ただし、あまりに凝ったレイアウトにしてしまうとページの読み込みが遅くなるだけでなく、使用するブラウザによっては正しく表示されないなどの障害が起こる可能性もあります。

そうしたことを踏まえたうえで、サイトの目的や見せ方、ユーザー目線を考えたトップページのレイアウトを選択するようにしてください。

2. トップページを構成するために必要な要素とは何か

ノートパソコンとボールペン、データ書類

繰り返しになりますが、ユーザーはトップページを見てそのサイトを閲覧するかどうかを判断します。
そのためにはユーザーにとって見やすく、どういったサイトであるかが理解できるトップページを作成しなければなりません。
トップページに入れておくべき要素としては、以下の7つが挙げられます。

トップページに入れるべき7つの要素
  • グローバルナビゲーション … サイトの案内メニュー
  • 検索窓の設置 … 情報量の多いサイトの場合には必須
  • サイトの見どころ紹介 … メインとなるコンテンツやおすすめ情報など
  • タイムリーなコンテンツ … 「本日のニュース」「最新情報」など
  • バナー広告
  • アクセス数の多いコンテンツの直接リンク
  • 新規登録ボタン(ログインボタン)… 会員制サイトの場合には必須

サイトの方向性によっては必要のない要素もありますが、できるだけこれらの要素を組み込んだトップページを作成することが理想です。
なお、取り上げた7つの要素のように機能的なものではありませんが、「サイトの概要と目的」もユーザーに対してどういうサイトであり、どういう情報を提供しているのかを伝えるために必要な要素のひとつだと言えます。
「そんなの見れば分かるでしょう?」と思わずに組み込むようにしてください。

また、トップページを制作する際に忘れてはならないのが、ユーザーの立場になって考えることです。
「自分がユーザーだったら、この位置にボタンがあると押しやすいな」というようにイメージしながら作成すれば、自然とユーザーにとって見やすく、使いやすいサイトに仕上がります。

どんなに見栄えのいいデザインやレイアウトのトップページにしても、サイトを見てもらえなければ意味がないことを念頭において、トップページを作成するようにしましょう。

2-1. 要素をもとにトップページを作成する

トップページを作成するにはいくつかの方法があり、それにより手順も多少異なりますが、ここでは完成図がイメージしやすく、ページデザインの作業がスムーズに行える画像編集ソフト(Adobe PhotoshopやAdobe Illustratorなど)を使って作成する手順について紹介します。

トップページの作成手順
  • サイトの構成図を作成する
  • トップページのレイアウトを作成する
  • ページ幅や領域の幅を決定する
  • 各領域に必要な要素を入れ込む
  • 全体の色味やデザインの詳細を詰める
  • 画像ファイルとして保存する
  • トップページのコーディングを行う

1と2は同じことのように思われるかもしれませんが、1の「サイトの構成図を作成する」ではサイト全体の構成図を作成し、トップページからどのように導線を引いて行くかを考えます。
そこで明確にしたトップページに必要なコンテンツをどのように配置するのかを決めるのが、2の「トップページのレイアウトを作成する」になります。

この2つの手順がトップページを作成する際の基盤となるので、先に説明した業種ごとに異なるトップページのポイントやレイアウトの見せ方を参考に、手書きまたはExcelなどで作成しましょう。

3の「ページ幅や領域の幅を決定する」では、実際に画像編集ソフトを使ってページや領域の幅を細かく指定します。
この作業が終われば次は2の手順で作成したレイアウト通りに各要素を入れ込み、全体のバランスを見ながら色味やデザインを修正し、パーツとして切り出したものを画像ファイルという形で保存します。
あとはHTMLファイルのコーディングをすれば完成です。

【まとめ】トップページに注力するだけではPV数は上がらない

ディスプレイを眺める男性

この記事では新たにサイトを作成する人やサイトのPV数に伸び悩んでいる人を対象に、トップページをデザインする際のポイントや必要な要素について説明しました。

サイトのトップページは訪れるユーザーにインパクトを与えることも重要な要素ではありますが、最も優先すべきなのは「必要な情報が得られるかどうか」を一目で分かるようにすることです。

そのためにもトップページのデザインやレイアウトに力を注ぐだけでなく、サイト全体の統一感はもちろん、良質なコンテンツ作りが大事になってきます。
トップページの作りがよくてもサイト全体の内容が物足りないと感じれば、「中身の薄いサイトだなぁ…」とユーザーは途中で離脱してしまいます。

それではユーザー目線に立って作成したはずのトップページも、無駄に終わってしまいますよね?
そうならないためには、見せ方のポイントを押さえて作成したトップページに合わせて、サイト全体の質を向上させる必要があると言えます。

トップページを含めたトータル的なサイトの見直しや、質の高いコンテンツ作りを検討される場合には、ぜひ日本最大級の業者比較サイト 「アイミツ」までご相談ください。
「アイミツ」ではあなたのお悩みやご希望・ご要望に応じて、最も適した制作会社を無料でご紹介させていただきます。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください