Unity ArtEngine を使って現実を超えたやり方で製品のマーケティングを行う

MICHELLE BAUMGARTNER / UNITY TECHNOLOGIESContributor
Jul 27, 2021|15 Min
Hero image

オフィス家具メーカーは製品の 3D ビジュアライゼーション技術を活用して、どのように顧客体験を向上させているのでしょうか。Flokk は製品がオーダーメイドであるということもあり、同社の Web プラットフォーム全体を刷新する時期に来ていると判断しました。このプロジェクトには、Flokk のすべてのチェアの素材をデジタル化し、3D モデルに適用する重要な作業が含まれていました。この作業は、Flokk が信頼を置くソリューションパートナー Forte Digital と、Unity ArtEngine を活用したスキャンワークフローの力を合わせて行われました。

Flokk のフォトリアリスティックな製品ビジュアライゼーションを可能にした Unity ArtEngine

Flokk は高級オフィス家具の設計・製造のマーケットリーダーです。HÅG、Offecct、Giroflex、RH、Profim、9to5 Seating、BMA、RBM、MALMSTOLEN などのブランドの製品を世界 80 か国以上で販売しています。同社の 2,000 人の従業員は「Inspire great work」というビジョンを共有して、毎日働いています。

Flokk はデザインを製品の中心に置いています。効率的なサプライチェーンと製造プロセスにより、Flokk の製品はすべてカスタマイズ可能です。しかし、オンラインでの顧客体験においては常にデザインを中心に置くことができていませんでした。2019 年、Flokk はこの状況を変えるために、信頼を置くパートナーである Forte Digital の協力を得て、新しい E コマースプラットフォームに大規模な投資を行うことを決めました。このプラットフォーム刷新における重要なピースとして、Unity ArtEngine を使って同社のチェアの素材をデジタル化し、それを自社開発の 3D コンフィギュレーターに統合することで、顧客が Web ブラウザー上で快適にチェアを 3D デザインできる環境を作ることを位置づけたのです。

Image of a blue room with a wooden desk and blue chairs.

結果は以下のようなものでした。

  • 初めてオンラインでのセルフチェックアウトを可能にしたことで Web トラフィックが増加した
  • Flokk が 3D コンフィギュレーターで高解像度の画像を作成できるようになったことで、実地で写真を撮影する必要性が下がり、社内の作業効率が向上した
  • 注文を行う際の信頼性が向上したことで注文ミスや返品が減り、ディーラーや顧客の満足度も向上した
  • Flokk のデザインの価値が、製品だけでなくカスタマージャーニーのすべての段階で示されるようになり、Flokk のブランディングとポジショニングの一貫性が増した
  • リアルタイム 3D 技術への投資が遅れがちな伝統的な業界において差別化を図ることで、長く続く競争力を獲得した
最高の顧客体験へ投資することのポテンシャルを理解する

Flokk のチェアはオーダーメイドで、何百万通りもの構成が考えられるため、同社のサプライチェーンと注文プロセスは非常に複雑になっています。例えば、あるオフィスチェアの SKU について、顧客は何十種類もの生地から好きなものを選択し、シートサイズ、リフト、フットベース、ホイールなどの特性を指定し、さらにネックレストやアームレストなどのアクセサリーを追加することができます。これは自動車を購入するのとあまり変わらない複雑な手続きです。

Image of office chair hardware and parts.

Flokk はデザインを製品の中心に置いています。美しく、高品質で、耐久性のある、顧客に愛される製品作りを誇りにしています。(オフィスチェア 1 脚の価格は 700〜2,000 米ドルにもなりますが、それでも選ばれています)。顧客は Flokk の品質とデザインの価値が、オンライン注文を含む同社とのすべてのタッチポイントに現れてくることを期待しています。

Image of a rose colored office with green office chairs.

しかし、2019 年以前に Flokk が提供していた Web 体験は、最も合理的なものとは言えませんでした。静的なコンテンツが目に見えないところで顧客獲得の上での課題となっていました。さらに最近行った買収により、一貫性と管理にまつわる問題がさらに悪化しました。古い Web サイトのインフラはスケーラビリティが低く、ブランドや製品が加わることによって生じる新たな複雑さをカバーできず、その結果、カスタマージャーニーは不満が残るものとなっていました。また、Flokk にはオンラインでのセルフサービスのチャネルがありませんでした。

Flokk の E コマースマネージャーである Martina Winsell 氏は次のように説明しています。「私たちは、ディーラーと顧客の両方が当社の製品をオンラインで検索できると期待していることは知っていました。そしてどうすれば顧客がニーズに基づいて製品をカスタマイズできるのかを知りたいと思いました。当社の製品は非常に複雑なので、将来のあり方を考える際にはユーザビリティに注目することが重要でした。」

実のところ、E コマースプラットフォームの全面的な見直しは遅れていました。プロジェクトの目標は野心的でしたが、明確でした。それはセルフサービスのチャネルを新たに作り出し、付随する販売ツールの開発を可能にし、会社の製品ポートフォリオに合わせてスケールし、可能な限り最高の顧客体験を促進する共通のインフラを設計するというものでした。

物理的な製品の 3D ビジュアライゼーションを作るための基礎作り

Web に関する投資を決定し、次は信頼のおけるパートナーを探す作業を始めました。

Forte Digital は、テクノロジー、デザイン、戦略が交差する領域で、クライアントとの長期的なパートナーシップを通じて、デジタル製品やサービスを構築するコンサルティング会社です。そのポートフォリオには、Farmasiet(ノルウェー最大のオンライン薬局)、Nationaltheatret(世界的に有名な劇場)、Gyldendal Akademisk(大手学術出版社)、NorgesGruppen(ノルウェー最大の食品卸)など、さまざまな業界の企業が含まれています。

Forte Digital の分野をまたいだ専門知識は、顧客のために持続可能な価値を生み出すソリューションを構築するための核となっている要素です。このような専門性は、Flokk にとっても Forte Digital こそがその目標を達成するためのパートナーにふさわしいと考えさせるものでした。そして、実際に同社はパートナーに選ばれたのです。

プロジェクトの中心となったのは、Flokk の製品とその様々なバリエーションを正確に描写しつつ、顧客向け Web サイト、「Flokk Hub」と呼ばれる新しいディーラー向けツール、その他の販売・マーケティングツールなど、様々な Web プラットフォームに展開できる共通の製品ビジュアライゼーションインフラ(「Configurator」と呼ばれるもの)でした。

Green circle chart showing how to design the new website.

Flokk の目標であるスケーラビリティと効率性を考えると、Configurator を 3D ベースで構成することは理にかなっていました。例えば、すべてのチェアとその構成を捉えた写真をあらゆる角度から撮影して同じようなものを作ろうとすると、非常に大きな時間とコストがかかってしまうでしょう。

インフラを整えると、次は Flokk の製品を実際にバーチャル空間で表現するために、同社の作るチェアの素材をデジタル化するなどの作業を行うことになりました。

ArtEngine で素材をデジタル化する

Flokk の素材を、その見た目に忠実に正確な表現することが最も重要でした。そのため、スキャンワークフローを採用し、Flokk の何百ものチェアの素材のデジタルツインを作成することは理にかなっていました。他にも、ソフトウェアを使って素材をプロシージャルに(つまり、何もないところから)生成する方法や、パブリックな素材ライブラリからスキャンデータを購入する方法などがありました。しかし、本物感を出すためには、Flokk が実際に使っている素材をスキャンすることが唯一の方法でした。

具体的には、「フォトメトリックステレオ」と呼ばれるスキャンワークフローを使用することにしました。フォトメトリックステレオとは、さまざまな光の条件で撮影した複数の写真を用いて被写体の表面の特性を把握する技術です。フォトメトリックステレオを使用すると、従来のフラットベッドでも取得できるアルベド(色)だけでなく、法線(表面のレリーフパターン)、さらにはスペキュラーやラフネスなどのデータも抽出することができます。これらは業界標準フォーマットである PBR(物理ベースレンダリング)素材を作成するための重要な入力データとなります。

Gif of how unity lighting works

デジタル化する素材の数が多いため、チームはできるだけ自動化された一貫性のあるプロセスを必要としていました。Forte Digital の 3D アーティストである Piotr Bieryt 氏は、完全に自動化されたカスタムリグを構築し、ArtEngine でスキャンを処理することにしました。

prototype rig using laser-cut plywood and 3D-printed elements

レーザーカットされた合板と 3D プリントされたパーツを使ってリグを組み立てた後、Bieryt 氏は、色の変化や光の反射を防ぐために試作品の内部を黒いベロアで覆い、下からの照明で透明感を表現するために、底面に取り外し可能な黒いプレートを設置しました。そして、このリグは Arduino で制御できるように構成されました。

「物を組み立てたりプロセスを自動化するのは大好きなので、とても楽しい仕事でした!」と Bieryt 氏は言います。

Bieryt 氏は、Flokk の生地の細かい部分を撮影するために、オリンパスの 16 メガピクセルミラーレスカメラと 60mm のマクロレンズ(マイクロフォーサーズシステム)を使用し、ホワイトバランスと色を正確にするために RAW で撮影しました。カラーコレクションの後、Bieryt 氏は ArtEngine での作業を開始しました。

以下は、Bieryt 氏の ArtEngine での典型的なワークフローの概要です。

下の例では、Flokk のチェアに使われている半透明の生地の 10x10cm のスワッチをサンプルとして使用しました。素材をデジタル化する場合、透明度の高い部分があると別に透明度のチャンネルを追加しなければならず、作業は複雑になります。そこで Bieryt 氏は、生地を 2 回スキャンしました。つまり 1 回は側面から光を当てて(標準的なフォトメトリックステレオキャプチャプロセス)、もう 1 回は下から光を当てて(透明度をキャプチャ)スキャンしたのです。

ArtEngine にインポートした後、2 つの画像セットをそれぞれ Multi-Angle to Texture ノードに接続し、16 枚の画像を組み合わせて、アルベド、法線、透明度の 3 つのマップを作りました。

Image demonstrating the art engine texture node with albedo, normal, and transparent textures.

さらに、アルベドマップと法線マップの両方に Gradient Removal(Photoshop のハイパスフィルターに似た処理)を適用して、グラデーションが目に見える部分を除去し、タイル化しやすいようにしました。

Image showing a before and after of adding a texture gradient to speakers in ArtEngine
Image showing the process of merging textures in ArtEngine.

Compose Material を適用して 3 つのマップを 1 つのマテリアルに統合した後、Bieryt 氏は Pattern Unwarp を使用して、生地に自然に生じる歪みを補正しました。Bieryt 氏は「後処理の時間を短縮するためにちょっと時間をかけてサンプルをまっすぐにしてからスキャンすることに意味はありますが、ねじれを完璧に取り除けなくても気にすることはありません。ArtEngine には後から修正するための素晴らしいツールがあります」と述べています。

Image showing texture before pattern warp and after pattern warp in ArtEngine

その後、Crop を使ってまっすぐになったテクスチャを 1:1 のアスペクト比で切り出しました。下の画像はそのノードグラフを示したものです。

Image describing how the ArtEngine mutation structure works.

続けて使われた Mutation Structure はタイリングの品質をさらに向上させるためのノードで、パターンの構造はそのままに、繰り返されるパターンを AI が認識して排除します。

「Mutation Structure は ArtEngine の魔法のような機能です」と Bieryt 氏は言います。「この機能のおかげで、ソフトウェアやアルゴリズムと格闘することなく、スキャンの芸術的な側面にもっと集中できるようになりました。」

Image showing how ArtEngine's mutation structure changes the 3D model's appearance.
Image showing how to adjust output dimensions in ArtEngine.

ワールドスケールファクターや出力解像度など、いくつかのパラメーターを調整して、10×10cm のスキャンサンプルの 6 倍の大きさで、目立ったタイリングアーティファクトがない、高精細 8K テクスチャが完成しました。

Image showing the world scale, pattern map, and mutation structure settings in ArtEngine.

最後に Bieryt 氏は、Height GenerationRoughness / Gloss Generation を使ってハイトマップとラフネスマップを作成し、Compose Material ですべてをまとめ、完成版のテクスチャを簡単にエクスポートできるようにしました。

Image of the compose material process inside of ArtEngine.

下の画像は最終的にできたノードグラフを示したものです。

Final node graph of all the textures used by Bieryt and team in ArtEngine.

色が異なるだけの素材は 1 回だけスキャンされました。同じ構造の生地を複数色作成し、その素材をチェアの 3D モデルに適用して最終版をレンダリングする作業は、Blender Cycles を使って行われました。

Image showing a green office chair, blue office chair, and grey office chair
すべてを 1 つにまとめる

この変革が始まってから、Flokk はすでに目に見える成果を上げています。オンラインチェックアウトが国ごとに展開されたことで、同社の Web トラフィックは大幅に増加しました。また、ディーラーや顧客の満足度が向上し、ブランドロイヤリティや評判が高まりました。また、手動で注文を処理することでかかっていた間接費の削減にもつながっています。

どのように改善がなされたかを知るには、同社の顧客向け Web サイト Flokk.com を見ていただくのが一番でしょう。ユーザーは、興味のあるチェアを選択した後、ほぼすべての部分をカスタマイズすることができ、出来上がった構成を間近でさまざまな角度から見ることができます。また、オンラインで注文を確定する前に、ある部分を変更するための費用を把握することができます。

Image showing the new layout of the Flokk website
Image showing the updated chair textures created with ArtEngine

このプロジェクトは現在も進められており、Flokk は各国の Web サイトにおいてセルフサービス機能の拡充や、営業チームや顧客向けの新しいツールの導入を行っています。例えば、現在進められている取り組みの 1 つに、Configurator を活用した「ショールームモード」があります。これは、Flokk が世界中に持つショールームの iPad にインストールされるアプリで、顧客が店頭で Flokk の製品について簡単に調べ、その場で注文までできるようにするものです。

より広く言えば、この仕事は、顧客体験に投資することや、顧客がオンラインに慣れ、Web やアプリで購買を行うようになってきたことによる嗜好の変化に適応することの重要性を Flokk 全体に示すものとなりました。Flokk は、エンドツーエンドのユーザージャーニーへの投資が遅れがちな家具製造業のような業界において、競争に勝つために非常に有利な立場にいることは確実です。Flokk は、顧客体験を常に最優先に考えて投資を行うという選択を行ったことで、今後の成功につながる持続可能な競争力を獲得したのです。

Simulation of Flokk chairs in a glass walled room looking out to mountains