このワイヤーの特徴
画像と抜粋で、開く前に内容の見当がつく
題名だけの一覧では、読み手はどれを開けばよいか判断しにくくなります。左に画像、題名の下に2行までの抜粋を置き、開く前に内容の見当がつくようにしています。
画像の比率をそろえ、行の高さを安定させる
画像の縦横の比率がばらばらだと、行の高さが変わり、一覧が読みにくくなります。画像は同じ比率の枠に収め、はみ出す部分は切り取って行の高さをそろえています。
抜粋は2行までにして、一覧の長さを抑える
抜粋を長く出すと、1件の高さが増えて一覧を見渡せなくなります。
抜粋は2行で切り、続きは各お知らせのページで読んでもらう形にしています。
SPでは、画像を小さくして抜粋を省く
SPで画像と抜粋をそのまま出すと、1画面に1〜2件しか入りません。
SPでは画像を小さくし、抜粋を省いて、題名で見比べられるようにしています。
制作時のよくある失敗
画像がないお知らせに、何も表示しない
画像のないお知らせだけ枠が空くと、一覧が崩れて見えます。
画像がない場合に使う共通の画像を決めておき、枠の大きさを保ちます。
ただし、画像が内容の理解に役立たないお知らせが多いなら、無理に画像を付けず、日付リスト型を選ぶほうが自然です。
画像に文字を入れて、題名の代わりにする
画像の中の文字は小さくなると読めず、読み上げや検索でも伝わりません。
題名や日付は画像に入れず、文字で表示します。
抜粋に、本文の書き出しをそのまま使う
本文の書き出しが「いつもご利用いただき」などのあいさつだと、抜粋から内容が分かりません。
抜粋は要点を1〜2文で書く欄を設けて、本文とは別に用意します。
画像が重く、一覧の表示が遅くなる
大きな画像をそのまま縮小して表示すると、一覧の読み込みが遅くなります。
一覧用の小さな画像を用意し、画面の外にある画像は後から読み込むようにします。
よくある質問
画像の alt には、何を書けばよいですか?
画像が題名と同じ内容しか伝えていない場合は、空の alt にして読み上げの重複を避ける考え方があります。
画像にしかない情報がある場合は、その内容を短く書きます。
抜粋は、自動で作ってもよいですか?
本文から自動で作ると、あいさつや前置きが抜粋になりやすい傾向があります。
要点を書く欄を設けて、手で書いた文があればそれを使う形にすると、一覧で内容が伝わりやすくなります。
画像の比率は、どれにすればよいですか?
サイトで使う写真に合わせて決めます。
横長の3:2や16:9がよく使われます。
大切なのは、一覧の中で比率を1つにそろえることです。
