No.063 ヤマハ

No.063 ヤマハ

ヤマハ

楽器、車載設備、ゴルフ用品など、幅広く手がけるヤマハのWebサイト。

ファーストビューの印象

ヤマハがもたらす価値として、人々が心震わす瞬間「MakeWaves」を掲げている。
フォント、スライドにパープルが共通して使用されており、クリエイティブな印象。

レイアウト

シングルカラム

レスポンシブ対応

あり
ブレイクポイント：100px,469px,480px,621px,640px,768px,781px,821px,993px,1021px,1200px,1366px

フォント

見出し：Hiragino Kaku Gothic Pro
本文：Hiragino Kaku Gothic Pro

メニュー

PC：ナビゲーションバー
SP：ハンバーガーメニュー

カラー

ベースカラー：#FFFFFF ホワイト
メインカラー：#593083 パープル

感想、参考になった部分

ファーストビューのロゴ、フォント、スライドイメージにはパープルが印象的に使用されているが、それ以降はホワイト、ブラック、グレーをメインに、かなり落ち着いた色合いになっている。
トップで「芸術」「高級」のイメージを閲覧者に印象づけ、以降は可読性や視認性を高めるために彩度を落としたのではないだろうか。

膨大な数ある商品を紹介するためにトップページには最上階層のカテゴリのみ掲載し、クリックによるページ遷移により商品詳細へとアクセスする仕組みになっている。
メリットはページがすっきりし、特定の商品が探しやすくなること、デメリットは欲しい情報に到達するにはクリックが多く必要になること。
このサイトを訪れる人は、欲しい楽器がある程度決まって閲覧することが多いという背景から、この配置が採用されたのかもしれない。

製品情報は格子状に配置されているが、グリッドは使われていないようだ。

ボタンとなっているテキストにはホバーするとすべてラインが入る。わかりやすいのだが、テキストが長い箇所に関しては少しくどいかなと感じた。

 

 

 

 

 

No.063 ヤマハ | Webサイト100選