小さなブランドのスタイルガイドを1枚で作る：色・文字・余白・ロゴの使い方ルール

1枚に入れる6項目と、入れないもの

• 色、決めること：基本色、文字色、強調色、背景色、数の目安：3〜4色(色コード付き)
• 文字、決めること：見出し用、本文用のフォントと使う太さ、数の目安：2種類まで
• 余白、決めること：紙面の端からの距離、ロゴの周りの空き、数の目安：1つの基準値
• ロゴ、決めること：使う版、最小サイズ、背景ごとの使い分け、数の目安：3版まで
• やらないこと、決めること：変形、色変え、読みにくい配色など、数の目安：5項目以内
• 管理者、決めること：最新版の置き場所、質問先、更新日、数の目安：1人と1か所

入れないものは、ブランドの歴史、トーン&マナーの長文、写真の全ルールです。必要になった時点で別紙にします。1枚で足りるかを判断するには、「初めて手伝う人が5分で読み終え、迷わず1枚目のチラシを作れるか」を基準にしてください。

雛形(そのままコピーして使えます)

次の枠を文書ソフトやCanvaに貼り、角括弧を埋めてください。

【ブランド名】[　　　]　最終更新:[年/月/日]　管理者:[　　]
ひとこと:[誰に・何を・どんな印象で、を1文]

■色(色コードで指定)
基本色 [#　　　]  用途:[見出し・ロゴ・ボタン]
文字色 [#　　　]  用途:[本文]
強調色 [#　　　]  用途:[1画面/1枚に1か所まで]
背景色 [#　　　]  用途:[全面の下地]

■文字
見出し:[フォント名/太さ]  本文:[フォント名/太さ]
本文の最小サイズ:[印刷 pt / 画面 px]
行間:[本文サイズの何倍か]

■余白
紙面の端から[　]mm以上は文字・ロゴを置かない
ロゴの周りはロゴの[高さの1/2]以上あける

■ロゴ
横型:[ファイル名]  正方形:[ファイル名]  単色版:[ファイル名]
最小サイズ:幅[　]mm / [　]px   使う場面:[　]

■やらないこと
・[ロゴの縦横比を変える]  ・[ロゴの色を変える]
・[模様や写真の上に直接置く]  ・[　]  ・[　]

■データの置き場所:[URLまたはフォルダ名]

記入例(説明用の例)

以下は架空の「こもれび焙煎所」(小さなコーヒー豆店)の例です。色コードや数値は説明のために置いたもので、実際に運用して確かめた値ではありません。

【ブランド名】こもれび焙煎所  最終更新:2026/10/28  管理者:店主
ひとこと:仕事帰りに立ち寄る人へ、落ち着いた日常のコーヒーを届ける

■色
基本色 #1F2A44(濃紺)  用途:見出し・ロゴ
文字色 #222222        用途:本文
強調色 #E8743B(橙)    用途:1枚に1か所(日付、価格など)
背景色 #FAF6EF(生成り) 用途:全面の下地

■文字
見出し:Noto Sans JP Bold  本文:Noto Sans JP Regular
本文の最小サイズ:印刷9pt / 画面16px  行間:1.6倍

■余白
紙面の端から10mm以内に文字・ロゴを置かない
ロゴの周りはロゴの高さの1/2以上あける

■ロゴ
横型:logo-wide.svg  正方形:logo-square.png  単色版:logo-mono.svg
最小サイズ:幅25mm / 120px  使う場面:横型=チラシ上部、正方形=SNSアイコン

■やらないこと
・ロゴを引き伸ばす  ・ロゴの色を変える  ・写真の上に直接置く
・強調色を文字の本文に使う  ・見出しを3色以上にする

■データの置き場所:共有フォルダ「ブランド素材/最新」

橙の強調色は、白や生成りの背景で小さな文字に使うと読みにくくなる可能性があります。この点は次の確認表で扱います。

AIに任せる部分と、人が決める部分

AIに頼めるのは、素案の整理、言葉の統一、「やらないこと」の洗い出しです。ブランドの方向性、最終的な色の選択、ロゴの扱いの許可は人が決めます。

AIに渡す情報は、ブランド名、用途、現在使っている色コードとフォント名、ロゴの版の名前までにします。未公開の価格や取引先名、顧客情報は、説明用の仮の値に置き換えてください。

依頼文の例です。

あなたは小規模ブランド向けのデザイン担当です。
次の情報から、A4一枚のスタイルガイドの下書きを作ってください。
・ブランド名:[説明用の仮名]
・主な用途:チラシ、SNS画像、名刺
・現在の色:[色コード]、フォント:[フォント名]
・ロゴの版:[横型/正方形/単色]
条件:
1. 項目は「色・文字・余白・ロゴ・やらないこと・管理者」の6つだけ
2. 色は4色まで、フォントは2種類まで
3. 数値を決められない箇所は「要決定」と書き、推測で埋めない
4. 初めて手伝う人が5分で読める分量にする
最後に、私が人の目で確認すべき点を3つ挙げてください。

返ってきた案は、そのまま使わず、色コードやフォント名が自分の素材と一致しているかを必ず照合してください。AIは存在しないフォント名や、実際とは違う色コードを書くことがあります。

公開前の確認表

• 文字色と背景色の差、見方：コントラスト比を測る。WCAG 2.2の基準は通常の文字で4.5:1、大きな文字で3:1、問題があるとき：強調色は大きな文字や図形だけに使う
• 大きな文字の目安、見方：WCAGでは18pt以上、または太字14pt以上、問題があるとき：本文サイズの文字には強調色を使わない
• ロゴの見え方、見方：背景色、写真の上、単色印刷で並べて見る、問題があるとき：背景ごとに使う版を決める
• フォントの権利、見方：配布元のライセンス表示を読む、問題があるとき：不明なものは雛形に載せない
• 最新版の置き場所、見方：共有リンクで第三者が開けるか、問題があるとき：古い版を「旧」フォルダに移す

コントラストの基準は、W3Cの達成基準1.4.3の解説に書かれています。これはウェブ向けの基準なので、印刷物では読みやすさの目安として使ってください。同じ解説では、ロゴタイプはこの要件の対象外とされています。ただし、ブランドのルール上の理由ではなく、制作者の判断で本来より低いコントラストにした表示は例外に当たらないと説明されています。ロゴの見えにくさは、ルールで防いでおくと安全です。

記入例の橙(#E8743B)と生成り(#FAF6EF)の組み合わせは、私は測っていません。自分の色で採用する前に、必ずコントラスト確認ツールで数値を出してください。

Canvaで共有するときの注意

Canvaを使っているなら、ブランドキットに色、フォント、ロゴを登録すると、チームで同じ素材を使えます。Canvaのヘルプ「ブランドロゴのアップロードと使用」では、次の点が説明されています。

• ロゴの形式はJPG、PNG、SVGに対応している
• ブランドロゴは有料プランで利用できる
• チームでは、オーナー、管理者、ブランドデザイナーがアップロードできる
• 使用許可のあるロゴだけをアップロードするよう案内されている

無料プランでは、同じ内容を雛形のPDFとロゴのフォルダで共有する形になります。プラン内容や画面は変わる可能性があるため、導入前に自分の画面で確認してください。

登録の順序は、まず雛形の6項目を埋め、次にロゴ3版を登録し、最後に色とフォントを登録するのが無理のない流れです。ガイドとツールの設定が食い違うと、ツールの設定が優先されがちなので、更新するときは両方を同じ日に直します。

最初の1枚を作る手順

1. 手元の最新のチラシ、名刺、SNS画像を3点並べ、共通して使っている色とフォントを書き出す
2. 雛形の角括弧を埋める。決められない箇所は「要決定」にする
3. 上の依頼文でAIに整えさせ、色コードとフォント名を自分の素材と照合する
4. 確認表で文字の読みやすさとロゴの見え方を点検する
5. 初めて手伝う人に渡し、5分で読んで1枚作れるかを試し、詰まった箇所を直す

運用が始まって「やらないこと」が増え続ける場合は、ルールではなくテンプレートで解決できないか考えてください。ルールを足すより、チラシ用とSNS用の完成テンプレートを用意するほうが、揃えやすくなります。