Works

コンテンツ開発から導線設計、ブランド表現まで
多岐に渡ったUX/UIリニューアル

公開から10年が経過したサービスサイトを抜本的リニューアル。200ページ規模のサイトだったため、クオリティと効率を両立させるプロジェクト進行も課題となりました。

Keywords
  • UXデザイン
Project

LEXUS FINANCIAL SERVICES サイト フルリニューアル / デザインガイドライン制作

https://lexus-fs.jp/
Clients

トヨタファイナンス株式会社 / トヨタ・コニック・プロ株式会社

Released

背景

レクサスオーナーだけが入会できるレクサスカードのサービス紹介や、入会訴求を目的としたサイト。

リニューアル前は印刷物のサービスガイドに沿った作りになっており、トヨタファイナンスが推進しているデジタル変革への取り組みから、当サイトにおいてもデジタルコミュニケーション基盤として、ユーザーがより使いやすいサイトへの変革が求められていました。

コンテンツの拡張やエフォートレスな導線設計、スマートフォンへの最適化などは勿論のこと、レクサスサイト(https://lexus.jp/)とひとつなぎの体験を目指し、フルリニューアルプロジェクトが始動しました。

イメージ:背景

設定した課題

サイトの目的に沿った情報整理

レクサス購入検討者を対象とした入会訴求、すでにカードを保有しているお客様に向けたサービス内容および利用方法の紹介。これらを棲み分けながら情報およびユーザー体験の整理を行い、サイト構造を変更

スマートフォン利用への最適化

ページ遷移や階層移動を極力減らしたアプリライクな設計に変更

レクサスブランドとの連携

レクサスサイトとのデザイン連携や、レクサスVIガイドラインを厳守したデザイン開発を行うことで、ブランド体験を統一

イメージ:スマートフォン利用への最適化イメージ:サイトの目的に沿った情報整理

具現化プロセス

リニューアル前のページ数は200ページ程度。まずは移行すべき情報を精査しながら、ページ統合やふさわしいカテゴライズの検討から始めました。情報を整理したことで、カードの魅力を伝えるコンテンツや法人カード情報など、新たに追加作成すべきページも明確化しました。

開発スケジュールの都合上「画面構成→デザイン→CMS要件定義」といった完全なウォーターフォール型進行が難しく、各プロセスを並行して進めたり、予測や仮説をもとに先んじて進めるなど、イレギュラーな進行をとる必要がありました。緻密なプロジェクトマネジメントとディレクション、また経験値の高い制作スタッフによる細かな連携のもと進めていきました。

情報設計/画面構成/ライティング

ページ数が多く、またクライアント確認の必要日数が多かったため、全体を複数ブロックに分け約5ヶ月をかけて進行しました。
制作手順は、原稿素材を用意してから画面構成を組む方式を取りました。掲載内容の整理、作文、文言レギュレーションチェックを複数担当者が分業して行い、精査済みの原稿を渡すことで、画面構成作成の作業量を最小化。結果、専任の画面構成担当が全体を統括することができ、ページ数の多いサイトでも統一感のあるUIとなりました。

また、商品価値を情緒的に訴求するコンテンツが不足していたため、ご愛用者の声を紹介する新規コンテンツを作成。実際のユーザー様複数名へのインタビュー実施から携わりました。コロナ禍によりオンラインでのインタビューとアンケート調査で得たユーザー様の生の声を編集し、カードの魅力をダイレクトに伝える記事をリリースしました。

アートディレクション/デザイン

Lexus.jpのデザインと共有で使用できる要素(フォント、アイコンのトーン&マナー、罫線の太さ、写真の選定基準、全体的な世界観)は踏襲しつつも、レクサスファイナンシャルサービスサイト独自のデザイン基準を設け、展開しました。

エンジニアリング

全ページの画面構成が出きっていない状態でCMSテンプレートとコンポーネントを決定しなくてはいけないという制約があったため、姉妹サイトにあたるTS CUBIC WEBサイトを参考に、先んじてテンプレートやコンポーネント数を定義しました。
(CMS開発は別会社様)

デザインガイドライン作成

アートディレクションとデザインを通じて開発したデザイン基準を、Figmaで資料化。大切にしているレクサスブランドを、社内資料にも余すところなく反映することで、今後の制作におけるクオリティをよりふさわしいものにしたいというクライアントの意図もありました。

イメージ:情報設計/画面構成/ライティングイメージ:エンジニアリングイメージ:デザインガイドライン作成

体制

写真:鈴木郷佑 プランナー
鈴木郷佑プランナー
今川潤子プロジェクトマネージャー
長田桂子ディレクター
松本雄太ディレクター
藤原篤史インフォメーションアーキテクト
写真:井原久美子 ライター
井原久美子ライター
写真:小作博紀 アートディレクター/デザイナー
小作博紀アートディレクター/デザイナー
写真:花田剛章 エンジニア
花田剛章エンジニア
写真:松井優太 エンジニア
Yuta Matsuiエンジニア
写真:末永勝也 エンジニア
末永勝也エンジニア

掲載内容は公開当時のものであり、最新情報と異なる場合があります。