見出し画像

TSConf JP 2020のクリエイティブ舞台裏

2020年2月22日(土)にTypeScriptの祭典、TSConf JP 2020が開催される予定でしたが、新型コロナウィルス(COVID-19)問題が発生し、参加者の健康と社会的な影響を考慮した結果、残念ながら開催中止となりました。

しかし、今回メインのクリエイティブに携わったスタッフとして、せっかく協力して作った成果物が日の目を見ないのはもったいないなぁ...と考え、せめてもの供養として、TSConf JPのクリエイティブ周りのコンセプト、スタッフと自分が、どんなものを作っていたかを紹介しようと思います。

スタッフ参加の背景

去年開催されたTypeScript Meetupの延長線で、TSConf JPが開催されることとなり、元々のコアスタッフだったTakepepeさんが、でクリエイティブ周りを手伝ってくれる人をtwitterで募集されており、手を上げたのがきっかけです。

当時公開されていたティザーサイトは、簡素ながらもコンセプトと方向性が既にしっかり存在しており、魅力的でした。ワクワクしながら手を上げたことを覚えています。公開初期のティザーサイトは以下。

画像1

TypeScriptを仕事で本格的に使い始めたということも、参加して貢献したいという気持ちの後押しとなりました。

ロゴについて

TSConfのクリエイティブチームに参加した時点で、既に完成度の高いロゴが用意されていました。

鳥居のモチーフとサンセリフ体のタイポグラフィを掛け合わせて作られたもので、和とモダンが融合したトーンが特徴です。
このロゴがすべての始まりで、クリエイティブコンセプトの方向性は確定しました。

画像2

キービジュアルについて

クリエイティブの核となるキービジュアルについては、本家TSconfのデザインを参考にしたり、各イベントサイトのビジュアルを参考にしたりしていました。
スタッフレビューには出していないですが、ロゴのみだけでビジュアルを構成することも可能か、などの検討をしてみたり。

色々と逡巡した結果、「和」と「モダン」雰囲気を持ったロゴの良さを引き出すには、ベタな日本らしさでいいんじゃないかと考え、「富士山」「東京の風景」を使おう、という考えに至りました。

ただ、あまりそれらを強調して核となるロゴを弱めるのは違うなぁ、などと思い、薄いグラデーションを敷き、要素を影絵のようなシルエットとして組み込んでみました。

画像3

色はTypeScriptの青色を参考にしつつ、ややビビットな彩度の高いブルーを採用しています。

全体的に調整して、まずはキービジュアルの初稿デザインをスタッフに展開してみたところ、かなりの高評価をもらったので、迷いもブレもなく行ける...!と判断し、そのままWebサイトデザインに突入しました。

すでにロゴも決まっていたこともありますが、ロゴやイベントのコンセプトを活かせた、良いデザインができたと思っています。

Webサイト

ページの全体構成は、同じようなイベントサイト、特にVueFes2019のサイトをお手本としました。
LPページなので基本1ページ完結式で、スクロールエフェクトなどの演出も考えましたが、過剰な装飾よりも見やすさを取ろうと考えて、ブロックごとにレイアウトルールを変えるぐらいに留めることに。

なお、Webサイトの実装はTakepepeさんが担当、ページの複製などは別のスタッフが行い、制作はほぼ分業体制をとっていました。
(技術構成はReact + TypeScript + GatsbyJS)

左右の破線のようなグラフィックの動きも、CSSアニメーションで実現されています。マウスホバーアニメーションやグローバルナビについては、少々こだわりがあったので、自分がPRを出して修正していたりします。

デザインツールはFigmaを使用、実装しやすいような環境を作りました。また、デザインと並行して簡易なスタイルガイドも作成し、実装する方と認識の共通化を図るなどの工夫もしていました。

なお、Figmaのデザインリソースは公開していますので、よろしければ見てみてください。

Tシャツ・トートバックとか

イベントと言ったらTシャツデザイン!というわけで、単純にロゴを掲載するだけではつまらなかったので、ネタ案も含めた4案をチームのSlackに投下。
投票してもらったり意見もらったり...最終的に1が選ばれました。

画像4

鳥居は「門」や神域への「入り口」という意味もあるらしいので、鳥居をさらに枠で囲み、領域を作る、というデザインが採用されました。正直後付感があるのはご愛嬌で。
以下は加工して作ってみた、実際に使われたらこうなるであろうイメージ図です(微妙に実物とは違います)

画像5

画像9

ネームプレート・ステッカー

これらも印刷するところまで作っていました。キービジュアルはすでに決まっていたので、何の情報を載せるか、を決めてレイアウトしました。

ネームプレートのコンセプトは、「迷わせない、ストレスフリーなイベントを実現する」でしょうか。

- 会場マップ
- Wi-Fi情報
- フィードバックサイト情報
- Webサイト、ハッシュタグ
- アフターパーティーの参加・不参加の表記

会場インフォメーション的な情報をネームプレート裏面に配置、表面はシンプルに役割ごとに色分けした文字と、キービジュアルをレイアウトしました。
自分たちが日々イベントで困っていたことや、載せたらよいのでは?という改善を軸に掲載内容が決められたのが良かったです。

画像6

スピーカーや参加される方の中にも海外の方が多数いたり、コンセプトとしてダイバーシティなイベントを目指していたので、英語をメインとし、Webサイトはもちろん、ノベルティも、どんな方でも認識できるようなコンセプトでした。

当然イベントの華のひとつでもある、ステッカーも用意していました。印刷も完了しており、写真がアップされたときはテンション上がりましたね。

画像7

会場スクリーン表示用資料・バックパネル

開催一週間前に着手したのが、会場スクリーン表示資料のレイアウトデザインでした。

会場スクリーン表示用資料は、大本のデザインコンセプトも決まっており、作る上で迷うことは少なかったのですが、イベント会場で投影される資料なので、会場で投影される状況を想定し、文字サイズや配色を設計していました。

同時に会場に飾り付けるバックパネルの制作も行っており、スポンサー様のロゴをタイル状に貼り付けて作ってました。以下はIllustratorのデータキャプチャ。ここまで大きいサイズの印刷物は今まで作ったことなかったです。
これも発注・印刷手続きまで完了していました。

画像8

SNS用デザイン

Twitterにもスピーカー情報やイベント情報をガンガン投稿していきました。投稿の見栄えを考え、Twitter Cardのフォーマットも作りました。

デザインで気をつけた点は、英語と日本語とで書体の行間や大きさが違うので、言語ごとにTwitterCardのフォーマットを用意していました。

最後に

サイトはどんどん更新されて、ノベルティの印刷はほぼ終え、開催前の評判や反応、チケット販売も上々で、後は会場設営と配布物の準備だけ...というところでした。しかし新型コロナウィルスが発生してしまい...というのが今回の顛末です。

開催できなかったこと、これまで作ったものをユーザーに正しい形で届けられなかったことは、本当に残念です。

とはいえ、こういったイベントでクリエイティブ全般を担当できたことは、自分にとって大変良い経験でした。ご機会を頂いたことに感謝しています。

自分を含めたスタッフが、舞台裏でどのようにTSConf JPのクリエイティブ制作に取り組んでいたかを、この記事で少しでも知っていただければ溜飲が下がります。読んで頂きありがとうございました。

一日も早くこの事態が収束し、また活発で楽しいイベント開催ができる日が来ることを願ってます。

謝辞

この記事は公開前にTSConf JPコアスタッフに監修頂き、公開しています。

素晴らしいロゴと基本コンセプトを作られ、今回のイベントにお誘い頂いたTakepepeさん、イベントを主催されたれこさん、印刷物の発注を進めていただいたf_subalさん、英語の翻訳頂いたJesseさん、協力いただいたコアスタッフの皆さん、ありがとうございました!

この記事が参加している募集

イベントレポ

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
嬉しいです!!
26
84世代 / デザインエンジニア / noteにはデザインやカレーについての考察、キャリアについての記事を投稿。技術記事: https://qiita.com/kgsi 雑ログ: https://aircolor.hatenablog.com/