チラシ、SNSの投稿画像、お客さまに渡す資料。並べてみると、どれも少しずつ色が違います。フォントもばらばらです。作ったのは全部自分なのに、なぜかそろいません。

そう感じたことはありませんか。原因はセンスではありません。「うちの決まりごと」が、どこにも書かれていないからです。

この記事では、すでに手元にあるはずの答え、つまり自社のWebサイトから、色やフォントのルールを取り出す方法を紹介します。Web制作の知識は必要ありません。

▼記事を3分で理解できる！マンガ風スライドはこちら

そろわないのは、決まりごとが言葉になっていないからです

多くの個人事業主にとって、Webサイトは制作会社に作ってもらったものです。打ち合わせで「明るい感じで」「和の雰囲気で」と伝え、上がってきたものに納得して公開します。ここまでは自然な流れです。

問題はその後です。サイトを作った人の頭の中には、はっきりしたルールがあります。しかし、そのルールが書かれた資料は、たいてい手元に残りません。だから自分でチラシを作るとき、記憶と勘で色を選ぶことになります。

ブランドがばらつく原因は、作り手の能力ではありません。参照するものが一枚もないことです。

答えは自社サイトの中に、すでに書かれています

ここで使うのが、DESIGN.md Style Extractor というChrome 拡張機能です。

見ているWebページを開いた状態でボタンを押すと、そのページのデザイン設定を読み取り、Markdownという形式のテキストファイルにまとめてくれます。GitHubでソースコードが公開されているオープンソースの拡張機能で、Chrome ウェブストアから無料で入手できます。

取り出せるのは、この6種類です

・タイポグラフィ（フォントの種類、大きさ、太さ）

・カラー（配色）

・スペーシング（余白の取り方）

・角丸（角の丸みの大きさ）

・シャドウ（影のつけ方）

・モーション（動きの速さ）

出力されるファイルは2種類です。人が読むための DESIGN.md と、AIに渡すための SKILL.md が選べます。

手順は4つです

・Chrome ウェブストアの配布ページを開き、拡張機能を追加します

・自社サイトのトップページを開きます

・ツールバーの拡張機能アイコンを押します

・表示された内容を確認し、ファイルとしてダウンロードします

出てきたファイルには、たとえば「メインカラーは #1A3A5C」「見出しのフォントサイズは 28px」のように、そのサイト固有の具体的な値が並びます。これが、これまでどこにもなかったブランドガイドの原型です。

取り出したあと、何に使えるのでしょうか

外注先に渡す指示書になります

「トップページと同じ雰囲気で」という口頭の依頼が、数値の書かれた文書に変わります。デザイナーやライターに渡せば、認識のずれが減ります。

資料や画像の配色設定に使えます

プレゼン資料の配色、SNS投稿画像のテンプレート、名刺。どれも、ファイルに書かれた色コードとフォント名をそのまま設定すればそろいます。

AIに作業を任せるときの設計図になります

「いい感じのバナーを作って」と頼むと、AIは毎回違うものを出してきます。ファイルの内容を先に渡してから頼むと、出力が安定します。

Claudeなどの生成AIに渡すときは、次のように書き添えると意図が伝わりやすくなります。

以下は当社サイトのデザイン仕様書です。
この配色・フォント・余白のルールに厳密に従って、
[作りたいもの]を作成してください。
仕様書に書かれていない色やフォントは使わないでください。

---
（ここにDESIGN.mdの中身を貼り付ける）

使う前に決めておきたいことが2つあります

ひとつめは、どのChromeで使うかです。この拡張機能は、開いているページの中身を読み取る性質のものです。メールや会計サービスにログインしたままのブラウザに入れるより、実験用のプロフィールを別に作って、そこで使うほうが安心です。Chrome右上のプロフィールアイコンから追加できます。

ふたつめは、どのサイトに使うかです。技術的には他社のサイトにも使えますが、そこで取り出したルールをそのまま自分の販促物に流用すれば模倣になります。使う対象は自社サイトに限ってください。

FAQ

Q1. 自社サイトがない場合はどうすればよいですか。

A. この拡張機能はWebページのデザイン設定を読み取る仕組みのため、サイトがないと使えません。InstagramなどSNSのプロフィールページを読み取っても、自社のルールではなくSNS側のルールが出てきます。

Q2. 出てきたファイルは、そのまま制作会社に渡してよいですか。

A. 渡して差し支えありません。むしろ、自社サイトから機械的に抽出した値なので、認識合わせの土台として使いやすい内容です。

Q3. 専門用語が多くて読めません。

A. すべてを理解する必要はありません。色コードとフォント名の2つだけ拾えば、資料や画像の統一には足ります。

Q4. 費用はかかりますか。

A. Chrome ウェブストアから無料で入手できます。ソースコードもMITライセンスで公開されています。

Q5. 抽出したデータは外部に送信されますか。

A. 開発者はChrome ウェブストア上で、利用者のデータを収集または使用しないと申告しています。ただし、これは開発者による自己申告です。心配な場合は、前述のとおり業務用と分けたブラウザで使ってください。

まとめ

・ブランドがそろわないのは、センスではなく、決まりごとが言語化されていないからです

・自社サイトには、その決まりごとがすでに数値として存在しています

・取り出せば、外注指示・資料作成・AIへの依頼の3つに使い回せます

まずは自社サイトのトップページで一度試してください。手元に一枚もなかったブランドガイドが、その日のうちにできます。

▼3分で理解できる！マンガ風スライドはこちら

AI活用について、社内でどう進めるべきか迷っていませんか？ AI-Brainでは、中小企業向けに30分の無料相談を実施しています。 まずはお気軽にご相談ください。

30分無料相談はこちら