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

1P-812024/2/28

日中 EC サイトの相違の分析に基づくデザイン制作支援ツールの開発鄒暁嬌†1

神場知成†2

概要：日中 EC サイトのデザイン的な特徴をできるだけ定量的に調査，比較し，それを反映した越境EC サイトのデザインツールを開発した．日本の EC サイト，中国の EC サイトがそれぞれ相手国のユーザを対象としたときに，相手国の習慣や好みにあわせたサイトを作成することで自然に受け入れられ，ビジネス的にも拡大しやすくなる可能性がある．ツールの使いやすさおよび，作成したサイトデザインが相手国ユーザにどのように受け入れられるかという観点で日中双方の被験者による基礎的な評価を行い，一定の効果を確認した．さらに商品画像の特徴の相違にも着目し，商品画像をそれぞれの国の特徴にあわせて制作するための参照画像とすることを目的とし，生成 AI の一種である CycleGAN により相互に自動変換する試みも行った．今後，越境 EC はますます拡大すると期待されており，本稿に示すようなツールはその発展に貢献すると考える．

1. はじめにる[5] [6] [7] [8] [9].
さらに菊盛等，C. Zhu，Singh 等の研究によれば，文化的電子商取引（EC）が急速に成長して国際市場への越境販にカスタマイズされたウェブサイトは現地の消費者にとっ売は企業にとって重要なビジネス戦略の一部となっているて情報入手が容易で，ナビゲーションが使いやすいという[1]．異なる国や地域の消費者に適したウェブサイトを提供

結果が示されており，グローバル企業はウェブサイト設計することは，多くの企業にとって重要な課題となっている

時に現地の文化を考慮すべきと強調している[10] [11] [12].

が，その際に各国の文化，言語，視覚的な嗜好に合ったウェブサイトデザインを作成することが重要である．
本研究の目的は，越境 EC サイトの中で特に日本と中国との取引を対象とし，一方の国の企業が他方の国のユーザに対して EC サイトを提供するために有効な支援ツールの開発である．
以下では，まず日中 EC サイト画面をできるだけ客観的3. 日中 EC サイト UI デザインの比較分析3.1 分析対象
調査は日本と中国の人気 EC サイトから国ごとにそれぞれ 10 個を選択し，スマホ向けトップページのデザインを対象とした．調査対象サイトは以下の通りである．

かつ定量的に分析した結果を述べ，それを反映して作成し・日本：楽天，ZOZOTOWN，ユニクロ，マツモトキヨシ，たデザイン支援ツールおよび基本的な評価結果について述

GU，ビックカメラ，Yahoo ショッピング，ニトリ，SHOPLIST，

べる．さらに，日中で商品紹介画像の特徴が異なることをブックオフ

踏まえ，画像変換の支援機能についても実験的な開発を行・中国：Taobao，JingDong，PinDuoDuo，DangDang，Zhenった．

Kuaile，Jing Xi，蘇寧，XiaoMI，網易厳選，ファーウェイ
3.2 配色の比較

2. 関連研究

画像処理ライブラリ OpenCV を用いて画像の色検出をして HSV 色空間に変換した上で，ページ全体に占める暖色UI/UX に影響する要素について，Nielsen はユーザのニー系と寒色系の比率を調査した．これは従来の研究においてズや能力，ウェブサイトのデザインに関する要因を考慮すも，これらの配色がユーザの購買意欲にも関係することがる必要があると述べ，Coursaris らは色彩や画像説明文が示されている[3]ためである．

UX に影響を与え，Diego らはウェブサイト上の画像数と画結果を表 1 に示す．日本・中国いずれのサイトも白が画像の説明文の長さが顧客の感情と行動意図に影響を与える

面の約 60%を占めるが，暖色系に関して中国は日本の約 2ことを指摘している[2] [3] [4].

倍，寒色系に関して中国は日本の約 6 割である．結果的に，

EC サイトの UI/UX デザインに関する研究によれば，UIは顧客のユーザビリティと満足度に大きな影響を与え，EC一見したときの印象としても，日本のサイトは落ち着いた印象で，中国のサイトは派手なものとなっている．

サイトの年間収益にも重要な影響があることが示されてい†1 東洋大学
†2 東洋大学

情報連携学研究科
情報連携学部© 2024 Information Processing Society of Japan550情報処理学会 インタラクション 2024
IPSJ Interaction 2024

表 1.

1P-812024/2/28

日本・中国 EC サイトの配色の比較
⽇本

中国

⽩

58.5%

63.4%

暖⾊系

6.7%

12.6%

寒⾊系

3.1%

1.9%

3.3 レイアウトの比較
一般的に，日本のサイトはレイアウトが企業によってバ

図 1.

ラバラであるが内容は基本的に同じ項目を掲載している傾向が強く，中国のサイトは，レイアウトはほぼ統一されているが内容は企業によってバラバラな傾向が強いように見える．ただし，セールやお薦めの掲載は多い．
また，カラムの構成については，日本の EC サイトは 80％が 3 カラムを採用し，30％が 2 カラムを採用している．１
カラムに４要素が並んでいるサイトはない．一方中国の EC
サイトは１カラム，2 カラム，3 カラムレイアウトを複合的にページ全体に組み合わせて使用しているパターンが多い．
また，１カラムに４つ要素を並べることも中国の EC サイ
トの１つ特徴である．
画像サイズ，フォントサイズ，ヘッダー部分に設置している機能も違いがある．
3.4 スクロールタイプ
日本の EC サイトの 60%はページの縦スクロールに加え画面構成

4.2.2 基本操作
ここでは，日本の企業が中国向けの EC サイトのデザインを行う場合を例として説明する(1) テンプレートの選択
上記の①のエリアにおいて，タブを「中国向け」とするとテンプレートの候補リストが表示され，その中から適切なものを選択すると，選択したテンプレートは，②の編集エリアに追加される（図 2）.
(2) 文字の修正
編集エリアにおいてテキストボックスにカーソルを合わせれば，そのままテキストが入力できるようになっている．ここで必要なテキストを入力する．

横スクロールができるが，中国の EC サイトは縦スクロールしかない．また，中国の EC サイトはすべて無限スクロールが可能である．

4. デザイン制作支援ツール
4.1 支援ツールについて
本システムは，日中両国の中小企業や個人が海外進出する際に，相手国のユーザが慣れている UI を持つ EC サイトのデザイン作成を支援するツールである.ツールは第図 2.

テンプレートの追加

3 章で分析した両国 EC サイトのデザインの特徴を反映したテンプレートやコンポーネントを提供し，デザインの専門知識や経験がない人でも要素を選択して組み込むだけで，デザインを簡単に作成できるものを目指した．設計対(3) 画像の追加と削除
図 3 のように画像のアイコンをクリックすると画像の候補が表示され，選択すると画面に挿入される．

象はスマホ画面とした．
4.2 ツールのユーザインタフェース
4.2.1 画面構成
図 1 に画面構成を示す．画面左①には，デザインテンプレートとコンポーネントが表示される．このエリアで設計者がテンプレートや使いたいコンポーネントを選ぶと編集エリア②に表示され，画像を入れたり文字を修正したりできる．右上③は制作中デザインのプレビューボタンである．

© 2024 Information Processing Society of Japan

図3

画像の追加

551

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

削除したい画像の上にカーソルを置くとゴミ箱のアイ

1P-81
2024/2/28

上での表示を確認できる（図 7）．

コンが表示されるのでクリックすると，画像を削除することができる.
これらの機能を用いてデザイン制作を完了した画面例
を図 4 に示す．

図6
図 4.

オリジナルデザイン編集

デザイン制作完了画面

4.2.3 コンポーネントの操作
前節ではユーザが，あらかじめ必要なコンポーネントが設定されたテンプレートに基づいてデザインを作成する
方法を示したが，テンプレートには必要に応じてコンポーネントを追加し，さらにオリジナルなデザインを実現できる．以下ではその手法を述べる．
図7(1) コンポーネントの追加
まず，前節の（１）の手順によりテンプレートを選
ぶ．次にタブで，「コンポーネント」をクリックする.すると，さまざまなコンポーネントを表示がされるので，欲しいコンポーネントをクリックすると編集エリアの末尾に追加され，このコンポーネントが利用可能になる（図 5）．

プレビュー画面

5. 評価
5.1 ツールの UX について
まずツールの基本的な使いやすさを確認した．
(1) 被験者
実験は日本人と中国人で 20～30 代の男女それぞれ 5 ま
たは 6 名ずつの被験者を対象とした．評価対象は本デザイ
ン支援ツールの UI とし，具体的には，ツールの使いやすさ，有用性，およびユーザの満足度に焦点を当てた．
(2) 実験方法
被験者には，自国 EC サイトの参考ページを参照した上で，提供されたツールとデータを使用して相手国向けの ECサイトのデザインを作成してもらった．実験者は被験者の作業を観察し，作業時間などを記録するとともに，デザイン作業の終了後に，ツールの使いやすさ，有用性など UX

図 5.

コンポーネントの追加に関するアンケート調査を行った．ただし，相手国のデザインを作成する際に，言語の部分は自国語で記述してもら(2) コンポネートの移動と削除っている．

コンポーネントの位置を移動したい場合は，移動したい(3) 結果コンポーネントの上にカーソルを置いて，表示される上/下ボタンを上/下ボタンで操作して移動する．
削除したいコンポーネントをゴミ箱に移動すると，コンポーネントが削除される．
(3) オリジナルデザインの編集とプレビュー
追加したコンポーネントを用いてオリジナルデザインを編

まず被験者の事前スキルを確認したところ，全員がパソコンの使用経験は豊富で，デザインについての基本的な知識も保有していた．参加者のうち 22.2%は，Figmaや Adobe Xd などデザインツールの経験があった.
デザイン作業において，参加者には以下の 3 つの選択肢を提供した．

集し（図 6），右上のプレビューボタンを押すことでスマホ© 2024 Information Processing Society of Japan552

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

1.

テンプレートを元にコンポーネントを追加

2.

すべてテンプレートだけで制作

3.

コンポーネントを自由に組み合わせて制作

1P-81
2024/2/28（配色）→ 100%が「（やや）適切」
3.ているサイトの要素配置と似ていますか？（類似性）

結果として，50%の参加者が 1 つ目，30%が 2 つ目，→20%が 3 つ目の選択肢を選択して作業を進めた．サイト
制作の完了までにかかった時間は，平均で 1 時間であ

サイトのレイアウトや要素配置について，いつも使っ67％が「（やや）似ている」，33％が「どちらとも言えない」
4.

る．

サイト内で何かわからないことや違和感を感じる要素や箇所がありましたか？（違和感）

実験後に行ったアンケートの主な結果を図 8 に示す．

→

ツールの使いやすさに関する評価では，80%の参加者がツールの操作は（やや）理解しやすいと回答し，90%の66%が「（ほとんど）ない」，17%が「どちらとも言えない」
5.

サイト内の説明文やサイトの使い方が理解しやすい

参加者が，画面要素の入力は（やや）直感的だと評価しと感じますか？（理解しやすさ）

た．ただしツールの学習コストに関しては意見が分かれ→ 100%が「（やや）理解しやすい」

た．50%の参加者は（やや）学習しやすいと感じた一

6.

方，40%の参加者は（やや）学習しにくいと回答した．

すか？（おすすめ）

ツール全体の UI に関する評価では，80%の参加者が使いやすいと感じ，80%の参加者がツールを使用する際他の人にこのサイトのテンプレートをおすすめしま→ 100%が「（やや）おすすめ」

7.

もし，このようなサイトで買い物するとしたら，抵抗にストレスを感じなかったと回答した.デザイン支援ツ感はありますか？（抵抗感）

ールの提供するデザインテンプレートや機能について→100%が「（あまり）抵抗感がない」

は，80%の参加者が越境 EC サイトの作成に役立つと回答し，80%の参加者が他の人にこのツールを推奨する意向を示した.

図 8. 主なアンケート項目と結果

5.2 作成したデザインの妥当性
次に，日中双方のサイトを，利用対象として想定するユーザが見たときの印象について，基本的な評価を行った．
具体的には，日本人被験者が中国向けに作成したサイトを中国人被験者 3 人に閲覧してもらい，中国人被験者が日本向けに作成したサイトを日本人 3 人が確認した．ただし，サイト作成の際に言語の部分は作成者の自国語で記述して図 9. 作成されたデザインの妥当性もらっており，実験者がその部分を相手国の言語に翻訳した上で，下記の評価を行った．以下は質問と結果の概要であり，結果の全体を図 9 に示している．なお，ここでは全6 人（日本人 3 人，中国人 3 人）の回答結果を合わせて示しているが，双方による回答傾向の相違はない．
1.

このサイトのデザインがあなたの国や文化に適合していると思いますか？（適合度）→

83％が「（やや）適合する」，17%が「どちらとも言えない」
2.

この結果を見るかぎり，ツールを用いて作成したウェブサイトのデザインについて，基本的に良い評価が得られている．特にサイトのテンプレートや配色については大きな問題がない．さまざまな種類のサイト制作に対する実験は今後の課題だが，相手国のサイトの特徴を反映したデザインツールを用いるというアプローチについては有効な可能性が高いと考えている．

サイトの色合いや配色について，どう感じましたか？

© 2024 Information Processing Society of Japan553

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

1P-81
2024/2/28

6. 画像生成支援ツール
ここでの目的は，自国の EC サイトに掲載している商品画像を相手国向けのサイトに掲載するための制作支援機能の開発である．たとえば日本の EC サイト向けの商品画像がある場合，中国向けサイトに適した商品画像に変換してくれる機能は非常に有効であろう．これを完全自動で制作することは現時点では困難と思われるが基礎的な検討として，深層学習の一種である CycleGAN（Cycle Generative
Adversarial Networks ： https://github.com/junyanz/pytorch-(a) 中国→日本

CycleGAN-and-pix2pix ）を用いた画像自動変換の実験を行(b)日本→中国
図 10. 画像変換例

った．具体的には，中国の商品画像を日本風のスタイルに変換し，逆に日本の商品画像を中国風に変換する試みであさない場合が多い．これについては言語部分を分離しる．以下にその手順を示す．てテキストとして生成する等の工夫が必要であろう．
上記はきわめて基礎的な実験であり，すぐに全自動化す①②

データ収集：まず，各国の EC サイトから，1000 枚ずることを狙ったものではないが，現時点のレベルでも，少つの商品画像を含むデータセットを収集した．このデなくともサイト制作者が「どのような雰囲気の画像にすれータセットは，商品の形状，デザイン，PR 文言な各ば良いか」というヒントを与えるものとしては意味がある国の文化や嗜好を反映している.と考えている．今後は，単に日本と中国の商品画像をそのCycleGAN のトレーニング：収集したデータセットをまま学習させるのではなく，あらかじめ商品部分と文字部利用して，CycleGAN モデルをトレーニングした.この分を分離してから学習するなどの工夫により，品質を向上

モデルは，中国の商品画像を日本風の商品画像に変換させることを検討したい．

するものと，逆に日本の商品画像を中国風に変換するものである．200 エポックのトレーニングにより，画像のスタイルや要素を相互に変換するための学習が行われた．
③

学習したモデルに，日本または中国の商品画像を入力し，相手国にあわせた画像を生成する．
上記のプロセスによる変換画像の例を図 10 に示す．やや雰囲気が感じられる部分もあるが，商品の形や PR 文言の多くは不自然な場合が多々発生している．典型的な問題点は以下の通りである.
①

商品の形状が正確に取り出せない.
一般に，中国の商品画像は多数の文言が写真とともに表示されている場合が多く，日本の商品画像は商品だ

7. 今後の課題
本論文の中でツールの使いやすさ等について基本的な評価を行ったが，さらにツールの有効性を評価するためには，既存のツールとの比較実験をする必要がある．
また，両国のユーザの好みに合った商品画像を自動生成することも，ユーザーエクスペリエンスの向上，地域別のカスタマイズ，コンテンツデザインの最適化，競争優位性の確立など，多くの利点をもたらす可能性がある．今回用いた CycleGAN は画像から画像への変換に適するが，特定のオブジェクトのセグメンテーションやテキスト生成には限界があるため，今後はテキスト生成モデルの導入やデータの拡充などが必要になるであろう．

けがシンプルに表示され，背景も白という場合が多い．
例えば，図 10(a)下における，冷蔵庫の画像を中国から②

8. おわりに日本風に変換した例では，中国の画像では冷蔵庫の前

日中 EC サイトのデザイン的な違いに着目して分析する

面に PR 文言が表示されているため，変換後の画像でとともに，それぞれの国の特徴にあったサイトのデザインは冷蔵庫のその部分が欠落してしまった.

を支援するツールを開発した．ツールの使いやすさや，あPR 文言や商品説明文のデザインが適切に生成できなる程度の効果を確認したが，さらに商品画像の自動変換機

い.

能などチャレンジの余地が多く残されている．今後越境

これは当然であるが，日本から中国風に画像変換するEC が拡大することは確実であり，本稿で示したようなツ場合は，変換後の画像において PR 文言や商品説明文ールの必要性は拡大すると考えている．

が適切に生成されないため，具体的な内容やデザインが不足した.「文言のようなもの」が画面上に表示されるものの，それは文字になっていなかったり意味をな© 2024 Information Processing Society of Japan

謝辞

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

554

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

1P-81
2024/2/28

参考文献[1] 令和 3 年度 電子商取引に関する市場調査報告書, 経済産業省商務情報制作局 情報経済課, 2022.8,
https://www.meti.go.jp/press/2022/08/20220812005/20220812005h.pdf[2] Nielsen, J. (2013). Top 10 Mistakes in Web Design.
(https://www.nngroup.com/articles/top-10-mistakes-webdesign/)[3] 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.
[4] 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.
[5] Wajeeha Aslam, Annas Hussain(2019), Kashif Farhat, Imtiaz Arif,
Underlying Factors Influencing Consumers' Trust and Loyalty inE-commerce.
[6] 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[7] 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.
[8] 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[9] 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.
[10] 菊盛真衣, 石井隆太,グローバルカンパニーによる文化的カスタマイゼーションが Web サイトの使用容易性に及ぼす影響（2020.）,マーケティングジャーナル 40(1) 56-67[11] C. Zhu, Re-examining cross-cultural user interface designindicators: An empirical study. Theses. University of Twente,Netherlands, 2015.
[12] Singh, N., Fassott, G., Zhao, H., & Boughton, P. D. (2006). A
cross- cultural 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© 2024 Information Processing Society of Japan555