ファーストビューは提供するサービスと次の操作を伝える
ファーストビューは、ページを開いた時にスクロールせず見える範囲です。サービスサイトでは、何を依頼できるかを説明し、詳しい情報や問い合わせへ進む操作を示します。表示範囲は画面、ブラウザー、文字の設定によって変わるため、固定した一画面へすべての説明を収める前提にはしません。
抽象的な標語だけの冒頭より、提供する仕事を具体的に書く方法を検討しましょう。訪問者が料金を比較する必要があれば、料金の情報へ進むリンクも用意します。
ファーストビューを設計する｜サービスの説明と次の操作を示す
概要
ファーストビューの表示範囲は、画面の大きさや文字設定によって変わります。この記事では、サービスを説明する冒頭の文章、写真と文字の関係、次の操作の案内、狭い画面での表示と主な内容の読み込みを解説します。
公開日
更新日
冒頭の文章と写真で依頼できる仕事を説明する
冒頭には、提供するサービスと利用する場面を書きます。詳細な料金や対応範囲は、本文にある情報へつながる形にします。
標語を具体的なサービス説明へ置き換える
店舗の写真撮影を提供するサイトなら、店舗の料理と店内を撮影するサービスと書くことで、依頼できる仕事が伝わります。写真は実際の撮影例を使い、撮影料金を見るというリンクを添える構成が考えられます。
写真へ文章を埋め込む方法より、ページの文字として見出しや説明を掲載する方法を選びます。画像が表示されない時や、文字を拡大した時にも、依頼できる内容を読める構成が必要です。
狭い画面でも説明と操作を残す
文字の折り返しが増えると、パソコンで一画面に入った内容も縦に伸びます。文字を小さくする前に、重複する標語や装飾を見直し、本文へ続く順序を保ちます。
横幅を固定せず内容を折り返す
WCAG 2.2のリフローでは、縦に読む内容は幅320 CSSピクセル相当でも、情報や機能を失わず、原則として縦横両方のスクロールを求めないことが基準です。表や地図など二次元の配置が必要な部分には例外があります。冒頭の説明とボタンは、狭い幅で折り返して表示する方法を検討します。（W3Cのリフロー）
主な操作と、料金を見るなど比較のための操作は、文言と配置で役割を区別します。詳しくは ボタンとリンクの設計 を参照してください。
主な内容の表示と利用者の行動を点検する
冒頭の大きな画像が遅れて表示される時は、画像サイズや読み込み方法を調べます。LCPは、画面内の最も大きな画像や文字ブロックが描画される時間を測る指標です。web.devは、LCPの画像へ遅延読み込みを指定すると表示を遅らせると説明しています。下部の画像と同じ設定を一律に適用しないことが必要です。（web.devのLCP改善）
冒頭を変えた後は実際の操作を検証する
利用者がサービスの内容を把握し、料金や問い合わせを見つけられるかを観察します。止まった箇所が説明の不足なら文章を追加し、操作の所在が不明ならリンクの文言や配置を修正します。
問い合わせの変化を評価する時は、流入元や価格の変更も記録します。冒頭を変えた前後の件数だけで、その変更の効果を確定しないようにしましょう。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
サービスの説明と次の操作を掲載するホームページづくりに、ぜひ使ってみてください！
よくある質問
Q: ファーストビューにすべての説明を入れますか？
A: 冒頭では提供するサービスと次の操作を示し、料金や詳しい内容へつなげます。必要な説明は本文にも残します。
Q: スマートフォンでボタンが一画面に入らないと失敗ですか？
A: 画面や文字設定で見える範囲は変わります。内容の順序と操作の意味を保ち、文字を過度に小さくせず表示します。
Q: 大きな画像はすべて遅延読み込みにしますか？
A: LCPに使われる冒頭の画像は、遅延読み込みで表示が遅れることがあります。実際の読み込みを計測して設定を判断します。
Q: 冒頭の写真を変えれば問い合わせが増えますか？
A: 文章、料金、操作、流入元も結果に関わります。利用者の操作と送信完了を評価して、変更の採用を判断します。
