ターゲット Target
落ち着いた空間でゆっくり過ごしたい20〜40代の女性・カップル
detail DETAIL
カフェサイト制作
落ち着いた雰囲気のカフェサイト制作しました。
Design
Coding
Responsive
プロジェクト概要 Project Overview
本プロジェクトはポートフォリオ用に制作した仮想案件です。
「Café Mocha」は、やさしい光と落ち着いた空間をコンセプトにした架空のカフェサイトです。
温かみのあるブラウンカラーと余白を活かし、居心地の良さや店舗の雰囲気が伝わるデザインを目指しました。
スマートフォンでは横スクロールUIを採用し、写真を大きく見せることで、カフェの世界観を直感的に感じられる構成にしています。
また、シンプルな情報設計と視認性を意識し、ユーザーがストレスなく閲覧できるレスポンシブサイトとして制作しました。
クライアント Client
業種
自家焙煎コーヒーと手作りスイーツを提供するカフェ
対象
落ち着いた空間で過ごしたい20〜40代の女性・カップル
強み
温かみのある店内空間と、こだわりのコーヒー・季節のメニュー
現状
SNSでの発信が中心で、店舗の雰囲気やメニュー情報をまとめて伝える場が少ない
-
制作期間
2026年4月18日〜2026年5月9日(21日)
-
使用技術
HTML / CSS / javascript
-
担当範囲
デザイン / コーディング
-
サイトURL
目的 Objective
SNSでの発信が中心で、店舗の雰囲気やメニュー情報がまとまって伝わりにくい状態でした。 カフェの世界観を伝えながら、来店前に必要な情報へスムーズに辿り着けるサイト制作を行いました。
Before
- 店舗情報やメニューがSNS上に分散していた
- 店内の雰囲気やこだわりが伝わりにくかった
- 営業時間やアクセスを確認しづらかった
After
- メニューや店舗情報を分かりやすく整理した
- 写真を大きく見せ、空間の魅力を伝えた
- 営業時間やアクセスへ辿り着きやすくした
課題 Problem
- SNSだけでは店舗の雰囲気や世界観が伝わりにくい
- メニュー・営業時間・アクセスなど、来店前に知りたい情報が探しづらい
- 写真や情報が分散しており、来店したくなる魅力をまとめて訴求できていない
解決策 Solution
- ファーストビューで店内写真を大きく見せ、カフェの雰囲気がすぐに伝わる構成に設計
- メニュー・営業時間・アクセスを整理し、来店前に必要な情報を確認しやすく配置
- Instagramやお問い合わせへの導線を設け、SNS閲覧から来店・相談につながる流れを強化
ポイント Point
- 写真を大きく配置し、カフェの雰囲気が伝わるデザイン
- ブラウン系の配色で、温かみと落ち着きを演出
- メニューや店舗情報を見つけやすいシンプルな構成
- スマホでは横スクロールUIを取り入れ、写真を楽しみながら閲覧できる設計
デザイン Design
カフェの温かみや落ち着いた雰囲気を伝えるために、ブラウン系のカラーを基調にデザインしました。 店内写真やメニュー写真を大きく配置し、来店前にお店の空気感をイメージしやすい構成にしています。
実装 Development
- スマホでの閲覧を想定し、モバイルファーストでコーディング
- メニュー・店舗情報・CTAなどを再利用しやすいクラス設計で管理
- 写真が多いサイトでも快適に閲覧できるよう、画像サイズと表示速度を意識して実装
成果 Result
仮想案件のため実測値はありませんが、カフェサイトの目的に対して以下の改善を想定して制作しました。
- 情報整理により、メニュー・営業時間・アクセスを来店前に確認しやすい構成に改善
- 雰囲気の訴求を意識し、写真や配色でカフェの世界観が伝わる設計に改善
- 来店導線を設け、Instagramや店舗情報から来店につながりやすい流れを設計