WEB
自主制作
概要
ABOUT
- 概要
-
“昔ながらの喫茶”を今の感性でアップデートする、カフェ＆コミュニティスペース「Cafe Kissa」のウェブサイトを制作しました。
コーヒー・スイーツ・軽食に加え、アート展示・ワークショップ・コミュニティラウンジなど“場づくり”としての価値を持つ店舗の世界観を、Webサイトを通じて可視化しています。 - 制作期間
-
企画・情報設計1週間デザイン2週間コーディング1週間合計：5週間
- 使用ツール
- Figma / HTML / CSS / JavaScript / GitHub Pages
もっと詳しく
DETAILS
- 課題
-
- 店舗そのものの魅力（“コーヒー＋文化の交差点”というコンセプト）が、従来サイトで十分に表現されておらず、「喫茶店」という一面的な印象に留まっていた。
- メニュー・カルチャー・ギャラリーといった複数のコンテンツが混在しているにもかかわらず、情報導線が整理されておらず来訪者が「何を案内してくれるのか／次に何をすればいいのか」が明確でなかった。
- スマートフォン閲覧時の操作性・視認性も最適化されておらず、イベントや投稿など「動きのあるコンテンツ」の訴求が弱かった。
- 目的
-
- 店舗のブランド価値を引き上げ、「日常の喫茶から一歩先のカルチャーを楽しむ場」へと認識を変える。
- メニュー紹介・イベント告知・ギャラリー閲覧などを通じて、来訪者の滞在時間・回遊率を向上させ、店舗への“来店”や“参加”への動線を強化。
- SNS・ギャラリーなど外部チャネルとも連携しつつ、Webサイトを「ブランド発信の中核」として機能させる。
- ターゲット
-
- コーヒーやスイーツを楽しみつつ、「カフェでの時間」に＋αを求める20〜40代の男女。
- 例えば、リモート作業・打ち合わせ・クリエイティブワークの場としてカフェを利用する人。
- また、アート展示・ワークショップを探しているカルチャー志向・コミュニティ志向の人も想定。
- 渋谷・都心近郊で「居心地の良さ」と「刺激」が両立する場所を探している層。
- デザイン
-
カラー
落ち着いたトーンを基調にしつつ、喫茶の“温かさ”と場の“活気”を感じさせるため、ナチュラルなブラウン・クリーム系をアクセントに採用。
ビジュアル表現トップビューに大きな写真を配置し、「喫茶を、もっと自由に」というキャッチを通じて“場の芽生え”を表現。ギャラリー・イベント紹介を視覚的に誘導。
レイアウト情報量が多いコンテンツ（メニュー、カルチャー紹介、ギャラリー）を整理するため、セクションごとに余白と背景色の変化を取り、視点の切り替えをスムーズに。
UI演出ナビゲーションを固定表示・スクロール演出を滑らかに行うことで、カフェで過ごすような“リラックスして巡る”体験を意識。モバイルではハンバーガーメニュー＋タッチしやすいボタンを。
コンテンツ訴求メニュー紹介ページで「ハンドドリップ」「ラテアート」などの写真と説明を組み合わせ、視覚＋説明で“こだわり”を伝達。「カルチャー＆コミュニティ」セクションでは、“展示・イベント・ラウンジ”という3つの柱を切り替え可能なタブ形式で構築し整理。
- 情報設計
-
ユーザーがホームページからもカフェの雰囲気を体感し、「訪問する価値」を感じるよう、以下のようなページ構成と導線を設計しました。
- トップページ：キャッチコピー＋イメージから店舗の世界観を提示。
- コンセプトページ：店舗の理念・雰囲気を深掘り。
- メニューページ：飲み物・軽食・スイーツをカテゴリー分けして紹介。写真付きで視覚的に選びやすく。
- カルチャー＆コミュニティページ：展示・ワークショップ・ラウンジ紹介。
- ギャラリーページ：写真スナップを並べて“場の空気”を伝える。SNSへの誘導も併設。
- アクセス／お問い合わせページ：住所・営業時間・地図・連絡先を明確に表示。来店までの心理的ハードルを下げる。
- 各ページのナビゲーションをトップ固定とし、どのページからも他の主要セクションにアクセスできるよう回遊性を確保しています。
完成図
DESIGN
