WebサイトのTOPページについて

  • このエントリーをはてなブックマークに追加

こんにちは、石上です。
先週に引き続き、今週も明日から雪が降るそうですね。
TVでやっていましたが、過去の統計で一度まとまった雪が降ると、続けてまとまった雪が降ることが多いそうです。

さて、今回はWebサイトのTOPページについて書きたいと思います。

そもそもTOPページとは何か

WebサイトにおけるTOPページとは、サイト全体のいわば『顔』になります。
書籍・雑誌で言えば『表紙』、お店なら『入口(佇まい)』、商品の『パッケージ』などのイメージや内容を伝える大事な部分です。

イメージや内容を一瞬で伝えるため、書籍であれば、モデルを使ったり、デザインに凝ったりして、他の書籍との差別化やイメージを出して、『買ってもらおう』『まずは手に取ってもらおう』と努力されています。
Webサイトでも同じくデザインや動きなどで、他のサイトとの差別化やイメージを伝えるため、デザインを決める時には最も重要視されます。

ただ、Webサイトの性質上、書籍やお店とは、大きく異なる点があります。それは、必ずしも訪問者がTOPページから中のページに入っていくとは限らないということです。
(入口を通らずにお店の売り場に人がいきなり現れることはないですし、店頭で表紙を見ずに書籍の中身を見ることもまず無いでしょう)

理由は、GoogleやYahooなどの検索エンジンと、他のサイトなどからの下層ページへのリンクです。
多くのサイトの場合、TOPページから入ってくるユーザーが多いと思いますが、Googleなどの検索や他のサイトからのリンクにより、ユーザーが興味があるページに直接入ってきて自分の目的とするページだけ見て、TOPページを見られずにサイトを閉じるということも多くあるのがWebサイトです。
そういった場合でもTOPページを見てもらった人には、サイトの印象が残したり、更なる興味を持って他のページを閲覧してもらった方が当然いいと思います。

TOPページの構成要素

TOPページをどう作るか。構成を考える時にはまず、要素を揃えます。

【主だった構成要素】
・ページ共通要素(ロゴやヘッダ・フッタメニュー、ナビゲーション)
・キービジュアル(+キャッチコピー)
・お知らせ(ニュース、topics)
・下層ページへのリンク
・バナー
・SNS(twitterやFacebook)の表示

サイトによってあったり、無かったりしますが、大体がこの要素+αで作られていると思います。
あとは、これらを組み立てていくわけですが、闇雲に組み立てても意味はありません。
一応、Webサイトにもルールがありますし、それ以上に大事なのは
・何を強く訴求するか(したいのか)
・プライオリティはどうなのか(どこのページに導きたいのか)
・各要素にどれだけの情報量があるのか

という点です。
特に重要なことは、『何を強く訴求するか(したいのか)』という点です。
これによって、構成だけではなく、デザインにも場合により大きな影響を受けます。

特にブランディングを強く訴求したい場合、キービジュアル部に動きも加えてインパクトを加えたり、そもそもサイトを全て動きがあるものにするなど根底から覆る可能性が高いと考えます。
(多くのコーポレートサイトなどの場合、そこまでの話にはならないですが…)

訴求にあたって、TOPページで重要な箇所がキービジュアルです。写真やイラストなどを使って、TOPページの中で一番目を引くように、作られることが多いです。
また、キービジュアルの画像に併せてサイトのデザインを調整していた場合、後日キービジュアルを差し替えるとデザインとの間に差異が生まれて調整に苦労することもあります。TOPページなので妥協点は高く、試行錯誤の時間が訪れます。

TOPページを構成する上で苦労するのは、要素が少ない場合です。
要素がヘッダ、フッタ、ナビゲーション、『キービジュアル』、『お知らせ』しかないというサイトで、キービジュアルもとりあえず欲しい。お知らせもほとんど更新しないので公開時およびその先1、2年は1件だけ表示しますというようなサイトの場合です。
方法としてはいくつかあると思いますが、私が考えるのは3つ

【その1】今あるもので、普通のサイトっぽく作る
・普通にキービジュアルの下にお知らせを配置する
⇒しかし、TOPを見た方は「情報量が少ないサイト」「頼りにならない」などのイメージを持つ可能性が高くなります。
(基本的に最終手段だと思っています)

【その2】要素を増やす
・コーポレートサイトであれば、製品やサービスなどへのリンクを画像付きで追加する
・コンテンツの追加から提案し、そのコンテンツへのリンクを追加する
など要素を増やすように努力する方法
⇒下層ページへのアクセスがしやすくなり、ユーザビリティが向上します。
しかし、下層ページが充実していないと【その1】同様に「情報量が少ないサイト」「頼りにならない」などのイメージを持つ可能性があります。

【その3】写真をキーにして、少し変わった構成で作成する
・写真を大きく使い、その中にキャッチコピーを見栄えよく配置。お知らせもキービジュアルの中にあまり目立たせずに配置
⇒インパクトが強くなり、訴求力を上げられます。しかし、こちらもうまく作らないとユーザビリティの低下があり得ます。


TOPページは、サイトの顔なので、『こだわり』は重要な要素です。サイトを見るときには、TOPページが与えるインパクトや訴求したいことを考えながら見てはどうでしょうか?

執筆者:8bit

関連記事

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。