作品詳細_Cat_Cafe_Kitty - Creator Mako's ポートフォリオ - 3時のおやつが食べたい

Cat Cafe Kitty / Website

Cat Cafe Kitty モックアップ画像

制作期間

約1か月半

担当部分

設計 / デザイン / コーディング

使用ツール

Visual Studio Code (コーディング)
Photoshop (デザイン)

レスポンシブ対応

パソコン / スマホ / タブレット

デザインコンセプト

猫カフェ「Cat Cafe Kitty」の仮想サイトです。
まったりとしたアットホームな雰囲気のカフェなので、 幅広い年齢層の方にご利用いただけると思います。
サイト内には、アットホームの温かさを感じてもらえるようなピンク系統の色を多く使いました。
また、サイト内で使用しているロゴやトップへ戻るボタンなども自身でデザインし、制作しました。
レスポンシブに対応しており、どのデバイスからでも見やすい設計になっています。

Cat Cafe Kitty トップスクリーンショット画像


「Cat Cafe Kitty」の頭文字「C」「C」「K」を猫の顔(C=目、K=鼻と口)に見立て、 ロゴを作成しました。


猫の可愛らしさが伝わるように、ファーストビューは画面幅いっぱいに表示させました。
また、ファーストビューの仔猫に合わせて、ファーストビュー内の「Cat Cafe Kitty」の文字も 小さくてコロコロっとした可愛いフォントにしました。


Concept部分では、お店のコンセプトを簡単に紹介するとともに、 表情豊かな猫たちの写真を載せることで、 個性的で楽しそうな猫がたくさんいると思ってもらえるようにしました。


サイトの所々に手作りの肉球背景を入れました。


Cats部分では、人気TOP3の猫たちを、 それぞれの名前と性別、人気の理由(性格など)、好きなこと(もの)を添えて紹介し、 より親しみを感じてもらえるようにしました。


Price部分では、基本料金と延長料金の値段設定を、 分かりやすいように10分単位で設定しました。


Access部分では、店内のアットホームな雰囲気を感じてもらえるような写真を載せました。


色違いバージョンの肉球背景も制作しました。


トップへ戻るボタンは、猫の顔の形にして制作しました。

トップへ戻るボタン画像