eスポーツを魅力的に演出する「デザイン」の秘訣とは?デザイン経験者が解説!

「デザイン」という概念が登場して約160年、視覚的な付加価値を提供するツールとして活用されてきました。

昨今のインターネット普及も相まって、プロダクト領域だけ限らず、世の中の様々なサービスにおいてもデザインの必要性が高まっています。

まずはデザインについて簡単に説明し、次にeスポーツの世界と絡めながらご紹介していきます

デザインとeスポーツ

デザインの役割

デザインとは、ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される

デザイン-Wikipedia

少しかみ砕いて説明すると、

デザインとは、「美しさ」や「使いやすさ」など、その対象に適した”付加価値”を与えることが役割である、と言い換えることができます。

具体的に一例を挙げると、

  • 直感的にプレイできるようにするデザイン
  • ゲームのリアリティを高め、臨場感を生むデザイン
  • ターゲットに合わせた世界観のデザイン設計

などがあります。

デザインとeスポーツの関係

ゲームの印象を生み出すためのエフェクト表現や配色設計、ユーザーのプレイ体験を高めるためのUI設計など、eスポーツに関係する幅広い部分でデザインは活用されています。

また、大会の開催におけるイベント事業を通じた宣伝広告のデザイン、eスポーツ施設のインテリアデザインなど、今やeスポーツとデザインは切っても切れない関係です。

今回はデザインがゲームやeスポーツにどう影響し、そしてどう活かされているのかを具体例を交えながら、さらに深堀してご紹介していきます。

デザインはゲームにどのような影響を持つのか

ゲームの世界観を演出する

デザインにおける色の扱い方や表現の方法など、適切な工夫を施すことによって、与えたい印象をコントロールすることができます。

エフェクト表現

・グリッチ表現

例えば、近未来SFゲームではグリッチ表現が使われることがあります。

グリッチ表現とは、デジタルもしくはアナログで発生する画面ノイズのことです。
電子機器のコードやデータの崩れ、または物理的なダメージを受けた時に生じる不具合のことであり、デザインの一つとしてグリッチ表現が多様されることがあります。

グリッチ表現を用いることで、近未来世界を彷彿させるような、サイバネティックなイメージをプレイヤーに与える事ができます。その効果として、プレイヤー自身がその世界に本当にいるかのような没入感であったり、臨場感を高めるプレイ体験に繋げることが期待できます。

その点において、本格的でリアリティのある体験を楽しみたいプレイヤー層に向けて届けていくことができます。

eスポーツゲームの参考例として「VALORANT」などが挙げられます。

・HUD効果
https://www.youtube.com/watch?v=sgmC9kmFaHs

また、「HUD効果」などもゲーム内で多用されることがあります。

HUD効果とは、ヘッドアップディスプレイの略称であり、通常の視界と重なって情報が表示される方法のことです。

HUDを用いることで、空間に浮かび上がったような表示エフェクトになり、SF世界のような近未来的なイメージがぐっと増す効果があります。また、UI表示が画面に馴染みやすくなる特徴もあります。

その点において、FPSゲームをはじめとした様々なゲームのほか、映像に未来感を表現したい時によく使用される演出方法として重宝されています。

使用されたeスポーツゲームの参考例としては、「Apex Legends」「CS:GO」などが挙げられます。

配色デザイン

配色」からイメージを演出するアプローチもあります。

良い例として、任天堂のアクションゲームとして有名な『マリオブラザーズシリーズ』があります。
このゲームにおいて特徴的な点は、「明度と彩度の高い、色鮮やかな世界観」です。

鮮やかな色合いを用いる事で、ポップで高揚感が感じられるようなイメージを与える事ができます。その効果として、ゲームのイメージやプレイ体験に「ワクワク感」を与える事が期待できます。

加えて、小さなお子さんやカジュアル層にも親しみやすいイメージを与える事もできます。

eスポーツゲームの参考例として「フォールガイズ」「ポケモンユナイト」「大乱闘スマッシュブラザーズ」などが挙げられます。

ゲームのコンテンツを設計する

デザインのもう一つの側面として「設計」があります

ゲームにおける設計とは、例えばゲーム進行・操作方法・サウンド・世界観・キャラクター・デフォルメ設計など、そのゲームを形作る要素の多岐にわたります。

ここでは、「Switch」と「PSシリーズ」のゲームを比較しながら説明していきます。

Switch

Switchのゲームデザインの特徴を一言で表すと、
「万人向けで、カジュアルにプレイできるような設計」と言えます。

例えば「ポケモンシリーズ」「ゼルダシリーズ」「どうぶつの森シリーズ」などをはじめとした名だたるゲームがありますが、共通しているのは、誰もが取っ付きやすく、のんびりと遊ぶことができるゲーム設計となっている点があります。

ゲームデザインにおいて、デフォルメ度合が高く、ゲーム難易度も低いものが多く、操作も簡単に設計されている部分からも、万人に向けて考えられた設計だと分かります。

その点において、子ども向けや家族向けでプレイすること想定されており、ターゲットとしてカジュアルプレイヤー層に向けてデザインがされていると言えそうです。

PSシリーズ

一方PSシリーズのゲームデザインの特徴を一言で表すと、
「大人向けで、ボリュームのあるハイクオリティな設計」と言えます。

例えば「FFシリーズ」「GTAシリーズ」「CoDシリーズ」など、ゲームに馴染みのある層から評価を受ける作品が多く、操作性とアクション性が高いことからも本格的にゲームプレイをする想定で設計がされています。またCEROレーティングが高いソフトも多く販売されています。

ゲームデザインでは、デフォルメ度合が低いリアルな世界観が多く、ゲーム難易度が高いものもあり、操作が複雑な設計にされていることが少なくありません。

その点において、年齢層としては大人向けで、腰を据えてしっかりプレイすることが前提であり、ターゲットとしてはヘビーユーザー向けにデザインされていと言えると思います。

ユーザビリティを向上させる

ユーザビリティとは、一言で表すと「ユーザーが使い勝手の良いと感じられる仕組み」です。

記号を用いたデザイン例

例えば、記号も一つのデザインです。
「〇=はい」「×=いいえ」というイメージを私たちは経験的に持っています。

これを利用した具体例として、PSシリーズでも利用されている『DUALSHOCKコントローラー』があります。

私たちは「〇」と「×」について、以上のようなイメージを持っているからこそ、直感的にゲーム中の判断が実現している側面があります。例えばゲーム内アイテムの取捨選択や、選択肢の判断など、プレイヤーの意思決定が必要な場面において効果を発揮することが期待できます。

「DUALSHOCKコントローラー」と「PCのキーボード」の比較

ここからは、「DUALSHOCKコントローラー」「PCのキーボード」を比較して考えていきます。

ユーザビリティには「なるべく簡単に、迷わず、操作して、ユーザーの目的が果たせられるか」という観点が重要です。

例えば、初めてゲームを触る人がいきなりキーボードでゲームを操作をするとなると、ボタンの多さに「どのボタンを押せばいいか分からない」といった状況になりかねません。

「DUALSHOCKコントローラー」であれば、ボタンが限られており、左右にスティックが用意されてあるために、ある程度の操作の目星がつきやすくなっています。

その点において、ゲームを始めて触る人にとっては「DUALSHOCKコントローラー」の方がユーザビリティが高いと言えます。

一方「PCのキーボード」は、ボタン配置の自由度が高いことからeスポーツのプロの世界では支持を得ている側面もあります。

ゲーム内の情報を分かりやすく伝える

情報設計の一つとして、ユーザーインターフェース(UI)があります。

UIとは、「コンピュータとユーザーとの間で情報をやり取りするためのプレイ画面や操作するもの」のことを言います。

例えばメインメニュー・操作画面・マップ・アイテム選択などの画面レイアウト、操作をする上での各種ボタン設定などが挙げられます。

ここでは「Apex Legends」と「VALORANT」からUIの解説していきます。

Apex Legends

https://www.youtube.com/watch?v=sgmC9kmFaHs

「Apex Legends」のUIデザインの特徴について、全体的に近未来的でテック感のあるUI設計が特徴的で、世界観にマッチした美しいデザインが評価できるポイントです。

例えば、残弾表示の数字がハイライトでエフェクトがかけられていたり、体力ゲージや表示アイコンがフォルムの特徴的なHUD(ヘッドアップディスプレイ)で設計されているなど、情報画面のビジュアルから、近未来的な世界のイメージを生み出しています。

「Apex Legends」には、近未来的なバトルロワイヤルシューティングゲームとしてのコンセプトがあるために、その世界観にマッチしたUIデザインを設計することで、プレイ体験に没入感を高める目的がUIデザインに組み込まれていると言えます。

VAROLANT

https://playvalorant.com/ja-jp/news/dev/the-state-of-hit-registration

「VALORANT」も同じく近未来的な世界観を持つゲームではありますが、「Apex Legends」とは違い見やすさとシンプルさを重視したUIデザインに設計されています。

例えば、戦闘画面のUI画面では使用されている色がほとんど”白”と”緑”のみで設計されています。また画面には最小限のアイコンとゲージ、マップしか無く、ミニマルなデザインに施されています。
加えてもう一つ特徴的な点が、与えたダメージに対して数値が表示されない設計です。

以上のようなデザインによって期待できることは、画面に注意を取られず、プレイに十分集中できる体制をプレイヤーに提供できる点です。豪華なエフェクトやサウンドはゲーム体験に迫力と臨場感を生みますが、反面注意を逸らされかねません。

「VALORANT」は、eスポーツを想定したゲームとして設計されているために、プレイヤー間の純粋な戦闘や戦略を邪魔しないUI設計として、デザインされていると言えます。

ゲーム以外でのデザインの例

以上のように、ゲーム業界においても様々な形でデザインが活用されてきました

ここからは、実際のゲームプレイ以外でもデザインが活用されている例を紹介していきます

Webデザインの例

VALORANT

VALORANT
Riot Games presents VALORANT: a 5v5 character-based tactical FPS where precise gunplay meets unique agent abilities. Lea...

eスポーツタイトルの一つであるVALORANTの公式サイトは、シンプルなキャラクターアニメーションと、メカニカルなミニマルデザイン美しいポイントの一つです。

各見出しの英フォントには「Tungsten-Bold」が使用されており、力強くも目を張るようなリズム感を生み出しています。
「VALORANT」ロゴタイプのイメージとも非常にマッチしており、全体的な統一感もあって、的確なフォント選びも評価したいところです。

また、特にトップページでは淡い「オフホワイト」と「ポピーレッド」を基調としてデザインが施されており、サイトを訪れる人にとっての「見やすさ」という観点から、UIへの意識が感じられる配色が良いポイントです。

SONY Esports Project

https://sonyesportsproject.com/

SONY Esports Projectウェブサイトは「とにかく凝られたサイバーアニメーション」が醍醐味であり、芸術的なウェブデザインが印象的です。

全体的な色設計は「シティ・ポップ」を思わせる部分があり、若い世代には目新しくも、バブル世代のユーザーにとっては懐かしく感じられるような色調表現ではないでしょうか。

また、下にスクロールするごとに、様々なグリッチアニメーションが登場し、見る楽しさとワクワク感に胸を躍らされることは間違いありません。
「eスポーツ」という新しい文化に相応しい、近未来的な世界観が存分に設計された見ごたえのあるビジュアルとなっています。

ポケモンユナイト

ポケモンユナイト | 『Pokémon UNITE』公式サイト
『Pokémon UNITE』公式サイト。5vs5に分かれてチームバトル!たくさんのゴールを決めて、勝利を目指せ!攻撃も防御も味方とともに!連係プレイがバトルの鍵を握るぞ!

ポケモンユナイトの公式サイトは、色彩が非常にカラフルで、エネルギッシュに感じられるカジュアルなデザインが特徴的です。

サイト内でも沢山のポケモンたちが登場しており、ポケモンシリーズの最大の特徴とも言える「豊富なキャラクター数」がデザインからも伝わります。

また、画面をいっぱいに使って色彩豊かにデザインされており、各セクションが斜めに区切るような面白いレイアウトに施されているなど、全体を通して躍動感のある設計で親しみやすいイメージを生んでいます。

eスポーツ施設でのデザインの例

eスポーツ専門施設「REDEE WORLD」

楽しみながら学べる、日本最大級のeスポーツ施設「REDEE(レディー)」がエキスポシティにオープン!|ECC PLUS vol.23
2020年3月に吹田市のエキスポシティにできたeスポーツ施設「REDEE(レディー)」。巨大スクリーンを駆使したeスポーツや最新のVRゲームが体験できるほか、ドローンの操縦やYouTuber体験など、楽しく遊んで学べるコンテンツが充実。ゲー...

2020年3月1日に大阪府吹田市にオープンしたeスポーツ体験施設「REDEE WORLD」は、空間デザインという観点において評価したい施設です。

特に印象的に感じられるのは、40m×8mに及ぶ巨大スクリーンが設置されたアリーナです。前方には200席に及ぶ観戦席が設置されていますが、どの席からでも迫力ある映像を届けるための工夫として、巨大スクリーンが湾曲を描くような形で内装設計されており、非常に美しいフォルムとなっています。

また、内装の大部分が「カーボンブラック」で設計されつつも、照明がゲーミングライト風に演出されており、「eスポーツ」というコンセプトを施設一帯で表現するインテリアデザインも注目ポイントです。

最後に

以上のように、eスポーツの世界でもデザインが多方面から活用されていることが分かりました。

デザインには単にビジュアルを良くするだけではなく、ユーザビリティへの配慮やゲームプレイへの体感的な満足度を高める目的も込められておりeスポーツを楽しむ上でも必要不可欠です。

今後eスポーツに触れる機会がございましたら、ぜひ周りを見渡して魅力的なデザインを楽しんでみてください。

'+e+"");const o=le?le.createHTML(e):e;if(ot===nt)try{t=(new Y).parseFromString(o,ut)}catch(e){}if(!t||!t.documentElement){t=se.createDocument(ot,"template",null);try{t.documentElement.innerHTML=rt?ce:o}catch(e){}}const i=t.body||t.documentElement;return e&&n&&i.insertBefore(r.createTextNode(n),i.childNodes[0]||null),ot===nt?pe.call(t,ze?"html":"body")[0]:ze?t.documentElement:i},St=function(e){return ue.call(e.ownerDocument||e,e,B.SHOW_ELEMENT|B.SHOW_COMMENT|B.SHOW_TEXT|B.SHOW_PROCESSING_INSTRUCTION|B.SHOW_CDATA_SECTION,null)},bt=function(e){return e instanceof G&&("string"!=typeof e.nodeName||"string"!=typeof e.textContent||"function"!=typeof e.removeChild||!(e.attributes instanceof W)||"function"!=typeof e.removeAttribute||"function"!=typeof e.setAttribute||"string"!=typeof e.namespaceURI||"function"!=typeof e.insertBefore||"function"!=typeof e.hasChildNodes)},Nt=function(e){return"function"==typeof R&&e instanceof R};function Rt(e,t,n){u(e,(e=>{e.call(o,t,n,ft)}))}const wt=function(e){let t=null;if(Rt(de.beforeSanitizeElements,e,null),bt(e))return Et(e),!0;const n=pt(e.nodeName);if(Rt(de.uponSanitizeElement,e,{tagName:n,allowedTags:Ne}),Ue&&e.hasChildNodes()&&!Nt(e.firstElementChild)&&S(/<[/\w!]/g,e.innerHTML)&&S(/<[/\w!]/g,e.textContent))return Et(e),!0;if(e.nodeType===ee)return Et(e),!0;if(Ue&&e.nodeType===te&&S(/<[/\w]/g,e.data))return Et(e),!0;if(!Ne[n]||ve[n]){if(!ve[n]&&Dt(n)){if(De.tagNameCheck instanceof RegExp&&S(De.tagNameCheck,n))return!1;if(De.tagNameCheck instanceof Function&&De.tagNameCheck(n))return!1}if(je&&!$e[n]){const t=ae(e)||e.parentNode,n=ie(e)||e.childNodes;if(n&&t){for(let o=n.length-1;o>=0;--o){const r=$(n[o],!0);r.__removalCount=(e.__removalCount||0)+1,t.insertBefore(r,re(e))}}}return Et(e),!0}return e instanceof O&&!function(e){let t=ae(e);t&&t.tagName||(t={namespaceURI:ot,tagName:"template"});const n=h(e.tagName),o=h(t.tagName);return!!it[e.namespaceURI]&&(e.namespaceURI===tt?t.namespaceURI===nt?"svg"===n:t.namespaceURI===et?"svg"===n&&("annotation-xml"===o||lt[o]):Boolean(Tt[n]):e.namespaceURI===et?t.namespaceURI===nt?"math"===n:t.namespaceURI===tt?"math"===n&&ct[o]:Boolean(yt[n]):e.namespaceURI===nt?!(t.namespaceURI===tt&&!ct[o])&&!(t.namespaceURI===et&&!lt[o])&&!yt[n]&&(st[n]||!Tt[n]):!("application/xhtml+xml"!==ut||!it[e.namespaceURI]))}(e)?(Et(e),!0):"noscript"!==n&&"noembed"!==n&&"noframes"!==n||!S(/<\/no(script|embed|frames)/i,e.innerHTML)?(Me&&e.nodeType===Q&&(t=e.textContent,u([he,ge,Te],(e=>{t=y(t,e," ")})),e.textContent!==t&&(f(o.removed,{element:e.cloneNode()}),e.textContent=t)),Rt(de.afterSanitizeElements,e,null),!1):(Et(e),!0)},Ot=function(e,t,n){if(Ge&&("id"===t||"name"===t)&&(n in r||n in dt))return!1;if(Ce&&!Le[t]&&S(ye,t));else if(xe&&S(Ee,t));else if(!we[t]||Le[t]){if(!(Dt(e)&&(De.tagNameCheck instanceof RegExp&&S(De.tagNameCheck,e)||De.tagNameCheck instanceof Function&&De.tagNameCheck(e))&&(De.attributeNameCheck instanceof RegExp&&S(De.attributeNameCheck,t)||De.attributeNameCheck instanceof Function&&De.attributeNameCheck(t))||"is"===t&&De.allowCustomizedBuiltInElements&&(De.tagNameCheck instanceof RegExp&&S(De.tagNameCheck,n)||De.tagNameCheck instanceof Function&&De.tagNameCheck(n))))return!1}else if(Je[t]);else if(S(be,y(n,_e,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t||"script"===e||0!==E(n,"data:")||!Ve[e]){if(ke&&!S(Ae,y(n,_e,"")));else if(n)return!1}return!0},Dt=function(e){return"annotation-xml"!==e&&T(e,Se)},vt=function(e){Rt(de.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t||bt(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:we,forceKeepAttr:void 0};let r=t.length;for(;r--;){const i=t[r],{name:a,namespaceURI:l,value:c}=i,s=pt(a),m=c;let f="value"===a?m:A(m);if(n.attrName=s,n.attrValue=f,n.keepAttr=!0,n.forceKeepAttr=void 0,Rt(de.uponSanitizeAttribute,e,n),f=n.attrValue,!Ye||"id"!==s&&"name"!==s||(At(a,e),f="user-content-"+f),Ue&&S(/((--!?|])>)|<\/(style|title)/i,f)){At(a,e);continue}if("attributename"===s&&T(f,"href")){At(a,e);continue}if(n.forceKeepAttr)continue;if(!n.keepAttr){At(a,e);continue}if(!Ie&&S(/\/>/i,f)){At(a,e);continue}Me&&u([he,ge,Te],(e=>{f=y(f,e," ")}));const d=pt(e.nodeName);if(Ot(d,s,f)){if(le&&"object"==typeof j&&"function"==typeof j.getAttributeType)if(l);else switch(j.getAttributeType(d,s)){case"TrustedHTML":f=le.createHTML(f);break;case"TrustedScriptURL":f=le.createScriptURL(f)}if(f!==m)try{l?e.setAttributeNS(l,a,f):e.setAttribute(a,f),bt(e)?Et(e):p(o.removed)}catch(t){At(a,e)}}else At(a,e)}Rt(de.afterSanitizeAttributes,e,null)},Lt=function e(t){let n=null;const o=St(t);for(Rt(de.beforeSanitizeShadowDOM,t,null);n=o.nextNode();)Rt(de.uponSanitizeShadowNode,n,null),wt(n),vt(n),n.content instanceof s&&e(n.content);Rt(de.afterSanitizeShadowDOM,t,null)};return o.sanitize=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null,r=null,i=null,l=null;if(rt=!e,rt&&(e="\x3c!--\x3e"),"string"!=typeof e&&!Nt(e)){if("function"!=typeof e.toString)throw b("toString is not a function");if("string"!=typeof(e=e.toString()))throw b("dirty is not a string, aborting")}if(!o.isSupported)return e;if(Pe||gt(t),o.removed=[],"string"==typeof e&&(Xe=!1),Xe){if(e.nodeName){const t=pt(e.nodeName);if(!Ne[t]||ve[t])throw b("root node is forbidden and cannot be sanitized in-place")}}else if(e instanceof R)n=_t("\x3c!----\x3e"),r=n.ownerDocument.importNode(e,!0),r.nodeType===J&&"BODY"===r.nodeName||"HTML"===r.nodeName?n=r:n.appendChild(r);else{if(!Fe&&!Me&&!ze&&-1===e.indexOf("<"))return le&&We?le.createHTML(e):e;if(n=_t(e),!n)return Fe?null:We?ce:""}n&&He&&Et(n.firstChild);const c=St(Xe?e:n);for(;i=c.nextNode();)wt(i),vt(i),i.content instanceof s&&Lt(i.content);if(Xe)return e;if(Fe){if(Be)for(l=me.call(n.ownerDocument);n.firstChild;)l.appendChild(n.firstChild);else l=n;return(we.shadowroot||we.shadowrootmode)&&(l=fe.call(a,l,!0)),l}let m=ze?n.outerHTML:n.innerHTML;return ze&&Ne["!doctype"]&&n.ownerDocument&&n.ownerDocument.doctype&&n.ownerDocument.doctype.name&&S(K,n.ownerDocument.doctype.name)&&(m="\n"+m),Me&&u([he,ge,Te],(e=>{m=y(m,e," ")})),le&&We?le.createHTML(m):m},o.setConfig=function(){gt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Pe=!0},o.clearConfig=function(){ft=null,Pe=!1},o.isValidAttribute=function(e,t,n){ft||gt({});const o=pt(e),r=pt(t);return Ot(o,r,n)},o.addHook=function(e,t){"function"==typeof t&&f(de[e],t)},o.removeHook=function(e,t){if(void 0!==t){const n=m(de[e],t);return-1===n?void 0:d(de[e],n,1)[0]}return p(de[e])},o.removeHooks=function(e){de[e]=[]},o.removeAllHooks=function(){de={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},o}();return re}))
タイトルとURLをコピーしました