コンセプト

• みずみずしさ
• 透明感
• やさしい華やかさ

白と淡いピンクを基調に、果肉のみずみずしさとやさしい甘さが伝わる配色にしました。ファーストビューから固定CTA・波形の装飾まで世界観を統一し、期間限定ならではの特別感を演出しています。

実装・工夫

• スマートフォンからの閲覧と注文を想定し、モバイルファーストでレイアウトを設計しました。
• 波形や水滴などの装飾を取り入れ、白桃ラテのみずみずしさややわらかい印象を表現しました。
• position:fixedの固定CTAで、スクロール中も注文導線を常に見える状態にしました。
• FEATUREセクションは片側だけのborder-radius＋overflow:hidden＋object-fit:coverで画像を切り抜き、nth-child(even)で左右交互のレイアウトにしました。
• Phosphor Icons(アイコンフォント)を導入し、見出しやボタンのテキスト先頭にアイコンを追加しました。

振り返り

モバイルファーストのレイアウトやSVG装飾など新しい実装に挑戦した分、崩れやエラーも多かったです。特にz-indexやoverflowの影響で装飾が消えるなど、見た目だけでは原因が分かりにくいトラブルが目立ちました。原因を「直前の変更→クラス名→タグの対応→width/height/overflow/z-index」の順に切り分けて確認する習慣がついたのが、一番の収穫でした。