Cafe Rosso
神保町の路地裏にひっそりと佇む深煎り専門カフェのHP。AI生成のシネマティック写真とセリフ体タイポグラフィを重ね、クラシックな喫茶の空気を立ち上げる。
想定クライアントと課題
神保町・古書店街の路地裏で18年営業している、店主こだわりの深煎り専門カフェ。常連客に愛されてきた一方で、ここ数年「サイトが古い」「スマホで開きにくい」「営業時間が見つけにくい」という声が出ていました。
新規顧客は SNS よりも「神保町 カフェ クラシック」「神保町 深煎り」といった検索流入が中心。サイトの第一印象が、来店判断に直結する状態でした。
特に課題だったのは：
- テンプレ的なカフェサイトでは、店の「雰囲気」（アンティーク家具・古書の香り）が伝わらない
- ストック写真をそのまま使うと、他のカフェサイトと差別化できず、店の品位と乖離してしまう
- 営業時間・定休日・住所が、どのページでも探しにくい
提案理由
クラシックな喫茶店の佇まいは、ビジュアルとタイポグラフィを重ねて立ち上げる方針にしました。ストック写真にはない、Cafe Rosso 独自の世界観を表現するために、AI画像生成（Google Imagen 4）で店のキー画像3枚を独自に作成しています。
- Hero：店内全景の写真を全画面で配置し、暗いオーバーレイ越しに大きなロゴタイポを重ねる
- Our Story：エスプレッソと開いた本の静物を挟み、「読書のための喫茶」というステートメントを視覚化
- The Room：アンティーク椅子と赤い花のディテール写真を、テキストと左右スプリットで配置
写真だけに頼らず、セリフ体・装飾罫線（❦）・イタリア語の引用が層を重ねる構成にすることで、装飾要素を増やしても上滑りしない、品位のあるサイトに仕上げました。
セクション順は Hero → Story → Menu → The Room → Hours & Access。訪問者は「お店の空気を浴びる → 物語を読む → メニューを見る → 細部を覗く → 行き方を確認する」という自然な動線で読み進められます。
デザイン意図
- タイポ：Playfair Display（英文）と明朝体（和文）の二重奏。装飾性のあるイタリック大文字で「クラシック」を担保
- 色：深紅 Rosso（#7a2a1f）・コーヒー（#2d1b14）・クリーム（#faf3e6）の3色。イタリアの古いカフェのポスターから着想
- ビジュアル：AI生成（Imagen 4）の3枚。Hero（店内全景・16:9）、Story（エスプレッソ静物・3:2）、The Room（椅子のディテール・1:1）。アスペクト比に変化を持たせ、ページにリズムを生む
- 装飾の罫線・点線・記号（❦） を控えめに添える。アンティークなプリント感
- イタリア語の格言を引用文として配置（“Il caffè deve essere nero come la notte…”）— 店の世界観に没入させる仕掛け
- 角丸ゼロ、ボタンは矩形のみ。装飾的なのに、構造はあくまでシャープ
技術選定理由
| 領域 | 選定 | 理由 |
|---|---|---|
| フレームワーク | Astro 5 | 静的サイトに最適。雰囲気重視のサイトこそ表示速度が体験を決める |
| スタイリング | Tailwind CSS v4 | 多色運用（rosso・coffee・cream）をCSS変数で一元管理 |
| 英文タイポ | Playfair Display（Google Fonts） | クラシックなセリフ体の定番。preconnectで初期表示を最適化 |
| 和文タイポ | Hiragino Mincho ProN | 端末標準。和文の重厚さを担保しつつ、Webフォント読み込みを抑制 |
| ビジュアル | Google Imagen 4 でAI生成 → WebP書き出し | ストック写真の凡庸さを回避。世界観を完全コントロール、ライセンスもクリア |
| デプロイ | Cloudflare Pages | 国内CDN配信。画像3枚で約1MBあるが、初期表示はモバイル4Gでも軽量 |
実装の特徴は、ブランド世界観に完全フィットしたAI生成画像を、ストック写真の代わりに採用したこと。「クラシックなイタリアン喫茶」という具体的な世界観を、他のカフェサイトと被らないオリジナルのビジュアルで表現できる ― これは AI 画像生成が普及した今だからこそ実現できる選択肢です。
将来、実店舗で撮影した写真に差し替えたいという要望にも柔軟に対応できる構成にしてあります（public配下の画像3枚を入れ替えるだけで反映）。