このワイヤーの特徴
何のページかが、最初の一文で伝わる
ページを開いた人は、最初に見える内容から「自分に関係があるページか」を判断します。見出しの一文で、誰に向けて・何を・どうするのかを具体的に書き、最初の画面で内容が伝わるようにしています。
画像がなくても、伝えたいことが崩れない
写真やイラストに頼ると、画像が読み込まれない環境や、合う写真が用意できない場合に、伝わる内容が弱くなります。見出し・補足・ボタンをすべてテキストで組み、画像がなくても成り立つようにしています。
次に何をすればよいかが、同じ画面の中で分かる
見出しだけで終わると、読み手は次にどこを見ればよいか迷います。見出しと補足のすぐ下に、主の行動（例：「無料で相談する」）と、控えめな次の行き先（例：「制作実績を見る」）を置いています。
続きがあることが分かる
最初の画面がきれいに区切れていると、ページがそこで終わっているように見えることがあります。このワイヤーでは、画面の下に次のセクションの見出しを少しのぞかせ、スクロールすると続きがあることを伝えています。
背景のつながりや、スクロールを促す表示で伝える方法もあります。
SPでも、主ボタンまで早くたどり着ける
SPでは見出しが長くなりやすく、ボタンが画面の外に押し出されがちです。見出しは語句のまとまりを保ちつつ大きさを調整し、ボタンは横いっぱいにして、早い段階で目に入るようにしています。
文字を小さくしすぎたり、内容を削りすぎたりはしません。
制作時のよくある失敗
抽象的なキャッチコピーだけで、何の会社か分からない
「未来をつくる」「想いをかたちに」のような言葉だけでは、何を提供しているのかが伝わりません。
キャッチコピーを使う場合も、誰に向けて何をするのかが分かる一文を、見出しか補足のどちらかに入れます。
見出しを画像の中の文字にしている
見出しを画像の中の文字だけにすると、文字の大きさの調整がしにくく、読み上げなどでも内容を扱いにくくなります。
見出しはHTMLのテキストで書き、ページの大見出し（h1）として扱います。
SPで、見出しだけで画面が埋まる
PCの見出しをそのままSPで大きく表示すると、見出しだけで画面が埋まり、ボタンが大きく下に押し出されます。
SP用に見出しの大きさを調整し、一般的な表示領域で主のボタンまで早くたどり着けるかを確かめます。
ただし、収めるために文字を小さくしすぎないようにします。
伝えたいことを詰め込みすぎる
強み、実績、サービス一覧、お知らせなどを最初の画面にすべて並べると、どれも伝わりにくくなります。
最初の画面では一番伝えたいことに絞り、ほかの内容は次のセクション以降に置きます。
見出しの折り返しが、言葉の途中で起きる
画面の幅によって「ホ／ームページ」のように語句の途中で改行されると、読みにくく、見た目も崩れます。
短い語句のまとまりは途中で分断されにくいよう調整します。
ただし、特定の画面幅だけを前提に改行位置を固定すると中間の幅で崩れやすいため、PC・タブレット・SPの複数の幅で確かめます。
よくある質問
キャッチコピーと説明文は、どちらを大きくすればよいですか?
読み手が最初に知りたいのは「何のページか」なので、その答えになっている文を大きくします。
印象的なキャッチコピーを使う場合は、すぐ下の説明文で、誰に向けて何をするのかを具体的に補います。
写真を入れないと、さみしく見えませんか?
文字の大きさや余白の取り方で、写真がなくても整った印象にできます。
サービスの様子や人柄を写真で伝えたい場合は、写真を主役にする画像主体型や、文章と写真を並べる左右分割型も選べます。
最初の画面に、ボタンはいくつ置けばよいですか?
主となる行動を1つに決め、そのボタンを最も目立たせます。
まだ問い合わせる段階でない人向けに、実績や料金などへの控えめなリンクを1つ添える程度が扱いやすいです。
最初の画面の高さは、画面いっぱいにしたほうがよいですか?
必ずしも画面いっぱいにする必要はありません。
画面の高さぴったりに作ると、ページがそこで終わっているように見えることがあります。
次のセクションが少し見える高さにして、続きがあることを伝える方法もあります。
