🐾ねころび庵 Café Mofumofu (架空）

☆WEBサイト制作☆

• ワイヤフレーム制作：Photoshop
• デザインカンプ：Photoshop/XD
• HTML記述:TeraPad
• CSS記述:TeraPad
• クライアント：市川市にある猫カフェ兼泊れる！ねころび庵 Café Mofumofu 様
• 制作期間：1 ヶ月　（ワイヤーフレームからＷＥＢサイトを一貫して製作した期間）
• 制作時に考慮した点：「ねころび庵 Café Mofumofu 」のWebページ制作にあたり、以下の点を重視しました。
  
  🐱猫と人が共に心地よく過ごせる空間演出
  温かみのある配色と柔らかなレイアウトで、癒しの雰囲気を表現しました。
  🐱猫の個性が伝わるプロフィール設計
  写真と紹介文を通して、猫たちの魅力が自然に伝わるよう工夫しました。
  🐱施設の雰囲気が伝わるビジュアル構成
  実際の店内写真を多用し、来店前から安心感と期待感を持てるようにしました。
  🐱ユーザー導線の明確化
  メニュー・FAQ・予約情報などを整理し、必要な情報にすぐアクセスできる設計に。
  🐱ブランド世界観の統一
  「またたび」の柔らかく親しみやすいイメージを、フォント・色・アイコンなど
  細部にまで反映。
  
• 制作の意図（ねころび庵 Cafe Mofumofu LP）
  このLPでは、「癒しの空間で猫と過ごしてもらい、楽しく遊び、宿泊して心身ともにリラックスしてほしい」という思いを最も伝えたいと考えました。
  
  デザインは柔らかく温かみのある色遣いを選び、訪れる人が自然とリラックスできるよう演出しています。特にYouTubeの紹介部分は、YouTubeのブランドカラーである赤を取り入れ、視覚的に目立たせて注目を集める工夫をしています。
  
  ユーザーには、まずかわいい猫たちに会いに来てもらうこと、そしてスムーズに予約ボタンを押してもらい、さらにYouTubeチャンネルも見て楽しんでもらうことを目指しています。
  
  競合サイトは参考にせず、自分の頭で一から考えてデザイン・コーディングを行いました。HTMLとCSSの実装は難しく、デザインカンプ通りに完全には再現できていないものの、自分の表現したいイメージを形にすることに注力しました。
  
  スマホでの使いやすさや見やすさについては、まだ十分に考慮できていないため、今後の改善課題として取り組んでいきたいと考えています。

【デザインコンセプト】

「癒しの空間で猫と過ごし、心身ともにリラックスできる体験」を軸に、訪問者が自然と穏やかな気持ちになれるようなLPデザインを目指しました。柔らかく温かみのある色使いをベースに、猫たちとのふれあいや宿泊体験の魅力が直感的に伝わる構成にしています。

特にYouTube紹介セクションでは、ブランドカラーの赤をアクセントとして使用し、視線を集める工夫を施しました。ユーザーが「猫に会いたい」「予約したい」「動画も見てみたい」と思えるよう、導線設計と視覚的なメリハリにこだわっています。

競合サイトには頼らず、自分の頭で一から構成・デザイン・コーディングを行ったことで、ブランドの世界観を自分なりに表現することができました。HTML・CSSの実装には苦戦もありましたが、理想のイメージに近づけるための試行錯誤を重ねました。