仮想サイト　カフェ『maison de bonheur （ﾒｿﾞﾝﾄﾞﾎﾞﾇｰﾙ）』

PC版デザインカンプ

スマートフォン版デザインカンプ

■概要

仮想サイト制作の課題として、就労継続支援事業所の技術スタッフにクライアント役をしていただいて、私が依頼を受けたという形でヒアリングを行い、企画書・ラフデザインを作成し、Zoomで画面共有しながらプレゼンを行いました。

プレゼン後にラフデザインを元に配色やレイアウトのご希望を再度すり合わせ、TOPページのみワイヤーフレーム・デザインカンプ・コーディング指示書の制作を行い、デザインとコーディングそれぞれの技術スタッフにフィードバックをいただきました。

■制作範囲

ヒアリング/企画書・ラフデザイン/ワイヤーフレーム/デザイン/コーディング指示書

■使用ツール

Photoshop / Illustrator / Figma /Google スプレッドシート/Google ドキュメント / Google スライド

■制作期間

2025年03月〜2025年09月

58日間

ヒアリングシート

7時間

企画書・ラフデザイン・原稿・プレゼン練習・プレゼン本番

48時間

ワイヤーフレーム

21時間

デザイン

8.5時間

コーディング指示書

12時間

■クライアントの課題とゴール

・課題

2店舗目の出店を検討する上で、より広い地域の人々にカフェの存在を知ってもらいたい

・ゴール

集客アップ、認知度向上、SNSのフォロワー増加

■ターゲット層

20～40代の子育て世代の女性（子育て地域に出店予定の為）

子育ての息抜きがしたい

健康への意識が高い

新鮮な地域の食材やカフェ巡りに興味がある方

スマートフォンユーザー

InstagramやFacebookのアカウントがある

■デザインコンセプト

『地元の恵みを味わい「ほっ」とひと息つける、心と体に優しいカフェ』

温かい・ナチュラル・安心・優しい・親しみやすい

・お店の特徴

地元で採れた安心・安全な食材の美味しさを手間を惜しまず丁寧に調理し最大限に引き出すこと

お客様にホッとするあたたかい時間を過ごしてもらうこと

地域農家と直接提携し、旬の野菜や新鮮な卵を仕入れることで毎日食べても飽きない美味しくて健康的な料理を提供する

■提案の柱

競合サイト（地域食材を使ったカフェ、オムレツが看板メニューのカフェ）との差別化のため、『生産者とつながるカフェ』であることを伝える

農家さんとお店の想いを伝えること

■意図・ポイント

・フォント

優しさと親しみやすさ、少しカジュアル感のある丸ゴシック体を使用

・配色

ナチュラルで優しい印象

ベージュとブラウン

＝自然な温かみ・優しさ

淡いグリーンと深緑

＝地元の新鮮な野菜を連想する優しい色・オリーブや葉っぱをイメージする色・安心・安全

黄色

＝たまごの色・フレッシュ

・画像

野菜やコーヒー類の切り抜き画像を配置して食材への想いやこだわりを伝え、明るい印象を与えている

作り手のこだわりや農家さんの想いが伝わるように、料理している写真や農家さんの笑顔を載せることで安心を与えている

料理にこだわったカフェなので、カフェラテなどの画像でカフェらしさを残しつつも様々な美味しそうな料理の画像を流している

・あしらい

円・自由曲線・角丸・楕円で柔らかく優しい雰囲気

・構成

食材へのこだわりと料理への想いこそがお店のアピールポイントのため、それらを紹介した後でMenuの料理の画像を沢山見てもらうことで、より『このお店に行きたい』と思わせる構成にしている

次の目的であるフォロワー増加のために料理画像の後にSNSの紹介をしている

・苦労した点

課題の間、色の配置の影響でサイト全体が想定していたより可愛らしくポップに仕上がってしまったのですが、もし今変更するとしたら、背景色に頼ったセクション分けにせず、線やあしらい・背景画像などの他の部分の工夫でセクション分けすることで、彩度の高い色の範囲を限定的にし、もっとシンプルで優しいナチュラルな雰囲気にすることができると思います。

■フィードバック

・デザイナーからの指摘

【良い点】

コンセプトを明確に打ち出し、こだわりと親しみのバランスがとれたデザインとなっている。

視線誘導を意識し、ストレスなく読み進められるレイアウト構成となっている。

【惜しい点】

全体のデザインに合わせたMV上のコピーの魅せ方の工夫

・コーダーからの指摘

【良い点】

構成が明確

必要な情報が網羅的

【惜しい点】