日用品スマホアプリコラム2018.4.29スプラトゥーンのイカしたUIはこうして作られた─担当デザイナーが語る秘話ツイートシェアLINEはてブ前編:マリオメーカーのUI/UXデザイナーが語る「弱点を克服する娯楽UI」の原点とは後編:保護者の欲求には逆行している─アプリ「みまもりSwitch」のUIデザイナーが実現したかった世界とは2015年にWiiU用ソフトとして発売されたスプラトゥーンは、その優れたゲームシステムとアートワークによって瞬く間に世界中にムーブメントを巻き起こした。2017年にはNintendoSwitch向けにスプラトゥーン2が発売され、その勢いはとどまるところを知らない。Crunchにて行われた。「SplatoonUIの狙い」と題して語られたこのセクションを担当したのは、任天堂のUI/UXデザイナーである橘磨理子氏。U」や「ピクミン3」の開発に携わっている。本発表は、日頃スプラトゥーンを愛してやまない全世界のボーイ&ガールには目から鱗、いや口から墨な情報のオンパレードだった。心してご覧いただきたい。SplatoonUIの狙い時には他の登壇者も会話に参加しながら和気藹々と発表は進むまず橘氏は、現在人気真っ只中のスプラトゥーン2ではなく、1作目をゼロから立ち上げた際のエピソードを語った。開発初期、橘氏を含めて担当デザイナーは2人しかおらず、そんな中アートディレクターから「一目でそれがスプラトゥーンと分かる、新鮮なデザインにしてほしい」とオーダーが入ったそうだ。当時、橘氏はUIは目立ってはいけないものだと考えていたそうだが、このオーダーを受け「UIデザインの範囲の中で、イカにグラフィックとしてスプラトゥーンらしい新鮮なデザインにするか」という目標が生まれたそうだ。そこで重要だったのが、わかりやすさと新鮮さ、この2つのバランスだったという。「わかりやすさ」と「新鮮さ」のバランススプラトゥーンの立ち上げ時、UIデザインの課題は「わかりやすさ」と「新鮮さ」のバランスだったUIデザインにおいて、新鮮さの追求はとても危険な行為だ。間違えると、その馴染みの無さから、わかりにくいUIになってしまう。わかりやすさの追求も同様に、それだけを追求してしまうと、汎用なものに落ち着いてしまい、新鮮さを欠いてしまう。この問題について橘氏は「UIとしてわかりやすく、かつ、アートとして新鮮に」というバランスを狙う事に挑戦したという。その方法として橘氏は、マリオやゼルダといった自社の他タイトルのUIデザインと比較しながらUIデザインを進めていった。完成されているデザインとの比較は、新規性やクオリティの指標になるからだそうだ。なければ作れ!イカフォントここで橘氏は、イカフォントとしてプレイヤーたちに親しまれているスプラトゥーンオリジナルのフォントについて語った。公開されたのは、ゲーム開発初期のラフスケッチだ。開発初期の「イカフォント」のラフスケッチ当初は、ゲームの世界観に合わせ、使用するフォントを既存のものから選定しようとしていたそうだが、どうにも最適なものが見つからなかったらしい。橘氏は「ないなら、作る!」と発起し、ゼロからオリジナルのフォントを作ることに決めたそうだ。「いまこれを見せるのは恥ずかしい」と照れながら話す橘氏だったが、最初の勢いやイメージを大事にし、なるべく早く書き出して他のデザイナーやアートディレクターと共有していくことが、スピード感のある初期の開発フェーズでは重要なことだったと振り返る。ラフスケッチを元に、ラインが整えられたフォントそうして固まってきたラフスケッチを元に、ラインを整えていく。した文字の太さはスポーツブランドの力強さをイメージし、そこに流れる液体のような有機的なラインを追加してフォントのデザインを進めたそうだ。ここでは、新鮮さだけではなく、可読性も担保しながら作業を進めていったと橘氏は語る。ちなみに、開発初期のスプラトゥーンは、イカではなくウサギのキャラクターが用いられていたため、橘氏はこのフォントを「本当はウサギフォントかもしれませんね」と笑いながら話していた。フォント作成ソフトで最終的な調整がなされているイカフォント漢字以外の主要な文字はすべて作成し、フォント作成ソフトでフォントデータ化した後に、文字幅やカーニングなどの細かい調整を行ったそうだ。マリオのフォントと比較した図。フォントだけでシリーズの雰囲気が伝わるご覧の通り、マリオフォントと比較しても、フォントだけでスプラトゥーンのテイストや世界観がひしひしと伝わってくる仕上がりとなった(背景画像で若干ズルをしているようにも思えるが笑)。カタチのデザイン次に橘氏は、スプラトゥーンのUIにおいて重要なウェイトを占めている「カタチ」について語った。これをデザインしていくにあたって、まずはイカとスポーツ、2つのキーワードから連想されるイメージを言葉にして並べたそうだ。イカとスポーツというキーワードから連想されるイメージを言葉にしてカタチに落とし込んでいくそして、出てきた言葉のイメージをカタチにする。左側のプレーンなカタチに対して、右側のカタチはスプラトゥーンらしい有機的なカタチになっているのが見て取れる。色をなくし、マリオ風のカタチと比較した図がこちら。色がなかったとしてもスプラトゥーンっぽさを感じられるカタチを作れたのではないかと、橘氏は振り返る。新鮮さを詰め込んだボタンとカーソルUIデザインの真骨頂、ボタンとカーソルについても橘氏は語ってくれた。カーソルは常にイカが泳いでいるようなデザインを取り入れ、決定ボタンを押すとピシャッとインクが散るようなアニメーションが発生するデザイン。「わかりやすさ」を優先させると、過度な装飾やアニメーションは敬遠されがちだが、こちらも、可能な限り新鮮さを詰め込んだそうだ。隣で聞いていた任天堂の正木義文氏も「今にも音が聞こえてきそうなUIだ」と声を漏らした。色相をズラすことで影を表現したスプラトゥーンでは、アイコン等の色の使い方においてもスプラトゥーンらしさを意識しているそうだ。自然なライティングで撮影されているマリオの色彩は、影の部分には明度を暗くした色が使用されている。スプラトゥーンではなるべく鮮やかな印象を与えたかったため、黄色ならオレンジ、紫なら青といったように、影の部分には、あえて色相をずらした色を使用したそうだ。ギアパワーのアイコンもラフスケッチ版(左側)が公開されたこちらは、ギアパワーアイコンの比較図。左側のラフスケッチ版を見てもわかる通り、色がしっかり決められているため、形状は違えど完成版とのイメージの乖離は起こっていないのが見て取れる。ここでは、配色だけでなく、「スペシャル減少量ダウン」や「復活時間短縮」といった、言葉で説明しようとすると長くなってしまうようなものも、できるかぎり完結に表現しようと試行錯誤していたそうだ。橘氏の隣で聞いていた任天堂の藤野洋右氏は「攻撃力アップのアイコンとか、今見ると力こぶだってわからないよね笑」と振り返った。ゲーム中に使われるパターンにも、この色彩ルールを踏襲したデザインが採用されているそうだ。イカは三角、タコは丸、といったイメージから、矢印や円弧をイメージしたパターンまで、幅広く作成された。ゲーム中の至る所で使用されているパターンにも、オリジナリティが溢れるこうして、初期の頃に策定したデザインのルールを用いて、スプラトゥーンらしさを出していったのだという。させない為の工夫ここまでの発表を前提に、橘氏は「色やカタチが尖っているぶん、素材を組み合わせた時に画面がゴチャゴチャする問題があった」と語る。そこで、当初の目標である新鮮かつわかりやすいUIを実現するために、橘氏はいくつかの方法で画面を調整していった。明度と彩度を調整するまず行ったのは、UIの明度と彩度を調整することだ。情報量が多いショップの画面を例に出して、橘氏は説明する。画面を白黒にすることで、みやすい画面かどうかを調べる見やすいゲーム画面になっているかどうかは、画面を白黒にすることでチェックする。黒は沈みやすく、白は目立ちやすい色になるため、テキストやアイコンは白に寄せ、それ以外のウインドウや背景はグレーに寄せると、全体的に見やすい画面になるのだという。彩度についても同様に、目立たせたいものは彩度を高く、そうじゃないものは彩度が低くなるように調整することで、大事な情報だけを強調することに成功しているそうだ。UIと3Dのバランスをとるまた橘氏は、UIとその背景に写っている3Dとのバランスにも気を使ったそうだ。新鮮でオリジナリティのあるUIを目指したとはいえ、常にそのUIが1番目立てば良いというわけではない。対戦時の画面では、UIはその存在感を弱める特に対戦画面ではキャラクターと背景をなるべく隠さず、かつUIが目立たないようにするため、サイズや配置、色の調整に気を使ったという。場合によっては、背景のデザイナーに「ここのオブジェクトを取り除いてください」といった相談を持ちかける事も多かったといい、その度に、他職種のデザイナーもUIデザインへの理解があり、助かったという。スプラトゥーン2における変更点と、ここまではスプラトゥーン1が題材となっていたが、最後に橘氏は2についても語ってくれた。スプラトゥーン2の開発では、尖った「らしさ」を生み出した1に対して、さらに2らしさを出すにはどういう工夫がされたのか。イカフォントの新旧比較。なんと2では、またもやフォントを作成したそうだ。1で作成した太めのフォントで、2の膨大な文字量を表示しきれないという問題があった。2で登場した新しいキャラクターやモードは、1よりも「かっこいい」印象に寄ったため、より細く、より角ばったクールな印象のフォントに変更したそうだ。それ以外にも、アイコン等の形状もアップデートを図ったという。1にくらべて、より幾何学的で整った形状になった2のアイコン有機的なラインを大切にしていた1の形状から、よりグラフィックデザイン的な整ったラインを目指して変更を加えたという。UIでプレイヤーを楽しませることは出来るプレイヤーにストレスを与えない為の配慮に徹し、存在を薄くさせがちなUI。時にはUIデザインそのもので、プレイヤーを楽しませる事もできるのだと、橘氏は語る。スプラトゥーン1、そして2の人気を見れば一目瞭然ではないだろうか。優れた彩色ルールやカタチのデザインを纏ったアイコンやフォントは、ゲームを飛び越えて様々な媒体やグッズに広がっている。スプラトゥーンのUIは「UIが主役になることもある」という可能性を掲示した稀有な存在なのではないだろうか。本ブログでは引き続き、セクション「みまもりSWITCHは誰のもの?」のレポートを公開していく予定だ。デザイン情報学科を卒業した後、都内でデザイナーとして活動中。小さい頃からゲーム好きで、四六時中ゲームのことを考えている。超ゲームウォーカー!。