このワイヤーの特徴
話題の直後に置き、読み手の関心とつながる
記事の途中で「自分のサイトでも起きているかもしれない」と感じたときが、次の行動を考えるきっかけになります。その話題を説明した段落のすぐあとに、話題に合った案内を置いています。
本文を読む流れを止めない
途中に大きな案内を挟むと、本文の続きを読む邪魔になります。案内は1〜2行の文と、ボタンのような形のリンク1つにとどめ、段落と段落の区切りに置いています。
本文の参考リンクと見分けがつく
本文の中の参考リンクと同じ見た目だと、行動の案内だと気づかれません。「この記事に関連するご相談」というラベルと枠で本文から区切り、参考リンクとは役割の違いが分かるようにしています。
行き先を、話題に合わせる
どの案内も汎用の問い合わせページにつなぐと、押した人は何を相談すればよいのかを考え直すことになります。「表示の確認を相談する」のように、話題に合った相談や関連サービスへつないでいます。
SPでは、文とボタンを縦に並べる
SPで横に並べると、文もボタンも窮屈になります。文の下にボタンを横いっぱいに置き、押しやすくしています。
制作時のよくある失敗
段落や文の途中に割り込ませる
説明の途中に案内を挟むと、話の流れが切れ、本文も案内も読みにくくなります。
話題の説明がひと区切りついた段落のあとに置きます。
話題と関係のない案内を、決まった間隔で入れる
どの記事にも同じ案内を一定の間隔で入れると、広告のように見えて読み飛ばされやすくなります。
案内は、その位置で話している内容に合うものだけを置きます。
1つの記事に、何度も入れる
案内が続くと、記事そのものが宣伝のように見えてしまいます。
必要な箇所だけに置いて同じ案内を繰り返さないようにし、一般的な記事では1〜2か所程度を目安に、記事の長さや話題の数に合わせます。
末尾のCTAとは役割を分けます。
本文と見分けがつかない、または派手すぎる
本文と同じ見た目だと気づかれず、反対に広告のバナーのように派手にすると避けられます。
ラベルと枠で本文から区切りつつ、記事の雰囲気から浮かない程度の強さにします。
画像だけのバナーで作り、文言が読み取れない
文字を画像にしたバナーは、読み上げで内容が伝わらず、SPでは文字が小さくなりがちです。
CTAの意味やリンク先を画像の中の文字だけに頼らず、HTMLのテキストでも伝えます。
装飾だけの画像には、重複した説明を付けないようにします。
よくある質問
1つの記事に、何か所まで置いてよいですか?
話題が大きく変わる区切りごとに置くことを検討します。
一般的な記事では1〜2か所程度を目安にし、記事の長さや話題の数に合わせます。
記事の末尾には記事全体を受けたCTAを置くことが多いため、本文中の案内とは役割を分けます。
本文の中のテキストリンクとは、何が違いますか?
テキストリンクは、詳しい説明や関連する記事へ参考として案内するためのものです。
この型は、読み手に相談や申し込みなどの行動を案内するためのものです。
役割が違うため、ラベルや枠で見た目も区別します。
記事ごとに文言を書き分けるのは大変ではありませんか?
すべての記事で一から書く必要はありません。
記事の話題をいくつかに分け、それぞれに合う案内を数種類用意しておき、記事ごとに選んで使う方法があります。
バナー画像で作ってもよいですか?
作ることはできますが、CTAの意味やリンク先は、画像の中の文字だけに頼らずHTMLのテキストでも伝えるほうが、読み上げやSPでの読みやすさの点で扱いやすくなります。
画像そのものがリンクになる場合は、リンク先が分かる代わりのテキストを付け、装飾だけの画像には重複した説明を付けないようにします。
