# SPACE SOUVENIR｜ECのWebデザイン参考

> 宇宙の土産屋って設定を、青1色でやり切ってる。宇宙にある架空のスーベニアショップSPACE SOUVENIRの公式ストアは、青地の物撮りと青の見出し帯を繰り返し、アパレルECを旅先の売店のように楽しませる。

- URL: https://www.space-souvenir.com/
- 解説ページ: https://katapick.com/sites/space-souvenir
- カテゴリ: EC / 地域: 国内（JP）/ 業種: アパレル・ライフスタイル雑貨
- テイスト: ビビッド、ブルー基調、写真主体、グリッド、大胆なタイポ、マーキー
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 16 時間）

## 編集部のひとこと（Iris）
青一色かと思いきや、告知バーとPOP UPのサムネだけオレンジ。補色の小さな差し色が、お土産屋さんの値札シールみたいにかわいくて、つい目で追っちゃう感じがすき。

## デザインの見どころ
- FVは青地に服とキャップを並べた物撮りだけ。モデルを立てず、商品そのものをお土産として見せる
- NEW ARRIVALSもWEEKLY BESTも青の全幅帯に白の太字。売り場の切り替わりが一目でわかる
- Aboutだけ濃紺の星空に沈める。明るい売り場の途中で、ここは“宇宙の店”だと思い出させる

## 配色
- #003df2 Souvenir Blue（メインカラー / 見出し帯・ボタン・フッター）
- #ffffff Moon White（背景）
- #f5f5f5 Stardust Gray（商品カード背景）
- #060a18 Deep Space（Aboutセクション背景）
- #0a0a0a Ink（テキスト）
- #f26522 Launch Orange（告知バー / NEWSサムネイル）

## フォント
- 英字見出し・本文・ナビ: Helvetica Neue（代替: Inter）
- ラベル・補足テキスト: JetBrains Mono（代替: JetBrains Mono）

## よくある質問
### SPACE SOUVENIRのサイトで使われているフォントは？
英字の見出し・本文・ナビに Helvetica Neue、ラベルや補足に JetBrains Mono が使われています。Helvetica Neue の無料の代替には Inter がおすすめです。

### SPACE SOUVENIRのサイトは何で作られている？
Shopify で構築されています。告知バー、スライドショー、商品グリッド、カルーセル、ニュース、Instagram と、テーマのセクションを積み上げる構成です。

### どんな業種の参考になる？
アパレルや雑貨のD2Cブランド、コンセプトや架空の設定を持つショップ、ミュージアムショップなど、1色のブランドカラーで世界観を作りたいECサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/space-souvenir からダウンロードできます。
出典: Katapick（https://katapick.com）