サイト種類別！トップページの役割と必要なコンテンツ

WEBサイトを作るとなった時にまず1番に考えるのがトップページです。

トップページはそのWEBサイトの顔とも言われる為、どうしてもビジュアルに重きを置かれがちになります。

しかしトップページをかっこよくすればコンバージョン率が上がったりするわけではありません。そもそもトップページの役割とは？ロゴとメインビジュアルとグローバルメニューと…あと何を入れるの？いっても魅力的なビジュアルがほしい！今回はトップページにフォーカスし、機能的で成果を出すWEBサイト制作の為のポイントをまとめたいと思います。

トップページの3つの役割

まず初めに、トップページの役割について考えましょう。大きくは3つの役割があるかと思います。

• ユーザーに対して目的のサイトか一目で判断させる事
• ユーザーが知りたい情報へストレスなくたどり着くようにナビゲーション出来ている事
• 時事性のあるトピックスを周知する事

ユーザーに対して目的のサイトであるかを一目で判断させる

「よく見ればここに書いてあります」「探せば良いでしょ」と言っているようなデザインになっていませんか？

トップページは玄関でありユーザーにとって入り口となる場所です。
何を提供しているかわからないごはん屋さん、店の入り口が散らかってる飲み屋…。面白そう！なんて入ってくるお客さんなんて超少数派だと思います。よほど知名度が高かったり美味しいご飯を提供してくれる店でない限りは「他を探そう！」となります。つまり、せっかく玄関まで来てもらったのに帰ってしまうんですね。それじゃもったいない！直帰率の高いサイトはここがうまく機能していない可能性が高いです。

サイト名の表記はもちろん、メインビジュアルでは事業やサービス内容に関連性のある画像の使用が必要です。

ユーザーが知りたい情報へストレスなくたどり着けること

トップページには目次の役割もあります。
ナビゲーションやフッター等のメニュー以外にも下層ページへの導線を入れる事が多くなります。
またクライアント様からよく要望としていただきますが「お問い合わせフォーム」への導線をどうするかという点も重要なポイントとなります。

時事性のあるトピックを周知する

ユーザーの為になる情報であったり、ニュースやイベントのお知らせなどといった時事性のあるトピックスを周知する事もトップページの大きな役割のひとつと言えるでしょう。
更新頻度が高いと、「きちんと運用されているWEBサイト」という印象付けをすることが出来、結果ユーザーに対して安心感や親近感を与えることになるでしょう。

トップページには何を入れれば良い？

トップページの役割を確認したところで、いざ制作していくにあたり具体的にはどのようなコンテンツが必要になってくるでしょうか。
ファーストビューはどうしたらよいのか、メインのコンテンツはどうするかなどといったポイントを、ここではコーポレートサイト、ブランドサイト、ECサイト、採用サイトの4つの種類別にみていきましょう！

コーポレートサイトのトップページ

コーポレートサイトは企業サイトとも呼ばれ、企業やお店などの事業を紹介するサイトになります。その為「商品やサービスを知ってもらって集客につなげたい」「企業としての信頼性を確保したい」など企業によってその制作目的は様々で、ターゲットユーザーも多岐にわたります。

そのため、まずトップページではサイトの目的をはっきりと明示する事が重要になってきます。

では実例をみていきましょう。

西野建設工業株式会社

上記サイトは建設会社のコーポレートサイトです。

ファーストビューでは、ロゴマークと、しっかり絞り込んだメニュー数のナビゲーション、端的なキャッチコピーと事業の写真が配置されています。
至ってシンプルなビジュアルで一目で建設系の会社だという事がわかりますね。

メインビジュアルに続き、時事性のある「NEWS」が配置され、「事業内容」「採用情報」「施工事例」といった下層ページへのナビゲーションバナー、そしてfooter上にはお問い合わせのCTAが配置されています。

とてもシンプルなトップページ構成で、ごちゃごちゃ色々なコンテンツが入っているサイトに比べると非常に見やすいデザインになっています。

白鶴

続いては清酒メーカーのコーポレートサイトです。たくさんの商品数をかかえるメーカーのトップページの構成はどのようになっているかみてきましょう。

メインビジュアルではコンテンツのバナーがカルーセルで表示され、シンプルなグローバルナビゲーションの他に文字サイズの調整ボタンや言語切り替えボタンが設置されています。また、ブランドカラーの黄金色の補色のブルーで「オンラインストア」のリンクボタンが設置されています。
メインとなるコンテンツは主に下層ページやブランドページへのバナーです。こちらのメーカーの場合は商品毎にサービスサイトがある為、メインビジュアル下に配置された商品写真がそのページへの導線の役割を担っています。

同時に商品群を一覧で表示しているのもわかりやすいですね。

その下には「お知らせ・ニュース」といった時事性コンテンツをいれ、「おすすめコンテンツ」のバナーが並んでいくといったトップページ構成になっています。商品数やコンテンツの多い企業は参考になるトップページかと思います。

サービスサイトのトップページ

サービスサイトはコーポレートサイトから商品やサービス内容を切り取り、よりその商品の認知度を広げたい時や特定のターゲットに絞って集客を行い時に作成するサイトで「ブランドサイト」とも言われます。

左は先ほど例に挙げた清酒メーカのコーポレートサイトで右は同じメーカーのサービスサイトです。ドメインは一緒ですが、コーポレートサイトの下層ページという作り方ではなく、全く別のサイトのように作られる事からWEBサイトの種類としては別になる事が多いです。

そんなサービスサイトは商品の周知が目的の為、商品の特徴はもちろんですが、開発ストーリーなどを盛り込む事で、ユーザーに対して親近感であったりその商品への興味の喚起などを促す事ができます。
コーポレートサイトと大きく違うのは、ビジュアルメインである事と、ナビゲーションに然程大きなウェイトを置かない事でしょう。下層ページに流入させる事よりもトップページでそのサイトが完結するような構成のものが多くみられます。

OPERAリップ商品スペシャルサイト

化粧品メーカーのリップクリームのサービスサイトを例にみてみましょう。
このトップページではナビゲーションはハンバーガーメニューでまとめられており、然程目立ちません。その分ノングリッドレイアウトで配置された女心をくすぐるようなコピーと、魅力的なイメージが際立つデザインとなっています。

ハンバーガーメニューやノングリッドレイアウトついては下記の記事で解説しています。

ECサイトのトップページ

BtoC業界ではもう必要不可欠である販売媒体であるECサイト。そのトップページはまさにお店の入り口であり、顔にもなります。お店の売り上げにダイレクトに影響を与えるので、ECサイト制作はクライアントの想い入れが一際強くなるサイトのひとつです。

購買欲を掻き立てるような商品写真はもちろんですが、ものや商品がサイト上で売買される為、コーポレートサイトなどよりもナビゲーションが重要になってきます。ユーザーがスムーズに購入までたどり着く為の導線をしっかり設計しましょう。

ナビゲーションについては下記の記事で解説しています。

通販生活のように商品数が多い大型ECサイトは、サイドエリアにカテゴリー一覧、ヘッダーには大きな検索窓とカートボタンが置かれ、いずれもフローティングメニューになっています。ユーザーがサイト内を回遊しやすく、また商品購入までスムーズにいけるようにした典型的な例といえるでしょう。

また、トップページでは商品とコンテンツを同等の見せ方をしています。商品を合わせてターゲットユーザーの為になる情報やコンテンツの発信をするECサイトは近年大変多くなっています。

ただECサイトはトップページも大事ですが商品での指名検索での流入も多い為、やはりヘッダーやサイドナビなど全ページ共通のパーツの最適化が1番の課題かと思います。

採用サイトのトップページ

サービスサイト同様、コーポレートサイトのドメイン配下に作られる事が多く、コーポレートサイトとは目的やターゲットが違うために、全く別のビジュアルで作られるケースが多い採用サイト。

採用サイトはコーポレートサイトからの流入や、求人サイトの企業のリンク先に指定したりする為、トップページを目にするユーザーが多いのが特徴です。
またサイト構成自体はシンプルなものが多く、あまり複雑ではない為、トップページのデザインは重要なものになってくるでしょう。

採用サイトでのトップページコンテンツとしては、事務的な要素(募集要項や選考フロー)などよりも、社員紹介やクロスインタビューなどの会社の雰囲気が伝わるようなコンテンツを置いているサイトの方がより魅力的です。端的で求職者の心にぐっとくるキャッチコピーやストーリー性のあるページ構成にすると良いでしょう。

まとめ

いかがでしたか？トップページはただかっこいいビジュアルを作れば良いわけではない！と言われつつも、サービスサイトや採用サイトではビジュアル重視であったり、ECサイトでは商品の写真はもとよりナビゲーションが重要な事など、サイトの種類によってトップページで重要となるコンテンツは変わってきます。

まずはサイトを作る前にしっかりサイトを作る目的を精査し、どのようなサイトが適しているのかを決めましょう。そしてトップページがそのサイトにとってどのような役割を果たしその為に必要なコンテンツ何か、重要なパーツは何かを考えていくと良いでしょう。この記事がその参考になれば幸いです。