B2B VR ハードウェア・Web サイトのプランニング & アートディレクション

技術の理解から購入までを、一つの体験に。

Webサイトの情報構造と購入フローを企画し、製品内部のセンサーまで伝わるよう撮影をディレクションしました。

私の役割
Webサイト企画・デザイン
情報設計 · 購入フロー
製品撮影のアートディレクション
期間
2019年11月~2020年1月
チーム
プロダクトマネージャー · プロダクトデザイナー
フロントエンド開発者・バックエンド開発者

企画上の判断

技術の説明、購入、撮影をつなぐ3つの判断。

01 / インフォメーション

技術を理解できる情報構成に。

EEG(脳波)と視線追跡の機能を説明するため、Product・Science・Analyticsのコンテンツを構成しました。

02 / 購入

購入手順と注文状況を明確に。

購入画面を企画し、注文受付から配達完了までの進行状況を確認できるようにしました。

03 / 撮影

撮影方法を工夫し、内部センサーを見せる。

360°撮影で外観と内部センサーを捉え、スライダーで見せる表現を検討しました。

VR製品のWebサイトデザイン
EEGと視線追跡を組み合わせたVR機器のWebサイトデザイン。

背景と目的

B2Bの購入者が、技術と購入手順を理解できるように。

EEGと視線追跡を組み合わせたB2B向けVR機器の紹介サイトです。技術的な特徴を伝え、購入までの流れをわかりやすくすることが目標でした。

担当範囲

情報構造と購入フローの企画、UIデザイン、製品撮影のアートディレクションを担当しました。Webサイトのビジュアル方針は、販促物やパッケージにも展開しました。

情報設計、購入画面、注文状況の案内、撮影での判断と、その具体化の過程を紹介します。

01 / 担当範囲と成果物

企画を、画面と撮影成果物に落とし込む。

技術コンテンツ、購入体験、製品撮影の3領域を担当し、それぞれの目的に沿った画面とビジュアルを制作しました。

技術コンテンツ

Product・Science・Analyticsの情報構造と優先順位。

購入体験

デスクトップ・モバイルUI、購入画面、4段階の注文状況表示。

製品撮影とビジュアル

360°撮影、スライダー表現の検討、販促物・パッケージデザイン。

02 / 情報設計

技術コンテンツを、目的ごとに整理する。

問題
B2Bの購入者に、機器の技術的な特徴と科学的な原理を伝える必要がありました。
判断
Product・Science・Analyticsを分け、EEGと視線追跡に関する情報の優先順位を整理しました。
画面への反映
トップでは製品画像で機器を紹介し、購入への導線を配置。技術情報にはナビゲーションからアクセスできる構成にしました。
製品紹介、技術コンテンツのメニュー、購入ボタンを配置したトップ画面
トップ画面:製品紹介、技術コンテンツのメニュー、購入への導線。

03 / 購入フローと注文状況

製品選択から配達完了までをつなぐ。

問題
購入者が注文を行い、その後の進行状況も確認できる必要がありました。
判断
購入画面を企画し、注文状況を「受付済み → 準備中 → 配送中 → 配達完了」の4段階に分けました。
画面への反映
製品と数量の選択から決済へ進む構成にしました。決済画面では請求先、配送先、支払い情報、注文内容を分けて表示しています。
モバイル対応
モバイルでも製品情報と注文状況を確認できるUIを設計しました。
製品と数量を選ぶ購入画面
購入画面:製品と数量の選択。
請求先・配送先・支払い情報と注文内容を確認する決済画面
決済画面:顧客情報と注文内容。
01・注文受付中02・準備中03 · 配送中04 · 配達完了

当時のプロジェクト記録をもとに整理した注文状況の流れです。

04 / 撮影企画とアートディレクション

外観写真では伝わらない、内部センサーまで見せる。

問題
一般的な正面写真だけでは、視線追跡機構や内部センサーを十分に見せられませんでした。これらを伝えることは、クライアントの要望でもありました。
判断
機器をさまざまな角度から見せるため、専門スタジオでの360°撮影を選びました。
Webサイトでの表現
購入前に機器を詳しく確認できるよう、外観から内部センサーへ移るスライダー表現を検討しました。
実行
Webサイトでの見せ方を踏まえ、撮影をディレクションしました。
さまざまな角度から機器を見せる回転画像
外観と内部センサーを見せる製品画像。
VR製品のスタジオ撮影
専門スタジオでの製品撮影。

関連する制作物

Webサイトのビジュアル方針を販促物とパッケージへ。

Webサイトとあわせて販促物とパッケージを制作し、製品の印象を統一しました。

製品パッケージデザイン製品パッケージの詳細
パッケージ全体の構成
プロジェクトの販促デザイン販促デザインの詳細

Output / Result · 成果物と結果

技術の説明、購入フロー、製品画像を一つの体験に。

ウェブサイトの企画・デザイン

Product・Science・Analyticsの情報構造、デスクトップ・モバイルUI、購入画面、4段階の注文状況表示。

製品撮影のアートディレクション

外観と内部センサーを伝える360°製品撮影。Webサイト用のスライダー表現も検討しました。

販促物・パッケージ

Webサイトのビジュアル方針を引き継ぐ販促物とパッケージデザイン。

プロジェクトの成果
Webサイト企画、UIデザイン、撮影のディレクションを通じて、技術の説明と購入体験をつなぎました。製品写真、販促物、パッケージにも同じビジュアル方針を適用しました。