高畠ワイナリー様のワインデータベースを開発しました。

高畠ワイナリーのワインを、種別や品種、ブランドやビンテージなどから検索できるシステムになっています。

購入可能の商品は自動でECサイトへのリンクを表示。検索結果からそのまま購入も可能です。

また受賞歴からの検索や、認証情報の表示なども行なっています。

ー

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

高畠ワイナリー様では、多くのワイン情報や受賞歴、詳細なデータを保有していましたが、それらは主に業界関係者や詳しい人向けの文脈で整理されており、一般の来訪者にとっては少し距離のある情報になっていました。

そのため、

・ワインに興味はあるが、何を基準に見ればいいか分からない
・情報量は多いのに、楽しさや選びやすさにつながらない
・滞在時間が短く、記憶に残りにくい

といった状態が起きやすくなっていました。

今回のワインデータベース開発では、専門的なデータをそのまま並べるのではなく、
「知識がなくても、自然に辿り着ける導線」を重視しています。

その結果、

来訪者は
「詳しくなくても、自分の好みや関心からワインを探せる」ようになり、
ワイナリー側としても
「情報を説明する場」から「体験として伝える場」へと役割を広げることができました。

結果として、

・専門知識がないと楽しめなかった情報構造
・情報はあるのに、選ぶ体験につながらない状態
・初めて訪れた人が置いていかれてしまう導線

といった、“分かる人だけのサイト”になってしまう課題が解消されています。

ー

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

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

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

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

ー

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

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

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

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

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

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

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

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

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

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

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

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

マップを自由に探索

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考事例

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

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

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

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

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

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

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

ニッコー株式会社様のバスルームブランド「BAINCOUTURE」のウェブサイトをリニューアルいたしました。

3Dデータを使って、自社の商品シミュレータをつくる。

そんな仕組みそのものを、Webサービスとして開発したのが「だれでもシミュレータ」です。

商品の色や素材を変えたり、パーツを組み合わせたり。
3Dで商品の完成イメージを確認しながら、ユーザー自身が商品を選べるシミュレータを、Webブラウザ上で構築できます。

AgWORKSがこれまで培ってきたWebGL・3Dシステム開発の知見を、ひとつのサービスとして形にしました。

3Dシミュレータを「つくる仕組み」そのものを開発

3Dシミュレータを一つ開発するだけなら、その商品のためのシステムを作れば完成します。

「だれでもシミュレータ」は、そこから一歩進んだ考え方で開発しています。

商品ごとに異なる3Dデータや選択項目を登録し、Web上で商品のシミュレーションを構築できる。

つまり、ひとつのシミュレータを作るのではなく、シミュレータを作るための仕組みそのものをWebサービスにしています。

商品の3Dデータから、シミュレータへ

3Dモデルを登録し、商品の構成や選択肢を設定する。

すると、ユーザーがWebブラウザから商品を操作し、色や素材、パーツなどを切り替えながら完成イメージを確認できるシミュレータとして公開できます。

商品の種類や組み合わせ方に合わせて、さまざまなシミュレーションを構築できるようにしています。

「見る」から「選ぶ」へ

商品を写真で見るだけではなく、実際に触ってみる。

色を変えてみる。
パーツを付け替えてみる。
別の組み合わせを試してみる。

3Dシミュレータなら、商品の検討そのものをWeb上の体験に変えることができます。

さらに、シミュレーションした結果を画像として保存したり、共有したり、見積もりにつなげたりすることもできます。

3Dを表示するだけではなく、商品を選ぶためのWebシステムとして使えることを目指しています。

実際の商品シミュレータにも使われています

「だれでもシミュレータ」は、単なる技術デモではありません。

実際の商品を使ったシミュレータを構築し、Web上で運用することを前提に開発しています。

商品の選択、3D表示、組み合わせ、画像保存、見積もりなど、実際の販売や営業で必要になる機能を組み込めるようにしています。

これまでAgWORKSが開発してきた3Dシミュレータの経験を、サービスとして蓄積しているのも特徴です。

AgWORKSが開発・運用

「だれでもシミュレータ」は、AgWORKSが企画・設計・開発し、現在も運用しているWebサービスです。

3DモデルをWebブラウザ上で表示するだけではなく、3Dデータの管理、商品の組み合わせ、シミュレーションの設定、ユーザーが操作する画面まで、3DシミュレータをWebサービスとして成立させるための仕組みを開発しています。

WebGLを使ったコンテンツを制作するだけではなく、実際に使われるWeb3Dサービスそのものを開発・運用している。

それが「だれでもシミュレータ」という開発事例です。

Web3Dを、商品やサービスの中へ

Web3Dは、特別なデモコンテンツのためだけの技術ではありません。

商品を見せる。
商品を選んでもらう。
組み合わせを試してもらう。
営業や問い合わせにつなげる。

WebサイトやWebサービスの中に3Dを組み込むことで、これまで写真や文章だけでは伝えにくかった商品の魅力を、実際に触れる体験として届けることができます。

AgWORKSでは、既存のWebサイトやサービスへの3D組み込みから、3Dシミュレータそのものの開発まで、用途に合わせたWeb3D開発を行っています。