制作概要
大阪府香里園にあるカフェのホームページ制作。
以前制作したホームページのリニューアル・継続支援としてご依頼いただき、店舗運営や導線設計も踏まえながら制作を担当しました。
また、店頭ツールや販促物とも連携し、Web単体ではなく店舗体験全体を意識した設計を行っています。
制作の目的
新規来店客の獲得と、店舗の雰囲気や商品の魅力をWeb上でも伝えることを目的に制作しました。
店舗ではInstagramを中心に情報発信していましたが、更新頻度や情報整理に限界があり、来店前のお客様から「メニュー表は見られますか？」という声も多くありました。
そのため、メニューや店舗情報をいつでも手軽に確認できる環境を整え、来店前の不安や迷いを減らすことを目指しました。
ターゲット
・施設利用の合間に気軽に立ち寄るユーザー
・テイクアウトや家族分の購入を検討しているユーザー
・事前にメニューを確認して注文をスムーズに済ませたいユーザー
・SNSやWebから店舗情報を確認したいユーザー
・学生〜年配の方まで、幅広い来店層
課題
・SNSだけでは情報整理や更新に限界があった
・来店前にメニューを確認したいというニーズが存在していた
・施設利用者を含め、幅広い年齢層にとって見やすい情報設計が必要だった
・競合店舗が多く、店舗の魅力や世界観を伝える工夫が必要だった
設計意図
本サイトでは、「迷わず情報に辿り着けること」と「お店に行きたくなること」の両立を軸に設計しました。
施設内店舗という特性上、若い世代だけでなく子どもから年配の方まで利用されることを想定し、装飾性を優先するのではなく、誰でも直感的に閲覧できるシンプルな構成を採用しています。
特にTOPページは最も時間をかけた部分で、各セクションへの導線を整理しながら、情報量が多くなりすぎないよう余白や写真の配置を調整しました。
また、商品の魅力が直感的に伝わるよう、写真の見せ方や情報量のバランスを意識し、閲覧後に「食べてみたい」と感じられる体験づくりを目指しています。
デザインの工夫
・ナチュラルで温かみのあるカラー設計
・年齢を問わず読みやすいフォント選定
・余白を活かし、ごちゃつかないレイアウトを設計
・商品写真を主役にし、ボリューム感や魅力が伝わる見せ方を調整
・写真加工では輪郭や質感が伝わるようレタッチを行い、白背景と組み合わせることで商品を視認しやすく設計
実装のポイント
・レスポンシブ対応でスマートフォン閲覧を最適化
・軽量な構成で表示速度を意識
・お知らせ更新機能を導入し、店舗運用に対応
・公開後の更新・保守管理まで継続して担当
・店頭QRとの連携により、来店前・店内の情報導線を強化
使用技術
HTML / CSS / JavaScript / Astro
担当範囲
ヒアリング
情報整理
ワイヤーフレーム設計
UIデザイン
画像調整
コーディング・実装
公開対応
運用提案
更新・保守管理
店頭販促導線との連携
制作を通して意識したこと
単にホームページを制作するのではなく、店舗運営やお客様の利用シーンまで考えながら設計を行いました。
長期間にわたって店舗側と対話を重ね、情報整理や導線設計を繰り返しながら、お店の魅力が自然に伝わる形を目指しました。
期待される効果
・来店前のメニュー確認による注文体験の向上
・SNS以外の情報接点の創出
・店頭QRを活用したスムーズな情報閲覧
・店舗イメージや認知向上
・運用しやすい情報発信基盤の構築
今後の改善・展望
今後は、シンプルさを維持しながら、スクロール連動や適度なアニメーションを取り入れ、より印象に残る体験設計にも挑戦したいと考えています。
視認性と楽しさを両立した、長く使われるWeb体験づくりを目指していきます。
サイトを見る
実際の公開ページは下のボタンからご覧いただけます。
公開後の更新・保守対応も継続して担当しています。
※掲載時点から内容が変更されている場合があります。