このワイヤーの特徴
要点だけを読んで、先へ進める
最初の2段落で要点を伝え、残りは「続きを読む」で開くようにしています。
じっくり読みたい人は続きを、要点だけでよい人は下の情報へ、それぞれの読み方を選べます。
続きがあることが、見て分かる
見せている文章の最後を薄くぼかし、すぐ下にボタンを置いています。
文章がそこで終わりではないことが、ボタンを読む前から伝わります。
閉じたあと、ボタンの位置に戻る
続きを開いたあとはボタンの文言が「閉じる」に変わり、閉じたときにボタンが画面の外にあれば、ボタンの位置まで戻します。
読み終えた場所を見失いません。
続きの文章も、ページ内検索で見つかる
続きの段落は別のまとまりにして hidden=”until-found” で隠しています。
ページ内検索で続きの言葉が見つかると、自動で開いて表示します。
制作時のよくある失敗
文の途中で、見た目だけ切っている
高さを決めてはみ出した部分を隠す作りでは、ページ内検索で見つかっても、その文字が見えないままになります。
切る位置は段落の区切りにし、続きは別のまとまりにして隠します。
判断に欠かせない情報を、続きに入れる
料金や解約の条件などが続きの中にあると、開かない人には伝わりません。
読み手の判断に関わる情報は、折りたたまずに表示します。
ボタンの文言が「…」だけ
記号だけでは、押すと何が起きるのか分かりません。
「続きを読む」「閉じる」のように、操作を文字で示します。
見せる部分が短すぎる
1〜2行だけでは、続きを読む価値があるかを判断できません。
要点が伝わるところまで、少なくとも1〜2段落は見せます。
よくある質問
続きを読むボタンは、SEOに影響しますか?
続きの文章がページのHTMLに含まれていれば、検索エンジンにも伝わると考えられます。
開くたびに読み込む作りにすると、伝わりにくくなる可能性があるため、文章はページに含めたまま隠します。
どのくらいの長さから、折りたたむとよいですか?
長さよりも、その文章を読む人の割合で決めます。
多くの人が読む文章は折りたたまずに表示し、一部の人がじっくり読む文章で、下に大切な情報が続く場合に折りたたみます。
ぼかしの表現は必要ですか?
必須ではありませんが、文章がそこで終わりではないことを、ボタンを読む前から伝えられます。
ぼかしを使う場合も、ボタンの文言で続きがあることを示します。
