UI WRITING
短くする前に、意味をそろえる。
見た目が整ったページでも、見出しが抽象的で、ボタンに「こちら」としか書かれていないと、読者は何を得られるのかを判断しにくくなります。文章は最後に流し込む材料ではなく、画面の使い方を伝える要素です。
この記事では、サービス紹介ページを例に、見出しとボタンの言葉を一緒に整える方法を紹介します。文言例は架空のサービスを想定しています。実際の提供内容や画面の動作に合わせて使ってください。
1. ページの役割を一文で書く
最初に「誰が、何を理解し、何を選ぶページか」を書きます。たとえば「初めてサイト制作を依頼する担当者が、相談できる内容を理解し、初回相談へ進むページ」です。見出しやボタンに迷ったら、この一文へ戻ります。
相談が目的なのに、資料請求、採用情報、キャンペーン申込をすべて同じ強さで見せると、文章だけを直しても整理しきれません。主な行動と補助的な行動を先に決めましょう。
2. 見出しだけで話の流れを読めるようにする
本文を一度隠し、見出しだけを上から読みます。「私たちの想い」「選ばれる理由」「新しい未来」のような見出しばかりなら、具体的な内容をつかみにくいかもしれません。
「更新作業まで相談できるサイト制作」「公開後の運用に合わせて選べるサポート」のように、本文で説明できる内容へ置き換えます。提供していない支援や確認できない成果を、魅力的に見せるために加えないようにします。
3. ボタンは動作と到達先から考える
| 曖昧になりやすい表現 | 内容に合わせた例 |
|---|---|
| 詳しくはこちら | 制作プランを比較する |
| 送信 | 入力内容を確認する（確認画面へ進む場合） |
| 無料でスタート | 無料相談を申し込む（相談申込の場合） |
クリック後に本当に起こることを書くのが基本です。確認画面を挟むなら、その段階を伝えます。すぐ利用できると読める文言なのに、実際には担当者からの連絡を待つ設計なら、期待のずれが生まれます。
4. 不安への説明を近くに置く
相談フォームなら、返信の目安、入力に必要な情報、申込後の流れなどが判断材料になります。すべてをボタンへ詰め込まず、近くの補足文に分けます。「通常2営業日以内に返信」と書くなら、実際に運用できることを確認しましょう。
「無料」「簡単」という言葉を増やすより、何が無料で、何を入力するかを示します。重要な条件を小さな注記へ押し込まず、行動前に読める位置に置くことも大切です。
5. 長さは画面に置いて確かめる
文章が正しくても、スマートフォンで不自然に折り返すと読み取りにくくなります。実際の文字サイズと幅で置き、見出し、本文、ボタンを続けて読みます。短縮するときは、対象や動作など判断に必要な語を残し、重複する説明から削ります。
- 見出しが本文の内容を説明しているか。
- ボタンだけ読んでも行動を想像できるか。
- 押した後の画面と文言が一致するか。
- 補足文と利用条件が食い違っていないか。
練習では、既存のページから見出し三つとボタン一つを抜き出してください。本文を読まなくても流れが分かるか、ボタンの意味が見出しとつながっているかを確認します。文章を整えることは、画面の目的を整えることでもあります。