abecobe[app by keidaroo]

ゲームアプリデザイン助言/監修


制作したロゴマークとキャラクターを用いたイメージ・グラフィック


プロジェクト概要

2019年度未踏ジュニアでの採択/修了プロジェクトであるkeidarooのゲームアプリabecobeのロゴ/キャラクター/UI/広報用ポスター等全体的なデザイン制作および助言/監修を依頼された. keidarooは同じ高校に通う後輩でありながら,2018年度未踏ジュニアにて採択/修了した私と同じ鈴木遼さんがプロジェクトマネージャーであった. このような共通点もあり,未踏ジュニア採択期間の終了直前にゲームアプリabecobeのデザインに関わることになった.
このプロジェクトでは,abecobeは既に何年か開発を続けられていたゲームであり,その上数多くのベータ版のプレイヤーが存在していた. そのほかでも多くの大会で賞を取るなど,開発側とプレイする側の両方のabecobeというゲームを知る人たちの中で既にイメージや印象が既に出来上がっている状態であった. その既存の確立された当時のデザインを壊し過ぎず,多くの人が自然にabecobeの新しい姿として受け入れられるようなロゴやキャラクター等を制作しなければならなかった.


使用ソフト

software: Adobe Illustrator/Illustrator for iPad


ロゴデザイン制作

ロゴに関しては,タイプだけで構成されたものであるという依頼であったため,最適のフォントを選定した. 最終的に決定したフォントはAdobe社のKrokというフォントであった. 丸っこい見た目が可愛らしいと同時に,ゲーム内の迷路は全て四角形で構成されており,Krokの角ばった特徴がabecobeのイメージにピッタリであると感じた. 全体的な見た目としてはとても魅力的なKrokだが,特定の文字には尖ったような要素があり,そのような箇所は手を加えている. そのほかにも文字の中の太さを均一にするなど,細かい調整を行いながら様々なパターンを作り最適のものに落ち着くまで多くの協議を行なった. また,2つのあべこべの方向に動く四角を操作するゲーム性を連想できるよう,フォントに色のついた四角形を組み込むデザインを提案した. この色のついた四角形には動きを表すような要素を後から加えることを前提としていた.


ロゴスケッチ1
ロゴスケッチ2

制作過程に試作した8パターンのロゴ(タイプ)


実際に試作したロゴタイプをアプリ内の画面や背景に合わせ,各バリエーションを比較し最終盤のものを決定した. 次にタイプの上に追加した四角形に関するデザインに取り掛かった. 小文字の[e]についてる四角形はゲーム内でプレイヤーが動かすアバターを象徴している. ゲーム内での素早い動きを表すために[e]の横棒をグラデーションに変換した. また,背景の色によって視認性が下がってしまうという問題に対してはロゴを3パターン作成した.
また小文字の[b]の丸がゲーム内の2つのゴールを表すように色を加えた. abecobe内の4つのステージと背景に色が合うよう,色に関しても4パターンのロゴを作成した.


ロゴスケッチ3
ロゴスケッチ4
ロゴスケッチ5

(左,中央)完成した8パターンのロゴ(右)ロゴ製作時の作業の様子


UIデザイン

abecobeのロゴデザインの他にも,アプリ内のUIデザインに対する制作助言を行った. 主にゲームのスコア(リザルト)画面やゲーム自体の迷路の盤面の配色などに関して関わった. リザルト画面ではプレーして獲得したスコアの数字とアバターを背景に組み込むような形でスマートなものになることを目指した. 具体的な見た目を私がスケッチし,それを元にkeidarooが実装した. またゲームの迷路の配色等も同じように協議しながら私が監修し,keidarooが最終的な変更と実装を行った.
その他にもアバターであもあるキャラクターデザインやアプリのアイコンデザインの制作も行った.


スケッチ1
スケッチ2
スケッチ3

(左)(中央)リザルト画面のスケッチ (右)作成当時のキャラクターとイメージ・ビジュアル

LOADING...