珈琲 ゆうまど（架空のサンプル）

このサンプルについて

「珈琲 ゆうまど」は架空の店舗です。実在のお店やお客様の案件ではなく、ランディングページ（LP）の作り方を示すために用意した作例です。LP 本体の上部と下部にも、架空であることを明記しています。また、検索結果に出ないようにしています。

ページ内の画像は、すべて AI で生成した写真風の画像です。実在の店舗・人物・料理を撮影したものではありません。

想定した依頼

新しく開いた店で、地図アプリ以外に情報がない、という設定です。構成は「来店してもらう」ことに絞り、公開後に自分で直す場所は、メニュー・営業時間・お知らせに置いています。

想定した目的

• 近所に住む人や通勤途中の人に、お店の雰囲気と場所を伝える
• 最終的に「行ってみよう」と思ってもらい、お店までの行き方を確認してもらう

予約や通販のような複雑な仕組みは入れず、「来店してもらう」ことに目的を一つに絞りました。

ページの構成

1. ファーストビュー：キャッチコピー、「駅から徒歩3分」などの要点、店内の AI で生成した写真風の画像
2. 行動ボタン：「メニューを見る」「お店の場所を見る」。ページの途中でも、もう一度置いています
3. こんな時に（CASE 1〜4）：来店する人の悩みと、お店がそれにどう応えるか
4. 3つのこだわり：コーヒー・ケーキ・豆の量り売りを、AI で生成した写真風の画像つきで紹介
5. おすすめのメニュー：価格つきで3品に絞って紹介
6. 豆を買うまでの流れ（STEP 1〜4）
7. よくある質問：タップで開く形式
8. 営業時間とアクセス：簡単な案内図と一緒に、最後にまとめて配置

集客を目的とした LP でよく使われる「悩み → 解決 → 特長 → 流れ → よくある質問 → 行動」の順番にしています。読み進めるうちに来店のイメージが具体的になり、迷わずお店の場所までたどり着けるようにしました。

デザインで判断したこと

スマートフォンを基準にした

お店の LP は、SNS や地図アプリからスマートフォンで開かれることが多いと想定しました。まず狭い画面で組み、画面が広いときだけ横に並べる作りにしています。ボタンやリンクは指で押しやすい大きさを確保しました。

押せる場所をはっきりさせた

ボタンは太い枠線と影をつけて、押せることがひと目でわかる形にしました。ボタンの上には「モーニングは11時まで」のような吹き出しを添えて、押す理由も一緒に伝えています。

AI で写真風の画像を作り、軽くして使った

実在しない店舗なので、写真の代わりに AI で生成した写真風の画像を使いました。顔、文字、看板、ロゴ、ラベルは入れないようにしています。1枚ずつ、手元と指、湯気、持ち手、文字のように見える模様を確認しました。ファーストビューと窓際の画像は、3:2 に切り取っています。実案件では、お店の写真に差し替える前提の構成です。

AI で生成した写真風の画像は、画面の幅に合った大きさに変換して読み込むようにしています。最初に見えないものは、スクロールして近づいてから読み込みます。

色と書体で雰囲気を作った

写真に合わせて、背景は生成り、広い面はやわらかいベージュ、文字は焦げ茶にしました。途中の暗い帯とアクセスの欄は濃い茶です。ボタンは葉のような緑に白文字、価格の大きい数字は木の色にしています。木の色は小さい文字には使わず、からし色は線や印にだけ使っています。書体は Web フォントを読み込まず、端末に入っている太めのゴシック体を使うことで表示を速くしています。文字と背景の色の差（コントラスト）は、読みやすさの基準を満たすように調整しました。

チームサイトとは別の見た目にした

このサイトの他のページとはデザインを共有せず、LP だけで完結する作りにしています。実際の案件でお渡しするときと同じ形です。

品質の確認

Google の Lighthouse で、パフォーマンス・アクセシビリティ・ベストプラクティス・SEO の4項目を確認しています。SEO の項目のうち「検索エンジンに登録できるか」のチェックだけは、架空の店舗を検索結果に出さないようにしているため、確認の対象から外しています。