Overview
プロジェクト概要
カラーコンタクトレンズ「D.orb（ディオーブ）」の商品ランディングページを制作しました。最初の画面にモデルの写真を大きく使い、レンズ直径・度数・装用期間・価格と4色のレンズを一覧で示しています。続けて、裸眼に見えるほど自然な仕上がりというコンセプトを説明しました。
「こだわりポイント」では、瞳の黄金比率、瞳を自然に見せるサイズ、色素が触れない品質の3点を図解しています。学校・仕事・デート・ノーメイクの4つの利用シーンと利用者の声に続けて、Black・Brown・Choco・Oliveの4色を、モデル写真と装用前後の比較写真で紹介し、色ごとに1month・1dayの購入ボタンを置きました。ディレクションからデザイン、コーディングまで、RuxelTechチームで対応しました。
- 業種
- コンタクトレンズ・美容
- ロール
- ディレクション / ページデザイン / コーディング
- 技術
- HTML / CSS / レスポンシブ対応 / ランディングページデザイン / コーディング
PAGE — ページ全体
色ごとの装用イメージを、比べながら選べる構成
ランディングページ全体を、PC版・スマホ版で掲載しています。白とミントグリーンを基調にした、透明感のあるデザインです。4色は同じレイアウトで並べ、色ごとに背景色を変えて、装用前後の違いを比べながら選べるようにしました。
- スペックと4色のレンズを最上部に一覧表示
- 3つのこだわりポイントを図解
- 4つの利用シーンと利用者の声
- 4色それぞれの装用前後の比較と購入ボタン
全体をスクロールしてご覧いただけます
Results
成果
商品のこだわりと色ごとの仕上がりを伝え、自分に合う色を選んで購入へ進める商品LPとして制作しました。
Tech Stack
HTMLCSSレスポンシブ対応ランディングページデザインコーディング