TOYOTA COROLLA Brand website

OUTLINE

トヨタ自動車株式会社のカローラブランドサイトは、カローラシリーズ全体の魅力を一元的に伝えるポータルとして、各車種の情報を横断的に閲覧できる構成となっています。

ワントゥーテンは、2021年に「カローラクロス」専用のスペシャルサイトを制作したことを契機に、カローラブランド全体を扱うサイトへの拡張・移行に携わってきました。
そして今回、ブランド全体の世界観「マルチバース」をより強く打ち出すべく、ブランドサイトの全面リニューアルを担当いたしました。

今回のリニューアルでは、主なターゲットである20〜30代のスマートフォンユーザーを意識し、「見ていて楽しい」「自然とスクロールしたくなる」ような設計を重視しました。
モバイル環境での操作性とリズム感を大切にしながら、ブランドイメージを損なわないミニマルかつ印象的な構成を重視しています。

デザイン提案だけでなく、モーション表現の企画・ディレクションも実施。ブランドの価値や車種ごとの個性を視覚的かつ直感的に訴求できるよう、ユーザー体験に配慮したUI設計・ビジュアル設計を行いました。
また、フロントエンドの実装も一貫して担当し、スムーズなスクロールやインタラクションなど、ブランドの魅力をより深く体験できるWeb表現を追求しました。

本サイトは今後もカローラブランドのコミュニケーション基盤として継続的に活用されることを見据え、拡張性と運用性にも配慮した設計としています。

SITE FEATURES – サイトの特徴

Visual-Driven, Minimal Design

サイト全体を、ビジュアルの印象を引き立てる、シンプルなデザイン

お客様の様々な生活に寄り添える「マルチバース」というコンセプトを体現すべく、余計な装飾を排したシンプルなレイアウトと各セクションごとに異なるモーション演出を実施することにより、カローラの写真や動画などのビジュアルがより際立つ構成として、ブランド訴求を意識しました。単にミニマルなだけでなく、ブランドの世界観をしっかりと伝える要素を随所に織り込み、印象に残る体験を目指しています。
特に今回のターゲットである20〜30代をメインに、スマートフォンで見た時も楽しくスクロールできるような設計としています。

1. Impactful Title Motion

印象を際立たせるタイトル出現モーション

ページ冒頭で表示されるタイトルには、タイミングと動きを細かく調整したアニメーションを実装。登場の瞬間に強い印象を残すことで、ブランドの世界観を象徴的に提示しています。

2. Expanding Video on Scroll

スクロールと連動して拡大する動画モーション

カローラブランドを象徴づけるCMセクションでは、ユーザーがスクロール操作をすることで、動画がゆっくりと拡大していくモーションを採用。視線を自然と惹きつけながら、没入感あるブランド体験を演出しています。

3. Seamless Scroll Animations

滑らかに展開するスクロールアニメーション

各セクションにおいて、スクロールに連動した細やかなアニメーションを多数実装。特に車種紹介では、情報を読み進める中で自然に動きが加わることで、リズムよくストーリーを感じられるような設計としました。

4. “What Will You Do with Corolla?” Section

「カローラとナニする？」インタビュー動画コンテンツの展開

実際のカローラユーザーにインタビューし、リアルな使い方や感じた魅力を動画で紹介するセクションを展開。
サイト内での見せ方（デザイン・モーション・実装）を担当。また、タグによる絞り込み機能を設け、ユーザーが自分に合った体験にスムーズにアクセスできるUI設計としています。

5. Comprehensive Content Architecture

細かな情報設計と充実したコンテンツ展開

車種ごとのスペックや特徴をわかりやすく整理した情報ページに加え、ユーザーが複数のモデルを比較できる「車種比較ページ」も構築。検討段階にあるユーザーの意思決定をサポートする情報設計を行いました。

6. Exclusive Interview with Chief Engineer

チーフエンジニアによる開発インタビューコンテンツ

ブランドの思想や開発背景をより深く伝えるため、チーフエンジニアへのインタビュー記事のデザイン制作・実装を担当。言葉や表情を通じて、カローラシリーズに込められた想いや開発ストーリーを届けています。