FV-004 公開  更新

根拠添え型 ファーストビュー

最初の画面の見出しのすぐ下に、主張を裏付ける数字や導入企業の例を添えるファーストビューの設計です。
数字には時点と条件を添え、算出方法へのリンクを置くことで、読み手はその場で根拠を確かめられます。
根拠は見出しより目立たせず、主張に直結するものに絞ることで、何のサービスかと、なぜ信頼できるかを同時に伝えます。

ワイヤーフレーム(PC)

根拠添え型 ファーストビュー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

根拠添え型 ファーストビュー SP版ワイヤーフレーム

SP版の特徴

  1. 数字は画面幅に合わせて並べる:根拠を読み取れる文字の大きさを保つため、このワイヤーでは3列から1列の縦並びに切り替えています。
  2. 注記は数字のすぐ下に:狭い画面でも、数字の時点と条件がその場で分かるようにしています。
  3. ロゴは数を減らす:ロゴで画面が埋まらないよう、代表的なものに絞っています。
  4. 主ボタンは横いっぱい:根拠より先に目に入る位置で、押しやすい大きさにしています。

採用前の判断ポイント

向いているケース

  • 見出しの主張を裏付ける、時点と条件を示せる数字がある
  • 導入数や利用者の変化など、実績が選ばれる理由になっている
  • 掲載の許可を得た導入企業のロゴや事例がある
  • BtoBのサービス、SaaS、比較検討されやすい商材のトップページなど

向かないケース

  • 時点や条件を示せる数字が、まだない(言葉で内容を伝える一文訴求型が向きます)
  • 写真や空間の雰囲気が、選ばれる理由の中心になっている(画像主体型が向きます)
  • 数字を定期的に更新する担当や手順を決められない(古い数字が残り、信頼を損ねます)

このワイヤーの特徴

見出しの主張を、すぐ近くで裏付けられる

「電話の予約受付を半分にする」のような主張は、それだけでは本当かどうか判断できません。見出しのすぐ下に、主張を裏付ける数字を並べ、最初の画面の中で根拠まで確かめられるようにしています。

数字の時点と条件が、その場で分かる

数字だけを大きく見せると、いつの、どんな条件での数字なのかが分かりません。数字の下に時点と算出の条件を添え、詳しい算出方法へのリンクも置いています。

根拠を、見出しより目立たせない

実績の数字やロゴを大きく並べすぎると、何のサービスなのかという見出しが埋もれます。根拠は見出しと主ボタンの下に置き、このワイヤーでは数字を3つに絞っています。
1つの強い数字だけで十分な場合もあります。

数字と、導入企業の例を組み合わせる

数字だけでは、どんな規模や業種の会社が使っているのかが伝わりにくいことがあります。数字の下に、どのような企業で導入されているかの例を控えめに並べています。
自社に近い会社かを判断してもらいたい場合は、業種・規模・用途まで示した事例を次のセクションに置きます。

SPでは、数字を読み取れる大きさで並べ直す

SPで3つの数字を横に並べたまま小さくすると、数字・単位・説明が窮屈になり、読み取りにくくなります。このワイヤーでは、数字と説明を1行ずつ縦に並べ、読み取れる文字の大きさを保っています。
導入企業の例は数を減らして表示しています。

制作時のよくある失敗

見出しと関係のない数字を並べる

創業年数、社員数、拠点数など、見出しの主張と関係のない数字を並べても、主張の裏付けにはなりません。
見出しで伝えたいことを裏付ける数字を選びます。

時点や条件のない数字、古いままの数字を載せる

いつの数字か、どう数えたのかが分からないと、読み手は判断できません。
数字には時点と条件を添え、定期的に更新します。
更新できない数字は載せないようにします。

許可を得ていないロゴを並べる

取引先や導入企業のロゴは、相手の許可を得ずに載せると問題になることがあります。
掲載の許可を得たロゴだけを使い、許可の範囲や期間も記録しておきます。

根拠を詰め込みすぎて、見出しが埋もれる

数字を10個、ロゴを数十社並べると、最初の画面が根拠で埋まり、何のサービスかが伝わりにくくなります。
最初の画面では主張に直結する根拠に絞り、ほかの実績は次のセクション以降で見せます。

「No.1」「業界最高」など、根拠を示せない表現を使う

比較を伴う「No.1」や「業界最高」は、根拠が示されていないと、読み手に誤解を与えるおそれがあります。
表示内容を裏付ける合理的な根拠を確かめ、比較対象・調査対象・調査方法・調査時点など、読み手が根拠を確かめるために必要な条件を示します。
第三者の調査を使う場合も、表示内容と調査結果が対応しているかを自社で確かめます。
表示の考え方は、消費者庁の資料なども確認します。

よくある質問

どんな数字を載せればよいですか?

見出しの主張を裏付ける数字を選びます。
導入数や利用者数のような規模を示す数字、導入前後の変化を示す数字、継続率など利用状況を示す数字などが考えられます。
満足度を示したい場合は、アンケートによる満足度のように、調べ方が分かる形で別に示します。
どの数字も、時点と条件を添えて載せます。

「No.1」と書いてもよいですか?

表示内容を裏付ける合理的な根拠があり、表示内容と調査結果が対応していることを確かめる必要があります。
特に「顧客満足度No.1」のような表示では、比較対象や調査対象、調査方法が適切かも確かめます。
第三者の調査会社に依頼した場合も、表示する側が確かめる責任は残ります。
表示の考え方は、消費者庁の資料などの原文を確認し、必要に応じて専門家に相談します。

導入企業のロゴを載せるときに、気をつけることはありますか?

掲載の許可を得たロゴだけを使います。
許可を得た範囲(Webサイトだけか、資料にも使えるか)や期間を記録し、取引が終わった場合の取り下げの手順も決めておきます。

まだ実績の数字が少ない場合は、どうすればよいですか?

無理に数字を載せる必要はありません。
資格や認定、具体的な事例、担当者の経歴など、数字以外の根拠を示す方法もあります。
根拠を示しにくい段階では、言葉で内容を伝える一文訴求型も選べます。

同じパーツのPattern

ファーストビューの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開