このワイヤーの特徴
画像で、話題を目に留めてもらえる
文字だけの一覧は、読み飛ばされやすくなります。画像を大きく見せるカードにして、写真のある話題に目を留めてもらえるようにしています。
カードの大きさをそろえ、並びを崩さない
題名の長さでカードの高さが変わると、格子の並びが崩れます。同じ行のカードは高さをそろえ、画像の比率も1つにしています。
カード全体を、1つのリンクにする
カードの中に画像・題名・ボタンのリンクを別々に置くと、同じ行き先へのリンクが重なります。カード全体を1つのリンクにし、読み上げでも1回だけ伝わるようにしています。
SPでは、先頭の1件だけを大きく見せる
SPで同じ大きさのカードを縦に並べると、画像ばかりが続いて長くなります。
SPでは先頭の1件を大きく、残りを横長の小さなカードにして、最新の話題を目立たせながら全体を短くしています。
制作時のよくある失敗
カードの中に、同じ行き先のリンクを複数置く
画像・題名・「詳しく見る」がそれぞれリンクだと、キーボードで操作する人は同じ行き先を何度もたどることになります。
カード全体を1つのリンクにするか、リンクを題名の1つにまとめます。
日付を小さく薄くしすぎる
見た目を優先して日付を目立たなくすると、古いお知らせが新しく見えてしまいます。
また、日付と種類が見えないカードは、ブログや実績の一覧と区別がつきません。
日付と種類は、カードの中で見える位置に、読める大きさと濃さで表示します。
カードの数が、格子の列の数と合わない
3列の格子に4件を並べると、最後の行に1件だけが残って並びが崩れて見えます。
一覧を整えて見せたい場合は、表示する件数を列の数の倍数にするとまとまりやすくなります。
画像のないお知らせが、カードの中で目立たない
カード型では画像のないカードが空いて見え、話題の重要さと関係なく目立たなくなります。
画像がない場合の共通の画像を決めておきます。
よくある質問
カード型と、サムネイル付きリスト型は、どう使い分ければよいですか?
カード型は画像で目を留めてもらうことに向き、件数が少ないトップページなどで使われます。
サムネイル付きリスト型は、日付・題名・抜粋を読み比べることに向き、件数の多い一覧ページに合わせやすい形です。
PCでは、何列にすればよいですか?
コンテンツの幅によりますが、3列がよく使われます。
4列以上にすると1枚が小さくなり、題名が細かく折り返しやすくなります。
カードに、抜粋を入れたほうがよいですか?
カードの高さが増え、並びがそろいにくくなるため、このワイヤーでは入れていません。
抜粋で内容を伝えたい場合は、サムネイル付きリスト型が向くと考えられます。
