【事例で比較してみた】日米 Webデザインの違い – ヘッダー編

はじめに

Web業界で10年近く従事してきた中で、さまざまな業種のサイトやトレンドに触れてきました。
日本と海外サイト、特にアメリカのデザインには明確な違いがあるなと感じています。

本記事では、無印良品さんの日米サイトを例に、ヘッダーセクションにおける日米の違いを比較していきます。

無印良品さんは、服や文房具、日用品、食品まで幅広く取り扱う、日本を代表するブランドの1つです。
海外ではMUJIとして知られています。

私は無印良品さんが大好きで、日本に帰国したら必ず行くようにしています。
グリーンカレー5辛とひとくちブラックウエハースがお気に入りです！
食べたことがない方はぜひ試してみてください！

それでは比較していきましょう！

ヘッダーとは？

そもそもヘッダーはどこにあるかご存知ですか？

その名の通り、Webサイトの頭、最上部にあるエリアを指します。

サイトの訪問者が知りたい情報にスムーズにアクセスできるように導く目次の役割を担っています。

そのため、どのページに移動しても同じものが表示されているのが一般的です。

また、サイトや企業のロゴがよく配置されているので、サイト全体の印象を左右する重要な要素の一つです。

比較ポイント

以下4つのポイントで無印良品さんの日米サイトを比較してみました！

1. UIデザイン：見た目・印象
   
   
2. 情報量：提供している情報のボリューム
   
   
3. 導線設計：ユーザーが目的の情報にたどり着くまでの流れ
   
   
4. 検索機能：提供している検索パターン・操作

日米サイト比較

　日本サイト：https://www.muji.com/jp/ja/store 

　アメリカサイト：https://www.muji.us/

1. UIデザイン

どちらもシンプルで綺麗にデザインされています。
日本サイトは親しみやすさ、アメリカサイトはスタイリッシュさが強く感じとれます。

• 日本
  
  • 構成
    • 一段目：配送無料帯
    • 二段目：ロゴ・メニュー・検索バー・ログイン・お気に入り・カート・サポート
  • 頻繁に利用するユーザー向けのコンテンツ（ログイン～サポート）はアイコン化し、見つけやすくしている
  • 使いやすさを重視したシンプルなデザイン
  • 丸みを帯びたフォント
  • 親しみやすい雰囲気
    
    
• アメリカ
  
  • 構成
    • 一段目：ロゴ・検索バー・カート
    • 二段目：メニュー・Wishlist・Login
  • すっきり・洗練されたデザイン
  • 角張ったフォント
  • 高級感のある雰囲気

2. 情報量

アメリカサイトに比べ日本サイトは情報が豊富です。

情報が多いとごちゃごちゃしてしまうことがよくありますが、
パソコンとモバイルでそれぞれ以下のメニューをうまく使い分けて情報を整理しています。

パソコン：メガメニュー（横長にメニューを展開）
モバイル：ドロワーメニュー（横スライド表示）・アコーディオンメニュー（下スライド表示）

今回のような商品販売サイトだけではなく、提供サービスが多い企業サイトでも活用できそうですね。

一方で、アメリカサイトは親カテゴリをより細分化しメガメニューの中身はすっきりに。

メガメニュー内には親カテゴリ画像も添えてどんなカテゴリか視覚的に説明しています。

より直感的に操作できるのはアメリカサイトかな？と思いました。

• 日本
  
  • 親カテゴリ：衣料品・生活雑貨・食品
  • 親カテゴリ内にあるメガメニューの情報が豊富
  • キャンペーン情報やお知らせなどをメガメニュー内に表示
    
    
• アメリカ
  
  • 親カテゴリ：New・Women・Men・Travel・Home・Health & Beauty・Stationery・Food・Sale・Gift Cards・Rewards
  • 親カテゴリを細分化したことで、メガメニュー内の項目はすっきりとまとめられている
  • 画像を活用し、視覚的に説明
  • 情報量を絞り、必要な情報を見つけやすくしている

3. 導線設計

日本サイトは目的の情報にプラスして知らない商品に出会えそうな導線設計をしている印象です。
アメリカサイトは早く目的の情報に行き着くように導線はシンプルに作られています。

• 日本
  ついで買いのような感覚でいろいろな商品へ移動できるようにリンクが多く配置されている印象

• アメリカ
  • Saleのみを赤字にすることで目を引く工夫がされている
  • 新商品を最初に目に入りやすい画面左端に配置している
  • 目的の情報に行くまでの動きが日本と比べて少ない

4. 検索機能

両サイトとも検索の操作感はとても気持ちがいい・・・！

日本サイトはカテゴリ選択をメガメニューで見やすく工夫されていました。

アメリカサイトの検索バーは「なんか触ったことあるな」が最初の感想でした。

よく見るとAmazonの検索バーに似ていませんか？？
馴染みある操作で商品を探せるように、大手のサイトデザインに寄せているようです。

また、両サイトとも検索バーではサジェスト機能を提供しています。

提供するタイミングと情報の種類に違いがありました。

サジェストされるタイミングはアメリカサイトが早く、サジェスト情報が多いのは日本サイト。

アメリカサイトではサジェストの時点で商品金額と割引額がわかるのが印象的でした。

• 日本
  • カテゴリ選択はメガメニュー表示。並びは人気順？
  • キーワードを入力すると関連したキーワード・カテゴリ・商品名が表示
    
    
• アメリカ
  • カテゴリ選択はドロップダウン表示。アルファベット順に並んでいる。
  • キーワード入力前にサジェストキーワードが表示。情報は関連キーワードと商品名、その金額

比較してわかったこと・まとめ

4つのポイントをまとめました！

1. UIデザイン：見た目・印象
   日本：親しみやすい
   アメリカ：スタイリッシュ
   
   
2. 情報量：提供している情報のボリューム
   日本：豊富
   アメリカ：すっきり
   
   
3. 導線設計：ユーザーが目的の情報にたどり着くまでの流れ
   日本：回遊性高め（寄り道OK）
   アメリカ：効率重視（なる早で提供）
   
   
4. 検索機能：提供している検索パターン・操作
   日本：カテゴリ操作が視覚的にわかりやすい・サジェストの種類が豊富
   アメリカ：馴染みのあるAmazonのような操作性、商品情報に特化したサジェスト機能

今回の無印良品さんのヘッダーデザインを比較してみると、やはりそれぞれ異なる特徴を持つことがわかりましたね。

日本サイトは情報量豊富でさまざまな商品を探せる楽しさがある、
アメリカサイトは商品までのステップを少なくし、効率重視な見せ方が特徴的でした。

普段ここまで細かく1つのセクションを見る機会はほとんどありませんでした。
深く見てみるといろいろな違いがあってとても面白かったです！

無印良品さんの日米サイトのヘッダー、どちらのデザインが好みでしたか？

次回も日本とアメリカのWebデザインを比較していきます！