見出し画像

Inside Frontendのデザイン舞台裏

Hiroki Tani

5月18日、Abema Towersで開催されたInside Frontendは盛況で、無事終わった。

僕はなぜかはわからないが、カンファレンスのデザイン周りに関わらせてもらう機会が過去に何度かある。2016年の東京Node学園祭では今回のようにWebページとロゴやステッカーまで作らせてもらったことがある。

Inside Frontendは2017年に第1回を開催し、今回で3回目。初回から主にイベントのWebサイト担当として関わっていたが、今回はロゴの見直しも含めてデザインに関わるものをすべて担当することになったので、来年のための記録として、またはカンファレンスの企画を考えている人の参考になればと、ここに書き記す。

ロゴの見直し

発起人の一人であるYuya Saito a.k.a @cssradarがこしらえたロゴ。フォントはSucrose。印刷のようなかすれた感じや、すこしやや重さがあるこの感じが、トレンド的でキャッチーなコンテンツを揃えたカンファレンスではなく、現場の生々しさ、コンフィデンシャルな内容が聞けそう、というようなイメージに合っているように思っていた（特にそういうデザインコンセプトが明文化されてたわけではない）。

しかしこのグランジ感・アナログ感により、どうにも僕の発想力ではそれに引きづられたデザインにしてしまいがちなので、時間がない中でロゴの見直しも検討してみた。

色々なフォントを試したが、ダイナミックに変えてしまうのではなく、Sucroseを残すことは決めた。あとはFrontendの文字をブラシ系のものに置き換えたり、などを試したりもした。イベントのコンセプトが変わったとかではないのだが、なんとなくイベントの主たる呼称というのは「Inside」で「Frontend」はいつか無くなってもいいんじゃないかとか、あるいは「Inside Design」とかが出てくるんじゃないか？とかを妄想して「Inside」と「Frontend」のタイプをわけてみた。

ロゴとして、これはこれで良しと考えたのものの、一歩引いて全体のデザインを考えたときに、もっとシンプルにするほうがいいかも、と思い直す。

結果的にWebサイトなどをみてもらえば分かるとおり、InsideとFrontendに一本線をいれたシンプルなものに落ち着いた。結論（というか自己完結）として、文字を崩すにはまだ早いと思ったし、扱いやすさの観点から決めた。

色についてもかなり悩んだ。軽くするか、重くするかいろんな観点で考えたが、やはり重厚さがほしくなり、基本はダークを基調に。アクセントとしての色は、蛍光的なグリーンなどもデジタル、コードのような空気は出るが、それもベタ過ぎるかもしれないと、ゴールド〜イエローを選んだ。ゴールドは初回から採用していたのもあり、今回もそれを採用した。

イベントページの（グラフィック）デザイン

ロゴのイメージを試行錯誤しながら、国内外のカンファレンスサイトのページを見まくって、コンテンツの見せ方などを含めて研究した。

はじめは重厚感を抑えてポップな色使いや抽象的な図形などを用いた、昨今のそれらしいものも考えたが、どうもしっくり来ない。実際トレンドにフォーカスしたイベントでもないので、重たさは残した。抽象的なイメージとして「煙」を選んだが、これがまた「怪しげ」な雰囲気から「裏側」をイメージさせる...というのは正直後付で、なんとなくそれらしくなったのであった。

ページ構成は基本的にほぼ1枚で完結、スクロールジャックするようなギミックは基本的に避ける。肝となるのはタイムテーブルの見せ方だが、これが毎度マークアップを含め、頭を悩ませる。Inside Frontendに関しては基本マルチトラックなので、モバイルなどの狭い画面のデバイスでみるときがさらに悩ましい。最終的にどうなったのかは、現行のページをみてもらえばわかる。

Tシャツのデザイン

Inside FrontendにおけるTシャツはスタッフの証であり、登壇者へのプレゼントである。スタッフであることがわかるようにする、というのがTシャツにおける重要な目的なので、それを前提に考えた。

素直にいけばロゴをどーんと乗っける、なのだけどこれも色々パターン出しをした。ちなみに、このときの副産物として、Inside Frontendを「IF」とまとめたシンボルも生まれ、後述するステッカーのデザインに採用した。
投票ではその「IF」のシンボルを採用したものも人気だったが、ここは無難なタイプにした。

Tシャツ自体の色は「スタッフとわかりやすくするため」でいうと、ちょっと派手めな色にするほうが適切かもしれないとおもったが、そんなむちゃくちゃに広い会場でもなく、ロゴの組み合わせでそれなりに存在感があるので、ダークな色にした。ただの黒、ではなく少しくすんだ黒に。

これが結果的にわりと悪くない色合いで、少し明るめにしたイエローも効いていい感じに。

ちなみに発注先はオリジナルプリント.jpで、種類はPrintstar ヘビーウェイトTシャツ。United AthleやGILDANなど無地Tシャツで有名なものも扱ってるが、予算のバランスなどもみてPrintstarに。特に問題もないちょうどよい質感。

ステッカーのデザイン

テックカンファレンスで大体あるのがステッカー。今回もほしいよね、ということで新しいロゴを元に検討。ステッカーについては、ラップトップPCにペタペタと貼ってくれるようなサイズ感をイメージし、あとは横長よりも円形や正方形に近いほうが良さそう、と思ったところでTシャツデザインと並行して出てきたシンボルを採用。

正直「IF」でInside Frontendとわかるのかどうかという話はあるが、なんというかカワイイものになったので良しとした。

ステッカーは名だたるテック企業のステッカー印刷をしてる（らしい）Stickermuleに決めた。オランダの会社だが、納期もさほどかからないし、料金も質を考えるとかなりやすい。あとはとにかくサービスとしてシンプル。日本の印刷会社のようにあれこれと情報は多くないし、加工の種類などを選ばせない感じがいい。GitHubのステッカーなどを触ったことあれば、それを思い出してほしいのだが、マット加工でほどよい厚みのまさにこういうイベント向けの品質。超おすすめ。

参加証のデザイン

もっとも悩んだのは参加証のデザインで、かつイベントぎりぎりの納品になった。

参加証として最初に考えたのは「リストバンド」だった。プライベートでよく音楽フェスにいくので、あの祭り感とか、昨年ものと重ねてつけるとか、なにかそういうファッション的な楽しさいいよね、みたいなのはあった。だが今回は有料イベントということもあり「参加している証」をスタッフがみても「わかりやすくする」という観点においては、まだ長袖や羽織ものを着る季節としては少し不便さがあるかもとおもい却下した。ということで、名札のようなもので検討をし直した。

名札となると、首からかけるためのネックストラップのことを考える。ネックストラップにロゴを印刷するのも検討したが、これがまぁまぁ高い。今回はネックストラップに印刷するのはやめて、発色良く目立つ黄色のストラップを選んだ。
ネックストラップの発注先はストラップExpressで、無地の平織り12mmを採用。

そして名札部分。これもいろいろなカンファレンスでつくられるものを参考にしたが、国内のカンファレンスでの王道はクリアケースにカードをいれるタイプ。これだとケースは発注し、紙の部分は社内のプリンターやキンコーズなどで納期をシビアに考えずに準備できるかも、などと考えた。あとは後から必要な情報を印刷したカードを入れることなどもできるので、利便性は良さそう。

一方では、クリアケースを使わず、カード本体にストラップをつけるのもある。これはわりと海外カンファレンスもとい有料の値段が高めなカンファレンスだと多い気がしている。かつ素材ももっと良い質感や丈夫なものだったり、参加者の名前や写真が印刷されてたりするが、今回は時間の関係などもあってそれは諦めたが、素材がそこそこによければ、クリアケース無くても良さそうだし、なんとなくクリアケースにいれると企業カンファレンスぽさが出てしまうような気がして、カードを直接とりつける形を採用した。
参加者情報の印刷については日本のイベントだと、カードに自分の名前などを出すのは嫌がられるかもしれない（イメージ）。ただそこそこ高い有料イベントとしては、参加者の譲渡で他の参加者が入れてしまうので、時間と予算の余裕があれば対応してもいいかもしれない、とおもった。

最後にもうひとつ、参加証に盛り込みたい情報として「タイムテーブルをのせる」ことだった。
Inside Frontendでは、マルチトラックなので「どの部屋でどのセッションがあるか」を参加者にわかりやすく伝えたいというのがある。なので例年では大判のタイムテーブルを印刷し、壁に掲示していたのだが、そこに人が群がるとどうにもみづらい。基本的にはイベントのWebページをみてもらえばいいが、人が多い分接続が悪いこともあるし、バッテリーもないかもしれないので、アナログに用意はしておきたい。パンフレットのようなものを印刷してもいいが、それはそれで正直邪魔になることもあるので、参加証に印刷するというのが良いのでは、と今回採用した。

あとは「一般参加者」と「登壇者」で区別するためにデザインは2種類つくった。

印刷は、クリアケース無しにすることにしたのでちゃんと業者に発注。発注先はキングプリンターズで、ポストカード印刷、加工はマットにして、あとはストラップを通す（カナカンをつける）孔加工を追加した。
余談だが、入稿がギリギリだったのに、入校時に画像を埋め込み忘れるという失態をし、めちゃくちゃ焦った。だがキングプリンターズさんが早めにアラートを出してくれたので、すぐに再入稿し、締切に間に合った。感謝。

黄色いネックストラップとの組み合わせで、最終的には次のようになった。

なんとなくいい感じの質感で高級そうにみえる。これは参加者の方にも好評だったようだ。
一点悔いてる点としては、本当は小さな角丸加工をしたかったこと。角のままだと、皮膚に当たるとチクリとするし、角もひしゃげやすくなる。結論、その加工の効果と納期の兼ね合いで、それは対応しなかった。とはいえなぜかここが諦めきれずに、納品後に手動で角を丸くしようとしてたが、やっぱり諦めた。

おまけ

作り物としては、開催までのTwitterでのセッション紹介のためのTwitter向けのCardデザインもやった。これはサイトのURLの露出を増やすことと、登壇者がそれをRetweetしてくれることで集客効果があったので、余裕があれば対応するといい。

まとめ

毎度こうした担当をさせてもらう度に「ああ受けなければよかった！！」と思うことは多々あるが、やりきったあとの達成感はなんともいえない。とはいえ来年は、早めにデザイナー氏をアサインして、今年以上に良いモノをつくれたら、と思う。

あと文中にでてきた発注先リストをあらためてリストアップする。大変お世話になりました。

・Tシャツ: オリジナルプリント.jp Printstar ヘビーウェイトTシャツ
・ステッカー: Stickermule ダイカットステッカー
・ストラップ: ストラップExpress 無地の平織り12mm
・参加証印刷: キングプリンターズ ポストカード印刷、両面マット加工、孔5mm加工

明日の元気の素になります。