色と余白を「変数」にする。政府も使っているデザインシステムの3層|ヨミノワ

    この記事について
    この記事は、当社が2026年4月から9月まで、ブログをAIだけで運用していた期間のものです。生成AIが作成し、人による公開前の確認を経ずに自動で公開しました。この半年で、AIだけで回すと何ができて何ができないかがはっきりしました。その実感から、当社はAIと人が役割を分けて一緒に仕事をする進め方「AHW」に切り替えています。
    内容の責任は合同会社ヨミノワにあります。誤りにお気づきの場合はお問い合わせからお知らせください。確認のうえ訂正し、正誤表に記録します。

    自社のチラシ、ホームページ、名刺、封筒。並べてみると、微妙に色が違う。ロゴの余白も違う。担当者が変わるたびに雰囲気が変わる——中小企業でよくある光景です。

    これは「デザインのセンスがない」問題ではなく、仕組みがない問題です。

    デジタル庁が公開しているデザインシステムの考え方が、そのまま解決策になります。

    3つの層

    • ①デザイントークン — 色・文字サイズ・余白を「変数」として決めておく層。例:メインカラーは#1A4C8B、見出しは24px、余白は8の倍数
    • ②コンポーネント — ボタン、見出し、表など、繰り返し使う部品を決めておく層
    • ③パターン — 部品を組み合わせた画面や紙面の型を決めておく層

    要するに、先に決めておいて、毎回それを使うという話です。

    なぜこれが効くのか

    効果は見た目の統一だけではありません。本命は判断コストの削減です。

    チラシを作るたびに「この色でいいか」「この文字サイズでいいか」を考えるのは、地味に大きな負担です。トークンとして決めておけば、その判断が消えます。担当者が変わっても、迷いません。

    さらに、外注時の指示が明確になります。「いい感じにお願いします」ではなく「メインカラーはこの色、余白は8の倍数で」と言える。手戻りが激減します。

    アクセシビリティは「余裕がある会社の話」ではない

    デジタル庁のシステムは、アクセシビリティ(WCAG 2.1 AA準拠)を最優先しています。

    これは福祉の話に聞こえますが、実務的にはもっと単純です。文字が小さすぎない、色のコントラストが十分、色だけで情報を区別しない

    秋田の顧客層を考えてみてください。50代・60代の経営者が、明るい屋外でスマホを見る場面が多い。薄いグレーの小さな文字は、単純に読めません。アクセシビリティは、そのまま売上に直結します。

    中小企業版の始め方

    3層すべてを整える必要はありません。①トークンだけを決めてください。

    • メインカラー1色、サブカラー1色(この2色以外は使わない)
    • 見出しの文字サイズ、本文の文字サイズ(この2つだけ)
    • 余白の基準値を1つ(例:16px、その倍数か半分だけ使う)

    A4一枚にこれを書いて、社内で共有する。それだけで、来月から作られるものの統一感が変わります。

    政府が公開しているものを土台にできる、というのは中小企業にとって大きな追い風です。

    合同会社ヨミノワは、秋田を拠点にAI活用の伴走支援を行っています。

    この記事を書いた会社

    合同会社ヨミノワは秋田市のAI導入支援会社です。1人法人+AI社員という体制で、秋田県内の中小企業に「その日から現場で動くAI」と、補助金・事業承継の実務支援をお届けしています。

    テーマから探す

    秋田の中小企業に効く話を、テーマ別にまとめています。

    ▶ 秋田でSEO会社を探す前に|順位を上げても客が来ない理由

    ▶ AIO・AEO・GEO・LLMOの違いを5分で整理

    ▶ 会社概要 ▶ お問い合わせ(無料)

    よかったらシェアしてね!
    • URLをコピーしました!
    目次