カフェ・コージーチャット

概要

ハンドメイド作品委託販売カフェのWebサイト（架空）

URL

cozychat

制作目的

利用者の集客

ハンドメイドイベントの参加募集

※バナーにて表現：詳細はこちら

制作条件

ロゴ・ナビゲーション各項目・キャッチフレーズ・店舗案内は支給データを使用。

※ロゴ：サイズ可変だが、色の変更不可

使用色：オレンジ・茶色・ピンクのいずれかを使用すること。

デザイン：あたたかなイメージ、落ちついた感じ。
２カラムレイアウト(一部が2列であれば可)

ターゲット

首都圏郊外在住、30代半ばの女性で短時間のパート勤務または専業主婦。
空き時間に、ハンドメイド品をフリーマーケットアプリで販売することが趣味。
子供を送迎後、たまにママ友とカフェで世間話をすることもある。
食材・衣服は少々値段が張ってでも、体に優しいオーガニック素材を選ぶことが多い。
（無印良品・生協を好み、よく利用する。）

担当範囲

ディレクション / デザイン

レスポンシブ

PC

使用ツール・言語

Photoshop

制作時間

約300分（※TOPページのみ）

① ナビゲーション

項目数が多い為、下記上下2段に仕分け。

• 上段：概要。新規利用者が知りたい情報
• 下段：詳細。既存利用者で、閲覧目的あり

茶色系で統一されているメイン画像が映えるよう、下段メニューの背景色は、くすみミントグリーンを使用。

② メイン画像

カフェであることが一目で分かり、温かみのある雰囲気を演出する為、木製テーブルの上にラテアートを施したコーヒーの画像を使用。

キャッチフレーズは読みやすいよう、下に半透明の白い四角形を敷き、縦書きにすることで、店舗名→本文に目線が動くようにしました。

③ 店名

他の文章は直線形に収めている中、店名は背景：濃茶色＋上下白ステッチ×白抜き文字を波型にレイアウト。
明度差と有機的な形状で強い印象を与えることで、真下の本文への動線を設計しました。

④ 新着情報

サムネイル写真＋1文のみ記載し、一目で概要を把握できるようにしました。

過去の新着情報・詳細については、「View more >」をクリックして閲覧する設計にしたことで、長文読解のストレス軽減を図りました。

新規メニュー追加：各項目（ドリンク・フード）へのリンクを設置することで、他のメニューにも興味を持って頂けるようにしました。

⑤ カレンダー

• 定休日:くすみミントグリーンの背景色に設定。

→定休日である旨を併記。

• 平日、休日の各営業時間を記載

カレンダーを一目見て、営業日時がいつであるかが明確になるよう設計しました。

⑥ 店舗情報

木材＋植物のナチュラルで温かみがある雰囲気と、空間の奥行が伝わるよう、横幅いっぱいに内装写真＋説明文を配置しました。

位置情報：離脱防止＋広域の位置関係が把握出来るよう、別ウィンドウでGoogle mapが開くよう設計。

※ボタン右端：別ウィンドウで開く旨のアイコンを配置。

⑦ フッター

離脱防止の為、各項目へのリンクを設置しました。

位置情報：離脱防止＋広域の位置関係が把握出来るよう、別ウィンドウでGoogle mapが開くよう設計。

中心から1,000 px以内に各項目＋個人情報方針を全て収め、
必要情報が一目で分かるようにしました。

配色

メインカラー：店舗内装に使用されている木材の温かみを感じさせるベージュ

サブカラー１：カフェ＝コーヒーを連想させて、落ち着きを感じさせる茶色

サブカラー２：1同様、落ち着き+生成りのようなナチュラルな印象のクリーム色

→左上ロゴの使用色。本文背景色に取り入れることで、全体との調和を図りました。

アクセントカラー：自然と落ち着きを感じさせ、茶系色の補色である、くすんだミントグリーン

フォント

●ナビゲーション・キャッチフレーズ

冒頭の印象を左右させる箇所・目を惹きたい箇所は、温かみや親しみを感じさせる、HG丸ゴシックを使用。

●店舗名・ボタン

本文・支給ロゴのフォントに極力近く、丸みが温かみを感じさせる「Century Gothic」を採用。
全体との調和を意識しました。

●本文

可読性を最優先して、「游ゴシック」使用を想定。
※デザインカンプは、Windowsデフォルト「メイリオ」で入力。

あしらい

ハンドメイド品を取り扱うカフェであることが伝わるよう、ヘッダー・フッター・各見出し・文章・トピックスの切り替え部分に縫い目の装飾を施しました。