Overview
プロジェクト概要
スパトリートメントの美容液シート「ストレッチiシート」の商品ランディングページを制作しました。最初の画面にモデル写真とコピー「今と未来の、揺るがない肌のために」を大きく配置し、2種類の商品（HAS・NMN）を並べています。続けて、シートの特長、シリーズ共通の主要成分、正規品保証を紹介しました。
商品ごとの説明は、HASを赤、NMNを紺で色分けしています。それぞれ「こんな方におすすめ」のチェックリスト、3つの成分の説明、香り、購入ボタンを同じ順番で配置しました。最後に、5ステップの使用方法と保存方法を掲載しています。ディレクションからデザイン、コーディングまで、RuxelTechチームで対応しました。
- 業種
- 化粧品・スキンケア
- ロール
- ディレクション / ページデザイン / コーディング
- 技術
- HTML / CSS / レスポンシブ対応 / ランディングページデザイン / コーディング
PAGE — ページ全体
2種類の商品を色で分けて、違いを比べやすく
ランディングページ全体を、PC版・スマホ版で掲載しています。白とゴールドを基調に、商品ごとのテーマカラー（赤・紺）で区切った高級感のあるデザインです。2つの商品を同じ構成で説明しているので、成分や香りの違いを比べながら読めます。
- モデル写真と大きなコピーのファーストビュー
- シリーズ共通の主要成分と正規品保証
- 2種類の商品を色分けして同じ構成で説明
- 5ステップの使用方法と保存方法
全体をスクロールしてご覧いただけます
Results
成果
2種類の商品の違いを色と構成で分かりやすく伝え、自分に合う方を選べる商品LPとして制作しました。
Tech Stack
HTMLCSSレスポンシブ対応ランディングページデザインコーディング