Webデザインにおける、日本と海外の違いを比べてみる[UI編]

Date:

Share post:

海外のリーフレットやパッケージ、建物、看板に至るまで、日本のそれと全然違うな〜、なんて経験をした方はたくさんいらっしゃると思います。
それぞれの歴史や文化が違うため、感覚や思考が異なるのでしょう。
世界中で活躍している企業は一体どのようにしてユーザーに対応しているのでしょうか?

今回はWebサイトのUIの違いを例にとって、考えてみます。
わが日本が誇るトイレ文化の代表、TOTOの日本語と英語サイトを比較してみましょう。
※本当は各国ごとにサイトがありますが、分かりやすくするため英語サイトを選択しています

[日本語サイト]
参照:TOTO株式会社
ネオレスト AH・RH・DH|TOTOのトイレ(便器)・ウォシュレット(温水洗浄便座)
https://jp.toto.com/products/toilet/neorest/

[英語サイト]
参照:TOTO LTD.
NEOREST | TOTO
https://www.toto.com/en/neorest/

気づいたことを上げてみると、こんな印象でしょうか。

[日本語サイト]
・細かな情報が見やすくきれいに配置されている
・1ページに商品のおおまかな機能が紹介され、大体の製品の特長が分かるようになっている
・白ベースに落ち着いた青をアクセントに効かせ、清潔感がありながらも上品な印象を与えている
・写真は明るい空間をイメージさせるインテリアにし、製品と空間が調和することを視覚的に魅せている

[英語サイト]
・全体的にざっくりと簡潔なページ構成をとり、写真を大胆に配置している
・1ページに、各機能ボタンを置き、そこから詳細ページへリンクするようになっている
・白ベースに、コントラストの強い無彩色を使用することで視認性と洗練された印象を与えている
・コントラストの強い写真を使い、重厚感のある上質な製品であることを印象づけることで、ベースデザインとの親和性が高くなっている

ずいぶんと両者に違いがあることが分かりました。
めちゃくちゃ気になりますね。もう少し細かく見ていきましょう。


【ファーストビュー】ヘッダーの領域とメインビジュアルの違い

[日本語サイト]
・ヘッダーメニューのスペースを広げ、アクセスしたいジャンルを細分化することで、探しやすくなっている
・メインビジュアルの高さを大きく取ることによって、製品の持つ雰囲気が伝わるようにしている

[英語サイト]
・ヘッダーの高さを最小限にし、メインビジュアルが画面領域にきちんと収まるようにしている
・メインビジュアルをスライダーにすることで、多くの製品種類を紹介できている


【コンテンツ】ランディングページとインデックスページ

[日本語サイト]
・「メインの機能」→「サブ機能」→「空間イメージ」→「カラーバリエーション」→「参考価格」と、各詳細ページにリンクするが、構成がランディングページのようになっている
・写真とテキストを多く使い、製品の魅力を1ページで伝えている

[英語サイト]
・各機能のインデックスを並列で表示し、1画面でどんな機能があるか把握できる
・写真メインで構成し、1つの写真を大胆に使うことでショールームのスタイリッシュな世界観が体験できるようになっている


まとめ

こうしてみると、日本語サイトと英語サイトには以下のような違いがあることが分かります。
日本は細やかなユーザーへの配慮、海外はダイナミックな構成でありつつも世界観を伝えることを重視しているように感じました。


終わりに

1サイトでの比較になるため、他のサイトではまた違った見方もできます。ただ、全体的な構成の使い方については、他のサイトでも共通になってくるかなという印象です。
日本の中でのみ活動する企業もありますが、今後サイトを訪れるユーザーが日本だけでなく、海外ユーザーへと広がっていく場合、こういった感覚の違いを心がけて設計をしていきたいですね。

Related articles

LaravelでPDF生成(mpdf)

EC関連のシステムなどでは請求書や領...

我流Flutter学習ステップ(6)スマホでの動作...

本シリーズ(?)の最初の投稿で書いた...

その「平均値」に意味はあるのか?

最近「平均」に関して思うところがあっ...

遅まきながら、Vagrant(Virtualbox...

前回は、pumaを常時起動のユーザーサ...