Project

トヨタ自動車ウェブサイトの車種ページは、トヨタ自動車が販売する全ての車の情報が掲載されており、ユーザーは様々な目的を持ってサイトを訪れます。

こうしたサイトでは、目的の異なるユーザーが必要とする情報へ的確にアクセスできるよう、それぞれのユーザーが持っているモチベーションに沿って整理、構造化されていることと、企業がユーザーに伝えたいと思っている度合いに応じて情報をユーザーに届ける構成を両立させる必要があります。それを実現するために、「toyota.jp」の車種ページではフォーマットリニューアルが行われました。

コパイロツトは、そのリニューアル方針の策定をはじめ、サイト構成の設計や制作を担当し、制作後の運用効率を考慮したデザインガイドライン策定のサポートなども担当しました。

調査結果から考えるユーザーの「見える化」

まずは、ユーザーが求めている情報を把握、分類するために、ユーザーアクションフローを調査しました。過去にクライアントが行ってきた対面でのユーザーインタビュー、行動観察、アクセス解析などの調査結果をベースに、ページごとの目的を明確化するためのディスカッション、ワークショップをプロジェクトチームメンバーで実施しました。「ユーザーが求めている情報は何か？」「それらをどのような順番で入手しようとするのか」という観点で、それらの結論を分類、可視化し、仮説を組み立てて行きました。

事実とそれに基づく仮説から、変えるべきポイントを明確化し、リニューアル方針として定義しました。

「ユーザーの迷いをなくす」「伝えたい情報を届ける」サイト構成とフォーマット

そうして定義したリニューアル方針を踏まえ、各々のページはどうあるべきか？どう機能すべきか？をサイト全体やページの具体的な構成に落とし込み、設計を進めていきました。

本サイトは実に様々な思いを持ったユーザーが様々な目的で訪問しており、限定的な誰かにフォーカスした作りではなく、幅広い層に気持ちよく使っていただける設計である必要がありました。そのため、サイト全体の回遊性を前提にした作りではなく、ユーザーの知識やニーズに応じて必要な情報を必要なだけ入手でき、どの段階においても次のアクションに移ることのできるような、ページ単位でも機能するような作りを採用しました。

また、フォーマットリニューアルを行う上では、あえてフォーマット化しない部分を残しています。車によってターゲットもブランディングも異なることから、ユーザーが重点的に知りたい情報は車種ごとに異なります。すべてを決めてしまわずに自由な形式で表現できる部分を余白として残すことで、かえって多様なニーズに応えることができるのです。

「様々なコストを下げる」ためのデザインガイドライン刷新

リニューアルに合わせて、デザインガイドラインを刷新するお手伝いもしました。 デザインガイドラインを準拠するメリットは様々ありますが、サイトを運用していく中で一番大きいのは関係各社の時間、労力、お金の面のコストの削減につながることでしょう。 ただ、「toyota.jp」のように仕様が頻繁に変わるサイトでは、ともすると制作ガイドラインの存在感が薄れがちになります。

そこで、まずはガイドラインの意義を定義することから着手しました。 一般的なガイドラインの調査と、あるべきガイドライン像から、網羅する範囲や作成にあたっての考え方を決定しました。 さらに現行のガイドライン内容の必要、不必要の精査、新たに追加することを検討し、一つ一つ地道に規定。作って終わりではなく、まめに更新、変更し、運用し続けることに価値を置き、ブラウザ上で規定する形態をとりました。

Output デザインガイドライン、ウェブサイト

Scope プロデュース、ディレクション、プロジェクトマネジメント

Credit トヨタ自動車株式会社 (Client) 株式会社デルフィス / 株式会社デルフィス・インタラクティブ (Agency, Account Executive, Produce)

COPILOT Inc. 船橋 友久 (Produce) 真野 剛彦 (Project Management, Web Direction) 奥山 真広 (Project Management, Web Direction) 越川 英宣 (Project Management, Web Direction) 高橋 悟志 (Knowledge Management)

SHIFTBRAIN Inc. 町田 大樹 (Project Management) 及川 昇 (Art Direction, Design) 羅 明 (Design) 鈴木 丈 (Technical Direction, Front-end Development) 安田 祐平 (Front-end Development) マルコ・ソラッツィ  (Front-end Development)