【WebサイトUI分析 #09】 ナトコ株式会社 企業サイト
Web制作会社のUIデザイナーです。
UIの勉強・参考のために、ナトコ株式会社様企業サイトのUI分析をさせていただきました。
制作会社はスタジオディテイルズ様です。
想定される運用目的
各種ステークホルダーへのブランディング、新規顧客の獲得
想定されるターゲット
機械製造会社、建築会社等の資材調達関連の意思決定者
使ってみる
設定
愛知県にある自動車部品製造会社の資材調達部門の担当者。提携先の企業が新製品を売り出すにあたって、それに必要な自動車の内装部品の製造を請け負うことになった。しかし既存の協力会社のポリマー素材では要件を満たせず、新たな素材メーカーを探す必要が出てきた。PCで閲覧。
フロー
既存の協力会社の製品では要件を満たせないことが分かり、Webサイトから良さそうな企業を探すことにした。可能であれば近隣の企業が望ましいので「愛知 ファインケミカル 塗料」で検索をかけ、検索結果に出てきたサイトをいくつか見ていく。まず最初に出てきたナトコのファインケミカル事業のページを開く。
よく見る他の企業のサイトとは異なりかなりデザイン性の高いwebサイトで、ナトコ自体は以前から知っていたが、こんなにwebサイトに力を入れている会社だったのかと少し驚く。少しスクロールするとサービスの概要や強みのコンテンツが目に入る。開発への理念が今回の新しいブランドの方針に合っているように感じ、少し期待が高まる。
途中モビリティ用の製品の紹介が入り、そもそも要件を満たす素材を作成できるのか確認した方がいいと思い、製品一覧へのリンクをクリック。
モビリティ用の製品一覧が表示され、その中で「自己治癒®」が今回必要な内装用の塗料であるようなので、クリック。スクロールするとすぐに製品カタログのpdfがあったのでダウンロードして内容を確認する。この内容では確証は持てないが、雰囲気的には候補に入れてよい気がしたので、引き続きサイトを確認することにした。戻って製品のページを下まで確認した後、ヘッダーからトップページに移動する。
ここまでのページでもそうだったが、トップページは一層先進的なイメージを受けた。背景にはアニメーションが用いられており、スクロールするとそれに合わせてアニメーションが動くとともに、ナトコのコンセプトが流れてくることで、独特の世界観が感じられた。途中動画があり、気になったので視聴した。またその流れで「ナトコの研究開発」「ナトコのデザイン」を閲覧した。
総合的にかなり印象は良かったので、社内で検討し、後日お問い合わせフォームから連絡をした。
表層レビュー
メインビジュアルからイントロダクションまで、背景に恐らく塗料や素材をイメージしたアニメーションが用いられている。スクロール時の動きやコンテンツの表示のさせ方や配置とも相まって、サイト全体を通して先進的な印象を強く受ける。
要素の組み方はかなり工夫されており、上部から閲覧していった際に各部の情報が目に入りやすいようになっている。例えば「企業情報」「事業内容」と会社の概要紹介的な情報はひとまとまりにされており、かつ紹介動画の直後に配置されることで情報のグルーピングがされている。直後の「ナトコの研究開発」「ナトコのデザイン」は大胆にも画面の左右に分かれて配置されているが、見出しのフォントサイズがちょうどよく、決して見逃しやすいということはない。
動画については社内の雰囲気が感じられるような内容で、これがユーザーに伝わるだけで他の企業とは親しみの面で差をつけられるように思う。
ヘッダーはページの上部では大カテゴリにあたるページが2列で表示されているのに加え、fixで右上にメニューのボックスが配置されている。こちらはクリックするとフルスクリーンのナビゲーションが表示され、またそれを活かして下層まで網羅したサイトマップ的な役割を果たしている。
下層ページではファーストビューがきれいにまとまっており、見出し、イメージ画像、ヘッダー、ページ内リンクの目次が絶妙に配置されている。h1はかなりサイズが大きいのに対し、イメージ画像は控えめな大きさで、ファーストビューにおける情報の優先度が意識されているように感じる。コンテンツもテンプレートをなぞるような構成ではなく、ページのそれぞれがLPとして機能しそうなほどにこだわってデザインされている。所々に用いられているイラストや図もトップページの印象を引き継いだものになっており、全体として先進的な印象を高めている。
トップページ、下層ページともに、高いレベルでデザイン性と一覧性を両立したWebサイトであるように感じた。
日本語フォントはDNP 秀英角ゴシック金 Std
英語フォントはMuseo Sans
構造レビュー
最初に気になったのはやはりヘッダーの構成で、横一列で配置するのが当然と思っていたが、こういった配置方法もサイトの構造によっては一行の余地があるように感じた。ただ、この形ではもちろん追従すると閲覧を妨げるので、基本のヘッダーメニューとは別に追従するメニューボックスが用意されている。これが想像以上に使い勝手が良く、フルスクリーンのメニューであることを利用して、サイト内のページを網羅することで「すぐにアクセスできるサイトマップ」的な役割を果たしている。
前述の通り下層ページもかなり作りこまれているが、その反面かなり要素の高さが出てしまっている感は否めない。恐らくそれを考慮して下層のファーストビューにはページ内リンクが配置されているのだと思う。ただその分情報はまとまっており、回遊型よりかは1ページ完結型のサイトに近いかもしれない。下部には関連するページへのリンクが設置されており、誘導にも抜かりない。
少し気になった点を挙げると、やはり表現に力を入れている分、長時間の閲覧には向かないように思う。分析のためにいくつかページを閲覧したが、画面全体を用いて情報が構成されている為、視線が大きく動き少々目に疲れを感じた。サイトとしてはあまり複数ページの回遊を前提としていないのかもしれない。
ちなみにスマートフォンでアクセスする際、画面を横にしていると「縦にしてください」と表示が出て閲覧できないようになっている。そういうのもありなんだ、と思った。
まとめ
印象としては表層レビューでも述べた通り、高いレベルでデザイン性と一覧性を両立したWebサイトであるように感じた。各要素がそれぞれ大胆に配置されているにもかかわらず、自然にそこに視線が流れるように作りこまれている。そういったこだわりからWebサイト自体の品質が高いように感じられ、また同時に企業の品質が高いように感じられる。またヘッダーや下層のファーストビュー等細かな部分では慣例的な配置が崩されており、独特な構成を採ることで他サイトとの差別化も行われているように思う。品質の高いWebサイトが世に増えていく中で、こういった手法は取り入れていくべきだと感じた。