見出し画像

「 #朝までマークアップ 」のロゴができるまで。

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

2023年11月2日(金)に開催される、朝までシリーズのCSS Niteバージョン、「#朝までマークアップ」のイベントロゴを担当させていただきました。

朝までフォトショ、朝までイラレ、朝までアフターに続き、今回はWeb系の朝までシリーズのロゴデザインとなります。

このnoteでは、朝までマークアップのロゴの完成までのプロセスや取り組み方について書きたいと思います。


目次


イベント概要

イベント詳細に確認、参加お申し込みは下記Doorkeeperにアクセスしてください。

開催日:2023年11月2日[木] 21:00-29:00(20:30から予備配信開始)
形式:オンライン(YouTube Live)
参加費:当日の視聴は無料(参加登録が必要)
特典:次の方には、サンプルファイルやスライドPDFなどを用意しています。
 リアルタイム視聴+アンケート回答された方
 アーカイブ視聴チケット購入された方
ロゴ制作モンブラン
テーマソングロックオン柳田
主催CSS Nite
共催DTP Transit
協賛フォントワークスWebフォント・サービス FONTPLUSKDDIウェブコミュニケーションズ文賢(ブンケン)ウェブライダーゴンウェブイノベーションズun-T factory!ヘルツコンセントトゥーアール(to-R)LINICAサービシンク

朝までマークアップ:https://cssnite.doorkeeper.jp/events/163736


制作過程は生配信でお届け!

朝までイラレ〜朝までアフターに引き続き、制作の様子はYouTube Liveの生配信しました。

文章だとわかりづらい…という方は是非動画でご覧いただけると嬉しいです!
(その際はぜひ高評価とチャンネル登録をよろしくお願いします!)

配信アーカイブ Part 1

配信アーカイブ Part 2

忙しい人向け ダイジェスト版

約3時間の配信をギュッと8分半にまとめたタイムラプス動画もアップしています。
要所要所で制作過程の説明やコメントなども入れてますので、ぜひ御覧ください!


「構造化」と「ルール」がテーマ。

今回のイベントは朝までアフターに引き続き、他ジャンルとなるWeb系、しかもマークアップをテーマとしたものです。

実際に制作する前に、マークアップの意味を簡単に調べました。

そこで見つけたのが「構造」というキーワード。

またWeb業界、特にフロントエンドにおいては、命名規則といった、ルールの考え方が出てきます。
そこで、今回は「構造」と「ルール」をテーマに制作することにしました。

描画時にルールを設ける。

今までの朝までシリーズのロゴはタイポグラフィこそ既存の書体を使うことはありましたが、基本は特に制約を設けずに自由に制作していました。

制作時に使っていたラインガイド。
縦横含めて5つのルールを適用。違和感が出るところは少しルール破りもしています。

朝までマークアップのロゴでは、ラインガイドを使ってパスを描画する時に規則性を設けることで、今までなかった制約を敢えて設けています。

タイポグラフィの中へモチーフを組み込む。

構造化というには少し無理矢理かもしれませんが、朝までマークアップのロゴは、今までのシリーズの中で最もタイポグラフィの中にモチーフが盛り込まれています。

モチーフを盛り込んでいる様子。
過去のシリーズで最も入れ子にしている要素が多い。

HTML、CSSで用いられる「入れ子構造」を意識して制作しています。


「ジャンル違い」第2章。

重ねてとなりますが、今回のロゴは過去3つの朝までシリーズと、また別ジャンルのものとなっています。

画像:イベント/ロゴごとのジャンル差異のイメージ。次は朝までプレミアが来ると思ってました笑

そこで、今回も朝までアフターと同様に「朝まで」のらしさ、と共通項とバランスを見ながら制作をしています。

ペイント描画を敢えて規則的に。

今まではグラフィカルや映像系のソフトのロゴということで、背景のあしらいを有機的にしていましたが、今回の朝までマークアップはWebでよりデジタル性の高い要素と考え、規則性を意識した直線的なラインを使用しました。

それぞれの背景のペイント風描画のアウトライン。
文書っぽく見せるために空間を空けることも考えたがイケてなかったのでボツ。

あしらいは記号が中心。

今回の朝までマークアップが今までと大きく違うところが、
イベント名がツール名ではない、ということ。

そこで、まわりのあしらいはツールアイコンではなく、マークアップ言語でよく使う記号を中心にあしらっています。
できるだけ今回のイベントでお話される言語に合わせてまぶさせてもらっています。

朝までマークアップのあしらいのピックアップ。
#=ID / .=class など


まとめ

  • 構造化とルールをテーマに、タイポグラフィに制約を入れる

  • 新たな路線トンマナチェンジはあえてラフ感だけを無くすアプローチ

  • Web/マークアップらしさをテキストとの組み合わせで表現

皆さんも是非、当日の配信でロゴも目にかけてくださると嬉しいです!
(チャンネル登録もよろしくお願いします!)


オリジナルグッズもSUZURIで販売中。

朝までシリーズ恒例のロゴグッズも好評販売中です!
今回はTシャツはもちろん、マグカップが人気です!

#朝までイラレ、#朝までフォトショ、#朝までアフターグッズも引き続き販売中です!
ぜひセットでご購入ください!

ここから先は

0字

X(旧)Twitter、noteでは絶対に発信しない事、 グラフィックデザイナー、VTuberとし…

ベーシックプラン

¥680 / 月
初月無料

メンタープラン

¥1,480 / 月
初月無料

飼っている猫さんやインプットのための読書代などに使います!