
#008 スマートフォンでも見やすいスペック表
海外製造業ホームページ活用事例を紹介するマガジン008、JOHN DEEREの事例です。マガジンはこちらから。フォロー嬉しいです♪
JOHN DEEREは農業用のトラクターなどのメーカーです。日本でいうとヤンマーのような感じでしょうか。
グリーンとイエローのとっても美しいWebサイトです。Webサイトだけではなく、製品そのものが美しい…。農業がかっこよく見えるプロダクトデザインですね。こういうイメージって大切ですね。動画も非常に効果的に使われています。
最初に目に入るのは、大胆に利用シーンが並んでいるヘッダーです。
(https://www.deere.com/en/より引用)
興味のある製品が予め決まっている場合、このようなメニューは非常に使いやすいですね。これは製品そのものではなく、農業、芝&ガーデン、建設…と利用シーンが並んでいます。農業用を探している人は、建設を見る必要ありませんから、最初からユーザーを振り分けることは良いアイデアです。
今日気になって見たのは、レスポンシブの表です。メーカーサイトには必ずスペック表があるわけですが、スマートフォンでどのような見栄えになっているかは、サイトによって異なります。
似たような業種として、ヤンマーを先に見てみました。パソコンで見ると以下のように見える表は、
(https://www.yanmar.com/jp/agri/products/truck/mc96r/より引用)
スマートフォンで見ると、表の右側が欠けています。しかし、指でスライドすると表がスクロールして、右側が見えるようになっています。
次に、JOHN DEEREを見てみます。この巨大な表をどのように取り扱っているのか気になったのでした。
(https://www.deere.com/en/seeding-equipment/#block-content-150d5130-cdb5-8f6a-0723-b1bf195b0f40より引用)
スマートフォンで見ると、パソコンでは横並びになっている項目が、スマホでは縦並びに変わっています。
非常にシンプルで見やすいですね。表というのは、1行目か1列目、または両方が項目名になっています。ヤンマータイプの表の場合、スクロールすると項目が隠れてしまうため、項目と内容を一緒に見ることができません。項目が見えないと、表って意味がないですよね。
考察
JOHN DEEREを見習って、美しく分かりやすい表を使っていこうと思います。JOHN DEEREは、フッターにPublicationsというメニューがあり、コンテンツマーケティングにもかなり力をいれていることが分かります。THE JOHN DEERE JOURNALという専用サイトも持っていました。