Shopyyウィッグ・つけまつげサイト制作：Lash & Wigsの着用イメージと商品詳細

プロジェクト概要

Lash & WigsのShopyyサイトでは、ヘアメイクのイメージから商品詳細へつなぐ構成を作りました。モデル写真を組み合わせてカテゴリーの印象を示し、毛束、つけまつげ、着用写真を同じ商品展示へ展開。モデルのコラージュ、白いグリッド、黒いフッターで、テーマ閲覧、比較、個別確認を連続させました。

デザイン上の課題

ウィッグとつけまつげは、全体の仕上がりと具体的な形の両方を見せる必要があります。モデル写真でスタイルを伝え、明瞭な商品写真でカール、長さ、包装を説明し、画像ごとの役割を分けました。

デザイン方針：ヘアメイクのイメージと商品詳細をつなぐ

モデル写真のコラージュでカテゴリーを印象づけ、毛束、つけまつげ、着用写真を同じ展示へつなげました。トップは方向性、カテゴリーは比較、詳細は外観と仕様を説明し、メニューとリンクで接続します。

画面の主書体にPoppins、一部の説明にHelveticaを用い、大きさ、太さ、段落幅で見出し・メニュー・本文の階層を示しました。モデルバナー、白いグリッド、黒いフッターを共通化し、グループ内は密に、セクション間は広くしました。

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

商品ページの別角度サムネイルと長さの選択肢が判断を支えます。モバイルも画像番号と収納したメニューを維持。商品をよく見て長さを選ぶ操作を中心にし、画像と文章の区分、スクロールで読み進める流れを重視しました。

トップ：着用イメージから商品へ

複数モデルのヘアメイク写真を横長バナーに組み、中央のLASH & WIGSでカテゴリーを示しました。すぐ下にTop Sellersを置き、カール毛束、つけまつげ、着用写真を同じ商品領域に並べます。

人物写真に白文字を重ね、周囲のヘッダーは簡潔にしました。画像でスタイルを示し、その下の白い一覧で商品へ進む順序です。

人気商品：異なる形の商品にそれぞれ場所を用意

毛束、つけまつげセット、着用写真を同じ幅のカードで並べました。写真の下に名前と価格を置き、形を見てから商品情報を確認できます。

白地の一覧でカード間を均等に空けました。暗いカール毛束は明るい背景で輪郭が分かり、色のあるつけまつげ包装も同じグリッドで識別できます。

つけまつげ一覧：画像サイズをそろえて比較

着用効果、セット包装、単品の形を規則的なグリッドに配置。上部にカテゴリー名と一覧操作を残し、範囲を理解してから商品を横に比較できます。

写真下には短い名前と価格を置き、グループ内は近く、行間は広くしました。白黒の文字と明るい背景で、まつげの輪郭や包装色が比較の手がかりになります。

毛束詳細：カール写真と長さ選択を隣り合わせに

深いカールの毛束写真を左に大きく置き、右に名前、価格、長さ、操作欄を順に配置。商品の輪郭に大きな面積を与え、長さボタンは同じ情報欄にまとめました。

大きなサンセリフ見出しと薄い枠で長さを区別しました。下部の黄色い支払い入口は局所的な強調とし、画像と仕様はそれぞれの読み取り領域を維持します。

細部と説明：カールと使用情報を補う

下部にも大きな毛束写真と別角度サムネイルを残し、右欄は短い段落で商品情報を説明。写真と文字の2列構成を続け、その先へレビューを接続しました。

サムネイルの間隔を一定にし、説明は小見出しと段落の余白で区分。白地の暗い毛束は輪郭が明確で、全体から細部へ確認を進められます。

ブランド紹介：短い文章で事業の方向を示す

About Usの見出しと短い文章でExcitingFashionの事業背景を紹介します。商品ページと同じヘッダーを残し、下には黒いコミュニティ・ナビゲーションのフッターを置いて上下を区切りました。

細めの文字と広い段落間隔で白い本文を簡潔にしました。背景説明に専念して商品画像を繰り返さず、ページごとの役割を明確にしています。

問い合わせ：連絡手段を一か所に

見出し下に案内、WhatsApp、メールを集め、簡単な文章構造にしました。チャネルをまとめ、読んですぐに連絡方法を選べます。

白い本文と黒いフッターを分け、左揃えと明確な行間を保ちました。商品ページより軽い構成で、情報をすぐ探せるようにしています。

モバイルトップ：バナーのテーマと商品順序を継続

まずモデルのコラージュ、次にTop Sellersと大きな商品写真を見せます。PCのカテゴリーの印象を残し、狭い画面でもヘアメイクの方向性が最初に分かります。

上部メニューはアイコン入口へ変え、商品写真の横幅を十分に使いました。バナー、見出し、商品の間に縦の余白を置き、各内容に独立した読む場所を与えます。

モバイル詳細：毛束の質感を先に見せる

大きな毛束写真と画像番号を最初に表示し、名前、価格、長さを続けました。カールと毛の輪郭を大きく見せ、形を先に確認できます。

文章は画面幅で折り返し、名前と価格の間を明確に空けました。PCの2列を縦に変えても、画像から仕様へ進む順序を維持します。

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

Lash & Wigsではヘアメイクのイメージと詳細を軸に、モデルバナー、白いグリッド、黒いフッターでトップ、カテゴリー、商品ページをつなぎました。画像がテーマを、文章が具体的な情報を伝え、一覧と仕様の入口が次の操作を支えます。モバイルも同じ順序で一貫した体験を保ちます。

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

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