お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2024/08/24 15:09

イベント

世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 2024年8月23日,ゲーム開発者向けカンファレンス「CEDEC 2024」で,NetEase Gamesの末安 愛氏によるセッション「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」が行われた。

画像集 No.002のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.003のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 このセッションは,グローバル市場でUI/UXデザインを展開するために必要なクロスカルチャーやコラボレーションに興味を持つデザイナー,開発者,学生,さらにマルチカルチャーチームのリーダーを対象としたものだ。NetEase Gamesで日本と海外のクリエイターがどう協力しているのか,文化や言語の壁を超えて感動を生むデザインを実現できるのかなど,多様な文化が交わるチーム内でスムーズにコミュニケーションを取るための戦略と技術が語られた。

画像集 No.004のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 NetEase Gamesには,UIやUX,TA,VFXなど,さまざまなビジュアルスタッフが3000〜4000人ほど在籍する同社最大の部門「アートデザインセンター」があり,末安氏はその首席デザイナーを務めている。このように,ビジュアル面に大きな力を入れているNetEase Gamesのタイトルは世界中で高い評価を得ており,いくつかのデザイン賞も受賞している。

画像集 No.005のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 まずは,末安氏の仕事であるUX/UIデザイナーの観点から,NetEase Gamesとアートデザインセンターが採用する基本的な制作スタイルが紹介された。
 UXデザイナーとは,ユーザーリサーチ,仕様レビュー,画面設計など,実装実現性を考えながら企画とビジュアルチームを結びつける役職だという。日本のスタンダードな制作スタイルにはUXデザイナーという明確な立場はなく,デザイナーがUI/UXを含めたビジュアル面の制作に責任を持つケースが多いとのこと。この場合,企画とエンジニアが仕様の詳細を相談し,その後,デザイナーに共有されるという流れが一般的で,効率を重視し,かつデザイナーの業務範囲がシンプルというメリットがある一方,デザインの最適解の提示や,新しい提案をするにあたっては,融通が利きづらい。

画像集 No.006のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 NetEase Gamesでは,UIデザインとUXデザインは分けられており,工程としては,企画とデザインの中間に存在している。プランナーから企画の概要を聞いたあと,UXデザイナーが詳細を詰め,画面設計をし,ワイヤーフレームを作成後,UIデザイナーとエンジニアとの仕様共有を行っている。
 このスタイルのメリットは,UXデザイナーが先行することで,ビジュアル面の提案がしやすく,作業前に完成形をイメージでき,齟齬の少ないスピーディな開発が可能になることだ。また,各担当者が自分の専門分野に集中できるメリットもあるという。

画像集 No.007のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.008のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 続いて,運営段階での機能開発改修プロセスについても触れられた。運営タイトルの改修を行う場合,ユーザーアンケートやフィードバックを収集し,プランナーとUXデザイナー,UIデザイナーが集まって,やるべき項目をリストアップする。それを現地や上位デザイナー,専門知識を持つスタッフが精査し,その結果に基づいて制作と実機テストが行われるそうだ。
 この“リストアップから実機テストまで”の期間は,わずか1週間だという。リストアップされた項目をある程度,消化したら,再びユーザーのフィードバックを集め,精度を高めていくことになる。このフローは全社で統一され,マニュアル化もされており,プロジェクトごとの差はほとんどない。

画像集 No.009のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 なお,ユーザーの反応を重視しているのは,ゲーム愛好者へ向けた熱量の高いゲームを作るためで,NetEase Gamesが重視していることであり,プランナーが最も集中するべきポイントだという。以上のことから,UXデザイナーが画面設計を行うのは理にかなったスタイルではないかと末安氏は語った。

画像集 No.010のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 NetEase Gamesでは最近,UIP(UIプログラマー),TA(テクニカルアーティスト),VFXアーティストといった役職も採用しているという。
 これらは,完成したデザインを実装可能な形式に書き出したり,UIの最適化を行ったり,実装に関わる問題に対応したりなど,デザイナーとエンジニアの中間に位置する仕事を受け持ち,それぞれの段階で専門家が対応することで,スピーディでクオリティの高い実装が可能になる。こうしたデザイナー先行型の開発フローや,それぞれが自分の職域に集中できる分業化などによって,NetEase Gamesはビジュアル面で大きな成功を収められたという。

画像集 No.011のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.012のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.013のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 「国境を超えるデザイン戦略」として,仕様とデザインのローカライズについての解説も行われた。一般的に,海外進出の際に対応すべきは,「言葉」「視覚文化」の2つだ。しかし,それらの対策を十分に行っていても,実はまだ足りない部分がある。それを解決するためにNetEase Gamesが行っているのが,「仕様」と「デザイン」のローカライズだ。
 言葉と視覚文化のローカライズはあくまで“見える”部分のローカライズであり,表面的な対応に過ぎない。より深いローカライズには,開発段階から現地の流行やゲーム習慣を理解し,これを取り入れることで,ゲームファンにより愛されるようになる。ここで重要なのが,国民性を考慮したテキストの誘導や,見慣れたデザインを取り入れるための現地デザイナーだ。

画像集 No.014のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.015のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.016のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 ここで,実際に文化の違いによるデザインの違いの例が挙げられた。例えば日本と中国では,「赤色」というと,どちらも「お祝い」をイメージする華やかでおめでたい色になる。しかし,それを視覚的に表現すると,日本と中国ではかなり異なるデザインになる。
 また,「使いやすい」デザインを目指したとき,日本では「シンプルで機能的なデザイン」を指すことが多いが,ほかの国では,「情報量が豊富で,複雑なデザイン」を指すことがある。これらは生活習慣や文化に基づく価値観の差異から生まれたもので,同じ単語で同じ事象を想像しても,実態としてはまったく違う場合があるという。

画像集 No.017のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.018のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 こうした壁を解決するためには,まず「仕様」からローカライズする必要がある。それは,仕様書を各国の言語や文化に合わせて翻訳するだけでなく,現地クリエイターが正確に理解できるような解説を加え,意識を共有することだ。
 開発段階でイメージを伝える際,流行のものを指して「“あれ”っぽく」という伝え方が使われがちだが,海外メンバーはそもそも“あれ”を知らない可能性があり,知っていたとしても,経験や価値観によって異なる解釈をしている場合がある。したがって,具体的に「このタイトルの」「この部分の」「こういう点に注目している」など,詳細な説明を行うことで意図を正確に伝えられる。

画像集 No.019のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.020のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 さらに,コンセプトや実例を挙げる場合,「日本の中のイメージ」を前提にしてしまうこともある。日本で「ゲーム文化の発展」をイメージすると,アーケードに始まり,PC,家庭用ゲーム機,フィーチャーフォン,スマートフォンと,世界のゲーム文化をほぼすべて網羅して発展してきた。
 しかし中国では2000年以前,ゲームはあまり浸透しておらず,日本の家庭用ゲーム機の時代にPCのオンラインゲームが流行し,フィーチャーフォンの時代はほぼなく,一気にスマートフォンへと発展した。そのため「ゲームの思い出」という言葉からは,ファミコンやPlayStationではなく,PCに向かっている姿を浮かべるかもしれないという。

画像集 No.021のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.022のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 そのほかにも,英語ならなんとなく伝わるだろうといった思い込みや,オノマトペや擬音のような他国語で適切な表現がないもの,直訳すると意味が伝わらない言い回しなど,さまざまな「通じない」あるあるが存在する。

 もちろん,これらをクリエイターがすべて解決するのはかなり難しいので,NetEase Gamesでは,AI翻訳やスタンプ機能など,業務ツールによる言語サポートに加えて,チーム専属通訳メンバーなど,クリエイターを支えることに尽力しているそうだ。

画像集 No.023のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.024のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 「デザイン」のローカライズだが,こちらも基本的には仕様と同じで,「“あれ”っぽく」や「日本の中のイメージ」を考慮することが大事だとしつつ,さまざまな実例が紹介された。
 おおまかな例としては,日本で一般的なUIをポップアップさせる動きは,中国ではクラシックな印象を与えること,頭身が低く幅広い年齢層を対象としたキャラクターデザインは,中国では幼い子どもを対象としているイメージになることが挙げられた。これは基準となる「一般的」なものが異なり,また子どもの頃に慣れ親しんだデザインが違うことから起きるという。

画像集 No.025のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.026のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.027のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 これらを踏まえて,ゲーム開発における具体的なデザインの違いがいくつか解説された。
 まずUIでは,日本の「ボタン」は“押せる感”を重視した立体的なデザインが多いが,中国ではフラットなデザインが好まれ,立体的なボタンは情報量が多く,見づらいと感じられる。
 ホーム画面のメニューでは,日本は汎用的なメニューを用意し,目的の機能まで順を追ってたどり着く設計が多いが,一方の中国では,頻繁に使う機能へダイレクトに遷移するボタンが大量に設置される。日本のUIは思考に沿って順に移動できるようにデザインされたものだが,中国では機能が少なく見えるうえ,目的の機能にたどり着くまでのステップ数が多く,操作が面倒に感じられるのだ。逆に日本から見た中国のデザインは,ごちゃごちゃしていて,目的の機能が探しづらく思われる。

画像集 No.028のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.029のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.030のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.031のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 こうした差異は,キャラクターの見せ方にも表れる。日本では,キャラクターを魅力的にするため,バストアップや,顔がよく見える画面にすることが多く,これらは漫画やアニメをバックボーンとした表現だという。一方,中国のデザインは,できるだけ全身を見せる写実的な表現になる。
 これは中国のプレイヤーが,キャラクターの動きやポーズなど,全身の動きを重視するからなのだそうだ。さらに,文字を含んだロゴデザインなどでは,日本は文字を前に出し,キャラ画像などを背景にするが,中国ではこれが逆になり,文字が隠れても画像を優先するのだという。

画像集 No.032のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.033のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.034のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.035のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 このように,それぞれの国にそれぞれの価値観が存在するため,自分たちの“魅力”が,相手にとっての“魅力”になるとは限らない。そのため,デザインの効果や受け入れられ方を分析し,必要に応じて調整することが大事だと,末安氏は述べた。
 とはいえ,すべての国に合わせるのは難しいため,NetEase Gamesの場合は,各国に合わせたホーム画面のデザインを導入している。コンセプトの60〜80%を維持しつつ,国ごとにカスタマイズし,とくに重視する市場には,特別なカスタマイズを施すこともあるという。

画像集 No.036のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.037のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 余談として,日本のデザインが,海外で注目されていることにも触れられた。
 末安氏によれば,任天堂の影響がやや強く感じられるものの,漫画やアニメとの融合,ロゴを多用する文化,整理された情報など,日本ならではデザインに注目が集まっており,こうした日本のデザイナーが持つ強みを活かすことも大事であるとのこと。

画像集 No.038のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.039のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

 最後に末安氏は,NetEase Gamesアートデザインセンター(ADC)の体制を紹介し,セッションのまとめを行うと共に,「本日の講演が,国際的なプロジェクトで成功を収めるヒントになってほしい」と述べてセッションを締めくくった。

画像集 No.040のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.041のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.042のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.043のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.044のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.045のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]
画像集 No.046のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024] 画像集 No.047のサムネイル画像 / 世界に通用する作品を作るために。「国境を超えて輝くデザイン 〜UI/UXデザイナーのためのクロスカルチャー入門〜」レポート[CEDEC 2024]

4Gamer「CEDEC 2024」掲載記事一覧

「CEDEC 2024」公式サイト

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:12月24日〜12月25日