ギャラリーの型の選び方
ギャラリーの型は、「写真をどう並べるか」「読み手にどう探してもらうか」「何を目立たせるか」の3つで変わります。問い1で並べ方を選び、問い2で探し方を、問い3で見せ方を加えます。写真の拡大は、画像拡大型のモーダルで扱っています。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：写真を、どう並べますか？
写真の比率がそろっているかどうかで決まる問いです。
問い2：読み手に、どう探してもらいますか？
写真の数が増え、種類が分かれてきたときに加える型です。
問い3：何を目立たせますか？
仕事の成果の見せ方や、置く場所で決まる問いです。
| 目立たせたいこと | 向く型 |
|---|---|
| 施工の前と後の違い | ビフォーアフター型 |
| トップページで、代表の事例を大きく見せたい | キャプション重ね型 |
| 1つの対象の写真を何枚も、ページを長くせずに見せたい | サムネイル＋メイン画像型 |
ギャラリーの型の比較
| 型 | 役割 | 置く場所 | 向く状況 |
|---|---|---|---|
| グリッド型 | 並べ方 | 事例の一覧、トップページ | 比率をそろえ、数と雰囲気を見渡してもらいたい |
| メイソンリー型 | 並べ方 | 作品や料理の一覧 | 写真を切り取らずに見せたい |
| カテゴリ切り替え型 | 探しやすさ | 事例の一覧 | 種類が分かれ、自分に近い事例を探してもらいたい |
| ビフォーアフター型 | 変化の見せ方 | 事例の詳しいページ | 施工の前後で成果を見せたい |
| キャプション重ね型 | 見せ方 | トップページ | 代表の事例を大きく目立たせたい |
| サムネイル＋メイン画像型 | 1つの対象の見せ方 | 商品・物件・事例の詳しいページ | 1つの対象の写真を何枚も見てもらいたい |
すべての型に共通する設計の原則
ギャラリーの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 写真の切り替えは読み手の操作に任せ、自動で切り替えない
- 写真だけでは内容や違いが伝わりにくい場合は、題名や短い説明を文字で添える。添える場合も、写真に文字を焼き込まない
- 題名は常に表示し、マウスを乗せたときだけにしない
- 写真の alt は内容が分かる言葉にし、題名と同じ内容なら重ならないように書き分ける
- 写真の縦横の比率を先に指定し、読み込み中に配置が動かないようにする。一覧用の小さな写真を使い、画面の外の写真は後から読み込む
- 掲載の許可とプライバシーに配慮し、必要に応じて住所・表札・人物など特定につながる情報を隠す
- 施工の前後などを比べる写真は、同じ位置・同じ条件で撮る
- 写真の上に文字を重ねる場合は、いちばん明るい写真の上でも文字と背景のコントラストを確かめる
- 写真と事例は実際のものに合わせる。決まっていない場合は「表示例」と明記する
組み合わせの例
- リフォームや外構の会社：トップページはキャプション重ね型で代表の事例を見せ、事例の一覧はカテゴリ切り替え型で絞り込み、各事例のページでサムネイル＋メイン画像型とビフォーアフター型を使う
- 飲食店や作品を見せるサイト：メイソンリー型で写真を切り取らずに並べ、押したら画像拡大型 モーダルで拡大する
- 制作実績の一覧：グリッド型で同じ比率の写真を並べ、件数が増えたらカテゴリ切り替え型の絞り込みを加える
よくある質問
写真は、何枚くらい載せればよいですか?
トップページでは4〜8枚程度に絞り、それ以上は一覧のページへ案内する形がよく使われます。一覧のページでは、種類で絞り込めるようにすると、枚数が多くても探しやすくなります。
写真に題名や説明は、必要ですか?
写真だけでは、何の事例か、どこで行ったのかが伝わらないことがあります。短い題名と説明を文字で添えると、読み手が自分に近い事例を見つけやすくなります。
お客様の住まいや店舗の写真は、そのまま載せてよいですか?
掲載の前にお客様の許可を得ます。必要に応じて、住所・表札・人物など特定につながる情報を隠します。
写真を押したときの動きは、どう決めればよいですか?
事例ごとの説明のページがあればそこへ移り、写真を大きく見せたいだけなら拡大する形にします。拡大する場合は、画像拡大型のモーダルを参考にしてください。