■ プロジェクト概要 制作期間： 3日間（デザイン構想含め約18時間） 担当範囲： 企画・デザイン・コーディング 使用技術： HTML5, Tailwind CSS, JavaScript (Scroll) 公開URL： https://purple-vally-9.tiiny.site/ 1. 制作の意図・ターゲット 「小さなお子様連れでも、気兼ねなく美味しいコーヒーを楽しんでほしい」という想いを形にした、架空のカフェの紹介サイトです。ターゲットは、日々の育児で忙しく、スマホ片手に情報を探しているママ層を想定しました。 例： 「子供が泣いたらどうしよう」という不安を持つママでも、安心して来店できるよう、サイト全体に温かみのある配色を採用しました。また、授乳室やキッズスペースの有無など、ママが知りたい情報を最優先で配置することを目指しました。 2. こだわったポイント（技術面） ・レスポンシブ設計の徹底：スマホでの閲覧を第一に考え、メニューやアクセス情報の配置をモバイルファーストで構築しました。 単にPC版を縮小するのではなく、スマホでは地図を縦並びに切り替えるなど、指一本でスクロールしながら全ての情報に辿り着けるレイアウトを追求しました。 ・視認性の高いタイポグラフィ：スマホの小さな画面でもキャッチコピーがパッと目に入るよう、デバイスサイズごとにフォントサイズを細かく調整（text-4xl〜md:text-6xl）しました。 ・直感的なUI：予約ボタンをヘッダーやフッター付近に配置し、『予約したい』と思った瞬間にボタンが目に入るよう、スクロールしても迷わない位置に配置。予約への心理的ハードルを下げるデザインを意識しました。 3. 使用スキル 言語: HTML5 フレームワーク：Tailwind CSS（レスポンシブ・カスタマイズ） ・迅速なレスポンシブ対応と、細かなデザイン調整を両立させるために採用しました。 アイコン： Font Awesome フォント：Google Fonts (Shippori Mincho, Noto Sans JP) ・カフェの落ち着いた雰囲気と、和やかな世界観を表現するために選定しました。