みなさんこんにちは！ デザイナーのえびちゃんです。
この度、私が通っていたWebクリエイタースクール、デジタルハリウッドSTUDIO by LIG（以下デジLIG）のブランドガイドラインを制定いたしました！
制定するにあたって、アンケート調査や、ブランドスローガンの言語化など、様々なステップを経てデザインに落とし込んでいきました。
初めての挑戦でしたので、前回のLP制作同様悩むことも多く、先輩デザイナーにお話を聞いたり、本を読んだりしながら、試行錯誤して完成させました。事業のデザインを揃えていきたい、ブランドガイドを制定したい、と思っている方の参考になればいいなと思っております！
目次
制作することになった背景
まずは制作することになった背景をご説明いたします！
デジLIG関連のクリエイティブは、LIGブログのアイキャッチを始め、LPやバナーなどさまざまなものがありますが、デザインの方向性やコピーの方向性が統一されていませんでした。
赤とオレンジのグラデーションを使う、などの共通点はあったものの、あしらいや色の濃淡など統一感がなく、それぞれで受ける印象が違っていました。
（こんな感じで、結構印象がバラバラでした……）
同時に、私たちが強みとして見せたい印象と乖離している部分があると感じていました。そのため、このタイミングでしっかりブランドガイドラインを制定して、デジLIGの印象を統一していこう、とこのプロジェクトが始動しました！
制作ステップ
では、実際にどのようなステップでガイドラインを制作したのか解説していこうと思います！
一覧はこんな感じです！ 詳しく解説していきます。
1.制作フローを考える
まず、制作フローを固めました！
ブランディングを担当したことがあるデザイナーのななみんさんに案件のお話を聞いたり、ゆうこさんの記事を読んだり、ミルボンのブランディングに関する記事を読んだり、ブランディングに関する書籍を読んで、制作フローを考えていきました。
記事や書籍で得た知識から、まずはデジLIGは何者で、強みはどこで、何を提供するのかというガイドラインの根底部分の言語化をしっかり進めることと、社内の関係者だけではなく受講生さんや卒業生さんは現状デジLIGに対してどのような印象を持っているのか、に関してしっかり調査してから進めていくべきだということがわかりました。
2.制作フローを関係者に説明
得た知識を基に、全体フローを以下のように決めました！
まずはアンケートをとって、デジLIGの強み・弱みや現状の印象をしっかり認識すること、集まったデータを基に、デジLIGリーダーのペイさん、マーケターのまこりーぬさんとスローガンやデザインの基となるキーワードを複数決めること、その言語化を基にデザイン案を作る……といった流れです。
このフローを3人の初回MTGで共有させていただき、コンセンサスを得たうえで進めていきました。
また、私は人に何かを説明するときに、話す順番などを整理してから本番に望まないと不安なタイプなので、上記のスライドを用意して、自分にとっても、説明を受ける方にとっても視覚的にわかりやすくしました。
3.アンケート項目決め・収集
進め方に関して、コンセンサスが取れたので、ゴリゴリ進めていきます！！
まずは、現状分析のためアンケート対象者を社内のデジLIG関係者（運営・営業メンバー）、デジLIG受講生・卒業生に分けて決めていきました。そして、スプレッドシートに聞きたい項目をまとめて、3人でのMTGを通じてFIXさせていきました。
デジLIG関係者に対しては、デジLIGの未来像に関する質問項目（デジLIGにどのような印象を持ってほしいか、どのようなスクールにしていきたいかなど）も含めました。
受講生・卒業生向けアンケートは、強み・弱みを抽出するもの、現在デジLIGが発信している内容やデザインで受けた印象と、実際に入学してみて感じたギャップがあるかどうか、などの観点からの質問を用意しました。
まこりーぬさんからのFBで、アンケートはなるべく、答えやすいものにしました（最初は、入学前と入学後のギャップはありましたか？ とカリキュラムや学習環境すべて包括した項目にしていたのですが、細分化させました）。
また、現在のデジLIGの印象を聞く項目を最初はデザインに限定していたのですが、その範囲をデジLIG自体の印象に変更する（これからガイドラインを制定して揃えていくのが、デザインに限ったことではないし、受ける印象はデザイン以外の人柄なども含まれるため）ことなどのご指摘を受け、項目の精度を高めていきました。
4.アンケート結果・競合分析
MTGで決めたアンケートを、各所に展開し、回答いただきました！（ご協力いただいた方々、この場をお借りし御礼申し上げます……！）
集まった今回のデータと、デジLIGが元々とっていた入学時のアンケートのデータ（比較したスクールや入学した決め手、入学の目的などを聞くもの）の分析を始めていきます。
結果の詳細はお見せできないためモザイクをかけさせていただきますが、アンケート結果を基にデジLIGの強み・弱み、入学後のギャップなど項目でタブを分けて、その回答をカテゴリー分けし、グラフにして分析を進めていきました。
同時に、今回ブランドスローガンを決めるにあたってのフレームワークで「クロス3C分析」を使用しました。
3C分析とは、「Company（自社）、Competitor（競合）、Customer（顧客）」の頭文字を取ったものであり、それぞれの分析をしたあとに、掛け合わせを行い、デジLIGならではの強みを洗い出していくものです。
顧客x競合（競合が手薄になっている顧客ニーズ）、顧客x自社（デジLIGの強みで顧客のニーズを満たすもの）自社x競合（デジLIGの強みで、競合にないもの・上回るもの）というように掛け合わせて分析を進めました。詳しくは、紹介している書籍などを参考にしてみてください！
なので、アンケート結果だけではなく、スクールの競合についての分析も同時に進めていきました。
5.ワークショップでブランドスローガン・複数のキーワードを言語化
ブランドスローガンを決める
以上の分析したデータを基に、ペイさん、まこりーぬさんとワークショップの時間を合計3時間程度使って、言語化を進めていきました。
上記で紹介した3C分析のステップを踏んで、miroを使用しながらブレストしていきます。
まこりーぬさんから、3C分析で「競合に勝てる！」という部分ばかりにフォーカスするのではなく、「顧客が求めているものは何か？」という顧客視点を一番に考えることが大事というアドバイスを受け、一番求められている顧客のニーズはどこなのだろう、とアンケート結果を基に言語化していきました。
始めて使用したフレームワークということもあり、途中でこの議論どうやってまとめたらいいんだろう……と戸惑うことも多かったのですが、お二人の助言を受けながらワークショップを進めていきました。
そして、クロス3C分析を基に、下記の項目をまとめました。
- デジLIGの強み・特徴
- どう見せていくべきか
- ターゲットにどうなって欲しいか
- ターゲットに何を提供できるか
ベースの情報が揃ったので3人でそれらの情報を上手に表すコピーを、それぞれ後日考えて持ち寄り、ブランドスローガン（デジLIGの自己紹介的なもの）には何が一番適しているのか議論をしていきました。
そして、「現場に通おう。〜プロ基準のWebクリエイタースクール〜」という言葉に決定しました。
このスローガンには、以下の思いがこめられています。
本気で学び就転職に繋げたい、本気で自分のキャリアを変えていきたい。
そんな、全力で頑張る受講生を、Web制作会社であるLIGが監修した現場に近い実践的なカリキュラム、LIGで実際に現役で働く現役のデザイナー陣による授業やフィードバックを通じて、私たちは全力でサポートをします。スクール感覚ではなく現場に通う感覚、就転職後もすぐに使えるプロ基準のカリキュラムを、私たちは提供しています。
デジLIGの強みである、現役で働くクリエイター陣による授業やFBなどの「現場に近いカリキュラム」で、Webクリエイターへの輝かしいジョブチェンジを本気で叶えて欲しい。そういう思いを込めて、この言葉に決めました。
キーワードを抽出する
ブランドスローガンを決めたら、デザインへの落とし込みをスムーズにするため、キーワードを選定していきました。
アンケート結果により、現在のイメージは「楽しい、ワクワク」感が強いのですが、今回決めたスローガンから、この先見せていきたいイメージとして、ジョブチェンジを果たした後の「明るい」「未来」・「期待」を想像させるようなイメージや、現場に近いカリキュラムで「本気」で学ぶイメージにしていこうと、認識をすり合わせていきました。
6.デザインに落とし込む
ブランドスローガン、キーワードの抽出部分の言語化ができたので、やっとやっとデザインに落とし込んでいきます。
決めたのは、以下項目です。
- 使用する色、グラデーション
- 使用するフォント
- 使用する写真イメージ
- デザインイメージ
色に関しては明るさや本気・エネルギッシュさの観点から選定し、欧文フォントに関しても歴史や背景を調べながら、期待・未来といったキーワードに合うものを選定しました。
フォントの歴史は、となりのヘルベチカなどの書籍を読み返しながら決めました。
7.ガイドラインをMTGでFIX
作ったガイドラインをペイさん、まこりーぬさんにMTGで共有しました。
言語化をしっかりしていたので、ほぼ訂正はなくFIXいたしました！！ わ〜い！
8.完成！そして共有
完成版をご紹介します！！
表紙
ブランドスローガン
スローガンのパートでは、先程の解説を添えています。すべてのベースになるので、一番最初に持ってきました。
キーワード
選定キーワードです。優先順位もわかるように、色と大きさで差をつけました。
ブランドカラー
グラデーションは、現在使用しているものよりも「明るさ」「本気・エネルギッシュさ」を出すため、彩度を上げたパキッとした赤とオレンジにしました。
同時に、明るい未来が待っている様子を表すため、右上にオレンジを配置することも決めました。
グラデーションで使用している赤とオレンジ、追加で単色でもタイトルなどで使えそうなオレンジを追加。
クリエイティブの背景色などをイメージして、「先進性・クリエイティブさ」を表現できるグレー、文字色などを想定したブラック（コントラストがちゃんと着くように、限りなく真っ黒に近い黒を選定）を選定しました。
欧文フォント
ラテン語で未来を表す、Futuraを欧文フォントに採用しました。
ジオメトリックサンセリフを選んだ意図は、幾何学的な図形で構成される合理さを、デジLIGの効率的なカリキュラムに重ね合わせたからです。そして誕生から100年ほど経っている現在でも先進性を感じさせるフォントに、デジLIGの「先進性」が永久的に続く、という思いを込めました。
和文フォント
和文フォントは、癖がなく本文でも読みやすいものと、広告コピーなどで使用するシーンを想像しながら選定をしました。エネルギッシュさが出るフォントや、先進性・整然とした印象になるフォントを選んでいます。
写真イメージ①
写真イメージは二種類用意しました。
キーワードのなかでも最優先である、「明るさ」「未来」「期待」を表すような、キャリアチェンジを果たした後の晴れやかな表情を写真イメージに選定しました。
具体的な使用シーンは、最初の印象を決めるようなLPのファーストビューや、キャリアチェンジした後の受講生さんを表現する際に使用します。
現段階ではフリー素材が多いので具体性がないですが、これから実際に撮った写真に順次変更していき、現実性を持たせていきたいと思います。
写真イメージ②
写真イメージ②は「本気」さにフォーカスしたイメージです。
現場に近いカリキュラムで、キャリアチェンジに向けて本気で学んでいる受講生さんの様子や、真剣な熱量で教えているトレーナーさんの写真などをイメージしています。
ブランドガイドを使用したデザインイメージ
わかりやすいように、今まで決めた色やフォント、写真イメージを使用して、デザインイメージを制作しました。これを作るだけでも統一感が出てきた気がしています。嬉しい……。
こんな感じで、晴れてブランドガイドラインが完成いたしました！！ 早速デジLIG関係者に定例MTGにて共有し、デジLIGのクリエイティブを制作する機会があるLIGブログ編集チームのデザイナーにも共有をしました。
ガイドラインを基に作ったものと、これから
ブランドガイドができてから、作ったアイキャッチたちです！
東関東エリアの起点に！デジタルハリウッドSTUDIO北千住 by LIGが2021年10月にオープン！
Jumpei Hayashi
Webデザインを教えるって実際どうなの？学びや働き方を聞いてみた
Ten Tanaka
この二つだけでも、非常に揃ってきた印象があり、ブランドガイドを制作した実感が湧いてきて嬉しいです。
これから、バナー広告やLP含めて、ガイドラインに沿って制作し、より統一感を持たせていければと思っています。
まとめ
いかがだったでしょうか！
今回も赤裸々にプロジェクトの内容をお話しさせていただきました。ここはもっとこうしたほうがよかったのではないか？ など、アドバイスがあれば、ぜひ教えていただければと思います。
そして、作って終わりではなく、ガイドラインを基にデザインを統一してしばらく経ったら、また各所にアンケートを取り、デジLIGのイメージがきちんと私たちの見せたいイメージに近づいたのか検証もしていきたいと思います。
では、また次の記事でお会いしましょう！ バイバイ〜
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
