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

関連記事

WordPress

本当に使う機能だけを残した、シンプルなWordPressのSEOプラグインを作成しました

WordPressでSEO周りの設定が簡単にできる、SEOプラグイン。 SEO対策には便利ですが、設定項目が多すぎて「どこを触ればいいのか分からない」と感じることはないでしょうか? そこで今回、社内の案件用にシンプルなSEOプラグインを作成してみました。 『最低限の設定のみでシンプルに』というのが今回のテーマです。 今回の記事では「どんな考え方で設計したのか」といった、制作背景などを紹介していきます。 ※本記事ではコードの全公開やダウンロードは行いません 追記:無事リリースで […]

プログラミング

SharePoint CSSとJSを入力できるWEBパーツを作る(モダンUI向け・SPFx)

SharePointのモダンUIで、SharePoint Framework(以降SPFx)という技術を使用し、CSSとJSを入力できる独自WEBパーツを作ります。 旧来のクラシックUIではスクリプトエディターと呼ばれていたWEBパーツを再現します。 目次1 前提条件2 WEBパーツの作成手順3 1.環境構築4 2.SPFxプロジェクトを作成4.1 VSCodeでフォルダを開く4.2 ターミナルを開いてコマンドを入力4.3 質問1:プロジェクトの名前を入力4.4 質問24.5 […]

Webサイト制作

SharePointとは?社内DXを始めよう!

目次1 SharePointって一言でいうと何?2 簡単ってどれくらい?3 パーツは色々用意されています。4 ファイルに個人情報が含まれているんだけど…5 簡単なのはわかったけど、やっぱり手間がかかる6 実際によくあるつまづきポイント7 SharePointを魅力に感じたら8 活用事例のご紹介 SharePointって一言でいうと何? SharePointは、 “社内の人だけ見れるWebサイトを簡単につくれるクラウドサービス”です。 「このページを見れ […]

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

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

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

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