インタラクティブマップ制作事例｜化学メーカーの製品をわかりやすく伝えるWebコンテンツ

AgWORKS Limited — Tue, 30 Apr 2024 09:18:27 +0000

DIC株式会社様の「こんなところに！DIC」ページの開発を担当いたしました。

本事例は、化学メーカーの製品や技術を「生活とのつながり」で直感的に伝える
インタラクティブイラストマップの制作事例です。

複雑で専門的な情報を、誰でも理解できる形に整理し、
Web上で触って理解できるコンテンツとして設計・開発しています。

【インタラクション】

・イラストマップ内のキャラクターや乗り物をアニメーション化.
・マウスやタッチ操作で自由にマップを拡大縮小できます。

【レスポンシブ対応】

・スマートフォン / タブレット対応対応。
・マップの拡大縮小・パン操作に対応.

ー

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

DIC様が持つ技術や製品情報は非常に多く、専門性も高いため、従来は「どこを見れば自分に関係する情報にたどり着けるのか分からない」という状態が起きやすくなっていました。

特に、初めてサイトを訪れる人や、素材・技術に詳しくない検討者にとっては、情報量そのものがハードルになってしまう場面もありました。

そこで、「生活シーンから入る導線」を設計し、製品と用途の関係をイラストマップ上で可視化しました。

ユーザーは直感的に興味のある場所を選び、関連する技術や製品情報にアクセスできます。

結果として、
・情報が多すぎて伝わらない状態を解消
・初見ユーザーでも迷わず情報に到達
・理解が進んだ状態で問い合わせにつながる構造を実現
といった、大規模サイト特有の“届かない問題”が解消されています。

ー

インタラクティブイラストマップ制作について

・製品と生活の関係をわかりやすく伝えたい
・複雑な事業構造を整理したい
・初見ユーザーにも理解されるサイトにしたい

このような課題に対して、
インタラクティブマップという形で解決します。

ー

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

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

ー

花王こども環境絵画ミュージアム

AgWORKS Limited — Wed, 14 Apr 2021 01:16:57 +0000

花王様のこども環境絵画ミュージアムを開発いたしました。
イラスト調の3Dで作られたバーチャル空間を自由にウォークスルーして展示作品の閲覧を楽しめます。

AgWORKS Limited — Fri, 17 Apr 2020 07:02:54 +0000

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

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

AgWORKS Limited — Thu, 20 Dec 2018 07:08:51 +0000

株式会社正興電機製作所様のコーポレートウェブサイト内、「暮らしと正興電機」のWEB3Dイラストマップを制作いたしました。
暮らしの中にどのように関わっているか、3Dでフィールドを作成し、360度自由に回転してみられるマップにしています。