and.d デザインガイドライン

● Principles

原則

目的が判定基準、構造がルールの骨格。以降の章はすべてここから導かれる。

目的（PLAN.md・2026年3月）

項目	内容
ゴール	Shopifyアプリ（AMPシリーズ）のダウンロード促進。「Shopifyアプリ会社としての強み」を明確に打ち出す。
ターゲット	Shopifyストアオーナー・EC運営担当者／配送・予約管理に課題を持つ事業者／中〜大規模EC運営者。
デザイン方向性	シンプル・クリーン（Linear / Notion ライク）。プロフェッショナル・信頼感・余白多め・テキスト中心。実績は形容詞でなく数字（7.5年・10,000+）で語る。

ブランドの3層構造

層	ルール
① ロゴ（不変）	「&d」シンボル＋「and d」ワードマーク。黒 `#000000` か白のみ。配置・クリアスペース・最小サイズ・Co-branding 含め Logo Guidelines v1.3 が唯一の基準（本書では繰り返さない）。
② モノクロの土台	白地・黒テキスト・ヘアライン罫線とニュートラルグレー。情報の階層はサイズ・ウェイト・黒白反転で作る。ここに色は使わない。
③ アクセント（1色）	自社の文脈では AMP Blue、クライアント提案では相手のブランドカラー。運用ルールはカラー章で一括定義。

迷ったときの判定は2つだけ：「Shopifyアプリ会社としての信頼感が増すか？」と「白と黒で組み、青で指し示す、になっているか？」。派手さ・新しさは判定基準ではない。

● What's New

v2.0 の変更とその根拠

3月版実装のトーンは維持しつつ、既製品感と流行依存を取り除いた。変更は4つ。

変更	根拠
アクセントを `#2563EB` → `#2B4EE0`	旧値は Tailwind CSS の既定色（blue-600）そのままで、無数のサイトと同じ「設定していない色」。わずかに深く電気的なカスタムブルーにして所有感を出す。AA 準拠は維持。
グラデーションを全廃	パステル紫青のヒーローグラデと青グラデ文字は 2023〜25年の生成AIサイトの典型で、最も早く古びる要素。ブランドの「フラット・高コントラスト」原則にも反していた。
装飾＝「&d」マークの透かし＋ドットグリッド	誰にも真似できない装飾はロゴだけ。ヒーローの空気は透かしマーク（不透明度4〜5%）と細かいドット地で作る。ロゴ本体の使用ルール（v1.3）とは別物の「モチーフ利用」として定義。
カードをグレー塗り → 白地＋ヘアライン枠	枠線ベースの面分割のほうが軽く、余白が生き、Linear/Notion 的な現代のプロダクト感に合う。グレー面はセクション帯だけに役割を限定。

● Color

カラー

ニュートラルは青みに寄せない純グレー系。サイト再構築時にこの表を実装値の正とする。

Ink#0B0C10テキスト・CTAバンド・フッター・ボタン・資料の表紙

White#FFFFFF基本の地。カードの地。黒地上のテキスト・ボタン

Band#F4F4F5セクションの帯だけに使う。カードには使わない

Line#E4E4E7罫線・カード枠。面の代わりに線で区切る

AMP Blue#2B4EE0アクセント。運用は下表。黒地上は #7C93FF

装飾（色ではなく質感）dot grid / &d 透かしドット地（Line色・26px間隔）と「&d」透かし（Ink・不透明度4〜5%）。ヒーローと黒バンドのみ

黒は2つある：ロゴファイルは #000000 のまま一切触らない。面・テキストの黒は #0B0C10。視覚上は同じに見えるが、「ロゴの色は変更しない」原則を守るための線引き。コーポレート土台ではグラデーション全面禁止（画像・写真内は除く）。唯一の例外は製品サブブランド面 → AMP（製品）デザイン。

アクセントの運用（本書で唯一の定義）

ルール	内容
使う場所	テキストリンク・小ラベル（RELEASE / NEWS・アイブロウのドット）・本文中の強調（太字＋色）・黒バンド見出しの句点（Let's talk.）。
使わない場所	ボタン（プライマリは黒/白）・白地の見出し・本文・面（背景）・グラデーション。
黒地上	明るい側 `#7C93FF` を使う（`#2B4EE0` は黒地でコントラスト不足）。
面積	1画面・1スライドあたり5%以下。0でもよい — モノクロだけで完結する画面は常に正解。
クライアント提案時	青の座席を相手のブランドカラー（公式指定色・1系統＋濃淡まで）に差し替える。青との同居は禁止。実例: 横浜FC=水色×紺、藤枝MYFC=紫。

機能色（意味を持つ色・装飾には使わない）

色	用途
Green #15803D	ポジティブな補足情報のみ（例:「14日間の無料体験あり」）。
Amber #D97706	レビューの星のみ。テキストには使わない。

テキストカラーとコントラスト

全テキストで WCAG AA（4.5:1 以上）を満たす。ロゴの低コントラスト背景禁止（v1.3）と同じ基準。

役割	色とルール
本文	`#0B0C10`。黒地上では白。
補足・カード内説明	`#52525B`。カード上・12px以下の小さい文字はこれを使う。
メタ情報	`#A1A1AA` — 白地の14px以上のみ。黒地上の補足もここまで（それより暗いグレーは不可）。
青のテキスト	白地・帯上では `#2B4EE0`、黒地では `#7C93FF`。

● Typography

タイポグラフィ

テキスト中心のデザイン — タイポグラフィがほぼすべて。見出しは「英語のディスプレイコピー＋日本語のリード」の二段構え。英語が空気を作り、日本語が意味を運ぶ。

書体（媒体別に確定）

媒体	欧文・数字	和文	ウェイト
Web	Poppins	Noto Sans JP	400 / 600 / 700 の3つのみ
スライド	Noto Sans JP（Google スライド標準）。pptx 生成等で使えない場合のみ Arial 代替		400 / 700

斜体は使わない。数字は常に tabular-nums。名刺・印刷物は Web に準ずる。欧文は v2.2 で Inter → Poppins に変更（ロゴと同じ幾何学・単層 a の骨格。Inter は二層 a でロゴと骨格が合わなかった）。あわせて Display のウェイトを 800 → 600、字間を -0.015em → +0.02em に（ロゴのモノライン風ストロークと広い字間に合わせる）。

タイプスケール（固定値）

Display（英語コピー）48px / 600 / 行間1.25 / 字間+0.02em
スライドは36pt。ヒーロー・CTAバンドの主役

Built to amplify
your store

日本語リード16px / 400 / #52525B
Display の直下で意味を補う

ECストアの可能性を広げる

H2（セクション見出し）28px / 600 / 行間1.4
スライドタイトルは22pt。アイブロウとセットで

Shopify × コマースに特化した技術力

アイブロウ12px / 700 / 字間.15em / 大文字 / #A1A1AA
青のドットを添えてよい

● .AMP SHOPIFY APPS

統計数字40px / 800 / tabular-nums
単位・＋は約60%サイズ。補足は12px #52525B

10,000+ 累計インストール

カード見出し15px / 700
カテゴリ英語ラベルは11px #A1A1AA

配送日時指定 .AMP Shipping

本文15px / 400 / 行間1.8
カード内の補足は12px #52525B

日本のEC運営に欠かせない配送日時指定を、Shopifyでシンプルに実現。

テキストリンク13px / 700 / #2B4EE0
末尾に「→」。下線なし

App Storeで見る →

この段の間のサイズ（例: 34pxの見出し）は作らない。足りないと感じたらウェイトと余白で調整する。

● Spacing & Grid

スペーシングとグリッド

and.d らしさの半分は余白でできている。値は8pxの倍数だけを使い、迷ったら広い方を選ぶ。

項目	値
スペーシングスケール	`8 / 16 / 24 / 32 / 48 / 64 / 96` px のみ。中間値（20px・40px等）は使わない。
コンテンツ幅（Web）	最大 `1040px`・左右パディング `24px`（モバイル `20px`）。テキストブロックは最大 44em。
セクション上下（Web）	`96px`（モバイル `56px`）。黒バンド・帯も同じ。詰まった白場は作らない。
見出しブロック内	アイブロウ→見出し `8px`、見出し→リード `12px`、リード→本文エリア `32px`。
カード	パディング `24px`、ギャップ `16px`、角丸 `12px`・枠 `1px #E4E4E7`・影なし（ホバーで枠色を1段濃く）。
ボタン	角丸 `8px`。カードより一段小さい丸みで階層を作る。
グリッド	2 / 3 / 4 カラムの等幅のみ。変則は「主役カード1枚＋等幅」まで。
スライドのマージン	上下 `8%`・左右 `7%` の内側にだけ要素を置く。タイトルは左上固定（センタリングは表紙と締めのみ）。

● Components

コンポーネント

サイトも資料もこの5部品の組み合わせで作る。同じ役割の情報は必ず同じ部品で反復する。

① ヒーロー — ドット地 + &d 透かし + 英語コピー + 黒CTA

Built to amplify
your store

ECストアの可能性を広げる

Shopifyアプリを自社開発・運営。累計10,000以上のストアに導入。

Shopifyアプリを見る

② 統計3連 — 大きな数字 + 縦罫

公開アプリ数

10,000+

累計インストール

7.5年+

Shopify開発の実績

③ プロダクトカード — 白地 + ヘアライン枠 / カテゴリ / 評価 / 青リンク

配送日時指定 .AMP

Shipping

日本のEC運営に欠かせない配送日時指定を、Shopifyでシンプルに実現。

★ 4.4 (13件) 14日間の無料体験あり

App Storeで見る →

チケット＆予約管理 .AMP

Booking

イベントチケット・予約管理をShopifyで完結。

App Storeで見る →

データエクスポート .AMP

Data

注文・顧客・商品データを自在にエクスポート。業務効率を改善。

App Storeで見る →

④ ニュースカード — 日付 + 青ラベル（RELEASE / NEWS）

2026.03.28RELEASE

配送日時指定 .AMP v3.2 をリリース

2026.03.15NEWS

Shopify Select Partner に認定

2026.02.20RELEASE

ポイント＆メンバーシップ .AMP を公開

⑤ CTAバンド — 黒地 + 白の英語コピー（句点だけ青）+ 白ボタン

Let's talk.

プロジェクトのご相談、パートナーシップのお問い合わせなど、お気軽にどうぞ。

お問い合わせ

共通ルール	内容
セクションのリズム	白 → 帯 `#F4F4F5` → 白 → 黒バンド、と面の明度で区切る。帯の上でもカードは白＋枠。
ボタン	プライマリ＝黒地白文字（黒地上では白地黒文字）。セカンダリ＝白地＋ヘアライン枠。
ロゴ配置	Web: ヘッダー左上に黒・フッター（黒地）に白。スライド: 左上・1枚に1箇所・最小幅70px。
&d 透かし（モチーフ）	ヒーローと黒バンドのみ・1画面1回・不透明度4〜5%・画面端で見切らせる。ロゴとしての使用ではないためクリアスペース規定外だが、テキストとは重ねない。
実績バッジ	受賞・認定ロゴ（Shopify・Microsoft等）は原本カラーのまま並べてよい。自作の装飾は加えない。
スクリーンショット	角丸8px＋ヘアライン枠で載せる。生の四角い画像を直接置かない。個人情報はぼかす。

● Site Structure

サイト構成（PLAN.md より）

再構築時のページ構成と、AMPシリーズ各LPの標準セクション。技術スタックは Next.js 14（App Router）＋ Tailwind CSS ＋ TypeScript ＋ Vercel。

ページ	内容	優先度
`/` トップ	ヒーロー・統計・バッジ・AMPセクション・Services・News・CTA	★★☆
`/amp` ハブ	AMPシリーズの概要・一覧・比較	★★★
`/amp/delivery-datetime`	配送日時指定.AMP LP	★★★
`/amp/delivery-custom`	配送カスタム.AMP LP	★★★
`/amp/ticket-reserve`	チケット&予約管理.AMP LP	★★★

アプリLPの標準セクション（7つ・この順で）

セクション	使うコンポーネント
1. Hero	キャッチコピー＋CTA（App Storeへ）。コンポーネント①
2. 課題提起	ターゲットの悩み。テキスト中心・カード2〜3枚
3. 機能一覧	プロダクトカード（③）のグリッド
4. 料金プラン	等幅カラムのプラン表。推奨プランだけ黒枠で強調
5. 導入事例・レビュー	統計3連（②）＋事例カード。★は Amber
6. FAQ	罫線区切りのアコーディオン。装飾なし
7. CTA	黒バンド（⑤）

● Slides

資料への展開

スライドはサイトと同じ部品・同じトークンで組む。黒CTAバンド＝表紙、統計3連＝実績、プロダクトカード＝コンテンツカード。カラー運用はカラー章、マージンはスペーシング章に従う。

配送日時指定.amp 紹介資料

Shopify 配送日時指定アプリ

10,000+

ストア導入

4.4

レビュー評価

7.5年+

運営実績

表紙（黒） — CTAバンドと同じ文法。青はワンポイント（#7C93FF）、下部に統計3連。

● .AMP Shopify Apps

Amplify your store

配送日時指定

Shipping

受取日時指定をシンプルに実現

→

チケット＆予約

Booking

予約管理をShopifyで完結

→

ポイント

Retention

顧客のLTVを最大化

→

データ出力

Data

注文・顧客データを自在に

→

株式会社 and.dアプリ紹介

コンテンツ（白） — アイブロウ＋見出し、白カード＋ヘアライン枠のグリッド。青はリンクとラベルだけ。

資料固有のルール	内容
フッター	左: `株式会社 and.d` ／右: `資料名・宛先御中`。全コンテンツスライドに。
装飾	コンテンツ面に色地・写真・透かしを敷かない。&d 透かしは表紙・締めのみ可。
強調	太字＋アクセント色のみ・1スライド1〜2箇所。赤字・マーカー・下線・影は使わない。
1スライド1メッセージ	タイトルは「見出し」ではなく「言いたいこと」。タイトルだけ拾い読みして主張が追える構成に。詰め込むならスライドを分ける。

● AMP · Product Sub-brand

AMP（製品）デザイン — サブブランド層

ここまでの章はすべて and.d コーポレートの土台（モノクロ＋AMP Blue #2B4EE0・グラデ全廃）。この章はその上に載る製品サブブランド「AMP」だけの例外を定義する。土台のルールが既定で、ここに書いた差分だけが AMP 面で上書きされる。

レイヤーの役割分担

レイヤー	基準	使う面
コーポレート（and.d）	モノクロ土台＋`#2B4EE0`、グラデ全廃、&d 透かし＋ドット地	コーポレートサイト・会社紹介・提案書・全社スライド
AMP （製品）	ダーク基調＋ブライト青 `#15B9FF`、navy→cyan グラデ可	App Store リスティング・製品LP・製品スライドの表紙/締め・OGP・製品バナー
アプリ内UI	Shopify Polaris 準拠。独自コンポーネントを作らない	Shopify 管理画面内のアプリ画面

同居禁止：1画面・1スライドでコーポレート青 #2B4EE0 と AMP 青 #15B9FF を混ぜない。「会社が語る面」か「製品が語る面」か、どちらの人格かを先に決める。アプリ内はブランド色を主張しない — UI は Polaris のトークンに従い、AMP らしさはリスティング・マーケ面で出す。

AMP カラー

AMP Bright Blue#15B9FFAMP の核。ダーク地上のアクセント・リンク・ハイライト

Deep Navy#01002Cダーク基調の底。表紙・ヒーロー・OGP の地

Electric Blue#005FE6グラデの中間。単色でも使える主張色

Cyan Highlight#0188D9グラデの明部。光の抜け

ニュートラルと機能色はコーポレートに従う。グレー階層・Green #15803D・Amber #D97706 は土台の定義そのまま。AMP が足すのは「青の人格」と「ダーク基調」だけで、色数を増やさない。

AMP グラデーション（グラデが許される唯一の場所）

コーポレート土台のグラデ全廃はそのまま。AMP 製品面の表紙・ヒーロー・OGPに限り、下のダークグラデを使ってよい。コンテンツ面（本文・カード・表）には敷かない。

AMP Hero — 製品表紙 / OGP

Shopify App

Built to amplify
your store.

EC ストアの可能性を、配送も予約もデータも一つずつ広げる。

App Store で見る →

値	定義
グラデ本体	`linear-gradient(115deg, #01002C, #011A52, #0148C8, #0F9BE6, #15B9FF)`。暗いコーナーから明るい青へ一方向。放射・多方向・パステルは不可。
方向	斜め一方向（100〜135°）。光の抜けは1箇所だけ。
文字	白抜き。ディスプレイは太字（Hiragino Sans W7 / 英語も同等の太さ）。補足は `rgba(255,255,255,.82)` まで。
使わない	コンテンツ面・白地・アプリ内UI・コーポレート面。青グラデ文字（文字自体をグラデ塗り）も不可。

ロゴ・名称

項目	ルール
製品名	表記は `.AMP`／総称 `AMPシリーズ`（表記ルール章に従う）。「Borderless」は旧名 — 新規制作では使わない。
製品ロゴ（A マーク）	あり — B（BORDERLESS）と同じリボン折りの造形言語で作られた兄弟マーク（2025.10 制作）。グラデ版は AMP 面（ダーク基調・表紙・ヒーロー・OGP）のみ。ダーク版（モノクロ）は白地・コーポレート面・資料でのサブブランド表記に使用可。原本: Drive ブランドガイドライン `amp (1).pdf`（本書 assets/amp/ に複製）。
旧 B / BORDERLESS マーク	Borderless 時代のワードマーク・B ロゴは AMP に引き継がない。既存資産は順次 `.AMP` 表記へ差し替え。※ 現行 Figma「Borderless Design System」は旧名のまま。要リネーム。
コーポレートとの署名	製品面のフッター等の会社署名は `株式会社 and.d`。&d ロゴは着色しない（AMP の青を乗せない）。

出典：Borderless Design System（Figma・2023.12.13・And.d 制作。#15B9FF／Hiragino Sans W7）。表紙のグラデは Unsplash 写真を敷いたもので、ブランド固有の定義ではなかったため、上の CSS グラデとして再定義した。アプリ内コンポーネントUI は Polaris 準拠のため本書では扱わない。

● Writing

表記ルール

項目	ルール
社名	ロゴ表記は `and.d`（小文字＋ドット）。正式名 `株式会社 and.d`、英文 `and.d Inc.`。`And.d` `AND.D` `and-d` は不可（ドメイン・メールアドレスを除く）。
プロダクト名	`配送日時指定 .AMP` — 「.AMP」まで含めて正式名。総称は `AMPシリーズ`。カテゴリ英語ラベル（Shipping / Booking / Retention / Data）を添える。
英語コピー	ヒーロー・CTA・アイブロウのみ。短く・動詞から（Built to amplify / Let's talk）。本文は日本語。
日付	ニュースは `2026.03.28`、資料の表紙は `2026年6月16日`。和暦は使わない。
数字	`10,000+` `7.5年+` — 単位・＋込みで短く、桁区切りカンマあり。仮の数字には「仮」「目安」を必ず添える。
トーン	断定しすぎない提案調（「〜できます」「〜と考えています」）。売り込みより「一緒にやる相手」の語り口。

● Cheat Sheet

チートシート

制作前に30秒で見返す要約。詳細は各章（ここに書いていないルールを発明しない）。

Do

「信頼感が増すか」「白と黒で組み青で指し示すか」で判定
迷ったら色を減らし、余白を増やす
面で塗らず、線（#E4E4E7）で区切る
英語コピーの直下に日本語リード
実績は数字で（統計3連）
成果物は git か Drive に保存してから共有

Don't

コーポレート面のグラデーション（AMP 製品面の規定を除き禁止）
白地での青見出し・青ボタン
小さい文字・カード上の #A1A1AA
AMP Blue とクライアントカラーの同居
ロゴの着色・変形・エフェクト
8の倍数以外の余白、タイプスケール外のサイズ
赤字・マーカー・下線・影付き文字

● Governance

運用

項目	内容
出典の優先順位	① Logo Guidelines v1.3（ロゴ）② 本書（トークン・コンポーネント・媒体別適用）③ PLAN.md（設計意図の記録）。矛盾したら上位に従い、本書を直す。
公開範囲	本書は社外秘。noindex 指定＋直リンク共有のみ（チーム・協力デザイナー向け）。
正本の管理	ソースは `~/dev/anddtokyo/andd-design-guideline`（git 管理）。Vercel に同名プロジェクトとしてデプロイ。サイト再構築後は corporate-site リポジトリへ統合予定。
次のステップ	① claude.ai 履歴からサイトコード回収を試す ② PLAN.md＋本書どおりにサイト再構築・HEX確定 ③ Google スライドテンプレート化（自社版＋提案版）。
更新履歴	v0.1〜0.5 資料ガイドラインとして作成→サイト基準化→プロレビュー反映 → v1.0〜1.1 PLAN.md 統合・重複一元化 → v2.0 ゼロベース再設計（カスタムブルー #2B4EE0・グラデ全廃・&d 透かし＋ドット地・ヘアライン枠カード） → v2.1 製品サブブランド層「AMP」を追加（ブライト青 #15B9FF・ダーク基調＋navy→cyan グラデをAMP面に限り解禁・アプリ内UIは Polaris 準拠。旧 Borderless Design System からの採録） → v2.2 欧文書体を Inter から Poppins に変更（ロゴと同骨格の幾何学サンセリフ。コーポレートサイトに適用済み） → v2.3 .AMP の A マークを収載（2025.10 制作の既存ロゴ。v2.1 時点で「専用マークなし」としていたのは本 PDF の見落とし。グラデ版=AMP面のみ／ダーク版=白地可）。