喫茶店のランディングページ（架空のサンプル）

このサンプルについて

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

ページ内のイラストは、すべて AI で生成した画像です。実在のお店や人物を描いたものではありません。

想定した目的

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

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

ページの構成

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

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

デザインで判断したこと

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

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

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

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

AI でイラストを作り、軽くして使った

実在しない店舗なので、写真の代わりに AI で生成したイラストを使いました。文字・看板・ロゴが入らないように指示して、手の形などの崩れがないかを1枚ずつ確認しています。実案件では、お店の写真に差し替える前提の構成です。

画像は Astro の機能で、新しい圧縮形式（AVIF）に変換し、画面の幅に合った大きさを選んで読み込むようにしています。最初に見えないイラストは、スクロールして近づいてから読み込みます。

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

生成りの背景、焦げ茶の文字と枠線、からし色のアクセントで、朝の喫茶店らしい明るさにしました。書体は Web フォントを読み込まず、端末に入っている太めのゴシック体を使うことで表示を速くしています。文字と背景の色の差（コントラスト）は、読みやすさの基準を満たすように調整しました。

ポートフォリオとは別の見た目にした

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

品質の確認

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