企業サイトのトップページは、最初の数秒で「誰なのか」「何を提供するか」「誰のためか」「次に何をするか」を示す必要があります。訪問者が最初の1語を読む前に第一印象が決まり、最初の10〜20秒でページに残るかどうかを判断します。

本記事では、第一印象とWeb上の読み方に関する調査結果、ファーストビューで答えるべき5つの質問、チェコの企業サイトによくある失敗、そして半日で5人に実施できるテスト方法をまとめます。

50ミリ秒と10秒：第一印象に関する調査結果

Gitte Lindgaardらの2006年の研究では、人はWebサイトの魅力を50ミリ秒見ただけでも、じっくり見たときと同じように評価しました。見た目が良ければ入り口には立ってもらえますが、提供内容がわからなければ誰も残りません。詳しくは、感情と潜在意識が意思決定をどう左右するかの記事で解説しています。

Microsoft ResearchのChao Liu、Ryen White、Susan Dumaisは2010年に205,873ページを分析しました。Nielsen Norman GroupのJakob Nielsenは2011年の記事で、訪問者の多くは10〜20秒以内に離脱するものの、価値が明確なページには数分間滞在すると結論づけています。

Webサイトのトップページは、人通りの多い道に面したショーウィンドウのようなものです。通行人が足を止めるのは、飾り付けではなく、わかりやすい品揃えがあるときです。

必要なのは演出ではなく明確さ

Webサイトに必要なのは派手な演出ではなく、明確さです。すっきりしたデザイン、読みやすい見出し、わかりやすい提供内容が求められます。アニメーションや大きな写真がメッセージを隠したり、読み込みを遅くしたりしてはいけません。

ファーストビューで答えるべき5つの質問

トップページのファーストビュー（スクロールせずに見えるページ上部）では、5つの質問に答える必要があります。これはNielsen Norman Groupが2024年に示したトップページ設計の5原則とも一致します。自分が何者で、何をしており、訪問者が次に何をすべきかを明確に示しましょう。

1. 誰なのか。 左上にロゴと社名・屋号を置きます。小規模な企業なら、スタッフや店舗・職場の写真も効果的です。
2. 何を提供するか。 具体的なメイン見出しを書きます。「品質と伝統」ではなく、「全メーカー対応の乗用車修理・整備」とします。
3. 誰のためか。 サブ見出しで対象と地域を絞ります。「コリーンおよび近郊の法人・個人のお客様向け」のように具体化します。
4. なぜあなたなのか。 約束ではなく証拠を示します。顧客の評価、業界歴、導入実績、実際の作業写真などを載せます。
5. 次に何をするか。 目立つボタン（「整備を予約する」「相談を申し込む」）を1つ置き、必要であれば控えめな代替ボタンを1つ添えます。

実際にはどうなるでしょうか。架空の自動車整備工場なら、上部に「コリーンの自動車整備・修理」という見出しを置き、全メーカー対応と代車ありを示すサブ見出し、顧客の評価、そして「オンラインで整備を予約する」というボタンを配置します。架空の会計事務所なら、「個人事業主・小規模企業向けの会計・税務」と書き、オンライン対応を補足し、証拠として実務年数と顧客の業種を挙げます。弁護士向けのヒントは、法律事務所のWebサイト作成5つのヒントをご覧ください。

どちらの例にも、「ようこそ」「高品質」「プロフェッショナル」といった言葉は不要です。判断に必要な具体的な情報だけを伝えています。

人はWebページをどう読むか

人はWebページを一語一句読むのではなく、流し読みします。Nielsen Norman Groupは2006年から視線計測（eyetracking）を行い、F字型パターンを提唱しました。Kara Perniceは2017年のまとめで、これがパソコンでもスマートフォンでも当てはまることを確認しています。読者は最初の数行を読み、次の行からは読む範囲が短くなり、最後は左端だけを縦に追うため、行末やページ下部を見落とします。

レイヤーケーキ型（layer-cake pattern）では、見出しだけを読み、興味のある箇所で初めて目を止めます。スマートフォンではマーキング型（marking）が主流です。視線を一箇所に固定したまま指でテキストをスクロールするため、主要なメッセージはスクロールせずにすぐ見える位置になければなりません。

Webライティングのルールは次の通りです。

• 結論を最初に。 重要なメッセージは最初の2段落、そして各段落の冒頭に置きます。
• 要点を捉えた見出し。 見出しだけでそのセクションの内容がわかるようにします。
• 短い段落とリスト。 手順は番号付きリスト、列挙は箇条書きにし、1段落は2〜4文に収めます。
• 太字は控えめに。 文全体ではなく、キーワードだけを強調します。
• 文字数を減らす。 詳細な情報は下層ページに分けます。

チェコの企業サイトによくある失敗

チェコの企業サイトによくある失敗は、最も価値のある場所に、訪問者に何も伝えない要素を置いてしまうことです。大半はファーストビューのテキストを直すだけで改善できます。

スライダーとポップアップ

自動回転するスライダーは今なお人気ですが、調査結果は否定的です。Jakob Nielsenは2013年、洗濯機の割引を見つけられなかったユーザーのテストを紹介しました。読み終える前にパネルが自動で切り替わってしまい、割引情報が表示されていたのは全体の約20%の時間だけだったのです。動く要素は広告を連想させるため無視されやすく、アクセシビリティも損ないます。次のパネルは、ユーザーが自分で操作したときにだけ表示すべきです。

訪問直後に表示されるポップアップも同様に有害です。Nielsen Norman Groupは、法律で義務づけられていない限り使わないよう推奨しています。Googleもページのコンテンツを隠さないよう助言しており、法的に必要な表示は例外としているものの、スマートフォンの画面半分を占領する必要はありません。アクセシビリティとの関連については、Webアクセシビリティと法律の記事で解説しています。

訪問者が広告から来た場合

訪問者が広告から来た場合、ページは広告の続きから正確に始まる必要があります。これをメッセージマッチ（message match）と呼びます。見出しと提供内容が広告と一致していれば、訪問者は正しいページに来たとすぐにわかります。

「冬用タイヤ・24時間以内に履き替え」という広告のリンク先が、自動車整備工場の一般的なトップページだった場合、訪問者は自分で該当メニューを探さなければならず、多くが離脱します。一方、冬用タイヤの価格と予約ボタンがあるページへ直接誘導すれば、迷わず手続きに進めます。

メッセージマッチはGoogleも評価しています。品質スコアに関するGoogle Adsのヘルプによると、ランディングページの利便性は品質スコアを構成する3要素の1つであり、広告の弱点を明らかにします。キャンペーン全体の準備については、成果を出すオンラインPPCキャンペーンの作り方で解説しています。

メッセージマッチでは次の4点を確認してください。

• 見出し： 広告で約束した内容を繰り返している。
• 提供内容： 価格、割引、条件が広告と一致している。
• 見た目： 色や画像が広告とつながっている。
• ボタン： 一般的なお問い合わせページではなく、約束した行動へ直接つながっている。

独立したランディングページが有効なケース

独立したランディングページ（landing page）は、一般的なトップページではカバーしきれない特定のオファーに有効です。目的を1つ、メインボタンを1つに絞り、メニューからの脇道をなくします。3つの異なるサービスを宣伝するなら、汎用的なトップページではなく、それぞれの広告から専用のランディングページへ誘導しましょう。

企業サイトのトップページを半日でテストする方法

サイトを知らない人を対象に行うWebサイトのユーザビリティテストは、成果の出る企業サイトの姿を確かめる最も低コストな方法です。5秒テストと、5人に行うタスクテストだけで十分です。どちらも有料ツールを使わず、半日で実施できます。

5秒テスト

5秒テストでは、ファーストビューが前述の5つの質問に答えているかを検証します。

1. サイトの顧客層に近く、そのサイトを知らない人を5人集めます。
2. トップページのファーストビューを5秒間見せます。
3. 画面を隠して質問します。「何をしている会社ですか？」「誰向けのサービスですか？」「次に何をしますか？」「何を覚えていますか？」
4. 回答を一言一句そのまま記録します。
5. 大半の人が何の会社かわからなかった場合は、ファーストビューを書き直します。

5人で行うタスクテスト

タスクテストでは、訪問者が探している情報を見つけられるかを確認します。3〜5個のタスク（「オイル交換の料金を調べてください」「面談の日程を予約してください」など）を用意します。参加者は自分の操作を声に出して説明しながらタスクを進めます。ヒントは出さず、迷った箇所を記録してください。

Jakob Nielsenは2000年の記事なぜ5人のユーザーテストで十分なのかで、5人テストすれば問題の約85%を発見できると述べています。そのため、1回で大人数を集めるより、修正を挟みながら5人ずつのテストを3回繰り返す方が効果的です。顧客層が異なる場合（法人と一般家庭など）は、各グループから3〜4人ずつテストしてください。

小規模サイトがA/Bテストに頼れない理由

A/Bテストは2つのパターンのページを比較する手法で、数千人規模の訪問者が必要です。コンバージョン率を2%から2.5%に引き上げたい場合、信頼水準95%・検出力80%で検証するには、1パターンあたり約14,000訪問（合計約28,000訪問）が必要になります。月間3,000訪問のサイトなら、9か月以上かかってしまいます。そのため小規模なサイトでは、実際の人に試してもらうテストの方が早く、費用も抑えられます。

ビフォー・アフター：ファーストビューの書き直し

架空の木工工房を例に、トップページのファーストビューを書き直してみましょう。

元のバージョンは抽象的すぎます。新しいバージョンは5つの質問すべてに答えています。

• 誰なのか：木工工房。
• 何を提供するか：オーダーメイドのキッチンと造作収納。
• 誰に・どこで：ブルノおよび近郊のマンション・戸建ての所有者。
• なぜそこか：施工事例の写真と顧客の評価。
• 次に何をするか：採寸を申し込む。

同じ手順で進めましょう。独立したわかりやすい見出し、条件を絞るサブ見出し、強力な証拠を1つ、そして行動を示すボタンを置きます。完成したら5秒テストで検証してください。

スマートフォンでの表示も確認します。スクロールしなくても最初の画面で見出し、サブ見出し、ボタンが見えており、大きな写真やCookieバナー、チャット画面に隠れていないことが重要です。ネットショップではこれが決済画面まで当てはまります。詳しくはネットショップでカゴ落ちが起きる理由の記事をご覧ください。

私たちは新しいWebサイトを調査と設計から始め、コーポレートサイトは3万チェココルナから制作しています。費用の目安はプロジェクト見積もりシミュレーターで計算できます。

よくある質問