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 REST APIを使用してリストの情報を取得し、headerにナビを作る

SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。 今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。 目次1 前提条件2 1.REST APIで情報を取得2.1 REST APIのURL2.2 データを取得する処理3 2.取得した情報をheaderに表示 前提条件 SharePoint Online モダンUI カスタムJSが使用で […]

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。 慣れていない人にはわかりづらいですよね。 また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。 今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。 目次1 権限の種類について2 function.phpに記述する2.1 サイドメニューの非表示用のコード2.2 権限ごとに振り分け […]

プログラミング

jQuery+PHPで大容量ファイルを分割アップロードするお話

ファイルのアップロードを行う際に注意しないといけないのが「アップロード容量」と「タイムアウト」です。 どちらもサーバーの設定に関わるところでレンタルサーバーでは対処しきれないところもあり、大容量にするとそれだけアップロードに時間がかかりタイムアウトが発生しやすくなります。 そこでフロント側で分割してファイルをアップし、バックエンド側で受け取った後に結合するようにするとよいでしょう 注意すべき点として通常のPOSTでの送信ではないため、あらかじめそこら辺を考慮した処理が必要とな […]

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

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

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

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