앙상블 스타즈!! 의 UI 디자인에 대해서 (1): 공기 앙스타 백업계

(의, 오역주의)
(번역본을 다른 곳으로 옮기지 마세요)

원문 출처: https://note.com/happyelements/n/n561163d6a857

この記事は「Happy Elements カカリアスタジオデザイナーアドベントカレンダー2020」の3日目の記事です

이 기사는 「Happy Elements 카카리오 스튜디오 디자이너 Advent Calendar 2020」의 3일차 기사입니다 (※ Advent Calendar: 24개의 숫자가 적힌 작은 문이 달린, 크리스마스까지 카운트다운 하는 아동용 달력. 모든 기사 중 앙상블 스타즈!!와 관련된 기사만 번역합니다.)

こんにちは！
あんさんぶるスターズ！！チーム、グラフィックデザイナーの S.T です。
主にゲームのUIや演出、ロゴ、バナーなどの制作／監修をしています。

今回は 「あんさんぶるスターズ！！Basic/Music」のUI制作事例と、
カカリアスタジオのUIデザイナーがどんな仕事をしているのかをご紹介させていただきます。

안녕하세요!

앙상블 스타즈!! 팀, 그래픽 디자이너 S.T입니다.

주로 게임의 UI나 연출, 로고, 배너 등의 제작 / 검수를 맡고 있습니다.

이번에는 「앙상블 스타즈!! Basic/Music」의 UI제작 사례와,

카카리아 스튜디오의 UI 디자이너가 어떤 일을 하고 있는지를 소개하려고 합니다.

(※ UI: 사용자 인터페이스. 게임 내 화면 레이아웃 등등)

「앙상블 스타즈!! Basic/Music」이란?

「あんさんぶるスターズ！！」（以下・あんスタ！！）は、
2015年リリースのアイドル育成ゲーム「あんさんぶるスターズ！」（以下・あんスタ！）を元に開発された、２つのアプリの総称です。

約５年続いた「あんスタ！」をリニューアルしたものが「Basic」、新しくリズムゲームとして開発されたものが「Music」です。
今回はこの２つのアプリを同時並行で開発を行いました

「앙상블 스타즈!!」(이하 앙스타!!)는,

2015년 릴리즈 된 아이돌 육성 게임 「앙상블 스타즈!」(이하 앙스타!)를 바탕으로 개발된, 2개 어플의 총칭입니다.

약 5년간 앙스타!를 리뉴얼 한 것이 Basic, 새롭게 리듬게임으로서 개발된 것이 Music입니다.

이번에는 이 두 어플을 동시병행하여 개발을 실시하였습니다.

私自身は2015年に「あんスタ！」の初期UIデザインを担当した後、別のプロジェクトチームに所属していたのですが、今回「あんスタ！！」を制作するにあたって再びプロジェクトに戻ってきました。

この「あんスタ！！」のUIデザインを、どういう考えのもとで作っていったかをご紹介します。

저는 2015년 앙스타!의 초기 UI 디자인을 담당한 뒤, 다른 프로젝트 팀에 소속되어 있었습니다만, 이번 앙스타!!를 제작하게 되어 다시 프로젝트에 돌아오게 되었습니다.

이 앙스타!! UI 디자인을, 어떤 생각을 바탕으로 제작 해 나갔는지를 소개하겠습니다.

今回は以下の４つの工程で制作を進めました

■ ヒアリング・UIコンセプトの策定
■ UIデザイン　- ビジュアルの方針
■ UIデザイン　- 設計の方針
■ Unityでの組み込み　-２つのアプリを揃えるために

이번엔 아래 4개의 공정으로 제작을 진행하였습니다.

■ 히어링, UI 콘셉트의 책정

■ UI 디자인 - 비쥬얼 방침

■ UI 디자인 - 설계 방침

■ Unity에서의 내장 - 두 어플의 아귀를 맞추기 위하여

히어링(Hearing), UI 콘셉트의 책정

まず「あんスタ！！」のUIデザインをはじめるにあたり、プランナーさんが制作した企画書・仕様書を読み込みながら、並行して新しい「あんスタ！！」のUIとして求められていることをチームにヒアリングしました。

チームリーダー、プランナー、アートディレクターなどからの大小色々な意見・要望を整理し、大きく以下の４つの点が重要と考えました。

우선 앙스타!! UI 디자인을 시작함에 있어, 기획자씨가 제작한 기획서, 사양서를 읽음과 동시에, 새로운 앙스타!! UI로써 요구되는 것을 팀에 히어링(hearing)하였습니다.

팀 리더, 기획자, 아트디렉터 등의 크고 작은 의견, 요망을 정리하여, 주로 아래 4개의 점이 중요하다고 생각하였습니다.

【１】「ここまでやってもあんスタなんだ」と思えるような、
　　　　あんスタの世界を拡張するような表現
【２】「！」より作中時間が１年進み、芸能界が舞台になるため、
　　　　少し年齢を上げたスタイリッシュな印象
【３】ゲームにあまり馴染みがない人でも、悩まず使える優しいUI
【４】Basic/MusicのUIは基本的にほぼ同じものにしてほしい

[1] "여기까지 해도 앙스타구나"라고 생각할만한, 앙스타의 세계관을 확장 할 법한 표현

[2] "!"보다 작품 속 시간대가 1년 나아가, 예능계가 무대가 되므로, 살짝 연령을 올린 스타일리쉬한 인상

[3] 게임에 별로 익숙하지 않은 사람도, 고민없이 사용 할 수 있는 편리한 UI

[4] Basic/Music의 UI는 기본적으로 거의 같게 해 주었으면 한다

これらを解決するために、
UI制作の考え方の中心に「次元を0.5上げる」というキーワードを設定しました。

これは「２次元のアイドルとしてスタートしたあんスタのアイドルたちを、より『実在』して魅せる」ことや、アプリ全体の没入感コントロールにおいて、「あんスタ！」ではアプリ内への没入感を強くするために、意識がゲーム側に向くように設計していた部分を、「現実の隣にあんスタの世界が存在する」ぐらいの距離感になるよう設計するためです。

でもそれって具体的にどういうことでしょうか？

上記の要件に対し、【１】【２】はビジュアル面から、【３】【４】は設計や開発手法で解決する方針で検討しました。それぞれのアプローチをご紹介します。

이것들을 해결하기 위해,

UI제작을 생각하는 방법의 중심에 "차원을 0.5 올린다"라는 키워드를 설정하였습니다.

이것은 "2차원 아이돌로써 시작한 앙스타의 아이돌들을, 더더욱 "실재"하는 것처럼 매혹시킨다"란 것이나, 어플 전체의 몰입감 컨트롤에 있어, 앙스타!에서는 어플 내로의 몰입감을 강하게 하기 위해 의식이 게임측으로 향하도록 설정했었던 부분을, "현실의 곁에 앙스타의 세계가 존재한다" 정도의 거리감이 되도록 설계하기 위함입니다.

그렇지만 그렇다는건 구체적으로 어떤 것일까요?

위의 요건에 대해, [1] [2]는 비쥬얼적인 면에서, [3] [4]는 설계나 개발 방법에서 해결하는 방침으로 검토하였습니다. 각각에 대한 접근을 소개하겠습니다.

前作「あんスタ！」のUIは学生らしさや、イラストの印象にあわせた明るめの配色／角丸で柔らかいイメージで画面を制作していました。今回「あんスタ！！」になるにあたり、前作の配色などを根底に置きつつも、強めの配色と直線的なグラフィックを採用し、トンマナをアップデートしました。

ただあまりに明後日の方向へ行ってしまっても「あんスタらしさ」という部分が失われてしまうため、サンプルを制作し、「これは「！」っぽさが強い」や「もっと画面全体から強い印象を出してほしい」など、チームメンバーから意見を引き出しながらトンマナや装飾のバランスを検討しました。

전작 앙스타!의 UI는 학생다움이나, 일러스트의 인상에 맞춘 밝은 배색 / 모서리를 둥글게 하여 부드러운 이미지로 화면을 제작하였습니다. 이번 앙스타!!가 되는 즈음, 전작의 배색 등을 바탕에 두면서도, 강한 배색과 직선적인 그래픽을 채용하여, 톤매너를 업데이트하였습니다.

(※ 톤매너 : 디자인이나 스타일 등에 일관성을 갖게 하는 규칙을 뜻하는 광고, 출판, 마켓팅, 웹디자인 등의 업계용어. 영어권에서는 tone and style라고 함)

단, 너무 미래적인 방향으로 가버려도 "앙스타다운" 부분이 없어지므로, 샘플을 제작하여 "이것은 ! 느낌이 강해"나 "좀 더 화면 전체에서 강한 인상을 내 줬으면 해" 등, 팀 멤버로부터 의견을 이끌어 내가면서 톤매너나 장식의 밸런스를 검토하였습니다.