works
「あずきな茶」
【サイト概要】
- サイト名 : 猫カフェ「あずきな茶」Webサイト（架空サイト）
- ターゲット : 日々の疲れを癒やしたい20〜40代、猫好きの方
- コンセプト : 個性豊かな3匹の猫とゆったり寛げる、アットホームで和やかな癒やしの空間。
【デザインの意図・工夫した点】
- トンマナ（世界観）の統一
カフェの温かみと猫のやわらかさを表現するため、やわらかいアイボリーとあずき色（深みのあるブラウン・赤みブラウン）を基調としたカラーリングで全体を統一しました。
- フォントとビジュアルの連動
タイトルロゴやメインビジュアル内のキャッチコピー「いやされにきてにゃ」、各見出しに丸みのある手書き風フォントを採用。サイト全体でビジュアルと文字のトーン＆マナーを揃え、一貫した世界観を作り出しています。
- メニューページのレイアウト最適化
メニューページでは、商品画像・メニュー名・金額の視覚的バランスを重視して配置。一覧性と見やすさを両立させています
【実装・技術面の工夫】
- レスポンシブ対応（マルチデバイス対応）
PC・スマートフォンなど異なる画面サイズでもレイアウトが崩れないようレスポンシブWebデザインを適用。特にメニューページの要素配置（画像・テキスト・価格）がスマホ表示でも美しく整うよう配慮しました。
- ユーザー体験を高める装飾
ナビゲーションや見出しに肉球アイコンや猫の写真をアクセントとして使用し、視覚的にも親しみやすさを感じられる導線設計にしています。
【制作概要】
- 制作期間・時間 : 10日 / 20時間
- 担当範囲 : 企画 / デザイン / コーディング
- 使用ツール : HTML / CSS / Canva
Back