株式会社ヘキサドライブ | HEXADRIVE

こんにちは！大阪デザイナーのハマグチです。

●これまでの記事まとめ
・デッサン【デッサン嫌い】
・配色2【社会人のぬりえ】
・メイキング【絵の仕上げ方】
・色塗り【色塗りの作業工程】
・メイキング【キャラデザ･配色の作業工程】
・配色【配色の勉強】
・気持ち【絵を見せる練習】

 

今回のテーマは「UI（ユーザーインターフェイス）デザイン」です。

就職活動の折「UIができると喜ばれるよ」と言われたりするものですが、
ゲーム専門生でない絵描きにとってはよくわからない/地味/専門性高そうな印象があり
なかなか手を出し辛い分野だと思います。（私がそうでした）

が、入社後実際にUIを担当してみた所、
専門知識より「普通にものを考える力」の方が大事であり、
そう取っつきづらいものではないなと感じています。

そこで、弊社アプリ「MakeS -おはよう、私のセイ-」のデフォルトUIを例に
何を考えて作っているかの一例をお見せしたいと思います。
（毎度ながら長いですが、ご容赦ください…）

 

——————————————————————

●具体例

「MakeS」UIで特に気を遣った所を、3つのポイントに分けて説明します。

 

1.世界観を守る

UIは ほぼ常時視界に入るものであるため、使用中のイメージを大きく左右します。
そのため、アプリのコンセプトや世界観を反映したデザインにする必要があります。

ゲームの場合は、物語や世界設定に合わせれば良いのですが、
MakeSではアプリの世界と現実が地続きであることが重要です。
そのため、具体的な装飾は避け、余計な味付けをしない「シンプル」をテーマにしました。

 

セイが端末の中の存在であることは表現したかったので、
アイコン等のパーツは線幅を一定にして、「無機質感」「デジタル感」を出しています。
あとこういうデザイン今っぽいので一石二鳥ですね。

 

メインのフォントも同じく、線幅が一定に近い「ゴシック体」を使っています。
ただ、セイのセリフを読む時においては
「テキストメッセージ」ではなく「会話」であると感じてもらいたいため、
少し柔らかい雰囲気のフォントを選んでいたり、文字色を黒でなく茶色にしたりと、
やや感情を感じられるように調整しました。

 

 

2.セイより目立たせない

昨今のリッチに動くカッコイイUIには大いに憧れますが、
MakeSというアプリの主役は、間違いなくセイ（とユーザーさん）です。
UIは、全てにおいてセイの邪魔をしない/目立たない努力をする必要があります。

セイがほぼ紫1色のデザインのため、余計なイメージを足さないよう
UIも色は増やさず紫メインで統一し、明度や彩度で差を作っています。
逆に、すぐ押して欲しいものは反対色に近い緑にすることで、
セイを含めた画面全体から目立つようにもなっています。

 

ボタン配置に関しても、セイとの対話の場であるホーム画面では特に邪魔にならないよう、
半透明化したり出し入れ可能にするなどして、限界まで気配を消しています！

 

 

3.朝から夜までいつでも使えるデザイン

目覚ましアプリという特性上、朝と晩に起動する人が多いはずです。
そのため、どの時間帯でも違和感なく使えるデザインにしています。

面積の広い背景色は、眩しすぎないよう落ち着いた空色に設定しました。
夜は眩しすぎず、朝起きた時には爽やかさも感じられるバランスです。
（同じ理屈で、会話のテンションの上下にも対応できます）

 

さらに、寝る直前に見るおやすみ画面では
背景変更に加え、セイにも軽く黒グラデーションがかかっています。
こころもちユーザーさんの寝付きもよくなっているはず…？

 

このように、雰囲気やアイコン、配置に至るまで
ユーザーさんにどう感じて欲しいか？から逆算して作業しています。

 

——————————————————————

●まとめ

いかがだったでしょうか…。
UIを作る上で大切なのは、決して特殊な技能や知識ではなく
「配慮」や「想像力」である事が伝わっていれば幸いです。

UIを作る上で絵を描く機会は多くはないですが、
配色や構図など、理屈で考えている部分の能力はそのまま応用できます。
絵描き間では「神絵師じゃないと業界就職できない」と思われがちですが
視野を広げてみると、自分の能力を活かせる場所が別にある可能性もあります。
UIは、ゲームに絶対必要な部品である割に、希望者の少ない分野です。
もし、自分適正あるかも…？と感じたなら、挑戦してみても良いのではないでしょうか。

では！