写真共有サービスのギャラリー画面を設計しているとき、「画像の見せ方」についてこれほど考えたことはなかった。
Google Stitch でプロンプトを書いた。「画像ギャラリー。3列グリッド」——それだけで、整然と並んだサムネイルが生成された。見た目は悪くない。でもそれをチームに見せたとき、「縦長の写真と横長の写真が混在しているのに、全部正方形に切り取られていいのか？」という問いが出てきた。
その問いから始まって、グリッド・マソンリー・カルーセル・ライトボックスという「視覚的コンテンツの見せ方」の選択肢を、ひとつひとつ Stitch で試していった。
この記事は、その試行錯誤の記録だ。画像ギャラリーUIの設計を通じて、「コンテンツの形に合わせた見せ方」というテーマについて気づいたことを整理する。
結論から言うと
画像ギャラリーUIの選択は、「コンテンツのアスペクト比がばらばらか均一か」と「ユーザーはスキャンしたいか・じっくり見たいか」の2軸で判断できる。均一なサムネイルは整然としたグリッドに向き、多様なアスペクト比の写真はマソンリーに向く。Stitch でそれぞれのパターンを素早く生成して「どちらがコンテンツに合うか」を目で確認できることが、設計の判断を速くした。
画像ギャラリーUIの主なパターン
グリッド型（均一サムネイル）
グリッド型とは、すべての画像を同じサイズ（正方形または固定アスペクト比）のサムネイルとして均一に並べる表示形式のことです。Instagramのプロフィール画面が典型例だ。整然としていて視線が画像の内容に集中しやすい。
Stitch で「3列グリッドの画像ギャラリー。正方形サムネイル。ホバー時にタイトルオーバーレイが表示される状態」と指定したとき、クリーンなグリッドが生成できた。均一サムネイルの場合、Stitch は安定した精度でデザインを生成してくれる。
グリッド型が向いているコンテンツは、商品画像（ECサイト）、プロフィール写真一覧、アイコン素材集など、「横並びに比較しながら見たい」コンテンツだ。
マソンリー型（可変高さグリッド）
マソンリー型とは、列の数は固定しつつ各画像のアスペクト比を維持したまま縦方向に詰めていく表示形式のことです。Pinterest が代表例で、縦長・横長・正方形の画像が混在するコンテンツに向いている。
Stitch でプロンプトを「Pinterest スタイルのマソンリーレイアウト。2列。縦長・横長・正方形の写真が混在。各カード下部にタイトルと投稿者名」と書いた。マソンリーは列高さが不均一になるため Stitch の生成に若干のムラが出ることがあるが、全体的な雰囲気の確認には十分だった。
マソンリー型が向いているのは写真・イラスト・ポートフォリオなど、縦横比が様々なビジュアルコンテンツだ。アスペクト比を強制的に統一するグリッド型より、元の画像の良さを活かせる。
カルーセル型（横スライド）
カルーセル型とは、画像を横方向にスライドして順番に見せる表示形式のことです。ランディングページのビジュアル展示、商品の複数画像表示、オンボーディングのスクリーンショット紹介などで使われる。
Stitch で「商品詳細ページのカルーセル。現在3枚目の画像を表示中。左右に矢印ナビゲーションボタン。下部に5つのドットインジケーター（3つ目がアクティブ）」と指定した。カルーセルの「現在何枚目か」の状態を静止画として表現するとき、ドットインジケーターのアクティブ状態を明示することが精度を上げるポイントだった。
ライトボックス（全画面表示）の設計
ライトボックスとは何か
ライトボックスとは、ギャラリーの画像をクリックすると背景が暗くなり画像が大きく表示されるUIパターンのことです。ページ遷移なしに画像を大きく確認できる設計で、写真ギャラリー・ポートフォリオサイト・ECサイトの商品画像などで広く使われる。
Stitch でライトボックスを生成するとき、「ライトボックスが開いた状態。背景は暗くなっており（半透明の黒）、中央に画像が大きく表示されている。右上に閉じるボタン（×）。左右に前後の画像へ移動する矢印ボタン。下部に画像番号（3/12）とサムネイル一覧」と指定した。
この指定で、ライトボックスの「開いた状態」の静止画が生成できた。「ギャラリー通常状態」と「ライトボックスが開いた状態」の2画面を Play ボタンで繋ぐことで、クリック → 全画面表示という体験の流れを示すプロトタイプが作れた。
ライトボックスで設計すべき「状態」
ライトボックスにも複数の設計すべき状態がある。
- 開いた直後の状態：最初に選んだ画像が中央に表示されている
- 次の画像に移動した状態：右矢印を押して次の画像に切り替わった状態
- 最初または最後の画像の状態：左矢印（または右矢印）が非アクティブになっている状態
- 画像の読み込み中状態：大きい画像の読み込みに時間がかかっている場合のローディング表示
- 閉じる直前の状態：×ボタンにホバーした状態（明確なクリッカビリティを示す）
これらを Stitch で個別に生成して並べることで、ライトボックスの設計仕様書として使えた。
「視覚的コンテンツの見せ方」で気づいたこと
コンテンツのアスペクト比が「見せ方」を決める
設計を通じて最も大きな気づきは、「どんなレイアウトを使うかより、コンテンツがどんな形をしているかが先」ということだ。
縦長の写真を正方形に切り取ると、写真の上下が切れて被写体が欠けることがある。横長のバナー画像をマソンリーに入れると、縦に潰れて見栄えが悪くなる。UIのレイアウトをコンテンツの形に合わせるのが正しい順序で、逆にコンテンツをレイアウトに合わせようとすると、必ずどこかで無理が生じる。
Stitch でグリッドとマソンリーの両方を生成して並べることで、この違いを視覚的に確認できたことが、「コンテンツの形に合わせた見せ方」という設計原則を体で理解するきっかけになった。
サムネイルの「切り取り位置」も設計の問題だ
グリッド型で正方形サムネイルを使う場合、元画像をどこで切り取るかが重要になる。中央から切り取ると、縦長写真では人物の頭と足が切れることがある。
Stitch でプロンプトを書くとき、「サムネイルは上部中央からクロップ（人物の顔が中央に来るよう）」と指定すると、フォーカルポイントを意識したサムネイルデザインが生成できた。ただし実際の実装では CSS の object-position プロパティや AI による自動フォーカル検出を使う必要があるため、「サムネイルの切り取り仕様」をデザインコメントとして明示しておくことが重要だ。
モバイルでの画像ギャラリー設計
列数を減らすか、スワイプ型に変えるか
PCで3列グリッドのギャラリーをモバイルで表示すると、サムネイルが非常に小さくなって見づらくなる。モバイル対応の主な方法は2つだ。
列数を減らす方法は、PCで3列なら、タブレットで2列、スマートフォンで1列に変えるレスポンシブ設計だ。各画像が十分な大きさで表示され、タップ操作もしやすくなる。
スワイプ型に変える方法は、スマートフォンでは1枚ずつ横スワイプで閲覧するカルーセルに切り替える設計だ。写真1枚を大きく見せたい場合（ポートフォリオ・旅行写真）に向いている。
Stitch でモバイル版を別プロンプトで生成するとき、「スマートフォン版。1列グリッド。各サムネイルの高さは画面幅の60%。タップでライトボックスが開く」と指定した。このプロンプトでモバイル最適化されたギャラリーデザインが生成できた。
FAQ
Q1. Google Stitch でマソンリーレイアウトを正確に生成できますか？
完全に正確なマソンリーは難しい場合があります。縦高さが異なる複数の画像が詰められた見た目は生成できますが、実際のマソンリーアルゴリズム（各列の高さを計算して最適な位置に画像を配置する）を Stitch が完全に再現するわけではありません。プロトタイプとして「マソンリーらしい見た目の確認」には使えますが、実際の実装では Masonry.js・CSS columns・CSS Grid などを使う方が確実です。
Q2. 動画サムネイルを含むギャラリーUIはどう設計しますか？
動画サムネイルには「再生ボタン（▶アイコン）のオーバーレイ」を必ず含める設計にします。Stitch でプロンプトに「サムネイル中央に半透明の白い再生ボタンアイコンが重なった動画サムネイル」と指定すると、動画コンテンツであることを視覚的に示すデザインが生成できます。動画の長さ（1:23）をサムネイル右下に表示する設計も、YouTubeのように広く使われています。
Q3. 画像ギャラリーの「並び順」はどう設計すればいいですか？
並び順の選択肢として、新着順・人気順・カテゴリ別・ランダムがあります。どれをデフォルトにするかはサービスの目的次第です。写真共有サービスなら新着順、ECなら人気（売れ筋）順が一般的です。ユーザーが並び順を変えられるソート機能を設けるかどうかも、使用頻度を想定して判断することをお勧めします。Stitch でソートボタン付きのギャラリーヘッダーを生成することで、この機能の設計を視覚的に確認できます。
Q4. 画像の遅延読み込み（Lazy Loading）はUI設計段階で考慮しますか？
設計段階ではローディング中のプレースホルダーを設計に含めることが重要です。画像が読み込まれる前の「グレーのブロック」または「ぼかし付きの低解像度プレビュー（ぼかしが徐々に解除されるLQIP）」の状態を Stitch で生成しておくと、開発チームへの仕様伝達がスムーズです。「ギャラリーグリッド。上段の画像は表示済み、下段はグレーのプレースホルダーが表示されている遅延読み込み中状態」というプロンプトが有効です。
Q5. ユーザーが画像をアップロードして追加するギャラリーUIはどう設計しますか？
ギャラリーに「画像を追加」ボタンまたはドラッグ&ドロップゾーンを設ける設計が一般的です。Stitch で「ギャラリーグリッドの最初の枠（左上）に『＋画像を追加』ボタン」というプロンプトを書くと、画像追加UIを含むギャラリーデザインが生成できます。アップロード中の状態（プログレスバー付きサムネイル）も別途設計しておくことをお勧めします。
Q6. 画像ギャラリーのアクセシビリティで最低限対応すべきことは？
主に3点です。1つ目は各画像に alt テキストを設定すること（スクリーンリーダーが「写真1」と読み上げるだけでは不十分で、写真の内容を説明するテキストが必要）。2つ目はキーボードで画像を選択・ライトボックスを操作できること。3つ目は画像の色コントラストが読みにくくなる場合のテキストオーバーレイの対応です。Stitch の設計段階でこれらをコメントとして書き添えておくと、開発引き継ぎ時の品質が上がります。
注意点・失敗しやすいポイント
1. グリッドで「切り取り方針」を決めずに設計を進めない
正方形サムネイルを使うグリッドの場合、元画像をどの位置で切り取るかは設計上の決定事項だ。「とりあえず中央で切る」だと被写体が切れることがある。フォーカルポイント（人物の顔・商品の主役部分）を基準に切り取る仕様をデザインに注釈として含めること。
2. ライトボックスの「背景クリックで閉じる」動作を設計に含める
ライトボックスは×ボタン以外に、背景（暗い部分）をクリックしても閉じられるのが一般的なUXパターンだ。この動作を設計段階で決めておかないと、実装後に「背景クリックで閉じられない」というフィードバックが来る。Stitch のデザインに「背景（暗い部分）クリックで閉じる」という動作仕様をコメントとして明記しておくこと。
3. 大量の画像ギャラリーのパフォーマンスを設計段階で意識する
画像が100枚以上あるギャラリーをすべて一度に読み込むとページのパフォーマンスが大幅に低下する。「ページネーションで20枚ずつ」または「スクロールしたら追加読み込み（無限スクロール）」のどちらにするかを設計段階で決め、Stitch でそのUIパターン（ページネーションまたはローディングスピナー）も生成して確認しておくことをお勧めする。
まとめ
Google Stitch で画像ギャラリーを設計してみて気づいたのは、「コンテンツの形に合わせた見せ方を選ぶ」ことが、レイアウト設計の出発点だということだ。
均一なサムネイルにはグリッド、多様なアスペクト比にはマソンリー、順番に見せたい場合はカルーセル——この選択肢を Stitch で素早く生成して比較できるようになってから、「どのレイアウトが合うか」の判断が感覚ではなく根拠を持った判断になった。
視覚的コンテンツは、適切な「器」に入れたとき初めて輝く。その器を選ぶのが、ギャラリーUI設計の核心だと思っている。
