Design Gallery
Design Approach
01 | Project Overview プロジェクト概要
制作物 カフェ Webサイト（TOPページ）
業種 飲食・カフェ
担当範囲 ヒアリング／要件定義／サイトマップ／ワイヤーフレーム／ビジュアルデザイン
使用ツール Figma／Photoshop
02 | Background 制作背景
地域に愛される個人経営のカフェを想定し、店舗情報の整理とブランドイメージの向上を目的としたWebサイトを制作。
SNSを中心に情報発信しているため、メニューや営業時間、アクセス、店舗設備などの情報が分散しているという課題を設定しました。
初めて訪れるユーザーにも店舗の雰囲気や必要な情報が伝わり、安心して来店を検討できるWebサイトを目指しました。
03 | Target ターゲット
20〜50代の地域住民を中心に、カフェ好き、リモートワーカー、観光客など幅広いユーザーを想定。
落ち着いた空間でコーヒーを楽しみたい人、一人で静かに過ごしたい人、友人との時間を楽しみたい人など、日常の中でゆったり過ごせる場所を求めるユーザーを設定しました。
04 | Design Concept デザインコンセプト
「毎日に、ほっと一息つける時間を。」
店舗の温かさや居心地の良さが画面から伝わるよう、自然光や木の質感を感じる写真を大きく使用。
ベージュ・アイボリー・ブラウンを中心とした柔らかな配色にグリーンをアクセントとして取り入れ、ナチュラル・温かい・清潔感・上品・親しみやすい世界観を表現しました。
05 | Design Process 設計・制作プロセス
ヒアリング内容から、店舗の目的・ターゲット・掲載したい情報を整理し、要件定義とサイトマップを作成。
TOPページでは、店舗の雰囲気 → コンセプト → おすすめメニュー → 店内・設備情報 → 営業時間・アクセスの順に情報を配置し、ユーザーが店舗の魅力を感じながら、来店に必要な情報を自然に確認できる構成を設計しました。
その後、ワイヤーフレームを作成し、写真・配色・タイポグラフィなどのビジュアルへ展開しています。
06 | Design Point デザインポイント
Information Design
メニュー、設備、営業時間、アクセスなど、来店前に確認したい情報を整理。店舗の魅力を伝える情報と実用的な情報をバランスよく配置し、来店判断につながる構成を設計しました。
Visual Design
自然光と木の温もりを感じる写真を主役に、ベージュ・アイボリー・ブラウンを基調とした柔らかな配色を採用。広い余白を取り、店舗で過ごす穏やかな時間を感じられるデザインに仕上げました。
User Experience
Wi-Fi・電源・デカフェ・多言語対応などの設備情報をアイコンで視覚化し、ユーザーが必要な情報を直感的に確認できるよう設計。おすすめメニューからアクセス情報まで、来店前の検討に必要な情報をTOPページ内で把握できるようにしました。