大手企業サイトで学んだ万人が扱いやすいデザイン

今回トレースしたのは日本通運さんのTopページです。

日本通運株式会社 企業サイト　＞＞＞

あるデザイナーの方がツイッターで『現場で求められる良いWebデザイン』の事例として取り上げているのを見て、このサイトを知りました。

この記事では、本サイトをトレースしている中で、特徴的だと感じた下記の３点について触れていこうと考えております。

❶ファーストビューおよび直下のデザインは、ユーザーが情報を探しやすく工夫されており機能的である
❷一般的なセオリーに従っている（リンクや注意喚起の色）
❸万人にとっての読みやすさ、見やすさ、認識しやすさを追求している

❶【ファーストビューおよび直下のデザイン】

ファーストビューではグローバルナビゲーションと一緒に、取扱サービスとニュースの情報を納めています。ユーザーは一目で自分が知りたい情報にたどり着けるように工夫されていると感じました。
また、ファーストビュー直下に配置している輸送状況検索のエリアは、背景色を薄い水色にしつつ、ファーストビューにハミ出した見た目をしています。検索ボックスの背景色が白じゃないのでスクロールした時、入力エリアが白抜きで目に入りやすくなっています。

❷【一般的なセオリーに従っている（リンクや注意喚起の色）】

本サイトでは、ニュースなどの文字情報でクリック出来る要素には青色を使っています。
大手のニュースサイトやブログでもリンクがある文字情報に青色を使っており、一般的に認知されているベターな表現であると言えます。このような一般的に認知されているセオリーを守ることにより、ユーザーが情報を認識させるのを手助けできるのではないでしょうか？

❸【万人にとっての読みやすさ、見やすさ、認識しやすさを追求している】

大手の企業サイトともなると、様々な年齢層が訪れるため万人に扱えるサイトでないといけません。本サイトで読みやすさ・扱いやすさが配慮されていると感じた部分を下記の3つに絞って触れていきます。

・スライダー

見出し文と本文のメリハリがしっかりしており、非常に見やすい見た目になっています。大きさと色で違いを付けて、いわゆるデザイン四原則に則ったデザインだと言えます。また、画面上で表示されている一番左の要素と一番右の要素は、不透明度が50%になっており、矢印が見えやすくしています。
このサイトのスライダーの見た目は古い感じがしますが、万人が扱いやすいので、この見た目のスライダーを採用しているのかと考えています。

・選択要素

ユーザーがクリックして選択した要素、デフォルトで表示されている要素のボタン上部にオレンジの4pxの太い線があります。本サイトでユーザービリティ向上に一役買っているデザインルールの１つだといえます。

・お知らせ情報

文字情報のコンテンツエリアは左右に８pxほど隙間を取っています。
可読性の向上のためにあえてスペースを作っているのではないかと考えられます。