Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

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

お問い合わせフォーム作成WPプラグインに返信機能を追加!

弊社が提供しているWordPressプラグイン『Easy Form Maker』に返信機能が追加されました! 『Easy Form Maker』は日本語で制作した、お問い合わせのWordPressプラグインです。 ※返信機能については有料版のみの提供となります 今回はその返信機能についてご紹介します。 基本的な使い方については、こちらの記事をご覧ください。 目次1 こんなことで困っていませんか?2 実際の画面を見てみよう2.1 お問い合わせの一覧2.2 全体2.3 お問い合わ […]

マークアップ

SharePoint クラシックUIの通知機能をPower Automateで再現する

SharePoint サイトをモダンUIへ移行すると、よく耳にするのが「クラシックUIにあった通知機能を使いたい」という声です。しかし、モダンUIにはクラシック時代のような「標準の通知機能」が用意されていません。 そこで活躍するのが「Power Automate」です。クラシック通知の代わりとして、リストの変更を自動で検知し、メールで知らせる仕組みを簡単に構築できます。 本記事では、クラシックUIの通知に近い形で、Power Automate を使ったメール通知フローを作成す […]

Webサイト制作

制作会社が考える、WordPressとオリジナルCMSの選定ポイント

弊社では「WordPress」を使った制作と、弊社のオリジナルCMSツール「ProG(プログ)」を使った制作の、いずれについても多くのご相談をいただいています。 それぞれにメリットがある一方で、運用時に気を付けるべき点もあり、サイトの目的や運用方法によって向き・不向きがあります。 この記事ではそれぞれの特徴を整理しながら、WordPressとオリジナルCMSを併用できるケースについてもご紹介します! 目次1 WordPressを使用するメリット1.1 多機能で自由度が高い1. […]

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

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

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

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