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

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

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