noteのイラストが新しくなりました！イラストリニューアルの裏側
こんにちは。noteでイラストレーターをしているKimです。
2022年11月頃に、イラストをリニューアルすることが決まり、動き出してまるまる半年。
この記事では、新しいnoteのイラストには、どのような思いが込められているのか、「noteらしさ」をイラストで表現する過程でどんな課題と向き合い、どのように乗り越えてきたのか、制作の裏側をオープン社内報として公開します。
オープン社内報とは？
一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。
本日の担当：ブランド戦略室 ブランドコミュニケーションチーム イラストレーター Kim
イラストリニューアルプロジェクトのはじまり
2022年12月21日、note株式会社は東証グロース市場に上場しました。noteが生まれてから8年。街に住むクリエイターは550万人を超え※（2022年12月21日時点）、noteでの創作を通して交流が生まれたり、生計を立てるクリエイターさんも多数生まれてきました。
※2023年2月時点ではクリエイター622万人
これからnoteは「今まで以上に多彩なアウトプットが生み出せる多様性に富んだ世界」を作りたいと考え、ロゴやVIのリブランディングをおこないました。これは、テキストだけではない、多様なクリエイターを支えていくことの宣言でもあります。
さらに、ロゴとVIに伴ってイラストもリニューアルすることで、新しいブランドの世界観を保ち、クリエイターさんの創作のモチベーションが上がる、居心地の良いnoteを作りたいと思いました。また、新しくなった「noteらしさ」を社員のみんなが伝えやすくする手段としてイラストシステムの取り組みをはじめました。
01.コンセプトを決める
まず、イラストのコンセプト策定に向けた壁打ちから始まりました。
ロゴの成り立ちについてヒアリングした
新しいロゴデザインに見合うイラストを作るために、デザインを担当してくださった日本デザインセンターさんからロゴの成り立ちについてヒアリングし、対話を通じてコンセプトとなる言葉の抽象度を高めました。
ロゴの成り立ちについて伺った内容
・ロゴは会社の役割の大きさを表現する
・より器の大きなロゴで、社会のインフラのようなものへ変わっていこうとするnoteの意思を見せた
・無色透明で邪魔にならず、信頼に足る品質を示すことのできるロゴタイプを目指した
・“t”を“+”に見立てることで「 クリエイターを支えるプラットフォーム 」で あるnoteの活動が、より活性化し発展していく展望も盛り込んでいる
コンセプトとなる３つのキーワードを決める
今まで以上に多様なクリエイターが安心して暮らせる「強い」フラットフォームにしていくためには、どのようなことを体現する必要があるのか。
ロゴに込められた意味合いと「“t”を“+”に見立てる」形からアイデアを引き出して、「noteというプラットフォームが今後も変化しながら発展し続けられるよう、“+”、拡張していきたい３つのバリュー」をコンセプトとして決めました。その３つが「多様性」、「創造性」、「持続性」です。
イラスト原則を決める
次はコンセプトをもとに、例えばどのような表現方法をすれば上記のことを体現できるのか、具体的なことをイラスト原則において定義しました。
イラスト原則①：わかりやすく伝える
多様性のあるイラストは「誰もがわかりやすい」イラストです。シンプルだけどディテールの表現を活かして、全ての機能をわかりやすく説明したいと思います。
イラスト原則②：空白を活かす
ロゴの“t”の形を省略して“+”に見立てたように、イラストの表現の一部を省略することで、見る人の想像力を解き放ち、クリエイターそれぞれが物語をつむぎ出せる状態を作ります。
イラスト原則③：シンプルである
今まで以上に多様なクリエイターを迎えるために、一瞬のトレンドを追うよりは、時が経っても持続可能なイラストを作ります。線画を基調としたシンプルなタッチのイラストに、ユーモアのあるメッセージを添えて、独創的で飽きのこない世界観を演出します。
02.素早くラフを制作する
コンセプトとイラスト原則、そしてブランドパーソナリティであるnoteさんに基づき、いよいよラフ制作を開始しました。ラフの制作と共に、ロゴとグラフィックと組み合わせた様々なパターンも検証しました。
正直なところ、プロジェクトの中でこのフェーズが一番大変でした。絶対的な正解がない中で、自分の感性を信じてカタチにしていく必要があるからです。コンセプトは決まったけれど、それがちゃんと伝わっているか不安を感じながら、とりあえず、たくさんのラフを作り続けることで「この方向性ならコンセプトが体現できそう！」というのが見えてきました。
03.多様なメンバーを巻き込んだフィードバック会を行う
ブランド戦略室やデザインチームのメンバーを巻き込んだフィードバック会を行い、たくさんのラフの中から2案を厳選しました。
そして最終的には、経営層とラスト2案についてディスカッションを行いました。
イラストの選定基準とポイント
①ユーザーに対する間口の広さ
②表現幅の広さ
（公式発信系からクリエイターフェスまで、様々なテンション感のあるシーンで活用できるのか）
③中長期的に運用しやすいか
④多様性を表現されているか
上記の選定基準をもとに議論を重ねた結果、最終的には画風①の方が今後のnoteが目指す世界に近いねという話になりました。画風①はユーザーに対する間口の広さが広く、陽気で屈託のないキャラクターたちがブランドに楽天的な性格を与えて、創作の楽しさをより強く伝えることができると思いました。そして、曲線と直線が共存するロゴと組み合わせた時に、相性が良く、ブランドとの相性効果が発揮されているように感じました。
その一方で、イラストがモノクロに変わったことに対して共通する懸念点も出てきました。
①モノクロでイラストを展開している他社とはどう違うのか
②モノクロでイラストを展開する場合、タイムラインで目立たせることはできるのか(公式イベント系の見出し画像や広告などコンバージョンが必要な場合)
③イラストが主人公か、装飾か的な、イラストの役割を決めると良さそう
04.イラスト運用ルールを決める
そこで、S・A・Bの３つの使用目的に分けたイラストの運用ルールを決めました。クリエティブの目的ごとに一定の配色を許容することで、それぞれのコンセプトとテーマに合う表現の幅を広げることができました。
05.新イラストが決まりました！
こうして新しいイラストが決まりました！
最終案が決まってからは、全社員が参加するミーティングで社員のみなさんに新イラストを発表しました。みんなに受け入れてもらえるかすごく緊張しましたが、Zoomのチャットでたくさんわいわいとした反応とハートをいただいたので、一安心しました。改めてこの記事を通じて、社員のみなさんに新イラストを使っていただきたいと思います。
新しいイラストはログイン画面からAIアシスタントなど、いろんなところでお披露目されはじめています。
これからも、たくさんのイラストが更新される予定です。お楽しみに！
06.機能性を考慮したイラストシステム
次に、他のデザイナーさんも新イラストを使えるように、作り上げたイラストをシステムに落とし込みました。デザイナーさんはFigmaを使ってクリエイティブを作ることが多いので、イラストシステムもFigmaでつくることにしました。
今回は第一弾として、３つの人物セットと、飾りとして使えるアイテムを用意しました。
ダークモード対応のイラストシステム（白フチ付き）を両方用意しました
リニューアルを始める前に、デザイナーさんに必要な素材についてヒアリングできたことと、画風がシンプルになったことで、マッハでイラスト素材を作ることができました！
カスタマイズできる範囲を狭めた
人物の細かい表情から関節まで細かくカスタマイズできる仕組みを検討しましたが、カスタマイズできる範囲が広いほど、パーツ選びに意外と時間がかかることがわかりました。そこで、今回はカスタマイズできる範囲を頭・上半身・下半身の３つに絞って運用をしてみたいと思います。
色々な角度から見たポーズを用意しました
ダークモードに対応できるイラストシステムを検討した
イラストがモノクロになったため、アクセシビリティに配慮した「ダークモードに対応できるイラストシステム」を作りました。イラストの黒面に白いフチをつけることで、一つの画像で背景色が白ベースの「ライトモード」と、背景色が黒ベースの「ダークモード」で同じ見せ方をすることができます。
（🔍拡大してご覧下さい）
サムネイルやバナーなどを作成する時は、白フチがついてない普段のイラストシステムを使っていただきます。
デザイナーさんが使えるイラストシステムはひとまず着地できたので、これからはFigmaを使わないメンバー向けのイラストシステムを考えていきたいと思います。イラストシステムについてはまた別で記事を書きます。
最後に・・・
長くなりましたが、イラストリニューアルについてお話ししてきました。インハウスイラストレーターとして長期にわたってリブランディングに携われて、イラストを描く以上の新しいチャレンジができたことに感謝しています。ご協力いただいたみなさん、ありがとうございました！
イラストのリニューアルは、ようやくスタートラインに立てたかなという気持ちで、これから新しくするところや課題がまだまだ盛り沢山です。そもそもリブランディングは一度やったらすぐ効果が出るというものではないので、定期的に、いま作っているものが自分たちのブランドから外れてないだろうかと問い直し、少しずつ改善しながら育てていきたいと思います。
これからも、クリエイティブの力で、より多くのクリエイターさんが安心して創作できる街を作っていきます。noteのイラストと出会うクリエイターさんの創作、アイデアのお役に立てれば幸いです。
それでは、新しくなったnoteのイラストをよろしくお願いいたします！
今回のバリュー
クリエイティブでいこう / Be Creative
クリエイティブというのは、ある状況に対して、前向きに楽しく問題を解決しようとする姿勢を指します。どんなに困難に見える課題でも、クリエイティブに解決する糸口は必ずあります。note株式会社のメンバーはそれを追い求めます。
おおきな視点で考えよう / Think Big
さまざまな課題に出会ったときに、短期的なことにとらわれずに、長期的な視点と顧客視点を持って、大きな視点で考えるようにします。売り上げも利益も、サービスに持続可能性をもたらす燃料にすぎません。自分自身と、家族、友人、そして社会に誇れる仕事をしよう。
💐最後の最後に
リブランディング後のノベルティについて気になる方は、ぜひこちらの記事もご覧ください！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？