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

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

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

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

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

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

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

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

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

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

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

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

マップを自由に探索

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考事例

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

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

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

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

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

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

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

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

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

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