#51 「UI改修について」
こんにちは！2Dデザイナーの森です。
今回は、体験版の配信に伴いデザインを大幅に変えようという話になりましたので、そちらを深掘りできればと思います。
そもそもなぜUIを変える必要があったの？
理由としては、「世界観を補強する役割を強めたい｣という目的が大きいです。
以前のデザインは直線を用いてユーザーの視認性を担保し、モチーフを使って世界観を伝えるという意図があり、整理されたデザインでした。そこにもう少し世界観のテイストを加え、世界を説明する要素を増やして没入感を付与することが今回の目的でした。
以前のデザインがあったため、ある程度レイアウトが固まった状態からテイストのみを変える調整だったため、とても作りやすいように思いました。
最終的に以下3点を軸として進めるスタイルでまとまりました。
- スタイリッシュというよりガサガサした無骨なタッチ
- なぜそこにあるのかが説明できる具体的なモチーフ
- 実線を用いて影は斜線で表現
ここで具体的な例としてリザルト画面を見ていきましょう。
改修前のリザルト画面
モチーフ決定
リザルト画面は、遺跡に挑んで帰還したとき「帰還成功or失敗漫画」→「リザルト画面」という流れで再生されます。そのため漫画から紙モチーフつながりでリザルトに移行するのがシームレスだと感じたので、 ぐちゃぐちゃの机にアニーが作った報告書が散らばっているイメージを想像してデザインを作成しました。アニメーションイメージは紙が上下左右からファサっと重なっていく感じです。
テイスト模索
この時点ではまだ序盤でテイストが固まっておらず、清水さんに輪郭線や影に斜線を入れることでなじませる方向を提案していただき、ここで方向性が定まりました。ラフというのもありますが、この時点ではまだきれいすぎる印象がありますね。 ここで、仕様変更によりリザルト画面で売却機能をつける予定だったのが、別画面にお引越しとなったため要素を見直すことになりました。
情報整理
ここでだいぶテイストや内容が固まってきたため、情報を見やすくする工夫をいろいろ試してみました。
目が留まる上部に重要な情報をもってきつつ、優先度の高いものは文字と背景色のコントラストを上げ、低いものはコントラストを下げて目立たせ具合を調整しました。すべての情報の幅をきれいにそろえるときっちりかっちりした印象が強いため、ルールを各ユニットごとでそろえるようにしました。
こちらで完成です。
最後に
具体的に描いたがために、単に紙モチーフというだけだと「これはどういう紙なの？」と違和感を持ってしまう弊害が生まれてしまいます。なので、リトルリコレクターでは「○○をするための紙」といった感じで説明できるモチーフを心掛けたいですね。
また、テイスト合わせもとても勉強になりましたが、クオリティラインの意識も持っておこうと思います。
どうしても一つを集中してクオリティを高くしがちですが、ゲーム全体見たときクオリティに差があるとそっちに目が行ってしまいます。なのでクオリティにラインを設けて、それぞれに差を出しすぎないことが大切ですね。
それではまたお会いしましょう！
