プロジェクト概要
MMJerseysのShopyyサイトでは、リーグ別の一覧とユニフォーム選択を軸に構成しました。リーグナビゲーション、一覧入口、新着商品を異なる階層に置き、チームから探す人にも、デザインを直接見る人にも入口を用意。白い商品グリッド、赤いナビゲーション、黒い文字でテーマ閲覧、比較、個別商品の確認をつなぎました。
| サービス | 業種 | プラットフォーム |
| Shopyyサイトのデザイン・構築 | 衣服 | Shopyy |
| プロジェクト要件 | 対象市場 | デザインスタイル |
| リーグ別一覧とユニフォーム選択 | 海外のユニフォーム購入者向け英語表示 | 白い商品グリッド、赤いナビゲーションの強調、黒い文字 |
| 見積価格 | 納品内容 | 納期 |
| CNY 9,400 | トップページ、カテゴリー構成、商品詳細、レスポンシブデザイン、ブランド紹介・問い合わせページ | 22日 |
デザイン上の課題
リーグ、チーム、シーズン、デザインが同時に選択へ影響します。まず一覧の階層を明確にし、写真と仕様で具体的な判断を支え、分類と説明を同じ階層に詰め込まないようにしました。
デザイン方針：リーグ別一覧とユニフォーム選択
リーグの案内、一覧入口、新着グリッドを異なる階層に配置し、チーム検索とデザイン閲覧の両方を支えました。トップは方向性、カテゴリーは比較、詳細は外観と仕様を担い、ナビゲーションとリンクでつなぎます。
ArialとHelveticaを見出し・ナビゲーション・本文に使用し、上部の告知帯は細長い文字で強調しました。文字の大きさ、太さ、段落幅で階層を示し、白いグリッド、赤の強調、黒い文字を主要ページに統一。グループ内は密に、セクション間は広く取りました。
動きと機能：現在の選択を支える
一覧はホバーで開くメニューを採用し、商品欄にはタブとデザインのサムネイルを残しました。詳細ではサイズ、番号、追加オプションを順に配置。選択状態とグループ間の余白を明確にし、余分なアニメーションで商品画像を妨げません。
トップの商品欄：外観を比較してから商品名を確認
New ArrivalsやWorld Cup 2026のタブを商品グリッドの上に置き、掲載画面では新着商品を表示しています。各カードはユニフォームの正面写真、名前、価格、補足の順。同じ行の写真サイズをそろえ、配色や模様を比べやすくしました。
白い背景と細い黒文字でチームの鮮やかな色を主役にしました。タブと商品の間を空け、カード内はコンパクトにまとめ、一覧を眺めてから個々の名前を読める構成です。
リーグ一覧：チーム別の入口で候補を絞る
Premier Leagueでは上部にチーム名のリンクを並べ、その下の商品グリッドへつなぎました。ページ名、下位分類、Refine・Sort Byを別階層に置き、情報量が多くても順序を明確にしました。
赤はナビゲーションと新着表示に限定し、商品欄は明るい背景を維持。大きな写真と一定幅のカードで比較を支え、細かな仕様は詳細ページへ分けて一覧を文章で膨らませません。
商品詳細：実写と選択情報を横に並べる
左に大きなユニフォーム写真、右に名前、価格、告知帯、Similar Styleを配置しました。青赤のストライプを主な視覚要素とし、サムネイルで同じ商品の別角度を示します。
右欄は短い段落とグループ間の余白で整理し、黄色い告知帯を局所的な強調にしました。写真と文章の幅を明確にして、外観を確認しながら選択を進められます。
仕様欄：デザインとカスタマイズを分ける
左の写真と下部サムネイルを維持し、右には関連デザインの小さなカードを整列。その下にサイズとカスタマイズを置き、異なる判断を長い一つの選択欄にまとめず順序化しました。
小画像の間隔を一定にし、文字の選択肢は薄い枠と余白で分けました。種類が多くてもグリッドが比較を整理し、サイズや番号を商品情報の近くに置いて探し回る手間を減らします。
紹介ページ：短い文章で事業背景を補う
中央の見出しと短い段落で事業を紹介し、ショップ共通のヘッダーとフッターを維持。背景説明に役割を絞り、読み終えたらナビゲーションから一覧へ戻れます。
明確なサンセリフと広めの行間、段落間の余白で読みやすくしました。白地に黒文字を継続し、商品バナーを重ねず、選択ページとは異なる読み方を作っています。
問い合わせページ：メッセージ入口を明確にする
上部に問い合わせ説明を置き、青い円形メッセージ画像で次の入口を示しました。メール、案内、入口を余白で分け、連絡方法を理解してから選べます。
白いシンプルな本文を保ち、青い入口と上部の赤いショップナビゲーションを区別しました。ここは連絡の案内を担い、商品一覧や価格は各ページに残しています。
モバイルトップ：バナーと2列の商品でテーマを継続
狭い画面でも上部の告知帯、ユニフォームバナー、新着入口を残し、グリッドをスマートフォン幅へ調整しました。バナーでテーマを示してから商品選択へ進みます。
見出しと商品名はカード幅に合わせて折り返し、写真は十分な大きさを確保。縦の余白でバナー、タブ、商品を分け、同じ内容順序を保ちました。
モバイル商品ページ：大きな写真でデザインを示す
最初に大きな写真と別角度サムネイルを見せ、名前、価格、告知を続けます。PCの左右2列を縦構成へ変え、各情報に十分な幅を与えました。
写真の目立つ面積を保ち、文章は左揃えでグループ内の間隔を調整。デザインと仕様が続き、写真、名前、選択情報の関係を維持します。
デザインのまとめ：テーマと具体的な情報をつなぐ
MMJerseysではリーグ一覧と商品選択を軸に、白いグリッド、赤いナビゲーション、黒い文字でトップ、カテゴリー、詳細をつなぎました。画像はテーマ、文章は具体的な情報を伝え、一覧と仕様の入口が次の行動を支えます。モバイルも同じ順序で、一貫した閲覧体験を実現しています。
ブランドに合った分かりやすいShopyyサイトを計画する
現在のサイトURL、ブランド素材、必要なページ範囲をお知らせください。商品、対象市場、重視する内容を踏まえ、適切なページ、ビジュアル、機能を一緒に整理します。
