写真のギャラリーを8つの型に分け、AIへの指示文・動く見本・コードを載せています。
ギャラリーはどの型を選ぶか
ギャラリーの型は、写真の枚数と、読み手が写真を見て何を決めたいかで選びます。いくつもの事例から気になるものを探すのか、1つの物件や商品をじっくり見るのか、工事の前後を見比べるのかで、合う並べ方が変わります。手持ちの写真の比率がそろっているかどうかも、先に確かめておきます。
| こんなとき | 向いている型 |
|---|---|
| 事例や作品を同じ重さで並べて見比べてほしい | グリッド型 |
| 縦長と横長の写真が混在していて、どれもトリミングしたくない | メイソンリー型 |
| 写真を大きく使い、いちばん見てほしい1件を目立たせたい | キャプション重ね型 |
| 店内や部屋の写真を、場所を取らずに1枚ずつ順に見せたい | カルーセル型 |
| 1つの物件や商品を何枚もの写真で見せたい | サムネイル＋メイン画像型 |
| 一覧は小さく並べ、細かいところは大きく開いて見てもらいたい | ライトボックス型 |
| 事例が多く、種類ごとに探してほしい | カテゴリ切り替え型 |
| 工事や修理の前後でどれだけ変わったかを伝えたい | ビフォーアフター型 |
| 前後の2枚を重ね、つまみを動かして見比べてほしい・細部を虫眼鏡で見せたい | アニメーション集のビフォーアフタースライダー・ルーペズーム（画像の動き） |
マウスを重ねたときの写真やカードの動きは、アニメーション集のホバーの動き（枠の中で画像が少し大きくなる・カードがカーソルの向きに傾く）にあります。
最後の次に先頭が切れ目なく続くカルーセルの送り方は、アニメーション集のループの動き（無限カルーセル）にあります。
カテゴリ切り替え型は、並べ方そのものではなく、絞り込みのボタンを足す型です。グリッド型やメイソンリー型の一覧の上に載せて使います。
どの型でも守ること
- 写真を表示の大きさに合わせて縮める。カメラやスマホで撮ったままの写真は数MBあります。一覧には表示の幅の2倍くらいに縮めたものを使い、2段目より下には
loading="lazy"を付けます。 - img に width と height を書く。読み込み中も写真の場所が確保され、写真が届くたびに下の文字が跳ねなくなります。
- alt に写っているものを書く。題名をそのまま写すのではなく、画面を見られない人が聞いても何の写真か分かる中身にします。
- 写真に文字を焼き込まない。題名や説明は HTML の文字で添えると、検索や読み上げで読め、写真を差し替えるときも楽です。
- 載せてよい写真かを確かめる。お客様の家や人が写っている写真は、載せる前に許可を取り、表札や車のナンバーが写っていないかを見ます。
よくある質問 (FAQ)
表示する幅の2倍くらいの横幅が目安です。3列のグリッドで1枚が横360pxなら、720〜800pxに縮めます。高精細な画面でもぼやけず、ファイルも軽くなります。形式は WebP にすると、同じ見た目でさらに軽くできます。
事例ごとの詳しいページがあるなら、拡大よりもそのページへ案内するほうが親切です。詳しいページを作らず写真だけを見せる作品集なら、拡大表示を付けます。その場合は
dialog 要素で開き、Esc キーでも閉じる作りにします。
切り取ってよいならグリッド型で比率をそろえ、切り取りたくないならメイソンリー型にします。グリッド型では
object-fit: cover で枠に合わせて切りそろえます。主役が端に写っている写真は切れてしまうので、object-position で残す位置を決めます。
写真を見比べてもらうページでは、自動で切り替えないほうが向いています。じっくり見ているところで写真が勝手に変わると、さっきの1枚まで戻る手間がかかります。どうしても自動で動かすなら、止めるボタンを必ず付けます。