宇部高専 第60回 高専祭で広報部長としてやったこと

宇部高専 第 60 回 高専祭において広報部長を務めました。広報部として高専祭に関わるのはこれで 3 年目になります。

高専祭において、僕が何をしたのか振り返ってみたいと思います。

何をしたのか

主にロゴ（及びロゴ候補の投票を行うサービス）・ポスター・パンフレット・公式 Web サイト・エンディング映像（及び映像で用いる楽曲）の作成を行いました。昨年および一昨年に取り組んだのはこのうちポスター・パンフレット・エンディング映像（Web サイトは存在せず、ロゴは他の人が作成）で、つまりロゴデザインおよび Web サイト開発は初めてということになります。

ロゴ

まず、実行委員間の会議および投票により、テーマは「Re:」であることが決まっていました。ここ数年はコロナの影響により高専祭での露店が無くなっており、また 2 年前は外部参加も禁止されていました。昨年は外部参加が許可され、そして今年はついに露店を出せるようになりました。という経緯があり、「再出発」を意味する Restart をもじって「Re」となっています。これは「Recall excitement」の意味も持ち、露店の制限がなくなって「興奮を思い出す」事ができるようにしよう！というテーマです。コロンがついている理由は忘れました。

というわけで、広報部としての最初の仕事はロゴ作成でした。'R', 'e', ':' の 3 文字でロゴを作るのはまあわりと大変でした。

まずこんなふうに手描きでデザイン案を練りました。これは iPad の Freeform（フリーボード）で作りました。デザインだし無限キャンバスだと嬉しいだろうな～と思ったからです。

次に、これを SVG に落とし込みました。これは結構大変でした。このタイミングではまだ Adobe を契約しておらず、Inkscape を用いてデザインを行ったのですが、Inkscape にあまり慣れていないので苦労しました。手描きだと普通にサクサク描けるのに SVG 的な（？）デザインに落とし込もうとすると大変なんだなと感じました。

不慣れであることを言い訳にするつもりはないですが、フォントをあまり考えずにデザインしてしまったり、そもそも文字ベタ打ちで全く調整しないロゴ案を作ってしまったりと、質より量みたいな感じになってしまったのが残念ポイントです。もうちょっとひとつひとつに時間をかければよかったかなと思っています。ロゴ制作は別にそこまで焦る必要もなかったので。

投票サービス「ImGrate」

さて、ロゴの案をいくつか用意して、次に実行委員間で投票を行いました。正直 LINE の投票機能を使う方が早いしそれで十分だったのですが、ちょうど Chakra UI・Golang・SQLite あたりを触ってみたかったので、自作しました。その名も「ImGrate」です。

画像の一覧表示およびそれぞれに対する投票・コメント機能をもつサービスです。実行委員限定で公開することを想定していたため、アカウント機能のようなものはかなりシンプルになりました。学籍番号を入れてもらって終わりです。

このサービスについては Scrapbox で散々語っているのでそちらもご覧ください。実際に使ってみて、まあ作ってる最中にも危惧していたのですが、ロゴデザインに対するコメントなんて求めても無駄だなという感想が発生しました。逆の立場だったら他人が作ったロゴにあれこれ意見なんて言えないし……。少なくとも今回はなんでも指摘して欲しいと思っていましたが、特に来ませんでした。

このサービスを用いて 3 回投票を行いました。1 回目はそれぞれ最低 3 つ・最大 6 つのお気に入り投票を行ってもらい、22 個あった候補を 5 つまで絞り込みました。次に、それぞれ 1 つに投票を行ってもらったところ、なんと同票のものが 2 つ出来てしまったので、3 回目を行いました。

こうして選ばれたのが、このロゴです。

Bruno Ace というフォントで文字そのまま入れただけです……。一応最後まで残ったロゴも供養しておきます。個人的には一番気に入っています。

05/28 にロゴのアイデア出しを始めて、投票を始めたのは 06/09 でした。投票には 1 週間¹かかりました。

ポスター

スポンサー企業などに配布するためのポスターも作成しました。基本的に Illustrator で作成しました。

途中でレイアウト決めに難航してしまい、結果としてデザイン案が 3 つくらい出来てしまいました。

ちまちま取り組んでいたので具体的にどれくらいの時間をかけたのかは分かっていません。おそらく 1 週間程度だった気がします。

ポスター自体は公開していませんが、後述のパンフレットの最終ページにおまけ程度に載っています。気になる方はパンフレットをダウンロードしてみて下さい。

パンフレット

次に作ったのはパンフレットです。InDesign で作成しました。去年までは Illustrator で作成していましたが、共通レイアウトの作成やページ番号付けが非常に大変だったため、今年は InDesign を使うことにしました。実際に使ってみると、SVG を取り込んでも色を変更できないとか、「イラレだったら出来たのに……」と感じてしまう場面も少なくありませんでした。とはいえ、InDesign を使うことに決めたきっかけとなる不満（ページ番号とか）は解消されて、全体的に楽な作業が出来たような気もしています。InDesign の採用は失敗ではなかったと思っています。にしてもレイヤー周りはもうちょっとどうにかならなかったのかと思わずにはいられません。ネストくらいさせてほしかった……。

夏休みが明けた時点での進捗はゼロでしたが、夏休み明け直後に発生した 5 連休のうち 4 日の†すべて†を費やして、基本的な部分を完成させました。ただ、スポンサーやバンドに関する情報が集まるのを待つ必要があり、結局パンフレットの印刷を発注したのはそこから 2 週間後になってしまいました。

後述の公式サイトから PDF としてパンフレットをダウンロードできます！気になる方はぜひ見てみてください。

Web サイト

さて、これらが終わったらいよいよ Web サイト作成です。Web サイトの公開先としてサブドメインだけで良いからほしいな〜と先生に打診したら、サーバーごと渡されました。と書くと凄そうですが、実態は学内ネットに接続した上で、暗号化を全て無効化した通信でなければ使えないFTP サーバーで、とても悲しかったです。今回は GitHub Actions で自動デプロイ環境を整備するぞ〜と思ってたのに、Web サイトを更新するたびに USB メモリにビルド成果物をコピーして、学校のコンピューター室みたいなところに行って、FFFTP でアップロードする……という、CD とは全く逆の方向になってしまいました。

とりあえず、作成した Web サイトはこちらからアクセスできます。特に問題がなければ 2025 年までは維持しようと思っています²。トップページからはパンフレットをダウンロードできます。

GitHub にも公開したかったのですが、アイコン素材が再配布を禁止しているので出来ませんでした……。

技術選定

前述の通り、今回は Node.js を立てるような余地はなく、最終的に HTML（+JS など）として出力する必要があります。SSG ですね。

まず、今年は特に Web サイトを用いて凝ったことはしないっぽい雰囲気が漂っていました。そのうえで、学生はだいたい容量制限に苦しみがちであるという偏見があるため、なるべく通信容量を使わないようにしたいと思いました。あと当然ですが Web サイトは速ければ速いほど良いです。

というわけで、使うことにしたのは Vite + Preact です。SSG で高速と言われた時、僕はまずこのサイトに使っている Gatsby を思い浮かべたのですが、ここまでシンプルなサイトに対して Gatsby を使うのは重すぎると感じたため、高速であると話題の Vite を選択しました。

スタイリングは安定の vanilla-extract で行いました。また、いい機会だったので、Vitest によるテストや Storybook も導入しています。Vitest を選んだ理由は単純で、Vite を使っていたからです。JSON ファイルの整合性を確認したり、ユーティリティー関数のテストをしたりしていましたが、フロントエンド周りのテストは導入しませんでした。

あと、言うまでもないですが言語は TypeScript です。

選定した技術に対する感想

Vite および Preact、とりわけ前者の開発体験は非常に良かったです。速度は十二分で、出力されるバンドルもかなり小さく、求めていたものは達成することが出来ました。

Storybook は正直あまり活かせた気がしていないのですが、今後 Web アプリを作るときはぜひ導入したいと強く思いました。やっぱコンポーネント単体で見れるのって便利ですね。まあこのサイトみたいな非アプリケーションだと活かせないかなという気はします。

Vitest については、テストコードは書きやすいし、速いし、結果の出力も見やすいしで総じて良い感じでした。なんかフワッとした感想しか出てこないです。

技術選定の結果

ちなみにこの技術選定は失敗でした。失敗ポイントはシンプルで、何も考えずに Vite + Preact の組み合わせで開発していたら SPA になっていたことです。複数ページをもつ一般的なサイトなのに SPA はまずいです。

まずいポイントの 1 つは、SEO に弱いということです。今まで「SPA は SEO に弱い！」と聞いてはいましたが、今回この身をもってその実情を感じることになりました。いや今回の失敗がこの言説と一致しているのかわかりませんが。

HTML ファイルが 1 つしかないので、複数ページあるのに検索エンジンにはトップページしか出てきません。この点は、React であれば react-helmet-async とか使えば解決できそうな気がしますが、Preact においてそれに準ずるライブラリであろうpreact-headは最終コミットが4 年前で、最新版だと動きませんでした³。

まずいポイント 2 つ目は、ページ移動後にリロードをかけると 404 が発生することです。SPA なのでビルドしてもindex.htmlしか生えないのですが、example.com からリンク踏むなりして URL がexample.com/testに書き換わったあとにリロードすると、example.com/test/index.htmlを取得しようとするので、当然 404 が出ます。Vite でプレビューしているときは発生しなかった（それはそう）ので気付くのがだいぶ遅れてしまいました。

2 つ目だけであれば htaccess をいじるなりして対処できたかもしれませんが、流石に 2 つも発生してしまうとつらいので、Gatsby に乗り換えました。

移行自体はそこまで苦しくなかったのが幸いです。バンドルサイズ・開発環境の立ち上がり・ビルド・ビルド後ページアクセス時の速度は目に見えて悪化しましたが、初回ページアクセス速度の悪化は致命的ではなく、ページ移動に至っては体感ほぼ変わらないという感じだったので許容範囲だと思いました。

Web サイトに関する雑

• トップページにはアニメーションを入れようと思ったので、gif を入れました⁴。これは After Effects で作成したものです。SVG ポイしてエフェクトひとつ入れるだけでこんなに素敵なアウトラインアニメーションが出来るとは思っておらず、感動しました。
• アクセシビリティに関する対応を割と頑張ったと自負しています。抜けや漏れもありそうですが……。
• トップページはあくまで最初に目に入る画面と割り切って、下のメニューには含めていません。つまり、他のページに移動したあとにトップページに戻るには URL を編集しなければならないということです。スマホからアクセスするのが大半だと思っていたため、限られた画面幅にメニューを入れるとなるとこうするしかありませんでした。別にトップページなんて見る必要なくねと思っていましたが、パンフレットはここからしかダウンロードできないのでちょっとまずかったかもしれないです。
• initial commit は 07/31 でしたが、これはサーバーを用意してもらってからすぐに「準備中」ページを公開するためです。実際に開発を始めたのは 10/17 ごろで、1 週間と少しで完成させました。

エンディング

さて、最後の仕事はエンディング映像の制作です。広報部が撮影した写真をスライドショー形式で動画にして、高専祭の最後に流すというのを毎年やっていたので、今年も作成しました。慣れているソフトが使いたかったので AE ではなく AviUtl を使いました。イントロおよびアウトロを作成したのは高専祭前日から 1 日目にかけての 2 日間です。

イントロ部分はモーショングラフィックス的な部分で苦労しそうだと思っていましたし、実際けっこう苦労しました。途中でちょっと進行を変えたら全てが上手く行ってちょっと気持ちよかったです。

あとは画像を並べるだけ！という状態にして 2 日目を迎えたのですが、主なイベントが終了して他の人が写真をアップロードするのを待って、画像をカテゴリ分けしたり選別したりして、タイムラインに並べて書き出し……としてたらかなりギリギリになってしまいました。画像ダウンロードから書き出し終了までなんと 3h くらいかかってしまいました。まずい！

動画に関してはいくつかミスをしてしまったのが悔やまれます。まず高専祭の実施日が間違っていました。さらに、1 つだけ画像の拡大率をいじるのを忘れていて、全体が見えなくなってしまっていました。おまけにいざ再生するぞとなった時に、音声ミュートの状態で再生を開始してしまいました。マジでしょうもないミスすぎる……。特に最後は本当に致命的だと思っています。かなしい……

エンディング映像には主に人の顔が写った写真を使っているので、さすがに全編公開というわけにはいかないのですが、イントロ部分だけ YouTube にアップロードしました。ついでに後述の曲もフルで聴くことが出来ます。

楽曲制作

今回は音楽も自分で作ることにしました。題して「reactiv」です。テーマである「Re:」を踏襲しつつ、reactivate（復活させる）・reactive（反応的な）を用いて命名しました。

楽曲それ自体については語るべきではないという価値観があるのであまり語りませんが、作る上での目標はあまり長くなりすぎないこと⁵・王道コードとリリースカットピアノを差し込むことです。

なんと 1 年ぶりの DTM になります。前回は高専祭展示用の書き下ろしなのでほんとに 1 年ぶりです。曲って調子良ければ 3 日とかで書けるしな～と、1 年のブランクを全部無視して舐めたことを思いつつ、高専祭 1 週間前の日曜に作り始めましたが、水曜に完成しました。4 日～～？？？

SoundCloud で聴くことが出来ます。上記の YouTube を観ていただければ全部聴けますけどね。

その他

いままでの経験において、配色に一貫性がないという反省がありました。今回はカラーパレットを事前に作成し、基本的にそれに従うことにしました。以下 3 色です。

正直 3 色はシンプルすぎた気がしないでもないですが、まあ統一感を出すことには成功したのではないでしょうか。

プライマリカラーをオレンジにしたのは適当ではありません。まず、2 年前、僕が初めて広報部に参加した時のパンフレットの表紙は青基調でした⁶。ちなみに 4 年前はピンクです。直近のパンフレットと被る色ではなく、3 原色に近い色を避けたいと思いました。また、「Re:」ということで、露店が復活して「再出発」した高専祭に、明るく元気なイメージを持たせたいと思いました。これらの要件を満たすのにオレンジは最適だったと考えています。

あと、Adobe CC を契約したのは今年初です。使用したのは InDesign（パンフレット）・Illustrator（ポスターやアセット全般）・After Effects（ロゴアニメーション）・Photoshop（パンフレット用の写真加工）でした。さすがデザイン業界の最高峰としてクソ高い金額をサブスクで吸ってるだけあって、出来ることの幅が広くて感動しました。

とある AviUtl 解説サイトにおける類似ソフト比較ページで、AE だけ「AviUtl の完全上位互換！」などとべた褒めされている理由がわかった気がします。あんまりいじってないですが。少なくとも、アニメーションを作るなら中間点ではなくてキーフレームのほうが圧倒的に良いと感じました。

Photoshop は実行委員メンバーの写真を加工するのに使いました。主に背景の削除です。グリーンバックを購入したのですが、クロマキーでは良い感じに抜けず、Photoshop でがんばりました。提供されている「背景の削除」機能は完璧ではなかったものの、かなり良い感じに削除してくれてよかったです。

おわりに

エンディングの時に、実行委員長によるあいさつを行う時間がありました。僕は「去年やったことに加えて Web サイトもやりました！欲しい情報にすぐアクセスできる環境を用意できていたらうれしいです」みたいな挨拶をした気がします。いきなりだったので文章を考えることが出来ずにぎこちない挨拶になってしまいましたが……。パンフレットや Web サイトによって、高専祭について知りたい事があったときにすぐその情報を手に入れることができる環境が作れていたらいいなと思っています。

なんとか終わらせることが出来ましたが、全体的に期限ギリギリに終わらせることが多くなってしまって関係各所に迷惑をかけてしまったりもしました。広報部の仕事は前述の通りデザイン中心で、こんなふうにブログが書ける程度には華やかですが、僕が事務的な仕事をしないまま自分の仕事に集中できたのは他の実行委員があってのことです。広報部だけでは高専祭は成り立たないのでね！本当に助かりました。

というわけで、3 年にわたる広報部としての仕事は終わりです。3 年間を通してやったことのほとんどはデザインに関する仕事で、自分のデザインに関する知見のなさや少なすぎるアイデアの引き出しといった、デザインセンスの欠如に苦しむことは本当に多かったですが、今年はいちおう満足できるクオリティーのものを作ることが出来てよかったと思っています。もっといいデザインを苦しまずに作れるようになりたいと思いました。何を頑張れば良いのかさっぱり分かりませんが。