PROJECT
OVERVIEW.
LUMERAは「忙しい毎日に、肌を整える時間を。」を掲げる、架空のスキンケアブランドです。美容液1商品だけを扱うオンラインストアを、デザインからShopifyでの構築まで一貫して制作しました。
ひとつの商品に焦点を当て、ブランドの世界観を伝えながら、商品ページへ自然に誘導するEC体験を目指しました。
- BRAND
- LUMERA(架空のスキンケアブランド)
- PLATFORM
- Shopify
- PAGES
- トップ / 商品詳細 / 商品一覧 / お問い合わせ
- PRODUCTS
- 1点(LUMERA BALANCE SERUM)
- TYPE
- 自主制作の架空ブランド。販売は行っておらず、サイト内のFAQにも明記しています。
CREATIVE
DIRECTION.
忙しいから、
手を抜くのではなく。
- SIMPLICITYむずかしいケアより、シンプルなケアを。
- TRANSPARENCY成分も、価格も、納得して。
- FOR YOUR EVERYDAY特別な日のためではなく、毎日の延長線上に。
色はオフホワイトからブラウンまでの近い範囲。セリフ体の見出しと広い余白が、落ち着いた印象をつくっています。画面の主役は、商品写真の光と影です。
DESIGN
HIGHLIGHTS.
- 01
PRODUCT-LED HERO
最初の画面の主役は商品写真です。見出しは「肌を整える」の一行だけ色と傾きを変え、ブランドの主題が目に入る組み方にしています。
- 02
EMPATHY FIRST
商品の説明より先に、「こういう人のために」と読み手の状況を置いています。共感から3つの特長へと読み進める順番です。
- 03
ONE DESTINATION
トップページのボタンは「詳しく見る」の1種類だけ。行き先を商品ページひとつに絞った構成です。
- 04
FAQ ACCORDION
よくある質問は、押すと開く形式です。必要な項目だけを開いて読めるので、ページの長さを抑えられます。
SHOPIFY
IMPLEMENTATION.
Shopifyの公式テーマ「Dawn」を土台に、ブランドの世界観に関わる部分へ専用のスタイルを追加しています。カートや商品一覧は、テーマの標準機能をそのまま使っています。
HOME, HEADER & FOOTER
メインビジュアル、「こういう人のために」、3つの特長、最後の案内。トップページの各セクションと、ヘッダー、フッターに専用のスタイルを実装しています。
共感から特長、案内へと、読む順番を設計しています。
PRODUCT PAGE
専用のスタイルで組んだ商品エリアに、テーマ標準の購入フォームを組み合わせています。下には開閉式のFAQを置いています。
買う前の疑問を、同じページの中で解消できます。
TYPOGRAPHY
欧文書体2種(Cormorant Garamond / Jost)をテーマに追加しています。
見出しと本文の印象を、ブランドに合わせています。
CART
カートは、テーマ標準の横から開く形式を使用しています。
購入まわりは標準機能に任せ、独自の作り込みを増やしていません。
COLLECTION & CONTACT
絞り込みと並び替えのある商品一覧、お問い合わせフォーム。
商品を探す、問い合わせる、の基本機能をそろえています。
PRODUCT DATA
商品名、価格、在庫状況は、Shopifyの商品データから表示しています。
商品情報は、Shopifyの管理画面で一元管理されます。
RESPONSIVE
SHOWCASE.
LET'S BUILD
SOMETHING.
Webサイト制作やShopify構築について、お気軽にご相談ください。
START A PROJECT ↗