サイト名

Gatto Cafe（ガットカフェ）

制作期間

制作中（2026年1月〜）

制作タイプ

架空サイト制作（個人制作）

対象デバイス

PC

使用ツール

• Adobe Photoshop（画像編集）
• Adobe Illustrator（ロゴデザイン）
• HTML5 / CSS3（コーディング）
• Visual Studio Code（エディタ）

担当範囲

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

※追記※

現在制作中のため、随時更新予定

課題

保護猫カフェをテーマにした架空のカフェサイトを制作する。
ターゲットは「猫を迎えたいと考えている20代〜50代の男女」を想定。

コンセプト

イタリア語で「猫」を意味する"Gatto（ガット）"を店名に。
温かみと落ち着きのあるデザインを目指しました。
猫の可愛さを前面に押し出しつつも、大人でも訪れやすい洗練された雰囲気を表現しました。

ペルソナ設定

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

ユーザーニーズ

・在籍している猫の情報（種類、性格など）が知りたい
・料金システムや利用方法が明確に分かる
・アクセス方法や営業時間がすぐに分かる
・予約方法が簡単

1. 温かみのある配色

ブラウンとベージュを基調とし、アクセントカラーは落ち着いたグリーンの配色にしてリラックスできる空間を表現しました。

2. 猫のシルエットを活かしたデザイン

ロゴに猫とマグカップのモチーフを取り入れ、かわいらしさと洗練さのバランスを意識したデザインにしました。

1. 企画・リサーチ

・既存の猫カフェサイトのリサーチ（10サイト程度）
・ユーザーが知りたい情報の洗い出し
・店名とコンセプトの決定
・サイトマップとコンテンツ設計

2. デザイン制作

・ロゴデザイン（Illustratorで作成）
・ワイヤーフレーム作成

3. コーディング

制作中..

4. 検証・調整

制作中..

制作中..

実際のサイトを見る →
※こちらは自身で制作した架空のサイトです。