Lueur — ボタニカル・コスメのランディングページ

コンテキスト

Lueur は、デモンストレーション作品として一から立ち上げたコンセプトブランドです。目的は、いつもの領域——SaaS、ダッシュボード、ダークな UI——から抜け出し、プロダクトマーケティングの言語も操れることを示すこと：明快でエディトリアル、そして感覚に訴えるコスメブランド。

目標

• テンプレートに頼らず、ロゴからパッケージまで一貫したブランドアイデンティティを築くこと。
• 日常とは異なるスタックを示すこと：最大限のパフォーマンスを持つ静的サイトのために、Next.js ではなく Astro。
• ショーケースの先へ：商品から注文確認まで、本物の購入体験を提供すること。

ソリューション

ビューティー誌のように構想したエディトリアルなランディングページ：オートクチュール的なセリフのリード、ポーセリンとボタニカルグリーンのパレット、丁寧な商品写真。

• リチュアル — 3 つの基本ケアを、3 つの明快な所作で提示。
• コレクション — ラインナップのフラットレイ、続いて各商品を詳細に（美容液、クリーム、オイル）。
• 購入体験 — 右からスライドインするドロワー式カート、数量の管理、完全なチェックアウト、そして注文番号付きの注文確認。すべて永続的で、バックエンドなし。

スタックとパフォーマンス

• Astro による静的レンダリング：表示にはクライアントサイドの JavaScript フレームワークを一切使わず、カートに必要な分だけ。
• 画像は自動で WebP に最適化し、画面に応じて複数サイズで配信。
• スクロールアニメーション、モバイルナビゲーション、そしてアクセシビリティとコントラストへの配慮。

デモンストレーション作品でありながら、クライアントに納品するサイトと同じ厳しさで構築：速く、クリーンで、細部まで考え抜かれている。