巡白茶寮

【プロジェクトの背景】

日本茶の文化を伝えるサイトには、「静けさ」や「余白」が求められます。しかし、AIに「和風のサイトをつくって」と指示すると、どこかで見たような均一的なデザインになりがちです。「侘び寂びの不完全な美を、Webでどう表現するか」——これがこのプロジェクトの出発点でした。

同業種の複数のサイトを実際にブラウザで分析し、CTAの見せ方、余白の取り方、写真と言葉の関係性など、この業界特有のデザイン言語を読み解くところから始めています。そこから導いた設計方針を軸に、3つのペルソナの心理——「一人でも入れるのか」「手土産として間違いないか」「初めてでも大丈夫か」——に寄り添う情報設計を組み立てました。

【担当業務】

• デザイン作成
• サイト作成

【制作年月】

2026年4月

【工夫したポイント】

■「余韻」を生むための余白設計に根拠を持たせました
余白の数値を感覚で決めるのではなく、本文のline-height（1.9rem）を基準単位として、セクション間の余白をその倍数で設計しました。「なぜこの余白なのか」に答えられる状態をつくることで、AIとの対話でもブレない基準を維持しています。

■ 同業種のサイト分析からデザインの判断基準を導きました
複数の茶寮・日本茶サロンのサイトを実際にブラウザで分析し、業界のデザイン慣習を把握したうえで判断を下しました。たとえばCTAの色や形状は、当初AIが提案した塗りつぶしボタンではなく、分析結果から導いた控えめなスタイルに変更しています。デザインの正解を自分の感覚ではなく、市場の文脈から導くプロセスを大切にしました。

■ 複数の視点による品質チェックを仕組み化しました
マーケティング・ユーザー心理・技術的整合性など、複数の異なる視点からサイトを検証する仕組みを構築し、見落としを体系的に検出・修正しました。一人の視点では気づけない問題——コピーの重複、アニメーションの不具合、情報設計の矛盾——を、制作プロセスの中で確実に拾い上げることを意識しています。

■ 画像生成にも空間設計の意図を込めました
46枚の画像すべてに、用途・アスペクト比・伝えるべき感情を定義したプロンプトを作成し、ChatGPTで画像を生成しました。「カウンター席に座った視点から見える景色」「急須からお茶を注ぐ瞬間」など、来店者の体験を追体験させる写真を意図的に設計しています。同じ「店内写真」でも、1階カウンター・2階座敷・坪庭と空間を分けることで、似た写真の繰り返しを避けました。

■ モバイルファーストで設計し、デバイスごとに体験を分けました
メディアクエリをmin-widthで統一し、モバイルをベースにデスクトップを拡張する設計としました。FVのスライドショーはスマートフォンでは高さを抑えて画像のクロップを軽減し、PCでは画面全体で空間の広がりを見せています。「同じサイトをレスポンシブにする」のではなく、「デバイスごとに最適な体験を設計する」ことを意識しました。