SHIPS DESIGN.md

SHIPS（シップス）公式サイト（https://www.shipsltd.co.jp/）のデザイン仕様書。 実サイトの computed style に基づいて記述。取得日: 2026-05-22

1. Visual Theme & Atmosphere

• デザイン方針: 1977年創業の老舗セレクトショップ。"STYLISH STANDARD" を掲げ、トラディショナルな要素を現代的に再解釈するブランド哲学をUIに体現。エディトリアルな雑誌レイアウトで、商品とスタイリングを主役に据える
• 密度: 中程度。特集・ニュース・商品をカルーセルとグリッドで整理し、余白を十分に取った上品な構成
• キーワード: エディトリアル、ネイビー基調、クリーン、スタンダード、上品
• 特徴: ネイビー #04345a のピル型CTAが視覚的アイデンティティ。テキストは weight 400 が主体で、太さに頼らず色とサイズで階層を表現する。欧文 Roboto を先頭に置くフォント戦略で、欧文の美しさを重視しつつ和文は游ゴシック Medium で品位を保つ

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Navy (#04345a): メインのブランドカラー。CTAボタン、主要リンク、アクセント面に使用。SHIPS のアイデンティティを象徴する深いネイビー
• Brand Navy Dark (#003559): フッター、モーダル閉じボタン等の暗めバリエーション

Accent（アクセント）

• Sale Red (#a50000): カート・ウィッシュリスト通知バッジ、エラー表示
• Highlight Yellow (#ffee00): 「開催中」セールバッジの背景

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト
• Text Title (#333333): セクションタイトル、見出し
• Text Secondary (#666666): 日付、補足テキスト、フッター
• Border (#333333): アウトラインボタンの枠線
• Background (#ffffff): ページ背景
• Surface Light (#f8f8f8): 商品レビュー背景、セクション背景
• Surface Gray (#eeeeee): カルーセルドット（非アクティブ）
• Dot Active (#999999): カルーセルドット（アクティブ）

Footer

• Footer Background (#666666): フッター領域の背景
• Footer Text (#ffffff): フッター内テキスト

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• 游ゴシック Medium（macOS / Windows）--- font-family 内で "游ゴシック Medium" と Medium ウェイトを明示指定
• sans-serif（フォールバック）

3.2 欧文フォント

• サンセリフ: Roboto --- Google Fonts。欧文を先頭に配置して欧文グリフの美しさを優先
• セリフ系は使用しない

3.3 font-family 指定

css/* 全体共通 */
font-family: Roboto, "游ゴシック Medium", sans-serif;

フォールバックの考え方:

• 欧文フォント（Roboto）を先頭に指定し、英数字を Roboto で表示
• 和文は游ゴシックの Medium ウェイトで統一。「游ゴシック」ではなく「游ゴシック Medium」と明示することで Windows でのかすれ問題を回避
• 最後に generic sans-serif

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文（Content Body）の行間: 1.43〜1.5。欧文セレクトショップらしくやや詰めた組版
• 見出しの行間: 1.46〜1.65。表示サイズが大きいため十分な可読性を確保
• 本文の字間 (letter-spacing): normal（全体的に明示的な letter-spacing は設定しない）
• 見出しの字間: normal

ガイドライン:

• SHIPS は全体的に weight 400 で統一し、サイズと色で階層を表現する
• Bold（700）はレビュー評価値の数字のみで使用。見出しにも 400 を使う控えめな運用
• 行間は 1.43〜1.67 と、日本語サイトとしてはやや狭め

3.6 禁則処理・改行ルール

css/* SHIPS の標準 */
word-break: normal;
overflow-wrap: break-word;

• 商品名（ブランド名 + 商品コード）が長くなるため overflow-wrap: break-word で折り返し
• ナビゲーションリンクは折り返さない

3.7 OpenType 機能

css/* SHIPS は palt を使わない */
font-feature-settings: normal;

• palt は適用しない。letter-spacing も normal。ベタ組みで統一
• Roboto が先頭にあるため、欧文のカーニングは Roboto 側の kern テーブルに依存

3.8 縦書き

• 該当なし（全面横書き）

4. Component Stylings

Buttons

Primary CTA（ピル型）

• Background: #04345a
• Text: #ffffff
• Padding: 約 10px 24px
• Border Radius: 20px（ピル型）
• Font Size: 14px / Weight 400
• 用途: 「特集をすべて見る」「ニュースをすべて見る」等の主要アクション

Secondary（アウトライン）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #333333
• Padding: 12px 0
• Border Radius: 4px
• Font Size: 14px / Weight 400
• 用途: 「More」等のサブアクション

Close / Overlay

• Background: #003559
• Text: #ffffff
• Font Size: 50px
• 用途: モーダル閉じボタン

Carousel Arrows

• Background: rgba(255,255,255,0.8)
• Border Radius: 50%（円形）

Page Top

• Background: rgba(102,102,102,0.9)
• Border Radius: 50%（円形）

Carousel Indicators

Badges

Inputs

• Background: #ffffff
• Border: 2px inset #767676（ブラウザデフォルトに近い）
• Border Radius: 0px（角張り）
• Padding: 1px 2px
• Font Size: 12px
• 検索ボックスは枠線なし、line-height: 29px でテキスト中央揃え

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 0px（角丸なし。商品画像をそのまま大きく見せる）
• Padding: 画像直下にテキスト情報
• Shadow: なし（フラット）

5. Layout Principles

Spacing Scale

Container

• Max Width: 約 1200px（実測ベース）
• Padding (horizontal): 16〜24px

Grid

• 商品サムネ: 3〜4 カラム
• 特集カルーセル: フルブリード
• ニュース: 2〜3 カラム
• ガッター: 16〜24px

6. Depth & Elevation

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

7. Do's and Don'ts

Do（推奨）

• フォントは Roboto, "游ゴシック Medium", sans-serif の順で指定する（欧文優先）
• CTAボタンは #04345a（Brand Navy）のピル型（border-radius: 20px）で統一する
• テキスト階層は weight 400 を基本とし、サイズと色で差をつける
• セール系バッジは黄色（#ffee00）、通知バッジは赤（#a50000）で統一する
• 商品カードはシャドウ・角丸なしのフラットスタイルで、画像を主役にする
• フッターは #666666 背景に白テキストで落ち着いた印象を保つ

Don't（禁止）

• font-family で "游ゴシック" と指定しない。必ず "游ゴシック Medium" と Medium を明示する（Windows でのかすれ防止）
• テキストに weight 700（Bold）を多用しない。SHIPS は 400 が主体で、Bold はレビュー評価値など限定的な使用にとどめる
• CTA に角張った border-radius を使わない。主要 CTA は必ずピル型（20px）
• palt や明示的な letter-spacing を設定しない（ベタ組みが基本）
• 彩度の高い色を UI に多用しない。色は商品画像とセールバッジに任せ、UI はネイビー・グレー基調に保つ

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG基準）

フォントサイズの調整

• モバイルでは Display は 24〜28px に縮小
• 本文は 12〜14px を維持
• ナビゲーションはハンバーガーメニューに切り替え

9. Agent Prompt Guide

クイックリファレンス

Brand Navy: #04345a
Text Primary: #000000
Text Title: #333333
Text Secondary: #666666
Background: #ffffff
Surface Light: #f8f8f8
Sale Red: #a50000
Highlight Yellow: #ffee00
Footer: #666666
Font: Roboto, "游ゴシック Medium", sans-serif
Body Size: 12-14px / Weight 400 / line-height 1.43-1.5
Heading Size: 28-34px / Weight 400 / line-height 1.46-1.65
CTA: bg #04345a / text #fff / radius 20px (pill)
Border Radius: 0-4px (カード), 20px (CTA pill)
Shadow: なし（フラット基調）
palt: 未使用
letter-spacing: normal

プロンプト例

SHIPS のデザインシステムに従って、商品一覧ページを作成してください。
- 背景: #ffffff
- テキスト: 本文 #000000、タイトル #333333、補足 #666666
- フォント: Roboto, "游ゴシック Medium", sans-serif（欧文優先）
- 商品カードはボーダー・シャドウ・角丸なしのフラット表示
- CTAボタンは bg #04345a / text #fff / border-radius 20px のピル型
- サブアクションは bg #fff / text #333 / border 1px solid #333 / radius 4px のアウトライン
- セクション見出しは 28px / weight 400 / line-height 1.46
- 商品キャプションは 12-14px / weight 400
- セールバッジは #ffee00 背景に黒テキスト
- レビュー背景は #f8f8f8
- フッターは bg #666 / text #fff