申込みの案内の帯が、公開したページで読めなかった 3 つの理由

ページの最後にある申込みの案内は、ページを読み終えた人が次に何をするかを決める所です。2026 年 6 月 9 日の朝、当社のサービスの紹介サイトで、この案内の帯に 3 つの不具合が見つかり、同じ朝のうちに直しました。文字が薄くて読めない、上下の余白が無い、見出しが言葉の途中で折れる。どれも、公開したページで見つかったものです。

紹介サイトには、5 つの部門ごとのページがあり、どのページの最後にも、紺の帯に白い文字で次の 2 行を置いていました。

まず、資料を見てみてください。 気に入ったら、無料相談をお申し込みいただけます。

その下に、資料と相談のボタンが並びます。見出し・補足の文・ボタンの 3 つで、読み終えた人に次の一歩を示す帯です。ページの最後に申込みの案内を置く並べ方は、LP の 10 の節の記事に書いた考え方と同じです。

1 つ目：見出しと補足の文が、薄く沈んで読めませんでした

ページの側で使っていた名前と、見た目の設定（CSS）に書かれていた名前が違っていたのが原因です。画面を下に動かすと文字がふわっと現れる動きも付けていたため、その最初の薄い状態が、そのまま残っていました。補足の文の白は、もともと薄めにしていたので、読みやすい濃さまで上げました。文字と背景の明るさの差は、用語集のコントラスト比の項目で説明しています。

直したあとは、公開したページを開き、新しい見た目の設定が読み込まれていること、設定の中に直した名前が入っていることを確かめました。

2 つ目：帯の上下に余白が無く、見出しが帯の上の端に張り付いていました

1 つ目を直したあと、私が公開したページを見て、帯の上下に余白が無いことに気づきました。文字が読めるようになって、目に入った崩れです。見出しが帯の上の端に張り付いていました。

帯に上下の余白を足し、画面の幅に合わせて余白の量が変わるようにしました。

3 つ目：見出しが、言葉の途中で折れていました

余白を足したあと、見出しの折れ方も直しました。幅によっては、「ください」の最後の「い。」だけが次の行に落ちていました。短い見出しで、最後の 1〜2 文字だけが行を変えると、読む人の目がそこで止まります。

見出しを「まず、資料を」と「見てみてください。」の 2 つのかたまりに分け、幅が足りないときは、かたまりの切れ目で折れるようにしました。会社のページの同じ帯（「まず話を」「聞いてみてください。」）も、同じように直しました。直したあとは、公開したページを画面の写しに撮って確かめています。

直しの記録は、朝の 6 時 39 分から 7 時 19 分までの間に残っています。

3 つとも、作った人の画面では気づきにくい不具合でした

次の表の理由は、当社の見立てです。

申込みの案内は、ページのいちばん下にあるので、作る人ほど見る回数が少ない所です。ランディングページの最後の帯は、読む人にとっては次の一歩を決める所なので、公開のたびに目で見ます。

公開したあとに見ること

帯の見出しと補足の文は、読む人が押すかどうかを決める短い言葉です。ボタンのそばの短い言葉は、用語集のマイクロコピーの項目にまとめています。言葉をどれだけ練っても、文字が読めなければ届きません。

最後の項目は、2 つ目と 3 つ目の不具合から足しました。1 つを直すと、それまで隠れていた崩れが見えることがあります。何をコンバージョンとして数えるページかが決まっていれば、その入口のボタンと案内は、公開のたびにいちばん先に見ます。

フォームと申込みの案内を含むページを、当社が作ってお渡しする場合は、AI顧客管理マーケティングシステム構築のページに進め方を載せています。