LynksenはSplineで複雑なB2BプラットフォームのWebサイトにどう命を吹き込んだか

Elecctroは、自動販売機、EV充電器、洗車の自動化など、無人サービスのためのソフトウェアシステムを開発しています。製品はハードウェアからソフトウェアにまでわたり、B2Bの購買担当者に向けて、情報量の多い仕様書や技術的な図で伝えるのが慣例となってきた市場の一角にあります。同社のミッションは、スマートでつながったソリューションによって無人サービスを近代化することです。

Elecctroには、Webサイトが必要でした。それも、ただのWebサイトではありません。購買担当者の関心を、自社が何をしているかを実際に説明できるだけ長く引きつけ、似たような数十社とビジュアルで差別化し、訪問者をすばやく決断へと導けるサイトです。

「伝えるべき情報がたくさんありました」と、Webサイトの体験を作り直すために起用されたデジタルデザインエージェンシーLynksenのプロジェクトマネージャー、Taniaは話します。「同時に、技術色の強い分野の中で際立ちたいという思いもありました」

答えは、コンテンツを増やすことではありませんでした。まったく異なる種類のインタラクティブなインターフェースだったのです。

読むだけでなく、探索するホームページ

Lynksenの中心となるアイデアは、一見シンプルなものでした。言葉だけで説明する代わりに、ユーザーにシステムを探索してもらうことです。

ホームページはインタラクティブな3Dシーンになりました。Elecctroの製品ファミリー全体を空間的に一望でき、ユーザーは自分のペースでホバーし、クリックし、見て回れます。シーン内の各アセットは、それぞれ専用の製品ページにつながっています。「この製品は何？」から「話を聞いてみたい」までの道のりが、わずか数クリックに縮まりました。

ユーザーはホームページに来て、すべてを見渡し、一度クリックするだけで、Elecctroが必要とする情報を伝える段階へと進めます。

これは意味のある転換でした。ほとんどのB2BのWebサイトは、ホームページを目次のように扱います。LynksenはElecctroのホームページを、上から下へ読むものではなく、中を移動していく環境として構築しました。

なぜSplineなのか？

ビジョンは明確でした。では、それをどう形にするか？

従来の3Dツールは選択肢から外れました。学習コストだけでプロジェクトが終わってしまったでしょう。さらに重要なのは、Elecctroのチームがローンチ後もサイトを維持できる必要があったことです。つまり、中身の見えないパイプラインも、専門のアーティストへの依存も、アセットをひとつ変えるだけで何か月ものオンボーディングが必要なツールも使えませんでした。

LynksenはSplineを評価し、別の道を見いだしました。

• ひとつの環境で構築し、反復する。
• ツールの中で直接インタラクションのプロトタイプをつくる。
• 複雑な引き渡しの連鎖なしに、本番用のアセットを公開する。

経験がほぼゼロの状態から、一度の挑戦でプロジェクトをまるごと納品できました。

それを可能にしたのは、ツールだけではありませんでした。コミュニティです。Lynksenのチームは、コードを1行も書く前に、Splineのコミュニティライブラリで時間を過ごしました。リミックスを探り、ほかのデザイナーがインタラクションにどう取り組んでいるかを理解し、このクライアントのプロジェクトに応用できるテクニックを見つけていったのです。

さまざまなプロジェクトがあって、リミックスして人がいろいろなインタラクションにどう取り組んだかを見られるSplineコミュニティのような場所は、学びの面でとても役に立ちました。

Elecctroにとっては、もうひとつの要素がありました。長く使い続けられることです。

ローンチ後に自分たちのチームが本当に運用できるソリューションを求めていたのです。

オブジェクトを追加したり、別のインタラクションをつくったり、私たちが引き渡したあとにプロジェクトを維持したりするのに、それほど技術的な知識は要りません。それが私たちにとって本当に大きな利点でした。

体験をつくる

Lynksenのプロセスは、動きのまったくない状態からはじまりました。

静的なワイヤーフレーム。フラットなUIのレイアウト。アニメーションをひとつ加える前に、明確な情報の階層を確立します。構造が固まってはじめて、チームはレイヤーを加えはじめました。

「私たちはいつも静的な状態からはじめて、アニメーションをひとつずつ重ねていきます」とTaniaは言います。「ワイヤーフレームやスケッチで主要なステートを決め、実装の段階でカメラの動きを調整したり、アニメーションを試したりして、すべてが期待どおりにまとまるようにします」

この規律のおかげで、プロジェクトは自らの野心の重さで崩れずにすみました。チームが守ったデザインの原則はシンプルです。動きはストーリーを支えるためのもの。

実際には、次のようなことです。

• 3Dアセットのさりげないホバーのステートとマイクロインタラクション
• 注意を強いることなく導く、スクロールに連動した表示
• ユーザーを驚かせるのではなく、方向を示すカメラのトランジション
• 表現豊かな遊び心は、ちょっとしたサプライズが邪魔ではなく喜びになる、フッターや404ページなどの脇役の場面にとっておく

404ページは、チームのお気に入りのひとつになりました。すべてSplineでつくられていて、クリックして回ると隠れた3Dアセットが現れます。ほとんどの訪問者は見つけることのない小さなイースターエッグですが、Lynksenのチームが楽しんでつくったのは明らかです。

「ちょっとしたイースターエッグを隠しておくのは楽しいですね」とRossは言います。「誰かが見つけてくれたら、デザイナーとしてすごくうれしいです」

Webサイトのナビゲーションメニュー全体で使われている3Dアイコンのディテール。

成果

リニューアルしたWebサイトが公開されると、数字はすぐに動きました。

アクティブユーザーは524%増加し、プロジェクトは5つの賞を受賞しました。

サイトの閲覧数は新たに2万件増え、デザインコミュニティの注目も集めました。

これらの成果は、チームが意図して築いたものを映しています。見た目がよいだけでなく、本当に効果的なWebサイトです。明快さを求める購買担当者にも、専任の開発者を待機させずにサイトを維持する必要があるクライアントのチームにも役立つサイトでした。

3Dを検討しているチームへ

はじめてWebで3Dを検討しているチームへのTaniaのアドバイスはシンプルです。従来のツールからはじめないこと。

Splineなら、学習コストは無理のない範囲です。デザインのスキルがある人なら、数日で使いこなせます。私たちのチームは、使いはじめて最初の1週間でしっかりしたMVPをつくりました。

Rossはこれを、チームの3Dへの向き合い方のより大きな変化として捉えています。複数の複雑なツールやワークフローをつなぎ合わせる代わりに、ひとつの環境でデザインし、反復し、公開できる。それによって、インタラクティブな3Dが最初からずっと身近なものに感じられるのです。

高度な技術的知識なしにひとつの環境で作業して、見たままのものを公開したいなら、Splineを選んでください。

インタラクティブなWeb体験をクライアントに提案するデザインエージェンシーにとって、このプロジェクトは説得力のある実証例です。適切なツールがあれば、経験ゼロから、ひとつのプロジェクトで受賞するWebサイトまでたどり着けます。

Splineをはじめよう

Lynksenのように、エージェンシーはSplineを活用して、わかりやすく、維持しやすく、記憶に残るインタラクティブな体験で、クライアントが複雑な製品を伝える手助けができます。

Elecctroにとってそれは、技術的なB2Bプラットフォームを、製品をわかりやすくし、意思決定を加速させ、競争の激しい市場でブランドを際立たせるインタラクティブなWebサイトに変えることでした。

クライアントのためにつくるエージェンシーでも、社内のチームでも、Splineを使えば、複雑な3Dのパイプラインや専門的な技術スキルなしに、アイデアから本番までより速く進めます。

営業担当に相談