Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

今回はグローバルナビの中でもアイコンで表現されたサイトに焦点を当て、PCとスマホ画面で見比べた時の違いを大調査！ユーザーにあわせてアイコンの配置を工夫されていたり、サイトのトンマナに合わせられていたりなど、サイトごとでも特色が見られるのでぜひご覧ください！

ダイエー

まずは皆さんお馴染みのスーパー、ダイエーのサイトです。PCとスマホ画面で表示されているナビゲーションは同じですが、スマホ画面ではメニューの部分がボタンとして独立されたようなデザインに作り変えられています。また、アイコン自体はシンプルなラインアイコンですっきりとした印象に仕上げられていますね。

ダイエー

ミスタードーナツ

次にミスタードーナツのサイトです。店頭やデリバリーなど「ユーザーが商品を購入しやすい」導線を主軸にされているため、PC画面で表示されていた「メニュー」～「お問い合わせ」については、スマホ画面ではハンバーガーメニューに格納されたUIになっていました。

PC画面では、色が入っているアイコン・色が入っていないアイコン・文字のみとナビゲーションの表現に違いがあり主要コンテンツが一目瞭然なのが特徴的です。

ミスタードーナツ

ほっかほっか亭

ほっかほっか亭のサイトでは、ミスタードーナツのサイトと同様にスマホ画面では主要コンテンツに遷移しやすいようなナビゲーションに作り変えられていました。ヘッダーメニューはPC・スマホ画面と同じ内容が表示されていますが、下部のメニュー（ボトムナビゲーション）は、デザインやメニュー構成がデバイスごとで異なっています。ボタンの背景色もオレンジからホワイトのデザインになっており、ユーザーの年齢層を問わず見分けがつきやすい配色に工夫されています。

アイコンやメニューはカクカクしたデザインでかわいらしいですね。

ほっかほっか亭

古野電気株式会社

次に船舶用の電子機器メーカー、古野電気のサイトです。PC画面で表示されていたアイコンのないサブメニュー（お問い合わせを除く）はスマホ画面ではすべて非表示とし、主要メニューは2列のリストで押しやすいデザインに表示切替えされていました。ハンバーガーメニューを実装しない一風変わったUIですが、ユーザーへの操作工程を増やさずに主要メニューを表示しているため、使いにくさを感じない印象を受けました。

古野電気株式会社

ウェルシア薬局

最後に紹介するのはよく街角で見かける、ウェルシア薬局のサイトです。

PC画面とスマホ画面で表示されているメニューはかなり違いがあり、スマホ画面ではヘッダーナビゲーションとボトムナビゲーションが採用されています。ほっかほっか亭のサイトと似た設計となっていますが、ヘッダーには検索系のコンテンツとメニュー、下にはお役立ち情報系のコンテンツといったジャンル分けでそれぞれのナビが実装されていました。PC・スマホユーザーそれぞれの行動を考慮して設計されている印象がありました。

まとめ

いかがでしょうか。今回はアイコンデザインを採用したナビゲーションのサイトについて、PC・スマホごとでの違いを調査してみました。見比べると明らかにデバイスごとでデザインが変えられており、どういう意図をもってデザインが変えられているのかを考察できたり、アイコンのデザイン自体に工夫されていることがわかったりといろんな発見がありました。

今回もご一読いただきありがとうございました。