SHIPS

1977年創業のセレクトショップ。"STYLISH STANDARD" を掲げ、トラディショナルな要素を現代的に再解釈。欧文 Roboto + 游ゴシック Medium の組み合わせと、ネイビーピル型 CTA が視覚的アイデンティティ。

特集をすべて見る More
01 / Colors

Color Palette

Brand
Brand Navy
#04345a
主要CTA・ブランドカラー
Brand Navy Dark
#003559
フッター・モーダル閉じ
Text
Text Primary
#000000
本文テキスト
Text Title
#333333
セクションタイトル
Text Secondary
#666666
日付・補足テキスト
Accent
Sale Red
#a50000
カート通知・エラー
Highlight Yellow
#ffee00
セールバッジ「開催中」
Surface & Border
Background
#ffffff
ページ背景
Surface Light
#f8f8f8
レビュー・セクション背景
Surface Gray
#eeeeee
カルーセルドット非活性
Dot Active
#999999
カルーセルドット活性
Footer
#666666
フッター背景
02 / Typography

Typography Hierarchy

欧文 Roboto を先頭に置き、和文は游ゴシック Medium でフォールバック。全体的に weight 400 で統一し、太さではなくサイズと色で階層を表現する。letter-spacing / palt は未使用。

PICK UP ITEMS
Display / 34px / 400 / line-height: 1.65特集見出し
今週のおすすめアイテム
Section Heading / 28px / 400 / line-height: 1.46セクション見出し
SHIPS Original Collection
Brand Name (en) / 18px / 400 / line-height: 1.5欧文ブランド名
SHIPS 渋谷店
Shop Name / 15px / 400 / line-height: 1.5店舗名
定番のオックスフォード BD シャツを SHIPS らしいフィットで仕上げました。身幅をやや絞りつつ、肩は自然に落ちるレギュラーシルエット。ABCabc 123
Content Body / 14px / 400 / line-height: 1.43商品説明
定番のシャツにSHIPSらしいアレンジを加えた一枚。
Body (base) / 12px / 400 / line-height: 1.5基本テキスト
2026.05.22 / NEWS
Sub Text / 12px / 400 / line-height: 1.67 / color: #666666日付・補足
MEN WOMEN KIDS OUTLET COORDINATE
Nav Links / 11px / 400 / line-height: 1.5ナビゲーション
4.5 (128 reviews)
Rating / 16px / 700 / line-height: 1.5 (Roboto, 数字のみ Bold)レビュー評価値
03 / Product

Product Cards

NEW
SHIPS
オックスフォード BD シャツ
¥15,400
★★★★☆ 4.2
SALE
SHIPS any
リネンブレンド ワイドパンツ
¥9,240 ¥13,200
SHIPS KIDS
コットン ボーダー Tシャツ
¥4,950
SHIPS
ウォッシャブル サマーウール ジャケット
¥35,200
★★★★★ 4.8
04 / Article

Editorial Sample

夏のスタンダードを更新する

2026.05.22 / FEATURE

SHIPS が提案する「STYLISH STANDARD」。それは単なる定番ではなく、時代の空気を纏いながらも長く着られる一着を見つけること。今季はリネンとコットンの混紡素材を中心に、涼しさと品格を両立するアイテムを揃えました。

オックスフォードシャツにはじまり、ウォッシャブルウールのジャケット、ストレッチの効いたチノパンツまで。どのアイテムも「着こなしやすさ」と「上質さ」を兼ね備えています。欧文と和文が自然に共存する SHIPS のビジュアルのように、クラシックとモダンが調和するワードローブをお届けします。

特集をすべて見る
05 / Buttons

Button Variations

特集をすべて見る
Primary CTA (pill)
More
Secondary (outline)
Close Modal
Page Top
Carousel Arrow
Carousel Indicators
Badges
SALE 開催中 3 Cart / Wishlist
06 / Cards

Card Components

2026 SPRING / SUMMER

今季のテーマは「心地よいスタンダード」。リネン、コットン、テクニカル素材を駆使した、夏に映えるアイテムを中心にセレクト。

View Collection →

SHIPS COORDINATE

スタッフが実際に着用したコーディネートを毎日更新。身長・体型別の着こなし提案で、サイズ選びの参考に。

View All →

SHIPS OUTLET

過去シーズンのアイテムをアウトレット価格で。定番アイテムを賢く手に入れるチャンスです。

Shop Now →
07 / Forms

Form Elements

Default --- border: #eeeeee, radius: 0px
Focus --- border: #04345a (Brand Navy)
必須項目です
Error --- border: #a50000 (Sale Red)
08 / Elevation

Depth & Elevation

SHIPS はシャドウを極力使わない。背景色の切り替え（#fff / #f8f8f8）で面の階層を表現する。

Level 0 --- Flat
影なし、ボーダーのみ
Level 1
カルーセル矢印
Level 2
モーダル・オーバーレイ
Focus Ring
#04345a (Brand Navy)
09 / Layout

Layout & Spacing

商品グリッドは 3-4 カラム。特集はフルブリードカルーセル。ガッターは 16-24px で余白を十分にとった上品なレイアウト。

Container Max Width 1200px
Article Content 640px
4-column product grid (gap: 20px)