初めまして、デザイナーのです!
最近ではフラットデザイン・マテリアルデザインのようにシンプルで削ぎ落とされたデザインが主流になっているかと思いますが、 特にゲームのwebサイトにおいては、削ぎ落とされたデザインをすれば良いとは限らず、いかにゲームの世界観を魅力的に伝えられるかが重要になってきます。
「ゲーム」らしいデザインとは?
今回は弊社ゲーム開発部からリリースされた、『ブレイブキャラバン』の事前予約ページに設置された登録ボタンを例に、
「ゲーム」らしいデザインを作り上げるためのプロセスを解説していきます
あらすじ
聖ナダル歴994年 獅子の月
エルシド城を囲む森に ふたりの娘の姿があった
ローブに身を包んだエルシド王国・第一王女リーゼと
手に剣を携えた第二王女のグリンデ
これは辺境の王国からはじまる、若き王女と英雄たちの物語である。
STEP1「ゲーム」らしさを加える
まずはスマホゲームなどで使われているボタンの傾向を洗い出し、
「ゲーム」らしさを構成する要素が何かを探っていきます。
こちらのフラットなボタンを元にして、
スマホゲームのボタンを構成する要素を足し算していきます。
立体的
太い縁
ベーシックなフォントは使わない
これらの、フラットデザインではあまり使われないゴテっとさせる要素が、
ゲームのような賑やかなビジュアルと合わせてもしっかり目立つUIを作るのに必要なのかもしれませんね。
これだけでも多少は「ゲーム」らしさのあるボタンになってきたのではないでしょうか。
しかし、これではブレイブキャラバンの舞台である「中世ファンタジー」の世界観にはマッチしないボタンになってしまいますね。
STEP2「中世ファンタジー」らしさを加える
STEP1で「ゲーム」らしさのベースは出来たので、もう少しキーワードを絞り、「中世ファンタジー」らしさを構成する要素が何かを探っていきます。
ボタンのデザインのみを参考にするのではなく、ボタン以外のUIパーツや、本の装丁、ファッションなども、「中世ファンタジー」らしさを探るうえで有用です。
金や銀の装飾
セリフ体、明朝体
背景の描写は細かく
他に「中世ファンタジーらしさを感じる要素はあると思いますし、実際はもっと色々試しますが、
盛り込みすぎても支離滅裂になるのでこの辺に収めておきます。
描写も細かくなってきて「中世ファンタジーのゲーム」らしいボタンになってきたのではないでしょうか。
しかし、これでは『ブレイブキャラバン』のようにドット絵が走り回るような世界観に対してはミスマッチになってしまいます。
STEP3『ブレイブキャラバン』らしさを加える
ここまで「中世ファンタジー系ゲームの土台は出来たと思います。
後は要素の引き算などしながらバランスを取り、『ブレキャラ』らしさを作っていきます。
デフォルメされた世界観
かわいいフォント
ドット絵とキャラクター
そして実際にこのボタンが使われた画面はこちら!
まとめ
- 大きいジャンル(ゲーム)
- 細かいジャンル「中世ファンタジー)
- タイトル(ブレイブキャラバン)
上記のように大まかなキーワードから、細かいキーワードへ「らしさ」を探りながらデザインを固めていくプロセスを取ってみました。
具体的なデザインイメージが浮かばない時などは、このようにキーワードで分解してみるとヒントが見つかるかもしれませんね。
今回はボタンを例に解説しましたが、上で述べたようなプロセスは、ボタンだけでなく他のUIパーツや、ページ全体のトンマナを作る上でも応用の出来るものになっていると思います。
是非、参考にしてみてください!
『ブレキャラ』は好評配信中!
ガチャなし!リセマラなし!
ドットキャラクターが駆け抜ける爽快アクションRPG!
指一本のかんたん操作でド派手なバトルを楽しもう!
『ブレイブキャラバン』公式サイト