理想をトコトン突き詰め、常に挑戦者であり続けるジュニの思いを表現した特設サイト『Junni is…』を2022年10月6日に公開いたしました。

公開後、「The FWA 」で「FOTD（FWA of the day）」を受賞、「 CSS Design Awards」「Awwwards」で「SOTD(Site of the day)」を受賞し、WEBの３大デザインアワードでそれぞれ賞を獲得することができました。

全コードを公開することで業界界隈にも話題を提供したスペシャルサイト。今回はそのサイトの制作を担当した、エンジニアの右近と、アートディレクターの黒図を交えて、制作のきっかけや過程についてお伝えします。

エンジニア中心のサイト制作にチャレンジしたい！

関田 -
今回のスペシャルサイト『Junni is…』は、右近さんがきっかけではじまったんですよね？

右近 -
はい！以前に、自分がエンジニアの採用募集向けに、ジュニのキャラクターである「バク」を使ったデモサイトを作っていたんです。それを見た黒図さんや代表の岡村さんたちが「おもしろい！」と言ってくれて。どうせならこれをもっと作り込んで、エンジニアの採用にもつなげたいねって話になったんです。

黒図 -
そうですね、このページを見て、ジュニのできる技術やデザイン、アイデアの幅をより面白く見せられるんじゃないかな…と、まずは他のメンバーも交えて考えました。

▼そのときにつくっていたサイトはこちら

https://recruit.junni.dev/

関田 -
実際に、このサイトの全体像はどのようにできていったんですか？

右近 -
自分は、個人的にWebGLメインのサイトを一人で作ったりしていて、技術的な挑戦に取り組んでいます。今回はその延長で、技術メインで進めながらも、デザインや演出のブラッシュアップをデザイナーの力を借りて作ってみたかったんです。
デザインからWEBサイトをつくるという通常のフローから、ある意味で逆のフローの挑戦がしたいなって…。

右近の個人サイト：https://recollection.ukon.dev/

黒図 -
そこで、「バク」の生みの親でもある私が全面的に協力することになりました。やるなら、賞が受賞できるレベルまでやろう、ともこの時点ですでに話してました。

関田 -
でも、制作していたときは通常業務も忙しい時期でしたよね…。

黒図 -
そうですね…案件はかなり重なっている時期でした。ただ、通常の制作フローと違ってデザインをしっかり作るわけではなく、右近君が作ったベースとなる演出に対して、演出やデザインを加えていくやり方だったので、デザインソフトと向き合ってる時間よりも、右近君の画面を見て、ディスカッションしながらディティールを詰めていく時間の方が多かったので自分の作業時間としては普段より少なかったと思います。右近君がライブコーディングで次々実装してくれるので、イメージも練りやすかったし面白かったですね。無茶な要望も沢山言ってたと思います（笑）

右近 -
自分としても、技術や３D、WebGLって目線だけじゃ限界があったので、黒図さんの参加は本当にうれしかったです。そして、めちゃくちゃ楽しかったです(笑)

関田 -
社内で見ていても、案件が重なる中でこの話をしている様子は、とても楽しそうな雰囲気でした(笑)

黒図 -
右近くんは、WebGLの実績をはじめ、社内にむけて発信が多いので、ディレクターやデザイナーも、彼が表現したいこと、できることをなんとなくはわかっていると思います。今回のサイトは、そのできることの限界を試したくなっちゃいました（笑)

制作・開発はとにかく「試行錯誤」

関田 -
結果として、このサイトの完成までは大体２ヶ月位かかりましたね

右近 -
そうですね、最初に相談して…手を動かし始めてからは２ヶ月くらいかと思います。

関田 -
それでも、通常の案件に対応しながらを考えると、十分スピーディかなと思いますが…。

右近 -
進めるにあたって情報共有の場所として、ホワイトボードサービスの「miro」を使っていました。そこで全体の大まかな流れや演出の方向性を決めて、何を考えているか、何をやってほしいか、を共有しやすくしたんです。

黒図 -
制作の初期に、サイトに大きな４つのセクションを設けることをまず決めました。次に、miroのホワイトボードに各セクションを表現したイメージボードを私がつくり、さらにその構想をもとに、右近くんがセクションごとにデモをつくり、ブラッシュアップをし、最後にそのデモからイメージを膨らませて、またmiroにデザインやアイデアを書き込む。これを繰り返していた感じです。

関田 -
最近「miro」でのブレストや情報共有は、ジュニ社内に留まらず社外まで巻き込んでやっていますよね。コミュニケーションしながら作り続けている感じで、かなり制作のスピードは出そうですよね。

右近 -
そうなんです…でも、自分はホントは１ヶ月でやりきるつもりでいました(笑)
ただ、やはりそう簡単にはいかなかったですね…。

関田 -
それでも２ヶ月は早いと思いますが…なにが一番難しかったですか？

右近 -
やはり細かいデザインの詰めや演出のブラッシュアップ作業にかなりの時間を使いましたね。

黒図 -
このサイトは最初から賞を狙いにいってたのもあり、少ないページボリュームながらも、演出は振り切ったものにしたかったので。それこそ、打合せはいつもデモを見ながら互いに改善点を洗うことに徹底していましたね。新しい要素を追加してみては前後と辻褄があっているか、パフォーマンスに影響がないか、などを話し合い、色々手を加えていきました。

右近 -
通常のフローでは、構成やデザインがあってから実装やデモを作るから効率はいい。でも、今回はそれとは違ったので、打合せや制作には思ったよりも時間がかかっちゃいました。
ただ、今回のように、３Dモデルやデモから詰めていくというフローでは、大変な分アイデアを重ねがけしやすいなとも感じました。こうして受賞もできたので、通常案件でも試していきたいと感じましたね。

黒図 -
この進め方にクライアントまで巻き込んでいけたら、もっとおもしろくなると私も思います。もちろん大変だとは思いますが…。

関田-
新しい試みが案件でも行えたら、もっとおもしろくなりそうですね！では、ジュニらしさをどのようにセクションごとに表現したのかもお聞きしたいです。

黒図-
サイトの着想はバクを中心に色んな見せ方や演出でシーンを切り替えて「ジュニの多様性」を表現したら面白いのではという事から始まったんです。ジュニでは様々な種類の案件があるので、デザインや技術の幅の広さや企画力を表現したいと思い、セクション毎に「ポップ・クール・スタイリッシュ・カワイイ（キュート）」とキーワードを設定。それぞれで全く違う見せ方、演出にしつつサイトとしては『一本の映画を見ているような感覚』を味わってもらえるような一貫性を持たせたシームレスなWebサイトを目指しました。

社内外の巻き込みやローンチでの反応は？

関田 -
このサイトの進行に、他のスタッフは関わっていたんですか？

右近 -
黒図さんとは毎日のように打合せをしていましたが、その他、上司であるエンジニアの諸橋さんと、代表の岡村さんとは週１くらいで進捗報告をしていました。

黒図 -
ジュニの立ち上げ当初から一緒である岡村には、サイトの各シーンにあわせたテキストコピー作成や、シーンごとにジュニの方針・コンセプトに沿う演出のアイデア出しをお願いしました。

右近 -
諸橋さんには、演出で行き詰まった際に相談に乗っていただきました。全体を通してちぐはぐしない、ストーリー性をもった演出になったのは、諸橋さんの力添えもありました。そこは週に１度ですが、制作担当以外の方とも打合せをしていたこともよかったと思っています。

関田 -
迷った時はすぐに声がかけやすい環境ですよね。

今後も、型にはまらない挑戦を！

関田-
改めてこの企画のきっかけとなった右近さんに。今回の制作についてアートディレクターの黒図さんと取り組んでみていかがでしたか？

右近 -
刺激的でした。ここまで密に黒図さんと話し合って制作したのが初めてで、行き詰まるところがあっても、相談をすればすぐに絵として視覚化してくれるし演出のアイデアも次々出てくるので頼り甲斐を感じましたね。

関田 -
お互いの仕事を信頼しあっての取り組みでしたね。

まもなく、ジュニは11月に事務所を移転します。次の事務所では職種を混ぜた座席の配置や、気軽に集まれる打ち合わせエリアを設けて、アイデアを生み出すスペースを複数用意する予定です。今回のような型にはまらないコラボレーションが生まれやすくなると期待しています。

それでは最後にお二人に、ジュニを検討されているエンジニア・デザイナーの方へメッセージをお願いします。

右近 -
ジュニは理想を追い求めてトコトン試行錯誤する会社なんです。

WebGLが自分は好きなんですが、あくまで手段の一つとして使う箇所は見極めなければないけません。それをジュニでは理想を追求するための表現技術のひとつとして積極的に活用できます。ちなみにソースコードも今回公開してますが、その中にもこっそりメッセージを入れても許される空気感があります（笑）

エンジニアチームはというと、メンバーが同じ方向を見ながらも、個々に専門性をもってやりたいことがある、そんなチームです。最近、インターンから入社した石野くんはNFTと音楽のハッカソンに参加して発表したりと、それぞれが自立して目標に向かっています。

そんなチャレンジできる社風に共感できる方にぜひ入ってほしいですね！

黒図 -
ジュニのデザイナーには、全員にデザインアワードを獲得する経験をしてほしいと思ってるんです。アワードを受賞することで、プロのデザイナーとして対外的に認められ、自信にも繋がります。常にチャレンジできる環境なので、自分の力を試したいと考えている方に、是非応募いただきたいですね。

関田 -
ありがとうございました！

ジュニは「アソビゴコロ」を大切にしている会社です。
スペシャルサイトそのものや、今回のインタビューから、取り組みの中で自由に楽しみつつ試行錯誤をしていた様子が伝わり「アソビゴコロ」が感じられました！

ジュニでは「サイトはテキスト情報が乗るもの。デザインを実装するのが制作フロー。」といった固定概念にとらわれることがありません。
自由に制作することが許されたり、理想の表現を突き詰めることが可能で、会社としても、個人としても挑戦ができる、そんな場所なのだと改めて感じます。

ジュニらしさがそのまま表現された、特設サイト『Junni is…』。
まだサイトをご覧になっていない方は、ぜひ映画を見るように気軽にお楽しみいただければと思います。

ジュニのコンセプトサイト「Junni is…」