traPでロゴデザインをした話

この記事はtraP新歓ブログリレー2023 32日目(4/9)の記事です。

こんにちは、@d_etteiu8383です。traPではグラフィック班でデザインや3DCGをやっていたり、ゲーム班でゲームを作る素振りを見せていたりしています。

この記事では、僕が最近行ったロゴデザインについてお話します。

宣伝

traPグラフィック班デザイン部では、新歓活動の一環として初心者・未経験者向けのロゴデザイン体験会を行います。
4/20(木)にオンライン会場(Figma)で開催予定です。詳細は2023年度　traP新歓日程のご案内に随時記載していきます。

traP公式Twitterアカウントで告知されるので、そちらもご覧ください。

デザイン、楽しい

新入生の皆さんはtraPのグラフィック班と聞いてどんなイメージを持ちますか？かわいい・かっこいいイラストを描いてる班？
...実はグラフィック班での活動はイラスト制作だけではありません。

例えばtraPの活動の一つであるゲーム制作では、ゲームのロゴやUI上のアイコン作成を行う必要があります。
この作業では「情報・概念の図案化」「アクセシビリティの考慮」といった、キャライラストや背景の制作とは少し異なる技術が求められます。デザインの領域です。グラフィック班のデザイン部にはこれをやる人があつまっています。

traPグラフィック班デザイン部では、デザイン関係の活動をしています。
主な例としては、Webアプリのロゴデザインやイベントで使用するパンフレットの作成などがあります。
traPグラフィック班の活動紹介(Ver.2023) | 東京工業大学デジタル創作同好会traP

イラスト制作と"少し異なる"とはいえ、グラフィックデザインの勉強で得られる知識はイラスト制作に活かせることも多く、視線誘導や配色決定に役立つこともあります。
ということで今回はデザイン楽しいよ、のお話です。

とりあえず見てみよう

とはいえ僕もデザインについて「こういう部分に気を付けるべき！」みたいに語れるわけでもないので、本記事では僕がtraP内のイベント・依頼で制作したロゴの紹介をします。新入生の皆さんにはまず雰囲気を知ってもらいたいですしね。

#traP1logo

1logoとは1時間でお題に沿ったロゴを作るイベントです。traP内で定期的にグラフィック班のイベントとして開催されています。会場にはFigmaと呼ばれるデザインツールを用い、それぞれがキャンバスを作成して作業します。終了後、他の人の作品にコメントをする時間があり、フィードバックを貰える嬉しさと、他人のアイデアから学ベル嬉しさがあります。嬉しい。

1時間で制作と聞くと難しく感じるかもしれませんが、1時間で完璧なロゴを作るイベントではありません。他の人の制作過程を眺めるだけでも勉強になりますし、アイデア・ラフ段階でもフィードバックを貰えます。

ここでは直近の1logoで作成したロゴを紹介します。テーマは「traO」でした(1logoでは事前に寄せられた複数のテーマから選んでロゴを作ります)。

Q. traOってなんだよ

A. 俺もわからん

「traO」はtraP内で稀に耳にする謎の単語です。キーボード上で"P"の隣に"O"が位置することから、traPのtypoから生まれたと推測されていますが、正確な意味は不明です。
一部の東工大生が東京工業大学のことを大岡山大学と呼ぶのと同じようなものだと思います。

作成時のメモと完成形がこちら。

「traO」という単語自体に意味が存在しなかったので、ツバメから何とか想像して作りました。もとの漢字がかっこよかったので自然とかっこいいデザインになりました。既存の文字を変形してデザインにするのはよくやる手法です。
ロゴ作成の(思考)過程は以下の通りです。

traOってなんだよ
traPではないけどtraPっぽいなにかって感じのロゴにしたい
現在のロゴが結構カクカクしたイメージなので、"O"のイメージからも丸っこくしたい
traPのロゴの元はツバメか、燕って漢字自体がかっこよすぎる、漢字を使うか
"燕"ってパッと見"正方形"な形だから、あえて円形にするの面白そう
"臙脂"って燕入ってるな、じゃあ臙脂色で
完成

班ロゴ

ロゴデザインは主にゲームタイトルや、部内製ウェブアプリのために制作されますが、traPでは各班を象徴するロゴの制作も行われています。現在のゲーム班とCTF班のロゴに私のロゴを採用していただいたので、ここでこれらのロゴを紹介します。

ゲーム班

ゲームのコントローラーと"G"をモチーフにしています。班のロゴはtraP自体のロゴからの派生形という形で既にサウンド班やグラフィック班のロゴが作成されていたのですが、「traPのロゴっぽさ」を保つのが難しかったです。

作成過程と完成形がこちら。

ロゴ作成の(思考)過程は以下の通りです。

六角形と八角形ベースの班ロゴが既に存在しているので、敢えて奇数角形をベースにしたい
ゲームコントローラーって五角形感あるな...五角形にするか
とりあえずtraP自体のロゴの要素(ツバメの尻尾と羽根)を再現するか
隙間部分でゲームコントローラーを表現できそう→できた
色は既存班ロゴで使われていない紫色が良さそう
完成

CTF班

CTF(Capture the Flag)とは、セキュリティに関する技術と知識を用いて、機密情報に見立てたFLAGを探し出す競技です。ロゴ作成にあたり、自分でも何問かCTFの問題に取り組んでみたのですが、やはり「FLAGを見つけた瞬間」が一番楽しかったので、そのワクワク感を上手くロゴに落とし込むのに苦労しました。(実はCTF班のロゴは半年近く考えてようやく完成した)

作成時のメモと完成形(最後)がこちら。

ロゴ作成の(思考)過程は以下の通りです。

ブレース(波括弧{})と旗が隠れているようなデザインにしたい
(CTFにおけるFLAGは基本的にCTF{FLAG}の形式の文字列)
他の班ロゴとの差別化も意識して八角形ベースにしたい
なんも思いつかん(破棄)
1.~3.を3回繰り返す
六角形ベースだとイイ感じに旗を表現できそうだな...
空いたスペースに「旗を掴む手」を入れたい
(ぴったりハマって感動)
完成

結果的に旗をイイ感じに隠すように表現できて満足です。こいつ空白で表現するの好きだな?
半年近く考えて生まれたロゴに愛着が湧き、モーショングラフィックス的な何かも作ったりしてました。

traP (@traPtitech) のCTF (Capture The Flag) 班のロゴを作りました～
ついでにモーショングラフィック的な何かも
隠れたflagとそれを掴む手、そしてツバメを組み合わせてます pic.twitter.com/6MtDrZehne
— でっていう (@d_etteiu8383) March 13, 2023

とりあえず作ってみよう

とりあえずロゴの制作過程を見てもらいました。次は実際にロゴを作ってみましょう。というわけでもう一度宣伝です。

traP公式Twitterアカウントで告知されるので、そちらもご覧ください。

おわりに

現在デザイン部で活動しているメンバーのほとんどは大学からデザインを始めた人たちです。
「高校の文化祭/体育祭でTシャツのデザインをした経験がある」「ゲームのUI作成に興味がある」といったきっかけでも大歓迎です。デザインに興味がある方はぜひtraPへの入部をご検討ください!

最後までお読みいただきありがとうございます。明日の新歓ブログリレー2023担当者は@pikachuです。楽しみ～