Shopyyコスメサイト制作：Chroma Dewyのメイク表現と色彩豊かな商品展示

プロジェクト概要

Chroma DewyのShopyyサイトは、メイクのテーマと色彩豊かな商品展示を軸に構成しました。目元の接写とテーマ文をトップのバナーに組み合わせ、その下のアイシャドウパレットやカテゴリー画像から商品閲覧へつなぎます。オレンジのロゴ、明るい背景、鮮やかなメイク写真で、テーマ閲覧、一覧比較、個別確認を連続させました。

デザイン上の課題

コスメサイトは仕上がりを伝えながら、色や道具も比較しやすくする必要があります。人物の接写でテーマを示し、パレット、ブラシ、パッケージは規則的なグリッドに配置して、二つの情報が干渉しないようにしました。

デザイン方針：メイクのテーマと色彩豊かな展示

目元の接写とテーマ文をバナーに組み、その下のパレットとカテゴリー画像から一覧へ導きました。トップは方向性、カテゴリーは比較、商品ページは外観と仕様を担い、ナビゲーションとリンクでつなぎます。

見出し、ナビゲーション、本文にJosefin Sansを使い、大きさ、太さ、段落幅で階層を作りました。オレンジの表示、明るい背景、鮮やかな写真を主要ページに共通化。グループ内はコンパクトに、セクション間は広くし、写真、説明、操作の場所を明確にしています。

動きと機能：現在の選択を支える

トップバナーには左右の切り替え矢印を残し、下部のカテゴリー画像から各一覧へ移動できます。詳細は数量、写真、説明を商品中心にまとめ、モバイルではナビゲーションを明確なメニュー入口へ収納し、閲覧の流れを維持しました。

トップバナー：目元のメイクを最初の焦点に

右側に2組の目元の接写、左側にテーマ説明を置き、簡潔なヘッダーにはオレンジのChroma Dewyロゴを配置しました。接写が色と質感を示し、左右の矢印から他のテーマへ切り替えられます。

Josefin Sansの軽やかな文字でナビゲーションと商品説明をつなぎ、明るい背景が鮮やかなメイクを引き立てます。画像と文章を分け、最初の画面にすべての説明を詰め込みません。

新着エリア：規則的なグリッドで色を比較

New Arrivalsを複数列のパレットカードで構成し、明るい背景でアイシャドウの色を比較できます。画像下の名前と価格は簡潔にし、次の段へBrushes、Eyes、Lipsのカテゴリー画像を置きました。

パレットの大きさとカード幅をそろえ、カテゴリー入口の間隔を均等にしました。オレンジは部分的なブランド表示に使い、色彩の主役は商品自体にしています。

ブラシ一覧：形とセット内容を明確に

単品ブラシとセットを同じグリッドに置き、上部のMakeup Brushesで範囲を示しました。毛先、柄、セット本数をまず写真で伝え、名前と価格を下に続けます。

白地と広めのカード間隔で混雑を抑え、細いナビゲーション文字と中央の見出しで軽さを保ちました。一覧操作には独立した場所を設け、比較の流れを妨げません。

商品ページ：テーマのパッケージ写真から詳細へ

The Volturiでは左側に赤黒いパッケージ写真、右側に名前、価格、数量、短い説明を配置。写真で視覚的な特徴を伝えてから、文章で詳しい確認へつなぎます。

赤い写真背景と明るいページに境界を作り、操作欄は細い枠とコンパクトな間隔で構成。写真と文章の間に余白を取り、暗いテーマも軽い画面の中ではっきり見せています。

詳細の続き：補足情報と関連商品を分ける

下部にはサムネイル、レビュー、You May Also Likeを残しました。セクション間の余白でつなぎつつ、現在の商品情報と次の商品選びを区別します。

おすすめ画像の列幅を統一し、人物、パッケージ、道具も明るい背景で展示。小見出しと縦の余白で情報を分け、興味のある商品を探し続けられます。

モバイルトップ：メニューをまとめ、テーマと新着を維持

横のナビゲーションを赤いMENU入口へまとめ、ロゴと検索情報を上に縦並びにしました。テーマバナーの後へNew Arrivalsを置き、メイクの印象から商品を見る順序を保っています。

狭い画面では商品画像の面積を増やし、名前と価格を縦に並べました。赤いメニュー帯と明るい本文を明確に分け、テーマ閲覧中でもカテゴリーへ戻れます。

モバイル商品：画像と説明を順に見せる

パンくずと大きなパッケージ写真を先に見せ、名前、価格、数量を続けます。テーマ全体を保ちつつ、PCの2列を連続した読み方に変えました。

見出しは左揃えで自然に折り返し、価格と操作欄を余白で分けました。明るい背景、細い枠、ブランド色で他のページと統一しています。

デザインのまとめ：テーマと具体的な情報をつなぐ

Chroma Dewyではメイクのテーマと色彩豊かな展示を軸に、オレンジ、明るい背景、鮮やかな写真でトップ、カテゴリー、商品ページをつなぎました。画像はテーマ、文章は具体的な情報を伝え、一覧と仕様の操作が次の行動を支えます。モバイルも同じ順序で一貫した閲覧体験を保ちます。

ブランドに合った分かりやすいShopyyサイトを計画する

現在のサイトURL、ブランド素材、必要なページ範囲をお知らせください。商品、対象市場、重視する内容を踏まえ、適切なページ、ビジュアル、機能を一緒に整理します。