見出し画像

「続くロゴ」は「変えぬコト」を思うモノ|#朝までシリーズ ロゴ総まとめ

こんにちは!
デザイナーのモンブランです。

今回はDTP Transit/CSS nite主催のオールナイトイベント
「#朝まで」シリーズのロゴデザイン総まとめをしてみたいと思います。

本記事はAdobe Community Experts presents
Creative Advent Calendar 2024、14日目の記事になります。

Adobe Community Experts presents Creative Advent Calendar 2024

環境。

制作環境

・Mac Studio(2022)
・Apple M1 Max
・メモリ:32GB

すべて"イラレ"で作成。

Adobe Illustratorを使用してデザインをしています。

YouTubeで配信中に制作。

制作前段階のラフスケッチ、納品前の微調整、その他の特別な事情など以外は、そのほぼすべてをYouTube配信中に作っています。
手直し、リテイクの様子、チャットでの反応や意見やアイデアをリアルタイムで取り入れる事もあります。


「シリーズのロゴ」になっていく。

7つの「朝まで」のロゴ

「#朝までイラレ」のロゴをデザインしていた頃には「もしからしたら次はフォトショもあるかな〜」と思っていたくらいで、ここまでの種類のロゴを作ることは想像していませんでした。

2022年12月「 #朝までイラレ
2023年5月「 #朝までフォトショ
2023年7月「 #朝までアフター
2023年10月「 #朝までマークアップ
2024年5月「 #朝までディレクションとか
2024年10月「 #朝までFigma
2024年11月「 #朝までAdobeExpress

2024年12月現在、#朝まで シリーズのロゴは、合計7つあります。

7つの朝までシリーズ ロゴ達
シンプルに7つのシリーズロゴってそうそう無いよな…

3つめの朝までアフターのロゴを作った後くらいから、シリーズロゴとして「変えるところ」と「変えないところ」を意識するようになります。


"朝まで"らしさの追求

まず、名前にある通りの「朝まで」をどう表現するかというお話。
以下のようなアプローチで「朝までらしさ」「夜明け感」にアプローチしています。

夜明けを意識したカラーリング

暗い色→明るい色へのグラデーションをかけることで「水面から出る日の出」をイメージしています。
イベントのごとにキーカラーが変わりますが、夜明けをイメージしているのはシリーズを通して共通しています。

各ロゴのカラーリング。
それぞれのキーカラーは維持して夜明けをイメージしたグラーデションに。
間の色がくすんでしまう場合は、差し色を追加で入れている。

変わら"なかった"太陽シンボル

太陽のシンボルは、新しく制作する度にイベントやロゴの体裁に合わせて変えようと模索しましが、そのほとんどが同じ形に落ち着きます。

各ロゴの太陽マーク。その時で若干形を変えたりするものの、ほぼ同じ形。
黄色はその時のカラーを邪魔しない色に調整している。


深夜番組感を出す。

「朝まで」シリーズのロゴは某番組のようなテレビ番組をイメージしながらデザインしています。(あくまでイメージであって、実際のロゴとはかなり違います)

そこで、某番組放送時間の「深夜番組感」を意識して、以下のような思考で制作しています。

シアーをかけて動きのあるロゴに

深夜テンション、や楽しいなどをイメージして10〜15度のシアー(斜体)をかけています。
シアーをかけないアプローチも何度か試していますが、既成フォントベースでは動きのある印象が出づらく感じるため、最終的にシアーをかけることが多いです。(ここは自分の実力不足はあるかも…!)

テキスト部分要素のみを抽出したもの。
そのすべてが斜体&右肩あがり

質感を出して「エモ」さを加える

「#朝までイラレ」の時から採用している粒子状のテクスチャ「エモさ」と個人的裏テーマから始まっています。
できるだけ無機質感や堅苦しさを生みたくないという気持ちもありました。

粒子状のありなし比較。粒子は[効果]→[テクスチャ]→[粒状]で作成している。
引用:「#朝までイラレ」のロゴができるまで


ルールを固めて統一感を出す

表示しているものはほぼ一緒

デザインの違いや表示量などに違いはあるものの、「テキスト」「太陽マーク」「まわりのあしらいとそのバランス」はどのロゴもほぼ統一して使っています。
ここまで書いた、変えない所と合わせて統一感を出しています。

まわりのあしらいは2種類に固定

タイトルのまわりにあしらうものは、ざっくり言うと
・キラキラ
・各イベントに沿ったもの

と、ざっくりとした2種の考え方をしています。(厳密にあしらいひとつひとつをカウントすると2通りではありません)

朝までAdobe Expressはアプリの特性上他のロゴよりもあしらいの主張やボリューム感があるため、既存のあしらいを多めに使っている


特徴から変化をつける

それぞれの「らしさ」をあしらいに加える

イラレならパスの表現、Photoshopなら透明部分など
アプリ・イベント毎のあしらいを加えています。

アプリごとのあしらい一覧

テキスト部分へのあしらいは控えめに

名前の箇所にもあしらいを加えますが、可読性や視認性を意識して、まわりのものに比べて控えめにしています。

テキスト部分のみ抽出したもの。
可読性を確保するために抑えめにするか、溶け込ませるようにしている。

既成のフォントを使う時もあれば、フリーハンドで描くこともあり。その時のデザインの自分の筆がのる時、ロゴ全体としての方向性によって変えていきます。

朝までマークアップではテキストのガイドラインを用いて、Webならではの規則性/規範性を表現した。
引用:#朝までマークアップ 」のロゴができるまで。




ジャンルへの対応

デザインアプリから、映像アプリへ

イラレからフォトショへの変化はシンメトリーやあしらいなどの工夫しましたが、「#朝までアフター」は「イメージ制作」から「映像制作」と制作スタイルの変化がありました。

アプリごとのデザインの区分け

グラフィックツールから、Webへ

「#朝までアフター」の後は「#朝までマークアップ」。
グラフィックの制作から、開発実装/コーディングを含むWebジャンルのイベントに。

ツールからWeb全体へ分野が広がったため、あしらいは広義的な要素を増やし、デジタル性の高い要素や規則性を意識した直線的なラインを多用しています。

朝までマークアップのロゴでは線状のガイドを使って規則性を設けている。
引用:#朝までマークアップ 」のロゴができるまで。



「#朝までディレクションとか」のイレギュラー性

「#朝までディレクションとか」では、今までの朝までイラレ、朝までアフターなどの技術的Tipsと違い、プロジェクト、タスク等の多岐にわたる業務進行/管理系の分野と、ジャンルとして大きな変化値が生まれました。
そのため、他のロゴとはかなり異なるアプローチをしています。

「黒いエグみ」を失くす。

ツールや制作に対しての「朝まで」はこだわり、凝り性などギーク感を感じますが、ディレクションに対しての「朝まで」にはひたすらに「黒い印象」を感じたため、「朝まで」の要素を少なめにしています。

他にもメインタイトルがレイアウト的に2行になったのも"朝まで"を小さくした理由のひとつ
引用:「#朝までディレクションとか」のロゴができるまで。

「背景」をなくす

制作/ツール、手を動かすのか/頭を使うのか、と扱う分野がかんり異なるため、背景に使っていたグラデーションは使いませんでした。
その変わりに背景状況に応じたデザインパターンが存在します。

ロゴのシーンごとのパターン。 暗い色や同系色で沈むのを防ぐため複数パターンを制作している。
引用:「#朝までディレクションとか」のロゴができるまで。

ここについては元記事の解説も合わせて読んでもらえると嬉しいです!




まとめ:「変えないところ」を決める

こうして振り返ると、シリーズのロゴとはいえ、扱うテーマ/アプリは異なるので「変えること」よりも
「ここはブラさない」「ここは変えないでおこう」という思考を優先していた感覚があります。

今後あるかもしれない新しいロゴも、概ねここで書いた内容を意識して制作していくことになると思います。

いやはや、次はどんな「朝まで」が始まるんだろう…!

楽しみです!


元記事

朝までシリーズの各noteになります。
この記事をピックアップするタイミングで「#朝までFigma」「#朝までAdobeExpress」のできるまで記事を書いてなかったことに気付いたので、年末年始に書きたいと思います。

ダイジェストムービー

実際の制作の様子をYouTubeにて9分くらいの解説付き動画にしています。
noteに比べ簡略的な解説ですが、実際の作っている様子(悪戦苦闘したり値落ちしている様子)を見ることができます。

#朝までイラレ

#朝までフォトショ

#朝までアフター

#朝までマークアップ

#朝までディレクションとか

#朝までFigma

#朝までAdobeExpress


いいなと思ったら応援しよう!

モンブラン|Designer × VTuber
飼っている猫さんやインプットのための読書代などに使います!