サイトの初期画面｜提供内容と次の入口を読める構成

概要

サイトを開いた直後の画面には、事業の内容と次に読む入口を載せます。この記事では、端末ごとの表示範囲、抽象的なコピーの修正、大きな画像の読み込み、価格へのリンク、印象の感想と情報を探す操作を別に試す方法を解説します。

公開日2025年08月18日

更新日2026年10月13日

ページを開いた際に最初に見える範囲を、ファーストビューと言います。画面の大きさで範囲が変わるため、パソコンとスマートフォンで同じ配置が見えるとは限りません。

事業の説明と、詳しい内容へ進む入口を置きましょう。すべての印象が5秒で決まると固定せず、何が伝わったかと実際の操作を試します。

何を提供し、どんな場面で利用するかを記します。未来を変えるなどの抽象語だけで、仕事の説明を終えないでください。

大きな写真を置く場合も、文章との関係を示します。写真に写るすべての作業を提供するように見えるなら、実際のサービスへ説明を絞ります。

スマートフォンで見出し、写真、リンクがどこへ移動するかを試します。重要な説明が固定ヘッダーや大きな画像に隠れていたら、配置を直します。

表示の指標 LCP は、画面内の大きな画像やテキストが表示される時間を表します。LCP となる画像に遅延読み込みを使うと表示が遅れる場合があります。（web.dev — Optimize Largest Contentful Paint）

初めて見る人に、何のサービスかを答えてもらいます。その後、料金を探して相談する操作を試し、入口で迷った箇所を記録します。

印象の感想だけで問い合わせが増えると判断せず、説明と利用の不具合を直します。公開後の質問が増えた箇所は、初期画面と本文の関係も読み直してください。

SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。

事業の説明と連絡先を案内するホームページの作成に、ぜひ使ってみてください！

A: 表示する情報と利用する用事を試し、固定の秒数で成果を断定しません。

A: 画面幅と高さで表示範囲が変わるため、別に試します。

A: 伝える内容と読み込み、文章の配置を踏まえて決めます。

A: 表示時間の指標です。問い合わせや売上は別に記録します。