カフェのWebサイト
- サンプルサイトの会社名、店舗名、所在地、人物名、メニューや価格などは全て架空のものです。
- また、サンプルサイトのお問い合わせフォームは見た目のみで実際の送信はできません。
- 画面内で操作できます。
要件定義
【目的】
- ブランド認知向上
- 実店舗への来店促進
【ターゲット】
- メインターゲット: 20代後半〜40代の男女。チェーン店ではなく、こだわりの一杯や質の高い空間を求める層。日常の喧騒を離れ、読書や思索など静かな時間を過ごしたいと考えているユーザー。
- サブターゲット: 店舗周辺のオフィスワーカーおよび近隣住民。ランチタイムや休日のリフレッシュ場所を探している層。
【機能要件】
- レスポンシブWebデザイン: 特に外出先からの検索が多いカフェという業態を考慮し、モバイルファーストでのUI設計。
- Google Maps埋め込み
デザインや実装のポイント
【カラーリング】
- メインカラー: 深みのあるダークブラウン。焙煎されたコーヒー豆やエスプレッソを連想させ、信頼感と本格感を演出。
- ベースカラー: 落ち着いたベージュ・オフホワイト。コーヒーのミルクや、古紙のような温かみのあるテクスチャを感じさせ、リラックス効果を高める。
- 全体的に暖色系のアースカラーで統一することで「居心地の良さ」や「オーガニックな安心感」を訴求している。
【レイアウト & UI】
- タイポグラフィ: 見出しにはセリフ体（明朝体系）の欧文フォントを採用し、クラシックで上品な雰囲気を醸成。本文には可読性の高いサンセリフ体またはゴシック体を使用し、情緒と機能のバランスを調整。
- ストーリーテリング型レイアウト: ヒーローイメージでインパクトを与え、INFORMATION（最新情報）→ ABOUT（コンセプト）→ MENU（商品）→ GALLERY（雰囲気）と、ユーザーの興味関心を段階的に深めるシングルページ構成（縦スクロールを意識した構成）を採用。
【その他】
- 画像の選定と補正: カフェの魅力である「シズル感」を重視。コーヒーの湯気や質感、店内の照明の陰影が際立つ写真を選定・配置し、視覚的な訴求力を最大化。
- SNSでも頻繁に更新を行なっていることを想定して各種SNSリンクを設置。