VIVITABLOG

VIVITAで活躍するメンバーの情報発信サイト

VIVITA JAPAN Webサイトのドメイン変更とリニューアルの舞台裏。

f:id:imatomix:20210901150103p:plain

こんにちは、先日 VIVITA Japan のカンパニーサイトがリニューアルされ、ドメインも vivita.co から vivita.jp に変更になりました。

vivita.jp

今回はサイトリニューアルに携わったメンバーにお集まりいただき、そこに至った経緯やその後の開発プロセスなどについてインタビューしていきます。

—— 皆さん、よろしくお願いします。

大野:よろしくお願いします。

コラボレーター / プロデューサー。
海外拠点の立ち上げや各拠点を繋いだコラボレーションイベントのプロデュースなどを担当。

:よろしくお願いします。

プランナー / コミュニケーター。
国内におけるプロジェクトやイベント企画のプロデュースとディレクション、PRを担当。

今冨:よろしくお願いします。

デザイナー / エンジニア / メンター。
VIVITAのブランドデザインを担当。デザインからエンジニアリングまで、VIVITAの開発全般に精通した駆け込み寺。

—— 早速ですが今回、カンパニーサイトのリニューアル、ドメイン変更に至った経緯をお聞かせください。

大野:1つ、課題があったんです。VIVITA はとても新陳代謝の激しい組織なんですが、海外展開などの急速な変化の中で、vivita.co というサイトが VIVITA インターナショナル という会社と VIVITA JAPAN という会社の両方の窓口になってしまっていました。

:なのでどちらのターゲットに向けてどういう情報を発信すべきなのか、運営する私たちにとっても不明瞭な状態だったんです。それを今回、綺麗に整理しました。

大野:これからは vivita.co が VIVITA インターナショナル 、vivita.jp が VIVITA JAPAN のカンパニーサイトになります。運営もそれぞれエストニアと日本で分かれていきます。

—— サイトの立ち位置がより明確になって情報発信しやすくなったわけですね。

今冨: 結果的には、世の中のグローバル企業と似たWebサイトの座組に落ち着いたのかなと思います。

:vivita.jp では国内の活動、例えば、VIVITA ROBOCON や VIVITA BOOKS など、これまでに国内で生まれて育ってきたプロジェクトやサービスの紹介が追加されています。ぜひご覧ください。

f:id:imatomix:20210905000301p:plain
プロジェクト一覧の一部

—— サイト制作はどのようなプロセスで進んでいったんですか?

大野:まずは今冨さんに相談しました。

今冨:相談されました。正直「またか」と思いました。

一同:笑。

今冨:VIVITA のWebサイトはこれまでに4,5回リニューアルしてるんです。社名変更とか分社化とかいろいろある度に、全面リニューアルしたがる人がいるので。

:多い。笑。

今冨:今回もひとまず先ほどの話を聞いて、新たにVIVITA JAPANのWebサイトを用意する経緯は理解できました。でも「じゃぁ、どういうサイトが必要なのか?」「ドメイン変えるだけじゃダメなのか?」というところがまだまだ曖昧だったので、そこを固めていくプロセスから始めました。

—— 具体的にはどういうことをしたのですか?

今冨:シンプルですよ。「どういうコンテンツが必要か、または欲しいか」「それはなぜか」の情報整理です。境さんには国内広報の視点から、大野さんには上位レイヤーのVIVITAインターナショナルの視点からVIVITA JAPANのサイトに求めるものを集めてもらいました。

:ちょうど会社としても、ミッションをアップデートしたり、ハードウェア開発プロジェクトを分社化したりがあって。

大野:「大きくなってきたけど、これはどこにカテゴライズすればいいのだろう?」というプロジェクトもチラホラあったりで、情報を整理し直す時期でしたね。

今冨:そうやってお2人に洗い出していただいた要件に対して優先度付けやカテゴライズを行い、一つ一つを定義しながら Figma でWebサイトのワイヤーフレームという形に落とし込んでいきました。要件自体がそんなに多くなかったし、複雑でもなかったので、半日程で形になりましたね。

f:id:imatomix:20210901213124p:plain
ワイヤーフレーム

—— とてもスピーディですね。

今冨:個人的な考えですが、モノづくりにおいて文字や言葉だけのコミュニケーションはあまりあてになりません。「同じ方向を向いていると思ってたら、実は全然違ってた」なんてことはよくある話です。なるべく視覚や体験の共有をベースに議論を重ねたほうが建設的なので、「目に見えるもの」「手で触れるもの」を早急に用意することはとても重要視しています。

:その後、ワイヤーフレームを軸にslack上で「これも載せたほうがいいんじゃないか?」「これはそもそも必要なのか?」などの思考や議論を重ねていきました。

大野:で、最後は今冨さんに「あとはよろしく」です。

一同:笑。

今冨:まぁ、「役割が明確である証拠」ですかね。無駄に複雑な承認フローとかもないですし。でもその後、1カ月程何も進まなくなるんですよね。笑。

一同:笑。

—— 何かトラブルですか?

今冨:いや、特に何も。単に他のことで忙しかったんです。この仕事はスケジュールに余裕があって、皆さんメイン業務の合間にやるものだったんです。僕も合間が出来たときに一気にやるんですけど、合間がない期間が続いちゃって。

:でも開発に入ってから出来上がるまでは、結構早かったですよね。

今冨:ワイヤーフレームの段階で既にレイアウトとコンポーネント設計までは詰めていましたからね。ブランドイメージは既に固まったものがあるし、止まっていた期間も頭の片隅では「あぁしようか、こうしようか」と思考を練っていました。なので作業を再開したとき、ビジュアルデザインの工程はだいぶショートカットしましたね。ワイヤーフレームからすぐに実装工程に入っています。

—— 開発期間はどのくらいでしたか?

今冨:大体1週間程でローカル環境で全て組んでしまって、後の1週間で開発環境と本番環境を用意してレビューとデバッグ。同時に動画や画像などの各コンテンツのリソースデータをチマチマと用意して、合計2週間ですね。止まってた時間のほうが長いです。すみません。

—— それでも十分速いですね。

今冨: Next.js を用いて作ってるんですが、サイトを構築する上で基本となるコンポーネントやスタイルを合わせたスターターキットというか「秘伝のタレ」的なものが既にあるので、スタートダッシュにはさほどコストがかからないんですよ。伊達にサイトリニューアルを繰り返してません。笑。

f:id:imatomix:20210902191210p:plain
秘伝のタレを納めたStorybook

—— 下処理は常に済ませてあるんですね。では次に、デザインに関する話も聞いてみたいです。

今冨:一言でデザインといってもいろいろですが、ざっくり分けると情報の見やすさやビジュアル面でのユニークネスといった視覚デザインと、拡張のしやすさや運営面での使い勝手の良さといった機能デザインがあります。ベースとしては後者に比重を置いています。目に見えない部分ですが、後からの追加要望や、仕様の変更等も考慮した作りの上に成り立ったデザインです。

大野:新陳代謝の激しいVIVITAでは、何事も作れば終わりではなくて、その後も新たな要望や相談が頻繁に出てきます。最初にまとめた要件定義も、今後のサイトを運営する上での「ルール」にならないように、固めすぎないことを意識しました。

今冨:結果、構成としては無駄をそぎ落としたミニマルでシンプルなものになってしまうんですけど、その分パフォーマンスに気をつけたり、文字の太さやサイズ、カーニング、各要素の配置や余白のとり方など、とても基本的で大切なことを丁寧に工夫しています。そこにユニークなアニメーションやエフェクト等で視覚的なエッセンスを加えることで、サイトのアイデンティティを構築しています。

f:id:imatomix:20210901232937j:plain
トップページのデザイン

f:id:imatomix:20210902211512p:plain
Google 社が提供するウェブページの評価ツールLighthouseのスコア

:私も質問いいですか?この赤い丸は JAPAN だからですか?

今冨:安直ですよね。笑。お恥ずかしい。。。でもそこは狙ったわけじゃなくて、結果的にそうなったんです。

:ほう。

今冨:歴代の VIVITA のWebサイトでも、度々パーティクルエフェクトを活用してきました。各々が有象無象に動いては、互いに影響しあうパーティクルはVIVITAで活動する子ども達のメタファーなんです。赤色はパッションやエネルギーの色です。日の丸は紅色なので少しだけ違うんですよ。でもまぁ、(日の丸に)見えますよね。それはそれでいいかな。と。

—— なるほど、そう聞くと少し見方が変わりますね。その他にこだわった点などはありますか?

今冨:ビジュアルデザインで気を付けたのは、丁寧に組み上げたものをどう崩すかですね。ただ丁寧に組み上げただけだと、真面目で「大人」すぎるんです。VIVITAは大人も子どもも区別しないことを大切にしていて、それは「子どもを大人として扱う」ということでも、「大人が子どもに合わせる」ということでもなくて。初めから同等に同じ空間に存在しているイメージです。なので、大人すぎても子どもすぎても駄目なんです。

—— 具体的にはどういったところでしょう?

今冨:ベースが大人っぽいので、、、例えば、サムネイルにカーソルをホバーさせたときの動きは、子どもが大きなボタンを「ポチッ」と押すような楽しさを演出しています。直線が多いレイアウトの中で動き回るパーティクルは自由を印象付けます。トップの「change the world better」のタイポは初めシャッフルアニメーションがかかるのですが、よく見るとシャッフル中のアルファベットの中にカタカナで「ヴィ」が混ざってたりで、ふざけてます。笑。

:それは知らなかった。

今冨:誰にも言ってないですからね。笑。ミニマルで落ち着いた構成の上で、そうやって遊ぶことでバランスをとっています。あとは、普段あまり見ることのない404エラーページでは、トップページとは異なるパーティクル入れています。ここではパーティクルのサイズにバラつきがあり、距離が近いパーティクル同士は線で繋がるようになっています。これもちょっとした遊び心です。

f:id:imatomix:20210901213408p:plain
404エラーページ

—— 何か意味があるんですか?

今冨:404エラー(Not Found)ページなので、「道に迷ったときほど、周りとの繋がりを大切に。」というメッセージです。笑。

—— 素敵な遊び心ですね。笑。さて、話は尽きませんが、そろそろ時間になってしまいました。本日はここまでということで、皆さんどうもありがとうございました。

一同:ありがとうございました。