1. 商品詳細ページ構成サマリ
上から下へのセクション構成。購入判断に必要な情報を過不足なく配置
| セクション | 役割 |
| 1. ギャラリー + 購入情報 | ファーストビュー。写真6枚 + 価格 + CTA |
| 2. 直販限定バッジ | X-Pac VX21 = ここでしか買えない |
| 3. 機能ハイライト（3点） | クラムシェル / ポケット設計 / ハンドル |
| 4. 素材セクション | X-Pac VX21の訴求。防水・軽量・強度 |
| 5. スペック表 | 容量・サイズ・重量・PC対応・素材 |
| 6. レビュー | 社会的証明。星評価+テキストレビュー |
| 7. もう一つのMNL | CITY PACK ↔ LITE の相互送客 |
| 8. FAQ（アコーディオン） | 送料・返品・サイズ選びなど |
設計方針: 1商品=1SKU、バリアントなし。素材選択UIや色切替は不要。
CTAはシンプルに「カートに入れる」1つだけ。迷わせない。
SPではフローティングCTAを常時表示し、スクロール中もカート追加を可能に。
CTAはシンプルに「カートに入れる」1つだけ。迷わせない。
SPではフローティングCTAを常時表示し、スクロール中もカート追加を可能に。
2. Desktop ワイヤーフレーム
1440px基準。左55%ギャラリー + 右45%購入情報のスプリットレイアウト
商品詳細ページ — Desktop 1440px /products/mnl-city-pack-xpac
MNL
HOME > MNL > CITY PACK X-Pac
CITY PACK X-Pac
メイン商品写真
Swiper Gallery / ピンチズーム対応
メイン商品写真
Swiper Gallery / ピンチズーム対応
MNL
CITY PACK X-Pac
X-Pac VX21 / 21L / 15.6インチPC対応
¥29,800 (税込)
直販限定素材 — Amazon・楽天では取り扱いなし
カートに入れる
送料無料 / 14日間返品可能
主な特徴
X-Pac VX21 防水構造
180度クラムシェルオープン
独立PCコンパートメント（15.6"）
抗菌仕様 / 背面ストレッチ素材
YKKジッパー / Woojinバックル
配送について+
返品・交換+
お手入れ方法+
DETAILS
すべてに理由がある
クラムシェルオープン
写真
写真
180度クラムシェルオープン
メインコンパートメントがスーツケースのように大きく開く。
中身が一目瞭然、パッキングのストレスから解放。
デッドスペースゼロの収納設計
上部にイヤホンポケット、PC気室上にマウス・充電器ポケット。
すべてのスペースに意味がある。
ポケット配置
写真
写真
ハンドル
写真
写真
3つのハンドルポジション
正面から見えないデザイン。持ち方に応じた3箇所配置。
電車内でも、デスク横でも、スマートに掴める。
MATERIAL
X-Pac VX21
X-Pac VX21
素材クローズアップ
素材クローズアップ
直販限定素材 — X-Pac VX21
ダイヤモンドリップストップナイロンにポリエステルフィルムをラミネートした複合素材。防水性・軽量性・引裂強度を高次元で両立。
Waterproof
防水構造
Lightweight
軽量
Durable
高強度
SPECIFICATIONS
| 容量 | 21L |
| サイズ | W320 x H480 x D170 mm |
| 重量 | 1,250g |
| PC対応 | 15.6インチまで |
| 素材 | X-Pac VX21（直販限定） |
| ジッパー | YKK |
| バックル | Woojin |
| その他 | 抗菌仕様 / 背面ストレッチ素材 / 撥水加工 |
REVIEWS
★★★★★
4.8 / 5.0（xx件のレビュー）
★★★★★
クラムシェルが最高。一度使うと戻れない。出張のパッキングが劇的に楽になった。
★★★★★
仕事にも休日にも違和感なく使える。ミニマルな見た目なのに収納力がすごい。
★★★★☆
防水性能は文句なし。もう少し外ポケットが大きければ完璧だった。
★★★★★
カフェ仕事が多いのでPC気室の独立が本当にありがたい。保護性能も安心。
ALSO FROM MNL
もう一つのMNL
CITY PACK LITE X-Pac
製品写真
製品写真
CITY PACK LITE X-Pac
14L / 14インチPC / 920g
¥27,800
VIEW DETAILS
FAQ
よくある質問
CITY PACKとLITEの違いは？+
防水性能はどの程度ですか？+
Amazon・楽天では買えないのですか？+
返品・交換はできますか？+
3. SP（スマートフォン）ワイヤーフレーム
375px基準。SNS広告からの流入はほぼSP。フローティングCTAで常時購入可能
商品詳細ページ — SP 375px /products/mnl-city-pack-xpac
☰
MNL
🛒
HOME > MNL > CITY PACK
CITY PACK X-Pac
メイン写真
横スワイプ
メイン写真
横スワイプ
1 / 6
MNL
CITY PACK X-Pac
X-Pac VX21 / 21L / 15.6" PC対応
¥29,800 (税込)
直販限定素材 — Amazon・楽天では取り扱いなし
主な特徴
X-Pac VX21 防水構造
180度クラムシェルオープン
独立PCコンパートメント（15.6"）
抗菌仕様 / YKK / Woojin
配送について+
返品・交換+
DETAILS
すべてに理由がある
クラムシェル写真
180度クラムシェルオープン
大きく開いて中身が一目瞭然。
ポケット写真
デッドスペースゼロ
すべてのスペースに意味がある。
ハンドル写真
3つのハンドルポジション
シーンに応じたスマートな掴み方。
MATERIAL
X-Pac VX21
素材クローズアップ
直販限定素材
防水・軽量・高強度を兼ね備えた複合素材。
Waterproof
防水
Lightweight
軽量
Durable
高強度
SPECIFICATIONS
| 容量 | 21L |
| サイズ | W320×H480×D170mm |
| 重量 | 1,250g |
| PC対応 | 15.6インチまで |
| 素材 | X-Pac VX21 |
REVIEWS
★★★★★
4.8 / 5.0
★★★★★
クラムシェルが最高。出張が楽になった。
★★★★☆
防水は文句なし。外ポケットがもう少し大きければ。
ALSO FROM MNL
もう一つのMNL
LITE X-Pac
CITY PACK LITE X-Pac
14L / 14" PC / 920g
¥27,800
VIEW DETAILS
¥29,800
カートに入れる
SP フローティングCTA: スクロールしても画面下部に「価格 + カートに入れる」が常時表示。
Able Carryと同じアプローチ。SNS広告→商品詳細ページ直接流入のCVR最大化。
Able Carryと同じアプローチ。SNS広告→商品詳細ページ直接流入のCVR最大化。
4. セクション詳細仕様
各セクションの実装指針・写真指示・コピー方向性
4-1. ギャラリー
| 枚数 | 6枚（メイン + サブ5枚） |
| 写真構成 | 1. 正面全体 / 2. 背面 / 3. クラムシェル開き / 4. PC気室 / 5. ポケット詳細 / 6. 着用イメージ |
| Desktop | Swiper Gallery + サムネイル列（横6枚） |
| SP | 横スワイプ + ドットページネーション + カウンター（1/6） |
| ズーム | ピンチズーム or タップで拡大表示 |
| 背景 | 白 or ライトグレー。製品を際立たせる |
4-2. 購入情報エリア
| ブランド名 | MNL（10px, tracking広め） |
| 商品名 | CITY PACK X-Pac（20px, weight:600） |
| サブタイトル | 素材 / 容量 / PC対応（12px, gray） |
| 価格 | ¥29,800（税込）— 目立つサイズ |
| 直販限定バッジ | 左ボーダー付きのハイライト帯 |
| CTA | 黒ベタ全幅「カートに入れる」 |
| 補足 | 送料無料 / 14日間返品可能 |
| アコーディオン | 配送 / 返品・交換 / お手入れ |
4-3. 機能ハイライト
| レイアウト | Desktop: 交互グリッド（画像+テキスト）/ SP: 縦スタック |
| 3つの機能 | クラムシェル / ポケット設計 / ハンドル |
| 写真 | 各機能の接写・使用シーン写真 |
| テキスト | 見出し（13px, bold）+ 説明2行（11px） |
4-4. 素材セクション
| 背景 | ライトグレー（セクション区切り） |
| カード構成 | 素材クローズアップ写真 + 説明 + 3バッジ |
| 訴求ポイント | Waterproof / Lightweight / Durable |
| 直販限定 | カード内で再度明示 |
4-5. 相互送客（もう一つのMNL）
CITY PACKページ → LITE X-Pacカード表示
LITEページ → CITY PACK X-Pacカード表示
Shopifyの「関連商品」セクションではなく、カスタムセクションで1商品だけをピンポイント表示。
2SKUしかないので「あなたへのおすすめ」的なUIではなく、「もう一つのサイズ」として訴求。
LITEページ → CITY PACK X-Pacカード表示
Shopifyの「関連商品」セクションではなく、カスタムセクションで1商品だけをピンポイント表示。
2SKUしかないので「あなたへのおすすめ」的なUIではなく、「もう一つのサイズ」として訴求。
4-6. FAQ（アコーディオン）
| 表示 | 商品詳細ページ下部にインライン表示（別ページ遷移なし） |
| 質問数 | 4〜5問（商品詳細ページ固有の質問に絞る） |
| 想定Q | サイズ比較 / 防水性能 / 直販限定理由 / 返品 |
| UI | アコーディオン開閉。+アイコン |
5. Desktop / SP 対照表
レスポンシブ設計のブレークポイントと要素変更
| 要素 | Desktop（1440px） | SP（375px） |
| ナビ | テキストリンク | ハンバーガー + ドロワー |
| ギャラリー | メイン + サムネイル6枚横並び | 横スワイプ + ドット + カウンター |
| 商品詳細ページ上部 | 左55%ギャラリー + 右45%情報 | 縦スタック（ギャラリー→情報） |
| CTA | 購入情報エリア内に固定 | フローティング常時表示（画面下部固定） |
| 機能ハイライト | 交互グリッド（画像左右切替） | 縦スタック（画像→テキスト） |
| 素材カード | 中央配置 max-width:600px | フル幅 |
| スペック表 | max-width:600px | フル幅 |
| レビュー | 2カラムグリッド（4件） | 1カラム（2件表示+もっと見る） |
| 相互送客 | 中央1カード | フル幅1カード |
| FAQ | max-width:700px 中央 | フル幅 |
| フッター | 4カラム | 2カラム or アコーディオン |
ブレークポイント: 768px で SP レイアウトに切替。
フォントスケール: SP では全体的に 1〜2px ダウン。可読性を保ちつつコンパクトに。
タッチターゲット: CTA・アコーディオン・ギャラリーサムネイルは最低44×44pxを確保。
フォントスケール: SP では全体的に 1〜2px ダウン。可読性を保ちつつコンパクトに。
タッチターゲット: CTA・アコーディオン・ギャラリーサムネイルは最低44×44pxを確保。