制作期間： 4日間（デザイン微調整・レスポンシブ対応含め約20時間） 担当範囲： 企画・デザイン・コーディング 使用技術： HTML5, CSS3 (一部 Tailwind CSS), JavaScript 公開URL： https://fluffy-cocada-7f10d6.netlify.app/ 1. 制作の意図・ターゲット 「忙しい毎日の中で、自分を後回しにしがちな女性に、心からリラックスできる時間を届ける」というブランドコンセプトを形にした架空のウェルネスブランドの紹介サイトです。ターゲットは、仕事や育児に追われながらも「自分自身を整える時間」を大切にしたい30代以上の女性を想定しました。 こだわり： サイトを訪れた瞬間に「深く呼吸ができる」ような感覚になってもらえるよう、余白を贅沢に使い、視覚的なストレスを徹底的に排除したミニマルなデザインを採用しました。 2. こだわったポイント（技術面） 1px単位のスマホ最適化（ヒーローエリア）： スマホ閲覧時、背景写真の女性の表情を隠さないよう、キャッチコピーの配置をミリ単位で調整。背景に「下から上への透過グラデーション」を施すことで、写真の世界観を壊さずに文字の視認性（読みやすさ）を確保する高度なコーディングを行いました。 空気感を演出する余白設計： PC版ではセクション間に160px以上の大胆な余白（padding）を設定。情報の密度を下げることで、ブランドの持つ「ゆとり」や「高級感」を直感的に感じさせるレイアウトを追求しました。 洗練されたコンタクトフォーム： デフォルトの入力枠を排除し、ミニマルな下線（border-bottom）のみのデザインにカスタマイズ。背景を rgba で薄く透過させ、さらに backdrop-filter でぼかしを入れることで、背景色と馴染むモダンなUIを実装しました。 3. 使用スキル ・言語：HTML5 / CSS3 ・スタイリング：Tailwind CSS ＆ カスタムCSS（!importantを用いた詳細なデザイン制御） ・デザインツール：Photoshop（画像加工・レイアウト構成） ・フォント：Google Fonts (Shippori Mincho / Noto Sans JP) ・配色設計：セージグリーンを基調とした、目に優しいネイチャーカラーの選定 日本語の美しさを活かす明朝体と、可読性の高いゴシック体を組み合わせ、信頼感と柔らかさを表現しました。