No.023「トヨタ自動車」のからくり

No.023 トヨタ自動車
No.023 トヨタ自動車-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車- ワンピースの楽譜 | Webサイト100選

サイト概要
トヨタ自動車の公式ウェブサイトです。トヨタブランドの新型車を始めとした詳細情報、試乗車検索/店舗検索/見積りシミュレーション/カタログ請求などの各種インターネットサービスを提供しています。

No.023 トヨタ自動車

No.023 トヨタ自動車

No.023 トヨタ自動車-ワンピースの楽譜 | Webサイト100選

ここが魅力!
・「見積りシミュレーション」では、見積りプラン内容を設定していくことで、車の購入に関するシミュレーションができる!また、「ボディカラー」や「インテリアカラー」の選択画面では、それぞれ人気カラーの1位~3位が分かる!
※「分割払い」や「税金・諸費用」も含めたすべての項目の内容を設定するには、My TOYOTAへの会員登録が必要

No.023 トヨタ自動車-見積りシミュレーション1

No.023 トヨタ自動車-見積りシミュレーション1-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-見積りシミュレーション2

No.023 トヨタ自動車-見積りシミュレーション2-ワンピースの楽譜 | Webサイト100選

・家の近くの店舗での「試乗予約」ができる!

No.023 トヨタ自動車-試乗予約

No.023 トヨタ自動車-試乗予約-ワンピースの楽譜 | Webサイト100選

・「トピックス」ページでは、車選びが初心者向けの人向けのページや、子どもが車について学んだり、親しみをもてるようなページ(ぬりえやクイズ)などがあり、トヨタや車自体に詳しくない人でも利用しやすい!また、ページのデザインに関しても、「見積もりシミュレーション」のページなどと比べると、アニメーションや動画を取り入れるなど、見ていて楽しいデザインになっている!

No.023 トヨタ自動車-クルマ選び初心者ガイド(トピックス)

No.023 トヨタ自動車-クルマ選び初心者ガイド(トピックス)-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-クルマこどもサイト(トピックス)

No.023 トヨタ自動車-クルマこどもサイト(トピックス)-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-くるまちしきクイズ(トピックス)

No.023 トヨタ自動車-くるまちしきクイズ(トピックス)-ワンピースの楽譜 | Webサイト100選

構成
FV

No.023 トヨタ自動車-FV

No.023 トヨタ自動車-FV-ワンピースの楽譜 | Webサイト100選

カルーセルパネルデザインであり、ナビゲーション(パネルを移動する左右の< >)には背景色がついており、マウスをかざすと色が変わるため、分かりやすい。また、パネルの下に表示されているインジケーターも、現在表示しているパネルの丸の色や線、大きさが変わるため、何枚目が表示されているのかが分かりやすい。
パネルの内容は、新登場の車種についてや、見積もりや試乗予約、福祉車両などのサービス、また、購入者キャンペーンに関するものであった。

header、nav

No.023 トヨタ自動車-header(768px以上)

No.023 トヨタ自動車-header(768px以上)-ワンピースの楽譜 | Webサイト100選

→右上のグレーの背景部分に、「リコール情報」(重要、優先度が高い情報)のテキストリンクが貼られている。
背景が白い部分のグローバルナビゲーションのカテゴリ名(「ラインアップ」、「購入サポート」・・・)にマウスをかざすと、文字が赤くなり、メガドロップダウンメニューが出現する。会員向けページ「My TOYOTA」のカテゴリ名も並んでいる。それぞれ、サブカテゴリ名にも写真やイラストがついていて分かりやすい。
※「検索」のみ、クリックすると検索ボックスが下に表示される。

幅768px以上 メガドロップダウンメニュー)

No.023 トヨタ自動車-メガドロップダウンメニュー

No.023 トヨタ自動車-メガドロップダウンメニュー-ワンピースの楽譜 | Webサイト100選

画面サイズ幅が766px以下になると、右上にハンバーガーメニューが出現し、開くとアコーディオンメニューデザイン(+をタップするとサブカテゴリが表示される)になっている。
(幅766px以下)

No.023 トヨタ自動車-header(766px以下)

No.023 トヨタ自動車-header(766px以下)-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-ハンバーガーメニュー内(766px以下)

No.023 トヨタ自動車-ハンバーガーメニュー内(766px以下)-ワンピースの楽譜 | Webサイト100選

footer

No.023 トヨタ自動車-footer(全体)

No.023 トヨタ自動車-footer(全体)-ワンピースの楽譜 | Webサイト100選

→footerの中身を4つのグループに分けて作成している。外部サイト(「関連サイト」、「関連サービス」)のリンクが多い。=トヨタの事業の幅が広いことが分かる。
また、公式SNSのテキストリンクがアイコン(公式カラー仕様)と共に載っている。
カテゴリ名の上にマウスをかざすと、header時と同じように文字が赤くなる。

No.023 トヨタ自動車-global footer top area

No.023 トヨタ自動車-global footer top area-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-global footer top middle

No.023 トヨタ自動車-global footer top middle-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-global footer bottom list

No.023 トヨタ自動車-global footer bottom list-ワンピースの楽譜 | Webサイト100選

No.023 トヨタ自動車-global footer-copyright

No.023 トヨタ自動車-global footer-copyright-ワンピースの楽譜 | Webサイト100選

使用パーツ・アイコン

バナー

分析・考察
■ターゲット:男性、子ども、家族

■特徴:
・車について詳しくない人に向けた様々なコンテンツも用意していることから、ターゲットを広くしていると考える。
・全体のデザインとしては、無彩色をベースに、アクセントカラーとしてブランドロゴと同じ赤(#EB0A1E)を使用している。そのため、全体としては落ち着いた印象で、バナーなどが映える。
・画像の上にマウスをかざすと透過する。
・「ログイン」よりも「新規登録」が目立つようなデザインになっている。

No.023 トヨタ自動車-My TOYOTA

No.023 トヨタ自動車-My TOYOTA-ワンピースの楽譜 | Webサイト100選

・文字サイズ:トップページの見出し(「ラインアップ」、「購入サイト」)は、20px。グローバルナビゲーションのカテゴリ名(「ラインアップ」、「購入サイト」)は16pxパンくずリスト(※1)10px

※1 ウェブサイト上での現在地を表すもの
No.023 トヨタ自動車-パンくずリスト

No.023 トヨタ自動車-パンくずリスト-ワンピースの楽譜 | Webサイト100選

・フォントの種類は、トップページの見出しとグローバルナビゲーションのカテゴリ名(「ラインアップ」、「購入サイト」)など、多くが「Yu Gothic」(ゴシック体)。字面の幅が狭めにつくられており、隣の文字と文字の間がスッキリとしている。

Webサイト100選No.023-ワンピースの楽譜 | Webサイト100選

コメント

タイトルとURLをコピーしました