WORKS：ひだまりカフェ（Web Design & Branding）
人が集まるカフェは、Webの「安心感」が違う。
心に陽だまりを。
日常の喧騒を離れ、自分を取り戻す「静寂」の提供。
1. プロジェクト概要
地域密着型カフェのブランディングを目的としたWebサイト制作。
「一杯のコーヒーで、忙しい日常で冷えた心をふわりと温める場所」という世界観を大切に、感情の動きに寄り添ったページ設計を行いました。
［課題］
-
カフェサイト制作の実務を想定し、まずHTML/CSS/JavaScriptで静的サイトを構築したうえで、WordPressのオリジナルテーマとして再構築しました。
ページ設計・デザイン・運用性まで一貫して対応することで、実案件に必要な制作フローを習得することを目的としています。
特に、店舗系サイトで求められる「メニューの見やすさ」「アクセス情報の分かりやすさ」「問い合わせ導線の明確化」を再現することを目標としました。
-
ユーザーが店舗情報を迷わず確認できるよう、ナビゲーションをシンプルに整理し、HOME・MENU・ACCESS・CONTACT
の4構成に集約しました。
ファーストビューでは店舗の雰囲気が伝わるコピーを配置し、安心感のある世界観を演出。
WordPressで管理画面を最適化し、メニューやお知らせを簡単に更新できるようカスタムフィールドを設計しました。
スマートフォン閲覧時の操作性にも配慮し、レスポンシブ対応を丁寧に調整しています。
-
店舗系サイトにおける情報整理の重要性や、ユーザーが求める情報に最短でアクセスできる導線設計を実践的に学ぶことができました。
特に、WordPressでの更新性向上や、シンプルな構成で世界観を伝えるデザインのバランスなど、実務で求められるポイントを体系的にまとめられたことが成果です。
今後の飲食店・店舗系案件に活かせる制作フローを習得できました。
［解決］
［成果］
［担当・技術］
- 担当範囲：コンセプト設計 / ロゴデザイン / UI・UXデザイン / コーディング / WordPress（オリジナルテーマ開発、カスタム投稿）
- 使用技術：Illustrator, Photoshop, Figma, HTML5, CSS3, JavaScript, WordPress/PHP
2. 制作時間
設計から実装まで、役割ごとに時間を管理し、精度の高いデリバリーを実現しています。
- 総計：80時間 / 全4ページ（約10営業日＋調整期間）
- デザイン・構成・コーディング(768pxレスポンシブ対応含む)：60時間
- WordPress構築・実装：20時間
※インフラ業務で培ったタスク管理能力を活かし、計80時間で一気通貫した制作フローを構築。
3. 戦略的なビジュアル設計
① 配色：静寂と温もりのレイヤー
- サンドベージュ / Base (#FAF3E0): 陶器のような質感で空間の広がりを支え、安心感を醸成する「基調色」。
- コーヒーブラウン / Main (#6F4E37): 黒を避けることで威圧感を排除し、深い品質と「格」を表現する「主役色」。
- ソフトオレンジ / Accent (#F27A2C): 太陽の光や明日への活力を付加し、視線を自然に導く「強調色」。
② タイポグラフィ(文字の見せ方)：品格とやわらかさの両立
- Brand font(Playfair Display): 洗練された「品格」をプラスし、上質な空間を演出。
- Sub font(Zen Maru Gothic): 角の丸みで「陽だまり」のやわらかさを視覚化。
- Body font(Noto Sans JP): 誠実な情報をストレスなく届ける、可読性重視の設計。
4. ユーザー体験（UX）ストーリー
「安心 → 共感 → 信頼 → 行動」のフローを、独自の5ブロック構成で実装。
- 【感情】FV： やわらかな光と湯気のビジュアル。一瞬で「休める場所」だと直感させる設計。
- 【理解】思想： カフェの想いに触れ、ここで過ごす時間をゆっくりとイメージさせる余白。
- 【魅力】解決： 味や香りを想像させる商品提示（MENU）で、訪れたい気持ちを後押し。
- 【想像】信頼： 店内の情景を視覚化し、初めての来店でも迷わない安心感を醸成。
- 【行動】行動： 375px基準の操作性を追求。親指が届きやすい位置にボタンを配置。
5. デザイナーズ・ノート
本サイトは、地域住民が集い交流できるコミュニティカフェを想定し、 多世代が利用しやすい情報設計を意識して制作しました。
コーディングでは、情報量の多いサイトでも見やすさを保つため、 セクションごとに構造を整理し、可読性と保守性を意識した設計を行っています。 また、再利用性を考慮したクラス設計とすることで、更新や改修にも対応しやすい構成にしています。
レスポンシブ対応では、スマートフォンでの閲覧を重視し、 情報が整理された状態で表示されるようレイアウトや余白を調整しました。
さらに、WordPress化を前提とした構成とすることで、 お知らせやおすすめ情報などを管理画面から更新しやすい設計としています。
デザインの意図を理解し、再現性と保守性を両立したコーディングを意識しています。
今後はパフォーマンス改善やJavaScriptの実装強化にも取り組んでいきます。
※サンプルサイトのため、お問い合わせ機能は制限しています。
