Category · ギャラリー
ギャラリーのデザイン例とAIプロンプト
写真ギャラリー・作品コレクション・ビジュアル展示のAIプロンプト集。マスon ry・ピン留め・カードグリッドなど、画像主役のレイアウト集をパターン別に。
ギャラリーについて
視覚情報を中心とするページ。写真家・アーティスト・ECのカタログ・旅行記録など、画像が主役で文字は補佐に回ります。グリッドの均等並び、Masonry の不揃い積み、ピン留めボード、ライトボックス展開など実装パターンが豊富です。同じサイズを並べると、どれを先に見ればいいか教えてくれません。大きさそのものを編集の言葉として使うこと。暗い地は写真を光源に変えます。カラム数を減らすときは各タイルの span も同時に縮めてください。画面外へはみ出します。
よく使われる場面
- 写真家・カメラマンの作品集
- 旅行・観光メディアのフォトログ
- ECサイトの商品カタログ
- アーティスト・イラストレーターのギャラリー
- イベント記録・年次レポートのビジュアル
成功のポイント
- 1枚目は最高品質の引きの強い画像を
- サムネイルとフルサイズの2段階解像度
- loading=lazy + decoding=async で速度確保
- Masonry なら CSS columns or grid の auto-flow で
- alt テキストを必ず書いてSEOと a11y 両取り
