フォトグラフィ デザインインスピレーション
写真が全て。UIは額縁 -- これがフォトグラフィデザインの本質だ。500px、Unsplash、そして世界中のフォトギャラリーに共通するのは、インターフェースの存在を忘れさせる力である。漆黒の壁面に写真だけが浮かぶギャラリー空間を、デジタルで再現する。このページでは、Masonryグリッドとライトボックスを軸にした写真主体のデザインシステムを解説する。
このページの使い方
スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。
デザイン哲学 -- 写真が語る
写真が全ての色を提供する。UIは無色透明。
最高の写真ギャラリーでは、ナビゲーションバーの色を思い出せない。ボタンのデザインを語れない。記憶に残るのは写真だけだ。この「UIの消失」を実現するのが、ギャラリーダーク(#0a0a0a)を基盤とした額縁型デザインである。
なぜアクセントカラーがないのか
- 写真が色を提供する: 赤い夕焼け、青い海、緑の森 -- 写真そのものがカラーパレット
- UIは無彩色に徹する: 白と灰色のテキストのみ。額縁は黒
- ライトボックスの白: 写真を手に取る体験。プリントのような白い台紙
以下が、この哲学を体現したフォトギャラリーのプレビューである:
カラーパレット -- ギャラリーダークの階層
写真ギャラリーの背景はギャラリーダーク(#0a0a0a)。写真以外の全てが暗闇に沈む。
Background Surface Hierarchy
テキスト階層
ライトボックスモード
| Token | 値 | 役割 |
|---|---|---|
| bg-gallery | #0a0a0a | ギャラリー暗室 |
| bg-lightbox | #ffffff | ライトボックス白 |
| text-primary | #ffffff | ダーク上の主テキスト |
| text-on-light | #1a1a1a | ライトボックス上テキスト |
| text-muted | #888888 | メタデータ |
| border | rgba(255,255,255,0.08) | ボーダー |
タイポグラフィ -- 控えめな存在感
フォトギャラリーではタイポグラフィは脇役。細いウェイト、小さなサイズで写真を邪魔しない。
コンポーネント -- 写真のための部品群
Masonryグリッド
Masonry Grid Pattern
ポイント: 写真の高さは不揃い。オリジナルのアスペクト比を尊重する。ガター幅は8pxと最小限。写真同士の密度感がコレクションの一体感を生む。
フォトグラファープロフィール
ボタン
レイアウト -- Masonryグリッド構造
Page Structure
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/PHOTOGRAPHY.mdをプロジェクトのDESIGN.mdにコピー- ダミー画像（unsplash等）を準備
- Stitch に「この DESIGN.md に従って写真ギャラリーを作成してください」と指示
適したプロジェクト
- フォトグラファーのポートフォリオ
- ストックフォトサイト
- 写真共有プラットフォーム
- ギャラリー・展示サイト
不向きなプロジェクト
- テキスト主体のブログ
- ECサイト（商品情報が多い）
- ダッシュボード（データ密度が高い）
パフォーマンス注意
Masonryグリッドで大量の写真を表示する場合、仮想スクロール（Virtual Scroll）を検討してください。また、サムネイルはWebP形式で400px幅程度に最適化し、ライトボックス表示時にのみフル解像度を読み込むことを推奨します。