case 03
白井珈琲店
（WordPress）
架空の自家焙煎珈琲店のサイトです。ペルソナの設定からワイヤーフレーム、デザイン、コーディング、WordPress化、公開後の改善までを1件で通した事例です。
職業訓練中に制作し、現在も公開しています。
01
要件定義
お店は架空なので、ヒアリングの代わりにペルソナと目的を自分で置くところから始めました。
いちばん意識したこと
判断基準をコンセプト文1つにまとめ、以降の迷いをここに戻す。
街に根ざした自家焙煎コーヒー店の「店主のこだわりと人柄」を、落ち着いたアットホームな雰囲気で伝え、訪れた人がお店のファンになり、ECで豆を買いたくなるサイト。
- ペルソナ 近郊の街に住む30代後半〜60代。落ち着いた雰囲気を好み、街の雰囲気そのものを味わいたい人
- サイトの目的 雰囲気とこだわりを知ってファンになってもらい、豆のオンライン販売につなげる
- 最終CTA オンラインショップで豆を買う（サブ：お店に来る）
- 要る中身 働く人の顔が見える／お店のこだわりが見える／お店の人とコンタクトが取れる
- 導線の前提 年齢層が高めなので、文字は大きめ・迷わない一本道
02
設計
「世界観で足を止める → こだわりで信用する → 豆を見る → 買う」の順に、セクションを一本道で並べました。
特にこだわったところ
迷わせない。ゴールに近いものほど下に置いて途中で分岐させず、購入への入口はセクション末の1か所だけにしました。
- 並び ファーストビュー → こだわり → 豆 → 店舗のご案内
- 呼び方 豆のセクションは「SHOP」ではなく「BEANS」。まだ買えない段階で買える期待を持たせない
- 表記 ナビは英語4項目、各セクションは小さな英語ラベル＋大きな日本語見出し
03
デザイン
いちばん意識したこと
軸は「落ち着いた × アットホーム」。配色は深緑（背景）× ブラウン（内容）× クリーム（文字）のダークテーマで、緑と茶が補色関係になるよう選びました。
- フォント ロゴは筆文字、コピーは明朝、本文はゴシック
- 余白 8の倍数で統一
- 写真 暖色寄り・彩度低め。店主の顔と手元、焙煎機、豆
- 決め方の詳細は 作品詳細 に
04
コーディング
特にこだわったところ
要件定義で置いた最終CTAが、実際に押せるところまで作る。静的HTMLで終わらせず、WordPress化してショップを足しました。
- 静的HTML/CSSで組んで課題として提出（2026年5月）
- WordPressのオリジナルテーマとして作り直し（2026年8月）。豆はカスタム投稿タイプで管理画面から追加できる
- WooCommerceでショップを追加。練習用のため支払いは無効
- ページ構成 HOME／CONCEPT／BEANS（豆7種）／ACCESS／SHOP
05
公開後の改善
いちばん意識したこと
感覚の指摘は、数値に翻訳してから直す。「メリハリが足りない」を文字の大きさと太さの差に、「重い」を画像の量と描画の待ち時間に置き換えてから手を入れました。
- レビューの指摘3点 ファーストビューの手元がコピーに隠れる／文字のメリハリ／全体の統一感
- 表示速度 画像を軽くしても直らず、原因を切り分けて日本語Webフォントの読み込み方と特定
ページ全体の重さ
17 → 2.4 MB
画像は92%減
表示速度（パソコン）
78 → 99 点
100点満点
表示速度（スマホ）
56 → 83 点
5回測った中央値
読みやすさ
92 → 100 点
満点
推奨される作り方
96 → 100 点
満点
表示を止めていた時間
7,620 → 130 ms
描画の待ち時間
06
AIとの分担
自分が決めたこと
- ペルソナ・目的・最終CTA・コンセプト文
- セクションの並びとCTAの置き方
- 配色・フォントの方向と、案の採否
AIに任せたこと
- テーマファイルの下書きと修正
- 改善案をモックにして並べる
- 数値の実測と検算