【簡単シミュレーターとは】

パネル方式を採用し、様々なオプションの組み合わせが可能な三協フロンテア様のモバイルスペース。

本体の色、壁・窓・ドア、その他オプションを選ぶだけでお客様の理想の空間をカタチにできます。
そのモバイルスペースのパーツの組み合わせを、スマホから簡単にシミュレーションでき、その結果を見積もりに出力したり、AR表示もできるシステムが「簡単シミュレーター」です。

【簡単につくれる・見れる「だれでもシミュレータ」の機能を採用】

有限会社エージーワークスは「だれでもシミュレータ」をベースに、モバイルスペースという製品の持つ特長に合わせカスタマイズ開発を行いました。
今回のカスタマイズ開発では、だれでもシミュレータの「ウェブ上で3Dデータの登録および管理ができるシステム」「登録データを自動でAR化」など、基本の機能はそのままに、主にUIのカスタマイズを行うことで、モバイルスペースの製品特長に合わせた3Dシミュレーターを、短納期で開発・リリースいたしました。

3分でできる！簡単シミュレータ
https://www.sankyofrontier.com/light_simulator/

ー

開発結果：結果として、こんな状態が解消されました

三協フロンテア様には、もともと莫大な費用をかけて開発された高機能なシミュレータが存在していました。

ただその一方で、

• 操作が複雑で、使いこなせる人が限られる
• 詳しい営業担当者や、本気で検討している一部の顧客しか使わない
• Webからの集客や、初期検討フェーズでは活用しづらい

という課題も抱えていました。

今回開発した「簡単シミュレータ」は、既存の高機能シミュレータを置き換えるものではなく、検討の入口に立つ人のための“間口を広げる仕組み”として位置づけられています。

その結果、お客様は「難しい前提知識がなくても、自分の条件で大まかなイメージを掴める」ようになり、営業担当者は「説明の前に、理解度を揃える」という役割をWebに任せられるようになりました。

結果として、

・高度すぎて使われなかった既存シミュレータとの役割分担が明確になり
・Webからの流入ユーザーを無理なく検討フェーズに乗せられ
・「詳しい人だけが使うツール」から「誰でも触れる入口」へ

という状態が作られています。

ー

「詳しい人しか使えない仕組み」を、「誰でも触れる入口」に翻訳する。

こうした考え方で進めた事例があります。

こんなところにDIC
― 情報が多すぎて、たどり着けなかったケース

高畠ワイナリー ワインデータベース開発
― 専門的な情報を、楽しめる体験に翻訳したケース

ー

DIC株式会社様の「こんなところに！DIC」ページの開発を担当しました。
化学メーカーが持つ製品や技術は、私たちの生活のさまざまな場面で使われています。
一方で、製品や技術そのものを説明しようとすると、専門用語や情報量が多くなり、初めて訪れた人にとっては「自分に関係する情報がどこにあるのか」が分かりにくくなります。

そこで今回は、製品や技術そのものではなく、「暮らしの中の場面」を入口にするインタラクティブイラストマップとして設計・開発しました。

イラストの中を自由に見渡しながら、気になる場所を選ぶ。
そこから、その場所で使われている製品や技術へアクセスする。
複雑な情報を、「探して読む」から「触って見つける」体験へ変換した事例です。

情報量を減らすのではなく、「入口」を変える

DIC様が持つ製品・技術情報は非常に多く、専門性も高いものです。
すべてを一覧で見せようとすると、情報量そのものがユーザーにとってのハードルになります。
そこで、

「製品を探してください」ではなく、

「あなたの身近な場所から探してみてください」という入口をつくりました。

生活シーンを描いたイラストマップの中から、ユーザーが興味のある場所を選択。
そこから関連する製品や技術へ自然に移動できる構造としています。

専門的な情報を単純化するのではなく、ユーザーが理解しやすい順番に並べ替える。

これが今回のインタラクティブマップの設計思想です。

「見る」だけではなく、「触って探せる」マップに

今回のマップは、単なるイラストではありません。
画面の中に配置されたキャラクターや乗り物などをアニメーションさせ、ユーザーが触れながら探索できるインタラクティブコンテンツとして実装しています。

マップを自由に探索

マウスやタッチ操作による拡大・縮小、パン操作に対応。
広いイラストの中から、興味のある場所を自分で探すことができます。

イラストそのものをインターフェースに

キャラクターや建物、乗り物などのイラストを単なる装飾として扱うのではなく、情報への入口として設計。

「どこをクリックすればいいのか」を説明する前に、見れば触りたくなるUIを目指しました。

PCからスマートフォンまで

PCだけでなく、スマートフォン・タブレットでも利用できるようレスポンシブに対応。
タッチ操作でもマップを拡大・縮小しながら探索できます。

公開後も、情報を更新しやすい仕組みに

インタラクティブコンテンツは、公開した瞬間が完成ではありません。
製品情報が変わる。
新しい情報が追加される。
リンク先が変更される。

企業サイトとして長く利用していくためには、制作時の表現だけでなく、公開後にどのように運用・更新していくかまで考える必要があります。

今回のコンテンツも、公開後の運用を考慮し、情報を更新しやすい仕組みとして設計・開発しています。

インタラクティブな表現を維持しながら、必要な情報を運用側で変更・追加しやすくすることで、「作って終わり」ではないWebコンテンツを目指しました。

複雑な情報を、「分かる形」に翻訳する

今回の開発で重要だったのは、イラストを動かすことだけではありません。

化学メーカーが持つ専門性の高い情報を、ユーザーが自然に理解できる導線へ変換すること。そのために、

専門的な情報
↓
生活シーン
↓
興味のある場所
↓
関連する製品・技術

という順番で情報へたどり着ける構造をつくりました。
情報そのものを簡単にするのではなく、情報への入り方を変える。
これもWebコンテンツを開発する上で重要な設計だと考えています。

インタラクティブコンテンツは、「見せ方」まで設計する

Web上で動くコンテンツは、単にアニメーションを追加すれば成立するものではありません。
どこを動かすのか。
どこを触れるようにするのか。
どの情報をどの順番で見せるのか。
PCとスマートフォンで、どう操作方法を変えるのか。
そして、複雑な情報をどうすればユーザーに理解してもらえるのか。

AgWORKSでは、情報設計・UI・フロントエンド実装までを一体で考え、インタラクティブなWebコンテンツを開発しています。

「詳しい人しか使えない仕組み」を、「誰でも触れる入口」に翻訳する。

AgWORKSでは、専門的な情報や複雑な仕組みを、そのままユーザーに渡すのではなく、Web上で触れながら理解できる体験へ変換する開発を行っています。

参考事例

三協フロンテア｜簡単シミュレータ
「詳しい人だけが使うツール」から「誰でも触れる入口」へ。

高畠ワイナリー｜ワインデータベース開発
専門的な情報を、楽しみながら探索できる体験へ。

複雑な仕様でも、まずはご相談ください。

「こういうことはWebでできるのか？」そんな段階からでも構いません。

AgWORKSでは、企画・情報設計からUI、フロントエンド、インタラクション、システム実装まで、技術的な検証を含めて一緒に考えます。

技術的に難しい仕様も、まずはご相談ください。

お問い合わせ・ご相談はこちら

「だれでもシミュレータ」が株式会社サザビーリーグ　エーアンドエスカンパニー様のカスタムオーダーツールに採用。

株式会社サザビーリーグ　エーアンドエスカンパニー様のジュエリーブランド、「LAMBDA」の3Dカスタムオーダーツールに「だれでもシミュレータ」のシステムを採用いただきました。

LAMBDA（ラムダ）
https://l-ambda.com/

LAMBDA（ラムダ）とは

株式会社サザビーリーグ　エーアンドエスカンパニーが運営するジュエリーブランド。
“PLAY FREEDOM (自由を遊べ。)” というブランドメッセージを掲げ、有限な資源を無限のクリエイティブで追及し、性別や年齢の枠を超えボーダーレスなジュエリーを展開。
カスタマイズバリエーションは数億通りに及び、右に倣うことなく着用する人の個性を最大限に活かし、永く使えるジュエリーを提案。 

「だれでもシミュレータ」をジュエリーのオーダーツール専用にカスタマイズ

自分だけのジュエリーが作れるLAMBDA、その3Dカスタムオーダーツールに「だれでもシミュレータ」システムを使用。UIや在庫システムとの連携など、LAMBDA専用の機能をカスタマイズ開発し、専用システムとしてご利用いただいています。

ジュエリーパーツの3Dパーツ制作・登録

各パーツのバリエーションを、3D形状データ・マテリアルデータの他、詳細情報などを管理画面から登録して構築。運用に必要な付随データも登録しています。
また、シミュレータに使う3DパーツはAgWORKS https://www.ag-works.com/ で制作。デザインをベースに3Dデータ化いたしました。

だれでもシミュレータの機能を活用

だれでもシミュレータの「自由に組み合わせられる3Dカスタマイズ機能」以外にも、標準搭載の機能を最大限活用。

3Dコンフィギュレーション機能

ブレスレット、ネックレスの各パーツを自由に選択できます。
変えたい箇所を選ぶと該当箇所がハイライト。お好きなパーツを選択し、カスタマイズを行います。UIはLAMBDA ORDER TOOL専用のデザインになっています。

シェア機能
気に入った組み合わせは、URLやQRコードで簡単にシェアできます。
例えば組み合わせの候補をいくつか検討し、それをお友達などにURL、QRコードをシェアも可能です。

スマホやタブレットで体験。AR表示

カスタマイズした内容は3Dで見るだけでなく、ARで仮想体験できます。
「この組み合わせだと実際どんな感じだろう？」
「大きさはどんな感じかな？」といった体験を、スマホやタブレットで簡単に行えます。

画像保存機能
考え抜いた組み合わせを、画像で残せる画像保存機能。
組み合わせた画面をそのまま画像として保存できます。
自分のお気に入りを、好きなだけ保存しましょう。

豊富なパーツで無限のバリエーションから自分だけのジュエリーが作れる株式会社サザビーリーグ　エーアンドエスカンパニー様の「LAMBDA（ラムダ）」。
「だれでもシミュレータ」のシステムで是非3Dカスタムオーダーをお楽しみください。

LAMBDA（ラムダ）
https://l-ambda.com/

https://3d-simulator.com/?uid=comany&n=1&s=067067067067068004011

Xis-Frameとは
オフィスなどに自由に「空間」を設置できる製品。
基本となるフレーム間に、オプションパーツを自由に組み合わせられ、また、カラーや素材も自由に選べる製品になっています。

3Dパーツ制作し「だれでもシミュレータ」で構築
その組み合わせを自由に行えるシミュレータをAgWORKSで制作しました。
シミュレータに使う3Dパーツを弊社で制作、製品の各部位のカラーやオプションパーツが自由に選べるシミュレータシステムには「だれでもシミュレータ」を使用しています。

自由に組み合わせた結果をそのままAR表示、スマホVRでもご覧いただけます。

スマホVRでも表示できます。

Xis-Frameについてくわしくはこちらから

コミュニケーションプレイス Xis-Frame
https://www.comany.co.jp/products/lineup/xis-frame/

正興電機製作所のコーポレートサイトに、3Dイラストマップを使ったWebコンテンツ「暮らしと正興電機」を制作しました。

電気や社会インフラに関わるさまざまな事業が、私たちの暮らしのどこで役立っているのか。

それを文章や写真だけで説明するのではなく、ひとつの街を3Dのイラストマップとして描き、その中を見て回りながら知ることができるコンテンツにしています。

街を眺めながら、正興電機の仕事を知る

「正興電機が、暮らしの中でどんな仕事をしているのか」

企業の事業内容を言葉だけで説明すると、どうしても難しくなります。

そこで、暮らしの中にあるさまざまな場所や場面をひとつの街として描きました。

街を眺めながら気になる場所を探す。
建物や施設に近づく。
そこにある情報を見つける。

そんなふうに、街を歩くような感覚で正興電機の事業や取り組みを知ることができます。

360°動かして、街を見てみる

このマップは、1枚のイラストを見るだけのコンテンツではありません。

マウスやタッチ操作で視点を動かし、360°さまざまな方向から街を見ることができます。

上から街全体を眺めたり、気になる場所に近づいたり。

視点を自由に動かすことで、ひとつの画面の中に広がる街を、自分のペースで見て回ることができます。

街の中に、動きと情報を仕掛ける

3Dで描かれた街には、さまざまなアニメーションを取り入れています。

街の中で人や車などが動き、静止画のイラストでは感じにくい「暮らしている街」の雰囲気を表現しています。

さらに、場所や建物を選ぶことで、そこに関連する詳しい情報を見ることもできます。

街を眺めるだけではなく、動かして、探して、見つける。

企業情報を一方的に読ませるのではなく、ユーザー自身が興味のあるところから情報に出会えるWebコンテンツにしました。

企業紹介を、ひとつの「体験」にする

企業のWebサイトでは、事業内容やサービスを文章や写真で紹介することが一般的です。

このコンテンツでは、それを3Dのイラストマップに置き換えました。

「この会社は何をしているのか」を説明するのではなく、
「この街のどこに関わっているのだろう？」

と、ユーザー自身が探しながら知っていく。

3Dイラストマップを使うことで、企業の事業と暮らしとのつながりを、ひとつのWeb体験として表現しています。

AgWORKSが開発

正興電機製作所のコーポレートサイト内コンテンツとして、3Dイラストマップを制作しました。

3D空間の構築だけでなく、360°の視点操作、マップ内のアニメーション、場所ごとの情報表示など、Webブラウザ上で操作できるインタラクティブなコンテンツとして開発しています。

3Dシミュレータのように商品を操作するだけでなく、イラストやマップそのものを3D化することで、企業紹介や情報発信にもWeb3Dを活用できます。

子どもたちが描いた絵を、もっと多くの人に見てもらいたい。

花王がCSR活動の一環として開催していた「こども環境絵画コンテスト」。

その作品を展示するリアルなイベントが、新型コロナウイルスの影響で開催できなくなったことをきっかけに、Web上で楽しめる「こども環境絵画ミュージアム」を開発しました。

ただ作品を並べるだけではなく、3Dでつくられたミュージアムの中を歩きながら、子どもたちの作品を見て回れるバーチャル空間です。

絵を見るために、ミュージアムを歩く

画面に作品を一覧表示するだけなら、もっと簡単な方法があります。

このミュージアムでは、あえて3D空間をつくりました。

建物の中に入り、展示されている作品を探しながら進んでいく。

気になる作品を見つけたら、近づいてじっくり見る。

リアルな美術館と同じように、空間を移動しながら作品に出会えるようにしています。

子どもが楽しめる「場所」をつくる

今回のミュージアムでは、作品を展示するだけでなく、空間そのものも楽しめるようにデザインしています。

イラスト調の3Dでつくられた明るく親しみやすい空間。

ミュージアムの中に流れるBGM。

そして、難しい操作を覚えなくても歩き回れるシンプルな操作。

「3Dだからすごいものを作る」のではなく、子どもたちが迷わず楽しめることを優先して、空間と操作を設計しました。

リアルな展示会を、そのまま再現するのではなく

Web3Dで展示空間をつくるからといって、現実の美術館を忠実に再現する必要はありません。

Webだからこそ、時間や場所を選ばずに作品を見ることができます。

会場まで行けなくても、PCやスマートフォンから展示を見ることができる。

リアルな展示会の代わりとして始まったプロジェクトでしたが、Web上だからこそできる新しい作品鑑賞の形にもつながりました。

Web3Dで、展示の場所をつくる

「こども環境絵画ミュージアム」は、Webブラウザの中につくられた小さな美術館です。

作品を並べるだけではなく、空間を歩き、音を聴き、作品を探しながら楽しむ。

Web3Dを使うことで、Webサイトの中に「場所」をつくることができます。

バーチャルミュージアムだけでなく、企業の展示会、ショールーム、イベント会場など、実際の場所をWeb上に展開することも可能です。

AgWORKSが開発

花王「こども環境絵画ミュージアム」のWeb3Dコンテンツを開発しました。

イラスト調の3D空間を構築し、ブラウザ上で自由に移動しながら展示作品を閲覧できる仕組みを実装。

子どもでも楽しめるよう、空間デザインやBGM、操作方法まで含めて、Web上での体験全体を設計しています。

Web3Dは、商品シミュレータだけのものではありません。

展示会やミュージアムのような「空間そのものを楽しんでもらうコンテンツ」にも活用できます。

株式会社ラヴォックス様の事業領域をWebGLを使用して3Dイラストレーション化いたしました。

https://www.loveox.co.jp/company/#belief

修理実績として関わる事業を3D化。
あらゆる事業に関わっている事を3Dで伝えています。
イラストマップを3D化し、その中に細かい3Dで設備などを設置。アニメーションさせています。