うさぎカフェ Break

保護うさぎカフェという里親向けのサンプルサイトを制作しました。落ち着いた配色を使用しながらも、うさぎの動きを模したアニメーションを入れることで、全体的に遊び心あるサイトデザインを目指しました。

ターゲット

里親を検討している方、うさぎを育てたいが迷っている方

目的

里親を検討している方に来店していただき、譲渡率を上げること

情報設計

トップページのファーストビューすぐ後に挨拶や里親希望の方へ訴えかけるメッセージを取り入れ、ターゲット層がすぐにわかる設計にしました。その後にうさぎを紹介するセクションを設け、お問い合わせフォームのボタンを設置することによりページへの誘導を促しています。

デザイン

配色は男女ともに受け入れられやすいベージュを背景色として使用し、アクセントカラーとしてオレンジを使用しています。一方でうさぎを表現するために部分ごとにうさぎの動きを模したアニメーションを取り入れ、遊び心があるサイトデザインにしました。

制作期間

企画：約2日

デザインカンプ：約1週間

コーディング：約3ヶ月

再構築：3〜4日

再構築前のサイトURL：
https://yuki-ao.com/break-ver1/

遷移ページ

トップ、お問い合わせフォームの各ページ(お問い合わせフォームは枠組みのみの制作)

使用ツール

Visual Studio Code、Photoshop

使用言語

HTML、CSS、Javascript