これはtraP夏のブログリレー42日目(大幅遅延)の記事です。
ISUCONお疲れさまでした
2021年9月18日、web開発分野での著名な大会である「Iikanjini Speed Up Contest」……略して「ISUCON」の第11回大会 (ISUCON11) 本選が行われました。参加者の方々、お疲れさまでした。
traP からも、予選には複数チームが出場し、「手が3本あるテディーベア」 (@Azon、@xxpoxx、@mazrean) が無事本選に進みました。おめでとうございます。本選では残念ながら大活躍とはいかなかったようですが、熱い戦いを見せていただきました。
そして ISUCON11 では、企業と学生との協力により問題が作成され、弊サークルの一部メンバーが、Yahoo! Japan 様や NTT 様と肩を並べて作問・運営に携わる機会を頂きました (すごい…！！)。運営に関連することは、こちらの記事なり、ISUCON の公式サイトなりをチェックしていただければと思います。
さてそんな traP ですが、作問・運営メンバーとして、ゴールドスポンサーやプラチナスポンサーの名だたる企業様 (NTT 様や、リクルート様などマジで名だたる企業様方です) と並んで、本選のライブ配信の際 60 秒の PR タイムをいただき CM を流していただきました。
このページにある駄文はその制作報告になります。
制作メンバー
@logica, @dan_dan, @anemone (動画制作)
@xxpoxx (渉外、全体のまとめ役)
@AKA (楽曲制作)
制作報告
logica
ISUCON11 予選に参加するも 22,000 点付近でボロ負けしました logica です。ISUCON 初参戦3人でチームを組んで出場しましたが、思っていたよりは点数が上振れたし再起動試験も突破できたみたいでよかったです。バルクインサートと JOIN による N+1 問題の処理が次の課題かな。
さてそんなことはどうでもよくって、本題に入りましょう。
三人の分業体制 / 担当箇所について
今回のCMは、各個人が忙しいということや締め切りまで時間が足りないということがあり、3人で分担して作ることを一番最初に決めていました。見て下さった方はわかるかと思いますが、こんな構成になっていたと思います。
イントロ → (班 / プロジェクト紹介 → トランジション) × 7 → イベント紹介 → 宣伝 → ロゴ
今回、僕が Adobe After Effects、だんくんとアネモネくんが AviUtl (だんくんのところで少し詳しく書いてあります) を使うということで、プロジェクトファイルを回しての分業ができないので、完成した動画ファイルを繋ぎ合わせようということになりました。ですので、その分業をやりやすくするためのコンポーネント化を行った結果が上の流れになります (Vue や React の発想と同じですね)。こうすることで、それぞれの班の紹介を別の人間が作っても後から繋げることが容易になりますね。
僕はこの中で、イントロ・トランジション・最後のロゴといった、主に全体の流れを統率するようなパートを作っていました (多分一番仕事は少なかったです。ほかの二人ゴメンネ)。アネモネくんやだんくんはそれぞれの紹介部分を分担して作ってもらい、それを僕が受け取って最終的に一つの動画にするという方法をとっていました。
イントロ
「traP は、Web 開発だけじゃない。」
このキャッチコピーはだんくんから発案されたものです。すげーいい。
ISUCON は Web 開発系のコンテストですので、この CM を見る人間は「traP は Web 開発に強いサークルなんだ」と思っているだろうという前提があります。それを考慮した、シンプルで非常に伝えたいことがはっきり伝わるいいキャッチコピーだと思います。
いい感じの "裏切り感" が欲しかったので、「～ Web 開発」の部分を我々エンジニアにはなじみ深いシェルのような雰囲気、「だけじゃない」には力強い筆文字フォントを使用して、そこのギャップを強調しました。ただ、正直時間が短すぎてごちゃっとした印象になってしまったかなという懸念もあって、そこは反省点かもしれません。
トランジション
周りの7つの玉は各班とプロジェクトという、traPが恒常的に行っている活動を表しています (班の6つにするという意見もあったけど意思疎通をちゃんとしてなかったせいでゴリ押しみたいな形で7つになってしまった)。虹の色に近い色で綺麗に光る色を探しました。
どんな動画でも対応できるように、中心からの円形ワイプでそれぞれの動画に移行するようにしました。もともとはだんくんの案でしたが、これは非常に良判断だったと思います。
ロゴモーション
かっこいいですね (満足)。sigma さんという traQ のロゴもデザインしたガチプロの方が作ったロゴなのでかっこいいのは当たり前ですが。
今回やったことは至極単純で、ロゴを分解して動きを付けながら組み立てる。それだけです。とりあえず分解の方は ai ファイルを持ってきて、Illustrator でなぞるようにパスを書いて、クリッピングマスクにして切り抜くというのを30回くらいやったら余裕です()。2～3時間で終わりました。どっちかというと持ってかれるのは精神力。
次に動きの方です。ロゴのうち一番左のアイコン部分は、校章にもなっている「つばめ」をイメージしているとのことで、羽ばたくようなイメージで作りました。矢印部分 → 丸部分の順で出てきているのはそういうことです。「traP」の文字部分は、イージング (だんくんの方に説明が載ってます) をふんだんに使った線表示アニメーション。僕の十八番とも言える部分です。イージングの滑らかさで気持ちよくなって欲しい。
また、ロゴ全体の形としての動きもかなり意識して作りました。traP のロゴにはきちんとガイドラインがあり、スペースが狭い順でアイコンのみ → アイコン + 「traP」の文字 → 全体 (東京工業大学～ を含める)という風に組み合わせて使うことが推奨されています。ですから、動画の中では、トランジションでアイコンのみ、ロゴモーションの方で最初はアイコン + 「traP」の文字がまずバッと表れて、その後右から東京工業大学～部分がくっついてくるというロゴの表示の仕方をしています。小 → 大 の流れができていることに気づいていただけたでしょうか。
各パーツが割と複雑な動きをしている上に、全体としても緩やかな流れを作るという結構手の込んだことをしているので、ここのシーンは20回くらいはリピートして見てほしい、渾身の作です。
全体として
全体としてイージングをしっかり使いこなした滑らかなモーションを心掛けました。装飾などに工夫を凝らすことなく非常にシンプルに仕上げましたが、シンプルだからこそ光る、というのを目指しました。
本選の生放送見て、賀来賢人さんや安藤サクラさん出演する NTT 様の CM や、ガチでモーショングラフィックスで食ってる人間が作ったであろう Pixiv 様の CM とか見てガクブルしてましたが、とりあえず Twitter などであたたかいコメントを頂けて本当に安心しております。改めましてこんな素敵な機会を下さりありがとうございます。ISUCON は母。
dan_dan
元々は、夏ブログリレーで日本縦断一人旅の記事を書いて自己満足に浸るつもりでおりました。断念しました。
編集環境
ケチな私は、AviUtlというフリーソフトに5年間お世話になっています。
AviUtlは制作元から入手する機能はそこまでですが、数々の有志によってプラグインが公開されており、色々入れて頑張ると、有料ソフト並みの映像表現を作ることができ(るような気がし)ます。普及しまくってるので、ヒットする情報が多いのもいいですよね。
この場を借りて、AviUtl使いが入れておくべきだと思うプラグインを2つ引用しておきます。
https://aviutl.info/satuki-script/
https://aketama.work/aviutl_easing_1
別環境で導入する際、スクリプトが秘伝のタレ状態になっていて何をDLするのかわからなくなりがちです。AviUtlユーザーあるある。
イージングをすこれ
上に貼ったURLの後者は「イージング」と呼ばれるものです。「ベジエ軌道」でも代替ができるので検索してください。
某大臣みたいな物言いをすると、情報を聴衆に伝えるにあたり、映像を用いる事の最大のメリットは「動く」ことです。その動きがカッコよかったらいいですよね。イージングは、最初はゆっくり・後半加速といった動きのメリハリをつけることが出来る機能。
もちろん複数箇所で利用しています。
脳死で使うと逆に違和感を持たせてしまうのですが、いい感じに設定するといい感じになります。
ちなみに、映像やインフォグラフィックスの勉強には「雪原てとら」さんの動画がとても参考になっています。折角ですので、URLを貼らせていただきます。
https://www.youtube.com/channel/UCPNjpL38YIRVRjEOhbHEBnw/featured
班部分
traPには6つの班があり、部員は0以上6以下の任意の整数の班に所属して活動を行っています。所属にあたって拘束力が発生するのではなく、自分が何に興味があるかの意志表示である、と捉えられています。
班紹介は、黒地である事とフレーム数だけ決めて、anemoneくんと分担しました。結果、班の活動内容を表現しつつ、班の代表者から集めておいた"キーワード"を示すような構成となりました。
アルゴリズム班はAtCoderやICPC等に向けた情報共有・チーム練習を行っています。フローチャートっぽく表してくれました。
CTF班は情報セキュリティのスキルを競う大会に向けた情報共有等。部内でCPCTFも開催しています。
Capture The Flag なので私は旗を載せました。安直ですね～
ゲーム班は去年発足し、シナリオ案共有・Unity講習会といったゲーム制作に関連した活動を行います。現在進行形でichigojamという企画が進んでいるそうです。
グラフィック班です。コンペの結果、@spaさん制作のロゴが決定したので、さっそく使わせていただきました。ペイントソフト風に仕上げてみました。
traPでは作曲をしている勢力も多くおり、イラストと同様、部内SNSのprogressチャンネルで日々共有されています。
本作のBGMについては、21Bの @AKA さん制作「宇宙之魚」が、CMの構成にぴったりだったので使わせて頂くことになりました。ありがとうございます！
SysAd班は部内サービスの開発と管理に携わり、ISUCONのような外部大会にも積極的に参加しています。
CMでは提示されたキーワードを、traQのUIに似せて表示しました。
3つの吹き出しを占領しているのは、traP部員が利用できるサービスのアイコンです。
部内SNSの「traQ」のほか、イベント・集会の日程を管理するサイト、備品の貸し借りを行うサイトなどがあります。
もう一つtraPを特徴づけているのが「プロジェクト」
いわゆる合作で、半年～1年規模でゲーム等の制作をしています。
これが可能なのは、シナリオ・プログラム・グラフィック・サウンドと、各分野の進捗をするメンバーがひとつのサークルにいるお陰です。
ここに挙げたものに限らず、外部公開・販売をしている作品もあります。ぜひチェックしてみてください。
不定期活動の紹介
traPでは不定期にハッカソンやプログラミング教室といったイベントも実施しています。サークル外から協賛・支援など、お声がけいただいている事例もあります。
イージングの34番と35番が役立ちました。
感想
映像は本来一人で黙々素材を切り貼りするタイプの作品で、合作というのは新鮮な体験でした。部員が映像の違和感を指摘してくれたのも有難かったです。とりあえず間に合って良かった。
最後に
CMはYouTubeで公開しています。今回語った制作陣の推しポイントなどに注目しながら見ていただけると、より楽しめるんじゃないかなと思います。
当サークルでは、web開発以外にも、デジタル創作・プログラミング分野で多岐にわたる活動を行っており、共同企画や協賛の選択肢も広いかと思います。サークルへのご依頼やご質問があれば、https://trap.jp/about/ の「traPとつながる」をご覧ください！
