クラフトソーダ専門店PRISM
| サイト種別 | EC複合サイト（WordPress） |
| 目的 | 来店促進とSNSフォローを両輪に。加えてECで『家でも色で選ぶ』体験を広げる |
| ターゲットユーザー | 20〜30代、感度高め、気分転換を大切にする層 |
| 制作環境 | WordPress / 自作カスタムテーマ / Local（ローカル開発環境） |
| 対応デバイス | スマートフォン優先（SP/PC レスポンシブ対応） |
| 製作期間 | 約4週間 |
コンセプト
「気分は、色で選ぶ。」
お酒じゃないからこそ、気分は色で切り替える。6色のクラフトソーダを、味ではなく”今日の気分の色”で選ばせるノンアルコール専門店のブランドサイト。選んだ色がサイト全体の差し色に切り替わる「UI染色」を核に、店舗・EC・席予約をひとつの世界観でつなぎました。
ターゲット
20〜30代、感度高め、気分転換を大切にする層。お酒を飲まない/飲めない人も含む。ギフト需要も対象にしています。
デザイン
1. 「色で選ぶ」を機能にした ─ UI染色ギミック
ヒーローの気分カラーセレクターで色を選ぶと、CSS変数ひとつで差し色・セクション背景・ボタンまでサイト全体が0.7秒かけて染め替わる。ポップな色使いを装飾ではなく「選ぶ体験」そのものとして実装。
2. ヒアリングで仕様が動く工程を再現
当初はLP企画だったが、ヒアリングで「オンライン販売」「席予約」の要望が判明し、EC複合サイトへ再設計。仕様書をv1.0→v2.0へ改訂し、特商法・利用規約などEC必須の法務ページまで含めて再構成した。
3. 色は鮮やか、骨格は端正
彩度の高い6色を大胆に使いながら、余白・グリッド・タイポグラフィはミニマルサイトと同じ規律で設計。明るいアクセント色（黄・桃）でも可読性を保つよう、テキスト用の暗め派生色をCSS変数で自動生成する仕組みを導入。
4. 運用まで設計
メニュー・季節限定色・店舗情報・ファーストビュー（画像/動画切替）・ロゴ・EC商品を、すべて店舗側が管理画面から更新できる構成。デモの生成画像は本番写真にそのまま差し替え可能。
担当箇所
要件定義からサイト設計、ワイヤーフレーム（PC／SP）、WordPressによる実装までを一貫して担当しました。クライアントドキュメントやペルソナシートといった上流の設計資料から積み上げることで、見た目だけでなく「なぜそうしたか」を説明できる制作を心がけています。
使用技術・ツール
WordPress（オリジナルテーマ自作）／Local by Flywheel（ローカル開発環境）／Smash Balloon（Instagramフィード連携）／Contact Form 7（お問い合わせフォーム）／HTML・CSS・PHP／Excel・HTML（設計ドキュメント・ワイヤーフレーム作成）
制作物一覧
- クライアントヒアリングシート
- ペルソナドキュメント
- サイト仕様書
- コンテンツマップ
- ディレクトリマップ
- ワイヤーフレーム（PC／SP）
- オリジナルWordPressテーマ
- 管理画面マニュアル