本文へ移動

CIとBIの違いと、ブランドの決めごとの読み解き方(MI・VIも整理)

第7章 データと現場の知識 読了目安 7分

INDEX目次

    求人票や案件の要件に「CI/BI制作」と書いてあって、手が止まったことはありませんか?

    この2つ、並べて比べようとすると混乱します。BIはCIと並ぶものではなく、CIの中身の1つだからです。
    関係が分かると、ロゴやWebサイトを作るときに「どこまで自分で決めていいのか」の線引きもはっきりします。

    このレッスンでは、CI・MI・BI・VIの関係を整理して、ブランドの決めごとが実際のデザインにどう効いてくるかまで見ていきます。読み終わったら、好きなブランドを1つ分解する実践をやってみてくださいね◎

    もくじ

    CIとBIの違いは「全体」と「中身」

    CIは Corporate Identity(コーポレートアイデンティティ)の略です。会社の考え方と見え方を1つにそろえる取り組み全体を指します。

    その中身が3つに分かれます。

    CIの中身は3つ
    • MI(Mind Identity)/何のためにある会社かを言葉で決める
    • BI(Behavior Identity)/決めた言葉を、日々のふるまいに変える
    • VI(Visual Identity)/決めた言葉を、目に見える形にする
    CIはMI(理念)・BI(行動)・VI(見た目)の3つでできていることを示した階層図。BIとVIはCIと並ぶものではなくCIの中身にあたる

    BIは Behavior Identity の略で、社員のふるまいの部分です。接客のことば遣い、問い合わせへの返し方、社内の制度。「その会社らしさ」が行動に出るところをまとめて指します。

    「CIとBIの違いは?」への答えは、BIはCIの一部です。上下の関係なので、横に並べて比べるものではありません。

    CIとVIの違い(デザイナーが触るのはVI)

    もう1つよく混ざるのがVIです。ロゴ・色・書体・名刺・看板・Webサイトといった、目に見える部分をまとめたもの。私たちが手を動かす範囲はほぼここです。

    身近な例で言うと、ユニクロの赤い四角のロゴです。店舗の看板でも、紙袋でも、アプリのアイコンでも、同じ形と同じ赤で出てきます。この「どこで見ても同じ」を作る決めごとがVIです。

    無印良品も分かりやすい例です。店舗の棚札、紙袋、Webサイトの商品ページを並べると、使っている色数が少なく、書体も文字の大きさもほぼ同じ。Appleの製品ページも、モデルが変わっても写真の見せ方と余白の取り方が変わりません。ブランドらしさは、新しい飾りではなく同じことの繰り返しで作られています。

    略称正式名決めるもの形になるもの
    CICorporate Identity下の3つを含む取り組み全体ブランドの決めごと一式
    MIMind Identity理念・約束・らしさの定義理念、行動指針、ブランドの言葉
    BIBehavior Identity人のふるまい接客ルール、サポート対応、社内制度
    VIVisual Identity見た目ロゴ、色、書体、名刺、Webサイト

    気をつけたいのは、VIだけ作ってもCIにはならないことです。かっこいいロゴができても、電話の応対が雑なら、受け取る側の印象はそちらで決まります。見た目と行動が食い違うと、どちらも信じてもらえません。

    逆に言うと、VIを作る人がMIを読んでいないと危ないです。「誠実さを大事にする会社」と言葉で決めているのに、派手でにぎやかなロゴを出したら、そこで矛盾が生まれます。
    ロゴの作り方そのものはロゴデザインの基本にまとめました。

    ブランドが形になる3つの場所

    同じCIでも、どこに載せるかで作るものが変わります。デザインの仕事は大きく3つの領域に分かれます。

    ブランドが形になる3つのデザイン領域(コミュニケーションデザイン・パッケージデザイン・プロダクトデザイン)を、作るもの・見る人の状況・例で並べた分類図

    コミュニケーションデザイン

    情報を伝えるためのデザインです。Webサイト、バナー、SNS投稿、チラシ、展示ブース。人と会社が出会う接点を作ります。

    この領域の特徴は、見る人が流し見していることです。手に取ってじっくり眺めてはくれません。だから優先順位をはっきりさせて、1秒で主役が伝わる形にします。Webデザインの仕事のほとんどはここに入ります。

    パッケージデザイン

    商品の容器や包みのデザインです。飲料のラベル、菓子の箱、化粧品の容器。

    売り場で競合商品と横に並ぶので、遠くからでも見分けがつく形が要ります。中身を守る、運びやすい、開けやすいといった役割も同時に背負います。印刷が前提なので、色の指定はCMYKや特色で考えます。この話は印刷の色(CMYK・特色)で扱います。

    プロダクトデザイン

    製品そのものの形を作るデザインです。家電、家具、文具、食器。

    持ち手の太さ、ボタンの位置、重さのバランスまで含めて考えます。何年も手で触るものなので、見た目より使い心地が優先されます。3つの中でいちばん寿命が長く、いちばん作り直しが効きません。

    3領域とも、出発点は同じMIです。「誠実さ」と決めたなら、バナーの言葉づかいも、箱の紙の選び方も、製品の手ざわりも、その1語に寄せていきます。

    作る側がCIをどう使うか

    実務で渡されるのは、たいていレギュレーションと呼ばれる資料です。ロゴの最小サイズ、余白の取り方、使ってよい色のコード、禁止例。VIをルール化したものですね。

    ここで大事なのは、レギュレーションを「守るべき制限」ではなく「決定ずみの答え」として読むことです。色を毎回悩まなくて済むので、作業はむしろ速くなります。

    中身を見てみたいなら、公開されているものがあります。デジタル庁のデザインシステムやGoogleのMaterial Designは、色・書体・余白・部品の使い方まで誰でも読める形で公開しています。実際の決めごとがどのくらい細かいのか、一度のぞいてみてください。

    実例: 誰でも読めるデザインシステム
    • デジタル庁デザインシステム(2022年公開)/行政サイト向け。色・書体・部品が公開されていて、自治体も参照できます
    • SmartHR Design System/文章の書き方まで載っています。「言葉づかいもデザインの一部」が読み取れます
    • IKYU Design Guideline(2023年12月公開)/一休.com・レストラン・スパを横断する指針。サービスをまたいでそろえる例として見られます
    • Ameba Spindlefreeeのvibesメルカリのデザインシステム/日本語サービスの実物が並んでいます
    • GoogleのMaterial DesignAppleのHuman Interface Guidelines/部品の使い方と、そう決めた理由まで書いてあります

    自分の制作でも同じことをします。案件が小さくても、色3つと書体2つを先に決めて書き出しておく。それが自分用のレギュレーションになります。

    資料に書いていない判断が出てきたら、MIまで戻ります。「この会社は誠実さを大事にしている。この飾りは誠実に見えるか?」と自分に聞けば、たいてい答えが出ます。
    この考え方はトンマナ(トーン&マナー)とそのまま地続きです。トンマナは1つの案件の中で見た目をそろえる決めごと、CIは会社まるごとの決めごと。範囲が違うだけで、やっていることは同じですよ。

    ミニ実践:好きなブランドを分解する(10分)

    言葉を覚えるより、実物で見たほうが早いです。道具はメモ帳とスマホだけで足ります。

    1. 好きなブランドを1つ選ぶ(カフェ、アパレル、家電など、実物に触れたことがあるもの)
    2. 公式サイトの「私たちについて」「理念」のページを開いて、MIにあたる言葉を1文だけ書き写す
    3. そのサイトからVIを3つ拾う。ロゴの形、使っている色(カラーコードまで見る)、見出しの書体
    4. お店やサポートで受けた対応を思い出して、BIを1つ書く。「聞かなくても待ち時間を教えてくれた」など
    5. 3つを並べて、MIの1文と食い違っている部分がないか見る

    やり終わったら、ここを確認してみてください。

    分解できたかの確認
    • MIの1文を、自分の言葉で言い直せる
    • VIの3つが、そのMIから説明できる(例:落ち着いた紺=誠実さ)
    • BIの1つが、MIの言葉とつながっている
    • 食い違いが1つも見つからないなら、そのブランドはCIがそろっている

    慣れてきたら、逆に「見た目はいいのに印象が薄いブランド」でもやってみてください。だいたいMIとVIのどちらかが抜けています💡

    よくある質問

    CIとは何の略ですか?

    Corporate Identity の略です。日本語ではコーポレートアイデンティティ、または「企業の同一性」と訳します。
    「その会社が何者かを、内側の考え方から外側の見た目まで一貫させる取り組み」と覚えると使いやすいです。ロゴだけを指す言葉ではありません。

    CIとVIの違いは何ですか?

    VIはCIの一部です。CIが取り組み全体、VIはそのうち目に見える部分(ロゴ・色・書体・紙もの・Webサイト)を指します。
    デザイナーが直接作るのはVIですが、そのVIの根拠はMI(理念)にあります。だから制作前にMIを読んでおくと、色や形を選ぶ理由を説明できるようになります。

    個人や小さなお店にもCIは要りますか?

    要ります。ただし資料を分厚く作る話ではありません。
    「誰に、何を、どんな態度で届けるか」を1文で決めて、色を3色・書体を2種類に絞る。これだけでCIとして機能します。フリーランスなら、自分の名刺・ポートフォリオ・SNSの見た目がそろっているかを見直すところから始めるといいですよ。

    医療や滅菌の分野で出てくるCI・BIとは別物ですか?

    まったく別物です。滅菌の分野のCIは化学的インジケータ、BIは生物学的インジケータを指し、滅菌がきちんとできたかを確かめる道具の名前です。
    デザインの現場で言うCI・BIは、このページで説明したブランドの話のほうです。略称が同じだけなので、混ざらないよう気をつけてくださいね。

    次に学ぶこと

    まとめます。

    • CIは取り組み全体。MI(理念)・BI(行動)・VI(見た目)の3つでできている
    • BIもVIもCIの一部。横に並べて比べるものではない
    • デザイナーが作るのはVI。ただし根拠はMIにある
    • 形になる場所は、コミュニケーション・パッケージ・プロダクトの3領域

    ここまでで第7章の内容は終わりです。制作のときに守る決めごととして、著作権と素材の使い方もあわせて確認しておくと安心ですよ。

    次は実践編です。ここまで学んだことを1枚のバナーで全部使う総合演習(修了課題)に進んでください。知識が手の動きに変わるのはここからです。

    学ぶ順番の全体像はデザイン基礎コースの目次から確認できます。

    第7章 データと現場の知識 の他のレッスン

    前後のレッスン

    ← コースの目次へ戻る

    目次

      \ スクールが気になったら、まずはLINEで /

      公式LINE登録で、3大特典をプレゼント

      無料相談(Zoom・30分)の予約もLINEから。勧誘なし・ブロックはいつでもOKです。

      FOR BUSINESS

      法人向け「AI×デザイン」研修

      生成AIを取り入れた制作ワークフローを、半日〜2日のカスタム研修でチームに導入。デザイナー以外の職種の方にも対応します。

      研修について相談する

      オンライン・対面どちらも可 / お見積り無料

      LINE登録で3大特典
      LINE登録で3大特典スクール詳細
      PR バナー
      公式LINEで無料相談 + ロードマップPDFプレゼント中 LINE友だち追加