Web自主制作
うさぎカフェのHP

制作期間:1ヶ月
使用ツール:Photoshop/Visual Studio Code2
使用言語:HTML/CSS/jQuery/Javascript

制作概要

架空クライアントワークとして、うさぎカフェのHPを作成しました。

サービス設定

うさぎと触れ合える×こだわりのコーヒが飲めるをコンセプトに、
日常から少し離れて癒しの時間を提供する「うさぎカフェ mimitaro」

制作目的

カフェの周知・新規顧客の獲得。
オープンして1年ほど経つが来店客が伸び悩みしているため、 うさぎカフェという普通のカフェとは異なるサービスを魅力的に見せる+入りづらさを脱却して、新規顧客の獲得に繋げる。

ターゲット設定

20代〜30代女性 ペルソナ1 20代女性前半、OL。
カフェ巡り、かわいいもの、動物が好き、ナチュラル系の雰囲気を好む。
休日に友人とお茶をすることになり、普通のカフェではなく、
会話も弾みそうな猫カフェやうさぎカフェを探している ペルソナ2 30代女性、主婦。
ママ友とお茶をするのに良さそうなカフェを探している。
カフェメニューもあり、ゆっくりとお茶ができそうで雰囲気のいい店を探している。

情報設計

お店の雰囲気を伝えることを最優先にし、メインビジュアルのイメージにはうさぎ→コーヒーの写真をスライドアニメーションで見せるようにしました。スクロールするとすぐにAboutセクションに行き、店内の写真とコンセプトを2カラムレイアウトで見せることで、雰囲気をパッと読み取ってもらえるようにしました。 うさぎカフェセクションでは、うさぎの写真を左右に配置してうさぎ好きの人の興味をひき、料金システムの説明はシンプルにして視覚的な興味を引くことを優先しました。カフェセクションでは、メニューを詳しく見たい人ように、メニューボタンをアコーディオン形式にして、こちらも視覚的印象を優先したシンプルな構成にしました。

デザインコンセプト

ターゲット層がナチュラルでかわいい雰囲気が好きな女性のため、配色にはベージュとグリーンを使用しました。画像は形を崩した楕円形に切り抜いて、親しみやすさ・カジュアル感を出すようにしました。 配色

PCデザインカンプ SPデザインカンプ