Gatto Cafe

サイト名

Gatto Cafe（ガットカフェ）

制作期間

約1週間（2026年1月）

制作タイプ

架空の保護猫カフェ Webサイト（個人制作）

対応デバイス

PC

使用ツール

• Adobe Illustrator
• Adobe Photoshop
• HTML5 / CSS3
• Genspark（AI画像生成）
• Visual Studio Code

担当範囲

企画・デザイン・コーディング（すべて個人制作）

課題

「保護猫カフェ」をテーマに、来店促進と保護猫への理解を深めることを目的とした架空 Web サイトを制作する。
温かみがありながら清潔感のあるデザインを目指した。

コンセプト

「猫と人が気軽に出会える居心地の良い空間」をコンセプトに、猫モチーフのビジュアルと柔らかいカラーパレットで統一感を出した。

ペルソナ設定

・20〜40代男女
・新しい家族（猫）を迎えたいと考えている人
・最後までお世話ができる金銭的な余裕がある

ユーザーニーズ

・里親制度について知りたい
・店内の雰囲気や猫の紹介をひと目で把握したい
・料金・予約方法・アクセスを簡単に確認したい

配色

ベースカラーにアイボリー、アクセントにテラコッタとグリーンを採用。
温かみを感じさせる色調で「居心地の良さ」を表現した。

猫シルエットのロゴ

Illustratorでオリジナルのシルエットロゴを制作。
シンプルな形で可読性と視認性を確保しつつ、ブランドの個性を表現した。

1. 企画・リサーチ

実在する猫カフェサイトを調査し、ターゲットとコンセプトを設定。

2. デザイン制作

Illustrator でロゴを制作。

3. コーディング

HTML5 / CSS3 でコーディング。

4. 検証・調整

表示確認、微調整を繰り返して完成。

・Illustratorでのロゴ制作でパスの扱いに苦労した
・レイアウトが崩れた際の原因調査と修正に時間を要した
・デザインと実装の乖離を最小限にするため、デザインカンプを詳細に作成することの重要性を実感した

・レスポンシブ対応とサブページを追加してコンテンツを充実させたい
・予約フォームの実装に取り組みたい