SPACE SOUVENIR

1. 01

   告知バー

   最上部のオレンジの帯に、POP UPの会期や新作の告知を横一列に流す。

2. 02

   ヘッダー

   左に2段組のロゴ、中央にSHOP / NEWS / ABOUT / STOCKIST、右に検索・アカウント・カート・SNS・言語切替のアイコンを並べる。

3. 03

   ヒーロー

   青い背景にロンT・トートバッグ・キャップを並べた物撮りを全幅で敷き、左下に「26AW Collection」の大きな白文字と青のSHOP NOWボタン。26SS CAPなどコレクションごとに切り替わる。

4. 04

   NEW ARRIVALS

   青の全幅帯に白の太字見出しを置き、薄いグレー背景の商品写真を4列のグリッドで並べる。NEW / COMING SOONのラベル、商品名、価格を添える。

5. 05

   WEEKLY BEST

   同じ青帯の見出しに続き、順位番号付きの商品を横に流れるカルーセルで見せる。

6. 06

   NEWS

   日付・カテゴリ・タイトル・要約を罫線で区切った一覧にし、右側にオレンジのPOP UP告知サムネイルを添える。

7. 07

   ABOUT

   濃紺の星空の背景にロゴと「宇宙にある架空のスーベニアショップです」という一文、VIEW MOREボタンだけを置く。

8. 08

   INSTAGRAM

   青帯の見出しの下に、POP UP告知や商品の投稿サムネイルを横一列に並べる。

9. 09

   フッター

   青地に商品カテゴリ・ガイド・ポリシーのリンク群、等幅の小さなテキスト、右下に大きな白抜きロゴを置く。

• 告知バーは同じテキスト列を CSS の @keyframes で translateX させる無限マーキーと思われる
• ヒーローはコレクションごとに画像と見出しが切り替わるスライドショー。Shopify テーマのスライドショーセクションで再現可能
• WEEKLY BEST は横スクロールのカルーセル。scroll-snap-type: x mandatory で再現可能
• ヘッダーはスクロール中も上部に固定表示される

スクロールのコマ撮り180–400ms

検出された技術:Shopify

• 01ブランドカラーは #003df2 の1色に絞り、見出し帯・ボタン・フッターで繰り返し使う
• 02物撮りは同じ青背景・同じライティングでそろえ、FVとInstagramのトーンを統一する
• 03英字見出しは Helvetica Neue（代替は Inter）の太字を大きく組み、ラベルに等幅フォントを混ぜて“観測データ”っぽさを足す
• 04商品カードは薄いグレー背景と細い罫線のグリッドにして、商品写真の色を主役にする

1---
2title: "SPACE SOUVENIR 再現用デザイン仕様書"
3source: https://www.space-souvenir.com/
4katapick: https://katapick.com/sites/space-souvenir
5category: EC
6region: 国内 (JP)
7tags: [ビビッド, ブルー基調, 写真主体, グリッド, 大胆なタイポ, マーキー]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# SPACE SOUVENIR — 再現用デザイン仕様書
17 
18> 宇宙の土産屋って設定を、青1色でやり切ってる。宇宙にある架空のスーベニアショップSPACE SOUVENIRの公式ストアは、青地の物撮りと青の見出し帯を繰り返し、アパレルECを旅先の売店のように楽しませる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22