求人票や案件の要件に「CI/BI制作」と書いてあって、手が止まったことはありませんか?
この2つ、並べて比べようとすると混乱します。BIはCIと並ぶものではなく、CIの中身の1つだからです。
関係が分かると、ロゴやWebサイトを作るときに「どこまで自分で決めていいのか」の線引きもはっきりします。
このレッスンでは、CI・MI・BI・VIの関係を整理して、ブランドの決めごとが実際のデザインにどう効いてくるかまで見ていきます。読み終わったら、好きなブランドを1つ分解する実践をやってみてくださいね◎
CIとBIの違いは「全体」と「中身」
CIは Corporate Identity(コーポレートアイデンティティ)の略です。会社の考え方と見え方を1つにそろえる取り組み全体を指します。
その中身が3つに分かれます。
- MI(Mind Identity)/何のためにある会社かを言葉で決める
- BI(Behavior Identity)/決めた言葉を、日々のふるまいに変える
- VI(Visual Identity)/決めた言葉を、目に見える形にする

BIは Behavior Identity の略で、社員のふるまいの部分です。接客のことば遣い、問い合わせへの返し方、社内の制度。「その会社らしさ」が行動に出るところをまとめて指します。
CIとVIの違い(デザイナーが触るのはVI)
もう1つよく混ざるのがVIです。ロゴ・色・書体・名刺・看板・Webサイトといった、目に見える部分をまとめたもの。私たちが手を動かす範囲はほぼここです。
身近な例で言うと、ユニクロの赤い四角のロゴです。店舗の看板でも、紙袋でも、アプリのアイコンでも、同じ形と同じ赤で出てきます。この「どこで見ても同じ」を作る決めごとがVIです。
無印良品も分かりやすい例です。店舗の棚札、紙袋、Webサイトの商品ページを並べると、使っている色数が少なく、書体も文字の大きさもほぼ同じ。Appleの製品ページも、モデルが変わっても写真の見せ方と余白の取り方が変わりません。ブランドらしさは、新しい飾りではなく同じことの繰り返しで作られています。
| 略称 | 正式名 | 決めるもの | 形になるもの |
|---|---|---|---|
| CI | Corporate Identity | 下の3つを含む取り組み全体 | ブランドの決めごと一式 |
| MI | Mind Identity | 理念・約束・らしさの定義 | 理念、行動指針、ブランドの言葉 |
| BI | Behavior Identity | 人のふるまい | 接客ルール、サポート対応、社内制度 |
| VI | Visual Identity | 見た目 | ロゴ、色、書体、名刺、Webサイト |
気をつけたいのは、VIだけ作ってもCIにはならないことです。かっこいいロゴができても、電話の応対が雑なら、受け取る側の印象はそちらで決まります。見た目と行動が食い違うと、どちらも信じてもらえません。
逆に言うと、VIを作る人がMIを読んでいないと危ないです。「誠実さを大事にする会社」と言葉で決めているのに、派手でにぎやかなロゴを出したら、そこで矛盾が生まれます。
ロゴの作り方そのものはロゴデザインの基本にまとめました。
ブランドが形になる3つの場所
同じCIでも、どこに載せるかで作るものが変わります。デザインの仕事は大きく3つの領域に分かれます。

コミュニケーションデザイン
情報を伝えるためのデザインです。Webサイト、バナー、SNS投稿、チラシ、展示ブース。人と会社が出会う接点を作ります。
この領域の特徴は、見る人が流し見していることです。手に取ってじっくり眺めてはくれません。だから優先順位をはっきりさせて、1秒で主役が伝わる形にします。Webデザインの仕事のほとんどはここに入ります。
パッケージデザイン
商品の容器や包みのデザインです。飲料のラベル、菓子の箱、化粧品の容器。
売り場で競合商品と横に並ぶので、遠くからでも見分けがつく形が要ります。中身を守る、運びやすい、開けやすいといった役割も同時に背負います。印刷が前提なので、色の指定はCMYKや特色で考えます。この話は印刷の色(CMYK・特色)で扱います。
プロダクトデザイン
製品そのものの形を作るデザインです。家電、家具、文具、食器。
持ち手の太さ、ボタンの位置、重さのバランスまで含めて考えます。何年も手で触るものなので、見た目より使い心地が優先されます。3つの中でいちばん寿命が長く、いちばん作り直しが効きません。
作る側がCIをどう使うか
実務で渡されるのは、たいていレギュレーションと呼ばれる資料です。ロゴの最小サイズ、余白の取り方、使ってよい色のコード、禁止例。VIをルール化したものですね。
ここで大事なのは、レギュレーションを「守るべき制限」ではなく「決定ずみの答え」として読むことです。色を毎回悩まなくて済むので、作業はむしろ速くなります。
中身を見てみたいなら、公開されているものがあります。デジタル庁のデザインシステムやGoogleのMaterial Designは、色・書体・余白・部品の使い方まで誰でも読める形で公開しています。実際の決めごとがどのくらい細かいのか、一度のぞいてみてください。
- デジタル庁デザインシステム(2022年公開)/行政サイト向け。色・書体・部品が公開されていて、自治体も参照できます
- SmartHR Design System/文章の書き方まで載っています。「言葉づかいもデザインの一部」が読み取れます
- IKYU Design Guideline(2023年12月公開)/一休.com・レストラン・スパを横断する指針。サービスをまたいでそろえる例として見られます
- Ameba Spindle/freeeのvibes/メルカリのデザインシステム/日本語サービスの実物が並んでいます
- GoogleのMaterial Design/AppleのHuman Interface Guidelines/部品の使い方と、そう決めた理由まで書いてあります
自分の制作でも同じことをします。案件が小さくても、色3つと書体2つを先に決めて書き出しておく。それが自分用のレギュレーションになります。
資料に書いていない判断が出てきたら、MIまで戻ります。「この会社は誠実さを大事にしている。この飾りは誠実に見えるか?」と自分に聞けば、たいてい答えが出ます。
この考え方はトンマナ(トーン&マナー)とそのまま地続きです。トンマナは1つの案件の中で見た目をそろえる決めごと、CIは会社まるごとの決めごと。範囲が違うだけで、やっていることは同じですよ。
ミニ実践:好きなブランドを分解する(10分)
言葉を覚えるより、実物で見たほうが早いです。道具はメモ帳とスマホだけで足ります。
- 好きなブランドを1つ選ぶ(カフェ、アパレル、家電など、実物に触れたことがあるもの)
- 公式サイトの「私たちについて」「理念」のページを開いて、MIにあたる言葉を1文だけ書き写す
- そのサイトからVIを3つ拾う。ロゴの形、使っている色(カラーコードまで見る)、見出しの書体
- お店やサポートで受けた対応を思い出して、BIを1つ書く。「聞かなくても待ち時間を教えてくれた」など
- 3つを並べて、MIの1文と食い違っている部分がないか見る
やり終わったら、ここを確認してみてください。
- MIの1文を、自分の言葉で言い直せる
- VIの3つが、そのMIから説明できる(例:落ち着いた紺=誠実さ)
- BIの1つが、MIの言葉とつながっている
- 食い違いが1つも見つからないなら、そのブランドはCIがそろっている
慣れてきたら、逆に「見た目はいいのに印象が薄いブランド」でもやってみてください。だいたいMIとVIのどちらかが抜けています💡
よくある質問
次に学ぶこと
まとめます。
- CIは取り組み全体。MI(理念)・BI(行動)・VI(見た目)の3つでできている
- BIもVIもCIの一部。横に並べて比べるものではない
- デザイナーが作るのはVI。ただし根拠はMIにある
- 形になる場所は、コミュニケーション・パッケージ・プロダクトの3領域
ここまでで第7章の内容は終わりです。制作のときに守る決めごととして、著作権と素材の使い方もあわせて確認しておくと安心ですよ。
次は実践編です。ここまで学んだことを1枚のバナーで全部使う総合演習(修了課題)に進んでください。知識が手の動きに変わるのはここからです。
学ぶ順番の全体像はデザイン基礎コースの目次から確認できます。
