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 両取り