No.023 トヨタ自動車- ワンピースの楽譜 | Webサイト100選
サイト概要
トヨタ自動車の公式ウェブサイトです。トヨタブランドの新型車を始めとした詳細情報、試乗車検索/店舗検索/見積りシミュレーション/カタログ請求などの各種インターネットサービスを提供しています。
ここが魅力!
・「見積りシミュレーション」では、見積りプラン内容を設定していくことで、車の購入に関するシミュレーションができる!また、「ボディカラー」や「インテリアカラー」の選択画面では、それぞれ人気カラーの1位~3位が分かる!
※「分割払い」や「税金・諸費用」も含めたすべての項目の内容を設定するには、My TOYOTAへの会員登録が必要
・家の近くの店舗での「試乗予約」ができる!
・「トピックス」ページでは、車選びが初心者向けの人向けのページや、子どもが車について学んだり、親しみをもてるようなページ(ぬりえやクイズ)などがあり、トヨタや車自体に詳しくない人でも利用しやすい!また、ページのデザインに関しても、「見積もりシミュレーション」のページなどと比べると、アニメーションや動画を取り入れるなど、見ていて楽しいデザインになっている!
構成
・FV
→カルーセルパネルデザインであり、ナビゲーション(パネルを移動する左右の< >)には背景色がついており、マウスをかざすと色が変わるため、分かりやすい。また、パネルの下に表示されているインジケーターも、現在表示しているパネルの丸の色や線、大きさが変わるため、何枚目が表示されているのかが分かりやすい。
パネルの内容は、新登場の車種についてや、見積もりや試乗予約、福祉車両などのサービス、また、購入者キャンペーンに関するものであった。
・header、nav
→右上のグレーの背景部分に、「リコール情報」(重要、優先度が高い情報)のテキストリンクが貼られている。
背景が白い部分のグローバルナビゲーションのカテゴリ名(「ラインアップ」、「購入サポート」・・・)にマウスをかざすと、文字が赤くなり、メガドロップダウンメニューが出現する。会員向けページ「My TOYOTA」のカテゴリ名も並んでいる。それぞれ、サブカテゴリ名にも写真やイラストがついていて分かりやすい。
※「検索」のみ、クリックすると検索ボックスが下に表示される。
(幅768px以上 メガドロップダウンメニュー)
画面サイズ幅が766px以下になると、右上にハンバーガーメニューが出現し、開くとアコーディオンメニューデザイン(+をタップするとサブカテゴリが表示される)になっている。
(幅766px以下)
・footer
→footerの中身を4つのグループに分けて作成している。外部サイト(「関連サイト」、「関連サービス」)のリンクが多い。=トヨタの事業の幅が広いことが分かる。
また、公式SNSのテキストリンクがアイコン(公式カラー仕様)と共に載っている。
カテゴリ名の上にマウスをかざすと、header時と同じように文字が赤くなる。
分析・考察
■ターゲット:男性、子ども、家族
■特徴:
・車について詳しくない人に向けた様々なコンテンツも用意していることから、ターゲットを広くしていると考える。
・全体のデザインとしては、無彩色をベースに、アクセントカラーとしてブランドロゴと同じ赤(#EB0A1E)を使用している。そのため、全体としては落ち着いた印象で、バナーなどが映える。
・画像の上にマウスをかざすと透過する。
・「ログイン」よりも「新規登録」が目立つようなデザインになっている。
・文字サイズ:トップページの見出し(「ラインアップ」、「購入サイト」)は、20px。グローバルナビゲーションのカテゴリ名(「ラインアップ」、「購入サイト」)は16px。パンくずリスト(※1)は10px。
・フォントの種類は、トップページの見出しとグローバルナビゲーションのカテゴリ名(「ラインアップ」、「購入サイト」)など、多くが「Yu Gothic」(ゴシック体)。字面の幅が狭めにつくられており、隣の文字と文字の間がスッキリとしている。
Webサイト100選No.023-ワンピースの楽譜 | Webサイト100選
コメント