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

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

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

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

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

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

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

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

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

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

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

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

マップを自由に探索

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考事例

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

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

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

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

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

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

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

正興電機製作所のコーポレートサイトに、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で設備などを設置。アニメーションさせています。