IE3のMiyamotoです。

2025年10月25日に開催されたVue Fes Japan 2025のリブランディングのアートディレクション・デザインを担当させていただきました。

本記事ではリブランディング制作の主にデザイン面での裏側をお伝えします。
普通に途中経過も載せているので温かい目で見守ってください。

こちらのnoteにイベント前の僕らのインタビューが掲載されています。

IE3にリブランディングの相談

前年にIE3の田中が登壇したことをきっかけにVue Fes Japan 全体統括である沖さんからリブランディングについての相談を受けました。

Vue Fes Japanは、Vue.jsの日本最大級の国際カンファレンスです。Vue.jsの開発者やコミュニティメンバーが集まり、最新の技術情報や実践的な知見を共有する場として毎年開催されています。コミュニティ主導で運営され、オープンで温かみのある雰囲気が特徴です。

僕らとしても、これだけ大きな国際カンファレンスのブランディングを任せていただけることになり、チーム内でも一気に熱量が高まりました。

キックオフ前の段階から「こんなことをやりたい」「こう見せたい」とアイデアを持ち寄り、デザインの方向性や夢をひたすら詰め込んでいたのをよく覚えています。

デザインの試行錯誤

リサーチ

まずは過去のVue Fes Japanの写真や資料を振り返って全体の流れを把握しつつ、日本国内外のカンファレンスやデザイントレンドのリサーチも重ねて、プロジェクトの全体像と雰囲気を掴んでいきました。

日本のカンファレンスは、和のモチーフを取り入れたデザインが多く、全体的に構成も似通っていることが多いと感じていました。一方、海外のカンファレンスは毎年ビジュアルイメージを大胆に刷新する動きがあり、その違いが印象的でした。

Vue Fes Japanでは、どのような独自のビジュアルコミュニケーションを目指すべきか、模索していきました。

コンセプト模索

コンセプトやビジュアルを形にする際には、特に次の3点を意識しました。

• Vueらしさを感じられるシンボリックなデザインであること
• 日本の方には和風と意識させず、海外の方には和のニュアンスを感じてもらえること
• 毎年開催されても、柔軟にアップデートできる可変性があること

デザイン試作では、まずVer.1でVue.jsのロゴを思わせる三角形を散りばめ、全体像を構成する案から始まりました。

そこからVer.2ではよりシンボリックなアプローチに挑戦し、Ver.4ではプログラミング的な視点で再構築しやすいビジュアルアイデンティティを実験しています。

最終的にVer.5でVueらしさと日本を表す日の出を組み合わせることで、柔軟さをあわせ持つシンボリックな骨格が完成し、今回のリブランディングに最もふさわしい形として落とし込むことができたので、この方向性で深めることに。

実はVer.1〜3はキックオフ時にはもう出来ていて、沖さんにお見せしたりして方向性の共有をしていました。

ウェブ・リアルでの実用性を検証

ベースとなるビジュアルアイデンティティ（VI）がある程度完成した段階で、実際にウェブサイトやカンファレンス会場など、さまざまなタッチポイントでどのように機能するか検証を重ねました。
ウェブ用のモックアップを作成したり、過去のイベント写真と合成して雰囲気を確かめたり、当日配布されるネームカードのプロトタイプを作るなど、実際の運用シーンを具体的に想定しながらテストを行いました。
こうしたシミュレーションと検証を繰り返すことで、どんな場面でVIがきちんと機能するか／しないかを精査し、さらに洗練できそうなポイントや、今後の広がりの可能性を探っていきました。

しかし、何かが足りない…

順調に見えて、実はどこかで行き詰まりを感じていました。ブランドの可変性は確保できていたものの、デザイン全体のクオリティを一段引き上げてくれるもうひと押しが足りないように思えたのです。

背景や装飾要素のデザインも加えてみたり、和柄を試しに取り入れてみたりと色々チャレンジしましたが、日本らしさが強く出過ぎたり、どこかしっくりこないことが多く、なかなか納得する形に辿り着けませんでした。これだ！と思えるまで、何度も壊しては作り直す試行錯誤が続く期間でした。

コンセプトがVIへと発展

さまざまな表現を試行錯誤する中で、最終的にたどり着いたのが「墨流し」という日本の伝統技法でした。
墨流しは、水面に墨を垂らして自然に広がる模様を生み出すもので、水や墨の動きによる偶然性や有機的な形状を生み出すのが特徴です。その自由な表情に、Vue.js コミュニティが持つ柔軟さや多様性、成長を重ね合わせることができると感じました。

さらに、墨の濃淡のグラデーションや流れの軌跡は、プログラミングにおいてコードが紡がれていく様子や、異なる技術がつながり合うイメージにも通じます。この技法の要素を取り入れることで、日本らしい繊細さを活かしつつ、必要以上に和風に寄りすぎない独自の表現が生まれると考え、ビジュアルアイデンティティとしてブラッシュアップしていきました。

ロゴシステム

VIのベースが固まりかけた段階でロゴの制作に取り掛かりました。
こちらもVueらしいフレキシブルな設計にしたいと思い、シンボル+ロゴタイプの従来の設計に加え、Rectangle base、Square base、Vertical baseの複数のエリアに対応するロゴにしています。

VIの可変性を高める

ブランドやロゴを様々な場面で展開することを想定し、VIにも高い可変性を持たせることに重きを置きました。例えば縦型バナーやSNSのプロフィール画像など、媒体ごとに最適な形を選べるよう、ロゴ自体の構成を柔軟にしています。
「VO」の「O」の部分は異なる形状として表現できるように工夫し、また「V」と「O」の配置も縦・横問わず自在に組み合わせられるようなルールに設計。その上で一貫して「Vueらしさ」が伝わるビジュアルとなるよう意識しています。

ブランドカラー

過去のVue Fesでは日本の伝統色の4色をベースに登壇トラックごとに配置しており、今回のリブランディングでもその要素は残して欲しいとの要望を受けていました。
今まで日本の伝統色でトライしたプロジェクトはあったのですが、現代のデジタル空間で明度・彩度が低い日本の伝統色を扱うのは非常に難しいと感じてはいたので、どうアプローチすべきか頭を悩ませました。

紺丹緑紫

悩みながら出した答えが、紺丹緑紫（こんたんりょくし）という配色手法になります。
紺丹緑紫は、仏画や仏像の彩色で使われた伝統的な配色法で、色を対比させて互いを引き立てる補色で構成しています。この配色からインスピレーションを受け、Vue Fesで新たに設定したプライマリーカラーから配色パターンを組み立てて作り上げていきました。

そして提案へ

実は今まで書き連ねていた段階ではキックオフ1回を行い、そこからデザインの試行錯誤を行なっており、まだ提案していない状況でした。
ここから提案に向けてウェブでの展開、ネームカードのデザイン、スタッフTシャツなどのグッズ、デザイン運用でのフォント周りやFigmaでの運用のしやすさなどを盛り込んだ提案書を制作し、提案に挑みました。

以下は提案資料からグラフィック部分を抜粋したものになります。

本制作

提案は無事に通り、大きな変更となる提案にも関わらず受け入れていただいたコミュニティの方々に感謝し、本制作に入りました。

それぞれの制作物について簡単にですがまとめていきます。

ウェブサイト

カンファレンスのウェブサイトは2つの役割があります。1つはイベントの告知や情報源。もう一つはイベント当日にタイムテーブルなどを確認する案内板。その2つを両立するウェブサイトにしたいと考えていました。

その中でもリブランディングで変わったVue Fes Japanも表現できるような、少し奇妙な設計な構成なデザインを提案し、コミュニティメンバーのコアメンバーである @ubugeeei さんを中心にゴリゴリ実装していただきました。

驚いたのが複数のコミュニティメンバーがウェブサイトの実装を担当し、「あ、ここ直したいな」と思っていたデザインが、次の日の朝には他のメンバーが対応していたりして、自走しながらクオリティを高めていく姿を見ることができたのが個人的に熱かったです。

公開したサイトの評判は上々で、リブランディングの重い責任感から少し解放されたのを覚えています。

リブランディング後の開催ポスト（X）

SNS展開

今回のリブランディングで力を入れたかった1つがSNSでの見せ方でした。従来のイベントでもSNS上で情報発信はされていたものの、ビジュアル面でもう一段強化できると感じ、VIを活かしたOG画像の再設計に取り組みました。

• 登壇者専用OG画像
• 参加者ネームカード用OG画像

大きくはこの2種類のベースを用意し、どちらも自動生成できる仕組みを構築していただきました。これにより、登壇者の発表告知やイベント参加表明がされるたびに、Vue FesのOG画像がSNSに自然と拡散される仕掛けを作ることができました。

ネームカード

例年Vue Fes Japanでは事前に登録することで、イベント当日にオリジナルネームカードを渡す施策を行なっていました。
今回も制作するとのことだったので、VIに溶け込みならがイベント当日にコミュニケーションが発生するようなデザインを心がけています。

まずは、アイコンを大きくし、視認性を高めるのと。登壇者やパーティー参加者、スタッフなどが分かりやすいように、カラーで設計したパターンを割り振っています。

自身のアイコンがあることでネット上でコミュニケーションをとっている方々との目印にしやすく、非常に便利。

スタッフTシャツ

スタッフTシャツのデザインも担当しました。Tシャツといえば黒地に大きく「STAFF」と入れるのが定番ですが、イベントが10月後半の少し肌寒い季節ということもあり、来場者の服装が黒っぽくなりそうだと考え、ひと目でスタッフだと分かるアース系のカラーを選びました。
また、Tシャツ地の色の都合上シルクスクリーン印刷で刷る必要があったため、墨流しのモチーフをベジェ曲線でアレンジして表現しました。個人的にこのシェイプはかなりお気に入りの仕上がりになっています。

カンファレンスホール

リブランディングにおいて、カンファレンスホールの見せ方には特に力を入れました。来場者やSNSで写真を見た人が、ひと目でVue Fes Japanの会場だと分かり、興味を持ってもらえるような空間づくりを意識しました。

メインホールは2つあり、それぞれの会場の両脇には異なるカラーパターンを使った大きな垂れ幕を設置。また、登壇者の前にもオリジナル造作物を提案し、実際に採用していただいています。

その結果会場で撮影されたどの写真にもロゴやVIが認識でき、このイベントならではの雰囲気がしっかり映り込みながらもVue Fes Japanらしさを感じてもらえる空間になったのではないかと思います。

幕間スライド

タイムテーブルの合間に流れる幕間スライドもデザインしました。Figmaでベースデザインを作成し、次に登壇する方を紹介する内容です。
当初はパソコンのモニターで細かく調整しながら作っていたのですが、途中で写真を思い切って大きく見せるレイアウトに変更。その結果、実際に大型プロジェクターで投影したときに、想像以上にビジュアルのインパクトが強く出て、デジタルとリアルのスケール感の違いを実感できる良い経験になりました。

サイネージ

カンファレンスホールの入り口にはタイムテーブルと連動したサイネージを提案しました。
それぞれの時間によってホールで開催されているセッションや次のセッションの紹介など、ホールに入る前の体験を向上させるシステムもIE3で制作しています。

参加者の方からも非常に分かりやすかったと声をかけていただきました。

ディスプレイボックス

このディスプレイボックスは、提案の中で最後に追加したアイデアでした。会場装飾といえば大型の垂れ幕などが定番ですが、どうしても固定的で、会場全体にVue Fesの世界観を浸透させるには限界があると感じていました。

そこで、どこにでも設置しやすいダンボール型のディスプレイボックスを用意することで、柔軟にレイアウトを変えられ、さまざまな場所にVue Fesらしさを持ち込めると考え、提案に盛り込みました。

ダンボールだったので色の転び方が気になったので色校をお願いしたとこと、かなり薄くなってしまったのでデータ上で色の濃さを120〜150%ほど上げて入稿し直しました。ケチらなくてよかった。

イベント当日には入り口に積み上げたボックスがモニュメントのような存在感を持ち、来場者が思わず写真を撮りたくなるスポットになったのは嬉しい驚きでした。

また、コミュニティメンバーの発想で、アフターパーティーでは各所にあったビジュアルボックスを集めてパーティ会場の装飾にも活用され、お祭りムードの演出にも一役買いました。このように、会場全体の雰囲気づくりやコミュニケーションのきっかけにもつながったことは、想定以上の良い効果をもたらしてくれたと思います。

ボックスは持ち上げると何故かみんな盛り上がります。

イベントを終えて

Vue Fes Japan 2025は大盛況のうちに幕を閉じました。参加者数は昨年比1.1倍、グッズの売り上げも過去最高と伺っています。リブランディングがどれほど貢献できたか数値では測りきれませんが、ブランドは積み重ねの中で育っていくものだと改めて感じています。

当日の熱気が凄まじく、次回さらに参加者が増えることを願ってやみません。

今回、非常に大きな裁量をいただき、多くの新しい試みに挑戦できました。関係者の皆さま、本当にありがとうございました。

最後に、もしこの記事を読んでリブランディングやデザインについて相談したいという方がいらっしゃれば、どうぞお気軽にContactページからご連絡ください。
頼みにくそうとよく言われるのですが、気軽に相談してもらえると嬉しいです。

では、また！

IE3 宮本