Shopyy靴通販サイト制作：StocksKickの商品展示とサイズ選択

プロジェクト概要

StocksKickのShopyyサイトでは、靴のテーマ展示とサイズ選択を軸にページを構成しました。大きな靴のバナーで第一印象を作り、サービスアイコンとカテゴリー別商品グリッドから選択へ導きます。白黒の画面、大きな靴の画像、整った商品カードで、テーマ閲覧、一覧比較、個別商品の確認を連続した流れにしました。

デザイン上の課題

靴のサイトでは形や配色を見せると同時に、サイズを明確に選べる必要があります。テーマバナー、一覧比較、商品写真、仕様の選択を分け、視覚的な表現と具体的な判断のそれぞれに場所を設けました。

デザイン方針：靴のテーマ展示とサイズ選択

大きな靴のバナーで第一印象を作り、サービスアイコンとカテゴリー別グリッドから商品選びへ進めます。トップページは方向性を示し、カテゴリーは比較を、商品ページは外観と仕様の説明を担い、ナビゲーションとリンクで各段階をつなぎます。

見出し、ナビゲーション、本文にはPoppinsを使い、文字の大きさ、太さ、段落幅で優先順位を示しました。主要ページを白黒の画面、大きな靴の画像、整ったカードで統一。関連情報は近づけ、セクション間は広く取り、画像、説明、操作を区別しました。

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

トップのバナーは自動で切り替わり、ヘッダーのカテゴリーから各一覧へ移動できます。詳細には複数アングルのサムネイル、まとめたサイズボタン、開閉できる情報欄を配置。画像切り替え、比較、説明確認を支え、白黒の画面でも操作の階層を明確にしました。

トップページ：靴のバナーでテーマを伝える

最初の画面は横長の靴バナーを中心とし、ヘッダーではロゴ、検索、カテゴリーを整列しました。大きな靴の画像と見出しを視覚的な中心に置き、周囲を白黒にしてテーマの色を際立たせました。

Poppinsの見出しとナビゲーションは簡潔な形を保ち、検索欄と機能アイコンを同じ水平線に配置しました。冒頭ではテーマに十分な空間を与え、商品の細部は後続ページで段階的に説明します。

トップの商品エリア：サービス案内と商品選択を分ける

バナー下にサービス案内と商品展示を置き、テーマ閲覧から具体的な靴選びへつなげました。アイコンと短文を軽い情報帯にまとめ、その下のカードは画像サイズ、商品名、価格を統一して比較しやすくしました。

白いコンテンツ領域と固定列幅で視覚的な雑音を抑え、画像の間隔を均等にしました。見出しとカードの間に余白を置き、サービス情報と商品情報をそれぞれまとめています。

カテゴリーページ：形と配色を横に比較する

複数列のカードで靴を表示し、写真、名前、価格を一定の順序に並べました。靴の輪郭を十分に大きく見せ、異なる配色をまず画像で比較できるようにしています。

明るい背景に黒い文字を合わせ、カードの行列間隔を一定に保ちました。一覧操作と商品を分け、候補を絞ってから個別ページでサイズを確認できます。

商品ページ：大きな写真とサイズ一覧で選択を支える

赤い靴の大きな実写を左に、商品名、価格、サイズボタンを右に置きました。同じ幅のボタンをマトリクス状に並べ、USとEUの対応情報を選択欄に直接示しています。

大きな商品写真で形と素材を見せ、右欄では文字の太さと余白で名前、価格、サイズを区別しました。ボタンも白黒を継続し、現在の商品と選べる仕様に注目を集めます。

詳細下部：複数の写真と折りたたみ説明を並べる

大きな商品写真と下部のサムネイルを残し、右側にはサイズ、数量、購入操作、DetailとCustomer Reviewsを表示しました。角度の確認と説明の閲覧を隣接させ、さらに下へ関連商品を配置しています。

サムネイルは小さな同一サイズに統一し、細い線とプラス・マイナス記号で開閉欄を区別しました。写真と文章の間を広く取り、細かな仕様も画像も読み取りやすくしています。

紹介ページ：小見出しで長い説明を整理する

ブランドの説明を独立ページにまとめ、取引、商品、サービスに関する内容を小見出しで整理しました。ショップのヘッダーを残し、本文領域は文章を読むために使っています。

Poppinsの小見出しと本文を太さで区別し、段落間に余白を設けました。長い内容をテーマ別に分け、見出しから必要な情報を探し、ヘッダーから一覧へ戻れます。

問い合わせページ：営業時間と連絡手段をまとめる

営業時間、メール、WhatsAppを順に表示しました。シンプルな縦構成で一つの領域に集め、フッターの複数箇所を探す手間を減らしています。

本文は左揃えにし、情報グループ間に余白を置きました。ヘッダーとフッターはショップ共通の構成を維持し、読みやすい文章を中心とした軽いページにしています。

モバイル詳細：写真、名前、サイズの順に表示する

スマートフォンでは靴の写真に横幅を十分に使い、その下に名前、価格、仕様を並べました。PCの横並びを縦構成に変え、写真とサイズ情報の双方に十分な場所を確保しています。

写真の下は明確な見出しと余白で商品情報へつなぎ、ボタンはPCと同じ白黒にしました。まず靴を確認し、続けて自分に合うサイズを調べられます。

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

StocksKickでは、靴のテーマ展示とサイズ選択を軸に、白黒の画面、大きなバナー、整ったカードでトップ、カテゴリー、商品ページをつなぎました。画像がテーマを、文章が具体的な情報を伝え、一覧と仕様の操作が次の行動を支えます。モバイルも同じ順序を保ち、サイト全体に一貫した閲覧体験を作りました。

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

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