【自主制作】猫カフェ 29IX（にくきゅう）のオープン告知サイトの作成

【制作期間】

20日間（企画：2日間、デザイン：10日間、コーディング：8日間）

【使用ツール・言語】

Photoshop、Figma、Visual Studio Code、HTML+CSS、JavaScript

【ターゲット層】

猫好きの20代女性。

【課題】

・かわいらしさとおしゃれさを兼ね備えた雰囲気にしたい。

・読みやすく、かわいらしいフォントを使用する。

・営業時間やお店の場所、サービス内容、料金などの情報を掲載する。

・店舗の特徴を引き立てるキャッチコピーを考案する。

【目的】

・デザインやコーディングのスキルを向上させる。

・作品を増やしてポートフォリオを充実させる

・自由なコンセプトやデザインを試し、自分のデザインスタイルや方向性を深め、個性ある作品を生み出す。

・見やすさや使いやすさを追求し、ユーザビリティ向上の実践的なスキルを身につける。

【デザイン】

猫カフェらしいかわいらしさとおしゃれさを兼ね備えた雰囲気を意識して作成しました。全体的な配色には、ベージュやブラウンを使用し、落ち着きのある雰囲気を演出しています。

ファーストビューでは、4本の猫の動画が6秒間隔で切り替わるように設定し、猫の魅力を動的に伝えることで、ユーザーに興味を持ってもらえるよう工夫しました。右上にハンバーガーメニューを導入し、動画の視認性を高めつつ、コンテンツが邪魔されないレイアウトを採用しています。

キャッチコピー「猫の手、ちょっと貸します。」は、20代女性を中心に、仕事や生活の忙しさからリラックスしたいという気持ちに寄り添うことを意識して作成しました。「猫の手を借りる」という慣用句を柔らかくアレンジし、訪れる人に気軽に癒しの時間を提供する意味が込められています。

フォントにはNoto SansとNoto Serifを使用し、読みやすさと親しみやすさを意識しました。柔らかな印象を持たせることで、リラックスできる空間を感じられるように工夫しています。

「cast」のセクションでは、横方向のスクロール機能を取り入れ、ユーザーが飽きずに猫たちの紹介を楽しめるようにしています。

サービス内容や料金は「Price」の欄に、営業時間や店舗の所在地は「Access」の欄にまとめ、わかりやすく情報を整理しました。

全体として、猫の動画や画像を多用し、かわいらしさを演出しながらも、シンプルで温かみや親しみやすさ、そして落ち着きを感じさせるデザインを目指しました。また、ハンバーガーメニューや横方向のスクロールといった新しい技術に挑戦することで、スキルの向上も図りました。