このワイヤーの特徴
写真の数と雰囲気を、ひと目で見渡せる
同じ比率の写真を格子状に並べ、事例の数と全体の雰囲気をひと目で見渡せるようにしています。
写真の下に、題名と説明を添える
写真の下に題名と「戸建て・東京都」のような短い説明を添え、写真だけでは分からない内容を文字で伝えています。
比率をそろえて、並びを崩さない
写真を同じ比率の枠に収め、はみ出す部分は切り取って、行の高さをそろえています。
並びがそろうと、1枚ずつ見比べやすくなります。
SPでは、2列に並べる
SPでは4列だと写真が小さくなりすぎるため、2列に並べています。
題名は折り返しても読める大きさにしています。
制作時のよくある失敗
写真だけで、題名や説明がない
写真だけでは、何の事例か、どこで行ったのかが伝わりません。
題名と短い説明を文字で添えます。
大事な部分まで、切り取ってしまう
比率をそろえるために切り取ると、写真の大事な部分が欠けることがあります。
切り取る位置を写真ごとに調整するか、切り取らない型を選びます。
写真が重く、一覧の表示が遅い
大きな写真をそのまま縮小して並べると、読み込みが遅くなります。
一覧用の小さな写真を用意し、画面の外の写真は後から読み込みます。
写真の alt が、すべて同じ
すべての写真の alt が「施工事例」のように同じだと、読み上げでは区別できません。
写真の内容が分かる言葉にするか、題名と同じ内容なら重ならないように書き分けます。
よくある質問
写真の比率は、どれにすればよいですか?
撮影する写真に多い比率に合わせます。
横長の4:3や3:2がよく使われます。
大切なのは、一覧の中で比率を1つにそろえることです。
写真を押したら、拡大するのと、詳しいページへ移るのと、どちらがよいですか?
事例ごとに説明のページがあるならページへ移り、写真を大きく見せたいだけなら拡大する形が向きます。
拡大する場合は、画像拡大型 モーダルを参考にしてください。
何件ずつ表示すればよいですか?
一覧を整えて見せたい場合は、列の数の倍数（4列なら8件や12件）にすると最後の行までそろいやすくなります。
最後の行の枚数が少なくても、使い勝手の上で問題になるわけではありません。
それ以上の件数は一覧のページへ案内します。
