株式会社TTL Brand Guidelines

> Version 1.0 — 策定日: 2025年 > 本ドキュメントはデザイン・開発・コピーライティングにかかわるすべてのチームメンバーが参照する一次資料である。

---

TABLE OF CONTENTS

1. [CONTENT FUNDAMENTALS](#content-fundamentals) 2. [VISUAL FOUNDATIONS](#visual-foundations) 3. [ICONOGRAPHY](#iconography)

---

CONTENT FUNDAMENTALS

トーン・スタイル

株式会社TTLのコミュニケーションは、普通体（だ・である体） を基本とする。 品質と実績に裏打ちされた静かな自信を言葉で表現し、過度な煽りや軽薄さを排除する。雑誌の特集記事を読んでいるかのような、知的で落ち着いた文体を維持すること。

| 属性 | 方針 | |---|---| | 文体 | 普通体（だ・である）を基本とする | | トーン | 知的・落ち着き・信頼感。親しみやすさは温度感で表現し、馴れ馴れしさとは区別する | | リズム | 短文と中文を交互に配置し、テンポをつくる。一文50字を超える場合は分割を検討する | | 情報密度 | 適度に高く保つ。読者の知性を尊重し、説明を省きすぎない |

---

一人称・二人称の扱い

| 立場 | 表現 | 備考 | |---|---|---| | ブランド（一人称） | 「私たち」「当社」 | 「弊社」は過度にへりくだるため文脈依存で使用 | | 読者・顧客（二人称） | 原則として省略、必要な場合は「あなた」 | 「お客様」はUIラベルに限定 | | スタッフ | 「スタッフ」「担当者」 | 「スタッフさん」のような敬称付きは使用しない |

---

感嘆符・絵文字・記号の使用方針

| 要素 | 方針 | |---|---| | 感嘆符（！） | 原則禁止。セールや緊急通知など特定の文脈でのみ1回まで許容 | | 疑問符（？） | 見出しでの修辞疑問文に限り使用可。文末の多用は避ける | | 絵文字 | 全面禁止。エディトリアルな美意識との整合を保つ | | 中黒（・） | リスト項目の区切りに積極使用。箇条書きの代替として有効 | | ダッシュ（——） | 補足説明・強調の挿入に使用。半角ハイフン（-）の代わりにemダッシュを用いる | | 三点リーダー（……） | 余韻の演出に使用可能。ただし1コンテンツにつき2回まで |

---

数字の半角/全角ルール

| 用途 | 表記 | 例 | |---|---|---| | 価格・数量・年月日 | 半角アラビア数字 | ¥12,800 / 2025年4月1日 | | 電話番号・郵便番号 | 半角アラビア数字 | 03-0000-0000 | | 文章中の概数・助数詞付き | 漢数字 | 三十年の歴史 / 数十種類 | | 順位・ランキング | 半角アラビア数字 + 位 | 1位 / 2位 | | UIラベル・ボタン内 | 半角アラビア数字 | 残り3点 / 全12商品 | | 全角数字 | 禁止 | ~~１２３４~~ |

> 補足: 文章と数字が混在する場合、和文の流れを優先して判断する。「30〜50代」のように範囲を示す波ダッシュ（〜）は全角を使用する。

---

Do / Don't 対照表

#### CTA（行動喚起）

| # | シーン | ✅ Do | ❌ Don't | |---|---|---|---| | 1 | 購入ボタン | 「カートに入れる」 | 「今すぐポチる！」「買う！！」 | | 2 | 問い合わせ誘導 | 「詳細を問い合わせる」 | 「お気軽にご連絡ください♪」 | | 3 | 資料請求 | 「資料を請求する」 | 「無料でもらえる！今すぐGET！」 | | 4 | 次ステップ促進 | 「続きを読む」「詳細を見る」 | 「もっと見る👀」「チェック！」 |

#### エラー

| # | シーン | ✅ Do | ❌ Don't | |---|---|---|---| | 5 | 入力フォームエラー | 「メールアドレスの形式が正しくない。@を含む形式で入力してほしい」 | 「エラーが発生しました」「NG！」 | | 6 | 通信エラー | 「接続に失敗した。時間をおいて再度お試しいただきたい」 | 「謎のエラーが起きました😅」 | | 7 | 必須項目未入力 | 「氏名は必須項目である」 | 「名前くらい入れてください」 |

#### 空の状態（Empty State）

| # | シーン | ✅ Do | ❌ Don't | |---|---|---|---| | 8 | 検索結果なし | 「該当する商品が見つからなかった。キーワードを変えて再検索してみてほしい」 | 「残念！何もありません😢」 | | 9 | お気に入り未登録 | 「気になる商品をお気に入りに追加すると、ここに表示される」 | 「まだ何も保存されていません。追加してみよう！✨」 |

#### 送料・価格表示

| # | シーン | ✅ Do | ❌ Don't | |---|---|---|---| | 10 | 送料案内 | 「¥10,000以上のご購入で送料無料」 | 「送料無料！！お得！！」 | | 11 | 送料発生時 | 「送料：¥660（税込）」 | 「＋送料がかかっちゃいます」 |

#### その他シーン

| # | シーン | ✅ Do | ❌ Don't | |---|---|---|---| | 12 | ローディング中 | 「読み込み中…」または無表示＋スピナー | 「ちょっと待ってね！」 | | 13 | 完了通知（Toast） | 「カートに追加した」 | 「やった！追加できました🎉」 | | 14 | 在庫残少 | 「残りわずか（3点）」 | 「急いで！もうすぐ売り切れ！！」 | | 15 | 会員登録誘導 | 「会員登録すると購入履歴の確認や再注文が可能になる」 | 「登録してお得をGETしよう！」 |

---

Microcopy Lexicon（重要用語の表記統一）

| # | 正式表記 | 禁止・非推奨表記 | 備考 | |---|---|---|---| | 1 | お気に入り | ウィッシュリスト / ほしい物リスト | 機能名として統一 | | 2 | カート | ショッピングバッグ / バスケット | 業種問わず「カート」で統一 | | 3 | ご注文 | オーダー / 購入（動詞句では「注文する」） | 名詞形は「ご注文」、動詞は「注文する」 | | 4 | お問い合わせ | コンタクト / お問合せ（送り仮名省略禁止） | 「い」を省略しない | | 5 | 在庫あり | 在庫OK / 在庫有り / STOCK有 | 常に平仮名「あり」 | | 6 | 品切れ | 在庫なし / 売り切れ / SOLDOUT | UIラベルは「品切れ」で統一 | | 7 | 税込 | 税込み / 込み / incl. tax | 送り仮名なし、括弧あり：（税込） | | 8 | スタッフ | 店員 / スタッフさん / 担当スタッフ様 | 単独で使用。「様」「さん」は付けない | | 9 | 素材 | マテリアル / 材料 / 生地（布製品以外） | 商品説明では「素材」で統一 | | 10 | こだわり | 拘り（漢字禁止）/ 拘（略字禁止） | 常にひらがな表記 |

---

VISUAL FOUNDATIONS

色（Color System）

#### パレット定義

`` Base Neutrals ───────────────────────────────────────── --color-paper: #f7f5f2 ページ背景・最底面 --color-paper-deep: #ede9e3 カード背景・区切り面 --color-surface: #ffffff モーダル・ドロワー・フォーム背景

--color-ink: #1a1814 本文・見出しのベース色

Ink Opacity Scale（テキスト・ボーダー・区切り線） ───────────────────────────────────────── --color-ink-06: rgba(26,24,20,0.06) 最薄ボーダー・ゼブラ背景 --color-ink-12: rgba(26,24,20,0.12) 通常ボーダー・ディバイダー --color-ink-24: rgba(26,24,20,0.24) 強調ボーダー・disabled要素 --color-ink-40: rgba(26,24,20,0.40) 補足テキスト・プレースホルダー --color-ink-56: rgba(26,24,20,0.56) キャプション・メタ情報 --color-ink-72: rgba(26,24,20,0.72) サブ見出し・セカンダリテキスト --color-ink-100: rgba(26,24,20,1.00) プライマリテキスト・アイコン

Accent（深みのあるグリーン系） ───────────────────────────────────────── --color-accent: #2e5c4f プライマリアクション・リンク・バッジ --color-accent-dark: #1c3d33 ホバー状態・アクティブ状態 --color-accent-soft: #d4e4e0 アクセントの薄地・タグ背景・ハイライト

Semantic ───────────────────────────────────────── --color-success: #2d7a4f 成功状態（Toast・バリデーション） --color-warning: #b5730f 警告（在庫残少・期限近接） --color-danger: #b83232 エラー・削除・危険操作 --color-info: #2a5c8a 補足情報・ヒント表示 `

#### 配色ルール

| レイヤー | 使用色 | 意図 | |---|---|---| | ページ背景 | --color-paper | 紙のような温かみ。白よりも目に優しく上質な印象 | | コンテンツ面（カード等） | --color-paper-deep / --color-surface | 背景との明度差を小さく保ち、フラットで落ち着いた階層感を出す | | 本文テキスト | --color-ink-100 | 最高コントラスト。可読性最優先 | | 補助テキスト | --color-ink-56 〜 --color-ink-72 | 情報の重み付けをグレースケールで表現 | | プライマリCTA | --color-accent | アクセントカラーはCTAとキーリンクにのみ使用 | | ホバー/アクティブ | --color-accent-dark | 10〜15%暗くなる感覚。突然の変化を避ける | | ソフトな強調背景 | --color-accent-soft | タグ・バッジ・インライン強調の背景 |

#### 禁止事項

- --color-accent を装飾目的（罫線・背景全面・影色など）に使用しない

  • セマンティックカラーを意味と無関係な場所（例：情報の強調に --color-danger）に流用しない
  • 白背景（#ffffff）をページ背景の第一選択にしない。必ず --color-paper を起点にする
  • アクセントカラーを2色以上同時にビューポート内で使用しない
  • 上記パレット外の色を追加する場合、本ガイドラインへの追記と全員のレビューを必須とする

    ---

    タイポグラフィ（Typography）

    #### 書体

    ``

    • --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif --font-serif: （同上 — セリフ書体は使用しない。ゴシック統一） --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Courier New", monospace