情報処理学会 インタラクション 2023
IPSJ Interaction 2023

3P-712023/3/1

日本・中国の EC サイトデザインの定量的比較と考察鄒暁嬌†1

神場知成†2

概要：インターネットの広がりにより国をまたがって商品を購入する越境 EC が増えている．EC サイトのデザインがユーザの購買意欲等に影響を与えることがわかっており，それぞれの国におけるサイトデザインの特徴を明らかにし，サイトデザインをするにあたって想定する顧客の国で一般的に用いられるデザインを考慮したカスタマイズを行うことは有効であろう．本稿では，日本と中国の EC サイトデザインをできる限り定量的に比較することを目的とし，用いられている色やその面積，サイトのレイアウト，商品画像のサイズ等に関する調査を行った．色については，中国では日本と比較したときに暖色系が約 2 倍で寒色系が約 6 割であることや，レイアウトで用いられるカラム数，平均的な商品画像のサイズなども違いがあることがわかった．それぞれの国のサイトを見るときのユーザの視線の動きについても調査をし，たとえば商品画像を見る際にどの部分の説明を読むかなどの違いも出た．今後，これらを考慮したデザインツールの開発等を検討中である．

1. はじめにおいて，UI がユーザビリティと満足度に影響を与えることを確認した[2]．Econsultancy は，EC サイトの UI が悪いと近年，インターネットの普及に伴い越境 EC の市場規模EC サイトの年間収益が 24％減少することを示した（米国は年々拡大している．経済産業省（2022）の調査によると，

で 500 億ドル以上，英国で 140 億ポンドの損失に相当）[3]．

2021 年の日本・中国・アメリカ 3 国間の越境市場規模にParboteeah 等は，Web サイトのバリエーションがオンライおいて，日本から中国への販売額は 2 兆 1,382 億円（前年ンの衝動買いにどのように影響するかを調査し，EC サイ比 9.7%増），中国から日本への販売額は 365 億円（前年比

トの UI がオンラインでの衝動購買に影響を与えることを7.6%増）となっており[1]， 2022 年度以降も市場規模拡大示唆した[4]．Lee 等は，オンラインショッピングの品質のが予測されている．

さまざまな次元と，サービス品質全体，顧客満足度，購買EC サイトのユーザインタフェース（UI）・ユーザエクス意欲との関係について研究を行い，EC サイトの UI が全体ペリエンス（UX）は，ユーザの訪問頻度，滞在時間や再訪的なサービス品質と顧客満足度に影響を与える要素の 1 つ問率などに影響し，結果的に EC サイトの利益と成否を大であることを示した[5]．Park 等は，韓国のオンライン書店

きく左右するが[2][3][4][5][6]，国によって美意識や習慣もの 602 名の顧客を対象としてオンラインショッピングの諸違うので，現地の文化に合わせて EC サイトをデザインす特性と消費者の購買行動との関係を調査し，UI の品質が情る必要がある[7][8][9]．

報の満足度と実際の購入行動に大きく関係していることを従来，日本と欧米サイトのデザインの比較検討は多いの示している[6]．

に対し日本と中国 EC サイトのデザインを比較したものはいずれの研究からも EC サイトでは，販売商品の品質や少ないが，前述のように相互の越境 EC は急成長している．

品ぞろえだけでなく，UI が顧客の購買行動に影響を与える

本論文では，今後の EC サイトデザインを国にあわせてカ重要な要素であることがわかる．

スタマイズする際の参考になることを目的とし，日本と中国の EC サイトのデザインの比較考察を行う．両者の主要

2.2 現地文化にあわせた UI の適応化に関する研究

な EC サイトのトップページを対象に客観的な評価とする

菊盛等は，ウェブサイトの文化的カスタマイゼーションため，配色やレイアウトに関してできる限り定量的な評価の度合いの，現地の消費者にとってのユーザビリティに対を行った．

する影響を調査した．実験分析結果によれば，文化的にカスタマイズされたウェブサイトは情報を入手しやすく，ナ

2. 従来の研究
2.1 EC サイトの UI/UX デザインに関する研究
Wajeeha 等は，B2C（Business to Consumer）領域における顧客の信頼とロイヤリティを決定する要因に関する研究に†1 東洋大学†2 東洋大学

ビゲーションがより使いやすい．これにもとづき，グローバル企業はウェブサイトを設計する際に現地の文化を考慮する必要があると述べている[7]． C. Zhu も，異文化間 UI
デザインに関する研究の中で，UI デザインにおいて現地の文化に適応化する必要があることを示している[8]．Singh

情報連携学研究科
情報連携学部© 2023 Information Processing Society of Japan1059

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

等は，標準化されたウェブサイトと文化的に適合するよう

3P-71
2023/3/1

ビックカメラにカスタマイズされたものとを消費者が比較して，後者の方が情報取得とナビゲーションのユーザビリティが高いこが運営する EC サイト．）

ニトリ

XiaoMI （総合家電メーカーの EC サイト）

SHOPLIST

網易厳選（ネットイース）（中国テック大手のとを明らかにした[9]．
いずれの研究も，UI をそれぞれの地域の文化にあわせてカスタマイズすることの有効性を示している．
2.3

UI/UX に影響する要素

蘇寧（スーニン)（中国家電販売大手の蘇寧電器

網易が自社商品を販売する EC サイト）

ブックオフ

Nielsen は UI に影響する要素として，ウェブサイトのデファーウェイ(HUAWEI

通信機器大手メーカー）の EC サイト

ザインを成功させるには，さまざまなユーザグループのニーズ，能力，制限（性別，年齢，教育，親しみやすさなど），ウェブサイトの使用頻度とインターネットの使用経験に関連する学習要因を考慮する必要があると述べている[10]．
Coursaris 等は，サイトの色が UX に影響することを示唆し，寒色系は清潔感や爽やかな印象を持たせてユーザビリティに良い影響を与え，暖色系はユーザの楽しさを高め，購買意欲を高めると述べている[11]．Diego 等はウェブサイト
上の画像数と画像の説明文の長さが顧客の感情（楽しみとストレス）と行動意図に影響を与えるとし，たとえば写真の数が同じ場合，短い説明はユーザの楽しみを増やし，長いテキストはユーザのストレスを増やすと述べている[12]．

(a) 日本のサイト

本稿ではこれらの従来研究も参考に，サイトの配色，レイアウト等に関する検討を行う．

3. 分析
3.1 調査対象調査は日本と中国の人気 EC サイトから国ごとにそれぞれ 10 個を選択し，そのトップページのデザインを対象として行った．対象としたサイト一覧を表 1 に，サイト画面の一部を図 1 に示す．
表 1

調査対象

日本

(b) 中国のサイト（一部、網かけ）中国

楽天

図 1. 調査対象としたサイト画面例

Taobao（中国国内 EC 市場において，取引額全体の 80％以上を占める人気サイト．）

ZOZOTOWN

JingDong（Taobao に次ぐ中国第 2 位の総合 ECサイト．）

ユニクロ

Yahoo シ ョ ッピング
マツモト
ヨシキ

配色については，ページ全体に占める暖色系と寒色系の比率を調査した．これは従来の研究においても，これらがPinDuoDuo（友人や知人等の複数人で商品を大ユーザの購買意欲にも関係することが示されている[11]た量購入し，商品単価を安く抑える中国最大の共めである．

同購買型 EC サイト．）GU

3.2 配色に関する調査

調査方法としては，OpenCV（https://opencv.org/）を用い

DangDang（書籍をメインで，書籍以外の商品もて色検出をして画像を HSV 色空間に変換し，暖色系と寒幅広く取り扱う総合 EC サイト．）

色系の割合を調査した．一般的に赤・オレンジ・黄など暖Zhen Kuaile（中国の家電大手 国美(グオメイ)のかく感じられる色が「暖色」，青緑・青など冷たく感じられ通販サイト．）る色が「寒色」と呼ばれる．今回の調査で暖色と判断した

Jing Xi（京東の共同購入型 EC サイト．）© 2023 Information Processing Society of Japanのは図 2 の赤文字で示した部分であり，寒色は青文字で示した部分である．

1060

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

3P-71
2023/3/1(2) ヘッダー
さらにサイトの最上部に位置するヘッダー部分は，ユーザが使いやすいため，さまざまな機能を設置するのが一般的であるが，ここでも日本と中国では違いがある．
日本の EC サイトのヘッダーに設置されている機能は，全 10 サイトの中で次の通りであった．
検索バー（10），カート（7），メニュー（4），お知らせ（4），バーコードスキャン（2），カテゴリー（1），問い合わせ（1）一方，中国では，全ての検索欄の近くに問い合わせボタン，スキャン，写真を撮る機能がある．それぞれの例を図4 の(a)と(b)に示す．

(a) 日本の EC サイト例

表 3.

⽇本サイトの図 2. 暖色、寒色とした範囲
掲載項⽬とサイト数
結果を表 2 に示す．日本・中国いずれのサイトも白が画面の約 60%を占めるが，暖色系に関して中国は日本の約 2倍，寒色系で中国は日本の約 6 割である．結果的に，一見したときの印象としても，日本のサイトは落ち着いた感じで，中国のサイトは派手な感じとなっている．
表2

日本・中国 EC サイトの白・暖・寒色の割合
⽇本

中国

⽩

58.5%

63.4%

暖⾊系

6.7%

12.6%

寒⾊系

3.1%

1.9%図 3. 中国サイトの3.3 レイアウトと内容に関する調査(1) レイアウトのデザイン
一般的に，日本のサイトはレイアウトが企業によってバ基本レイアウト項⽬

site

検索バー数
10

バナー

9

おすすめ商品9

タイムセール8おすすめ特集

7カテゴリ

7ランキング7グロバルナビ

6

お知らせ

6

トピックス

6

新着

6

最近 check5

ラバラであるが内容は基本的に同じ項目を掲載している傾向が強く，中国のサイトは，レイアウトはほぼ統一されているが内容は企業によってバラバラな傾向が強いように見える．ただし，セールやお薦めの掲載は多い．
中国サイトはレイアウトが一定の傾向があるので，基本的なレイアウトを図 3 に示す．一方日本サイトは掲載項目が一定の傾向があるので，表 3 には，日本サイトが掲載している項目と，全 10 サイトのうち，その項目を掲載してい(b) 中国の EC サイト例

るサイト数を示す．この表でわかるように，日本の EC サ

図 4. EC サイトのヘッダー部分

イトでは検索バーは必ずあり，バナーとおすすめ商品は90%のサイトにあり，タイムセールは 80％のサイトにある．

© 2023 Information Processing Society of Japan1061

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

3P-71
2023/3/1(3) カラムの構成

日本の EC サイトは 80％が 3 カラムを採用し，30％が 2

一般に情報量が多いサイトはよくマルチカラムレイア
ウトを使用しており，Web サイトの多くは，1 カラム〜3 カカラムを採用している．１カラムに４要素が並んでいるサイトはない．画面例を図 7，カラム数を表 5 に示す．

ラムで構成されている（図 5）．

図 5. カラムの構成
中国の EC サイトは１カラムレイアウト，2 カラムレイ

図 7. 日本サイトの 3 カラム例

アウト，3 カラムレイアウトを複合的にページ全体に組み
表 5合わせて使用しているパターンが多い．また，１カラムに日本サイトのカラム４つ要素を並べることも中国の EC サイトの１つ特徴である（図 6）．画面例を図 6，カラム数を表 4 に示す．

図 6.

１カラムに４つ要素が並んだもの
表 4

中国サイトのカラム

２カラム

３カラム

楽天

○

○

ZOZOTOWN

×

○

ユニクロ

×

○

GU×

○

Yahoo ショッピング

×○

マツモト

○x

ビックカメラ

○x

ニトリ

×

○

キヨシ

２カラム

３カラム

4 要素/カラム

SHOPLIST×○

Taobao

○

×

○

ブックオフ

×

○

JingDong

○

×

○

⽐率

30%80%

PinDuoDuo○

×○

DangDang○

×○Zhen Kuaile

○

○

×

Jing Xi

○

×

○

蘇寧

○

×

×

XiaoMI

○

○

○

網易

○

○

×

HUAWEI○×○100%30%90%

⽐率(4) 商品画像サイズ
カラム数ごとに，その中に表示される商品画像のサイズについても調査した．横幅 750px の画面サイズを基準として調査している．
中国の EC サイトでは，2 カラムの各エリアの平均値は347px×346px，3 カラムでは 220px×220px であり，1 カラムに 4 要素が並ぶ場合の画像サイズは，平均で 142px×141px であった．
日本の EC サイトの画像サイズも同じく横幅 375px の画面サイズで調査し．日本の EC サイトでは，2 カラムでの画像サイズの平均値は 209px×209px，3 カラムでの画像サイズの平均値は 249px×256px である．

© 2023 Information Processing Society of Japan1062

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

表 6.

3P-71
2023/3/1

中国サイトの商品画像サイズ

２カラム

３カラム

４要素の時

Taobao340x340×160x160

JingDong

350x350×160x160

PinDuoDuo

356x356×126x126

DangDang

345x345×156x156

Zhen Kuaile

350x350×128x116

Jing Xi

345x345×156x156

蘇寧

345x345×136x158

XiaoMI

350x350×156x124

網易

350x350220x220x

HUAWEI

340x340×100x115平均

347x346220x220142x141

表 7.

日本サイトの商品画像サイズ

図 8. タイトルのフォント
表 8.

タイトル部分のフォントサイズ楽天

SHOPLIST

ユニクロ

⼈気ランキング

30

20

22

おすすめ特集-20

22

タイムセール

30

20

22

お知らせ

30

-

22

２カラム

３カラム

255 x 255

310 x 310

ZOZOTOWN

×250 x 300

ユニクロ×220 x 220

スクロール方法については，日本の EC サイトの 60%はGU×248 x 248 /280 x

ページの縦スクロールだけではなく横スクロールができる

Yahoo ショッピン

×208
220x220（図 9）が，中国の EC サイトは縦スクロールしかない．まグマツモトキヨシ186 x 186

×

ビックカメラ

185 x 185×

ニトリ×220x220SHOPLIST×300x300

ブックオフ

×195x280

209 x 209249x256

楽天

平均

3.4 スクロール方法についてた，中国の EC サイトはすべて無限スクロールできる．

図 9.

(5) フォントサイズ横スクロールする画面調査の結果，日本の EC サイトでは各項目のタイトルのフォントサイズがほぼ等しい（図 8，表 8）．中国の EC サ
イトはタイトルをはっきり書いているところが少ない．

4. 考察
以上，いくつかの観点から日本と中国の EC サイトにおけるデザイン上の相違点を見た．相違には文化的な理由で説明できるものも，理由が不明で単なる慣例による違いの可能性があるものもある．たとえば中国サイトにおいて暖色系がよく用いられていることは，中国で買い物のときに，© 2023 Information Processing Society of Japan1063

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

日本よりもより明るい雰囲気を出す方が好まれると想定できる．日本においてサイトに掲載される項目が比較的統一されていることは，一部は商品販売ルールにもとづくものもあるだろう．

3P-71
2023/3/1

5. おわりにEC サイトを国別にカスタマイズする際の参考にすることを目的とし，日本と中国のサイトデザインの定量的比較を行い，配色，レイアウト等に関する相違点を示した．そさらに，これらの考察の参考とすることを目的として日本と中国のサイトを見る時のユーザそれぞれ 2 名ずつの視線の動きを測定したところ，次のような結果を得た（いずれぞれのサイトを見る際のユーザの視線移動に関してもいくつかの知見を得た．今後は，これらの知見を活かした ECサイトデザインツールの検討を進める予定である．

れもそれぞれを母国語とするユーザ）．
まずは，日本と中国のユーザの共通点はファーストビューであり，ページの中心の部分を注目している．また，両謝辞

本研究は，東洋大学重点研究推進プログラムにより助成を受けたものです．同助成に感謝いたします．

国ともにユーザはバナーをあまり見ていない．
相違点は以下の2点があった．中国のユーザが商品を見る順番は，「商品画像欄における商品→商品画像欄の文字→下にある商品の説明文」であり，商品画像内に文字が多い
場合，商品の説明文も値段もほとんど見ない．一方，日本のユーザが商品画像を見る時は商品を中心に見て，画像内の文字があまり読まずに商品の説明文を読むという特徴がある．

(a) 中国サイト

参考文献[1] 令和 3 年度 電子商取引に関する市場調査報告書, 経済産業
省商務情報制作局 情報経済課, 2022.8,
https://www.meti.go.jp/press/2022/08/20220812005/20220812005h.pdf[2] Wajeeha Aslam, Annas Hussain(2019), Kashif Farhat, Imtiaz Arif,
Underlying Factors Influencing Consumers' Trust and Loyalty in
E-commerce, https://doi.org/10.1177/2278533719887451[3] Econsultancy(2011), "Reducing online customer
struggle",http://docs.media.bitpipe.com/io_10x/io_101973/item_46
0831/tealeaf-report_Econsultancy-Customer-Struggle-B.pdf[4] Parboteeah, D.V.; Valacich, J.S.; and John D. Wells. The influenceof website characteristics on a consumer's urge to buy impulsively.
Information Systems Research, 20, 1 (2009), 60-78.
[5] Lee, G.-G. and Lin, H.-F. (2005) Customer Perceptions of E-Service
Quality in Online Shopping. International Journal of Retail &Distribution Management, 33, 161176.https://doi.org/10.1108/09590550510581485[6] Park, C. H., & Kim, Y. G. (2003). Identifying Key Factors Affecting
Consumer Purchase Behavior in an Online Shopping Context.
International Journal of Retail & Distribution Management, 31, 1629.https://doi.org/10.1108/09590550310457818[7] 菊盛真衣, 石井隆太,グローバルカンパニーによる文化的カスタマイゼーションが Web サイトの使用容易性に及ぼす影響 （2020.）,マーケティングジャーナル 40(1) 56-67[8] C. Zhu, Re-examining cross-cultural user interface designindicators: An empirical study. Theses. University of Twente,Netherlands, 2015.
[9] Singh, N., Fassott, G., Zhao, H., & Boughton, P. D. (2006). A crosscultural analysis of German, Chinese and Indian consumers'
perception of web site adaptation. Journal of Consumer Behaviour,5(1), 56-68. doi: 10.1002/cb.43[10] Nielsen, J. (2013). Top 10 Mistakes in Web Design.
www.nngroup.com/articles/top-10-mistakes-webdesign/[11] Coursaris, C. K., & Van Osch, W. (2016). A cognitive-affectivemodel of perceived user satisfaction (CAMPUS): The
complementary effects and interdependence of usability andaesthetics in is design. Information and Management, 53(2), 252264. https://doi.org/10.1016/j.im.2015.10.003[12] Diego Bufquin,Jeong-Yeol Park,Robin M. Back,Marco W.W.
Nutta,Tingting Zhang(2020). Effects of hotel website photographs
and length of textual descriptions on viewers' emotions andbehavioral intentions . International Journal of Hospitality
Management, Volume 87, May 2020, 102378,
https://doi.org/10.1016/j.ijhm.2019.102378(b) 日本サイト
図 10. サイト閲覧時の視線の動き© 2023 Information Processing Society of Japan1064