(cache) 「ゲーム」らしいボタンを作るための3つのSTEP

2016.9. 5(Mon)

Design 初めまして、デザイナーK2です！
最近ではフラットデザイン・マテリアルデザインのようにシンプルで削ぎ落とされたデザインが主流になっているかと思いますが、特にゲームのwebサイトにおいては、削ぎ落とされたデザインをすれば良いとは限らず、いかにゲームの世界観を魅力的に伝えられるかが重要になってきます。

「ゲーム」らしいデザインとは？

今回は弊社ゲーム開発部からリリースされた、『ブレイブキャラバン』の事前予約ページに設置された登録ボタンを例に、 「ゲーム」らしいデザインを作り上げるためのプロセスを解説していきます

STEP1「ゲーム」らしさを加える

まずはスマホゲームなどで使われているボタンの傾向を洗い出し、「ゲーム」らしさを構成する要素が何かを探っていきます。

こちらのフラットなボタンを元にして、スマホゲームのボタンを構成する要素を足し算していきます。

立体的

太い縁

ベーシックなフォントは使わない

アニメやゲームでもよく使われているFontworks系のフォントのように、くせの強いフォントのほうがフィクション感があって相性が良いのかもしれません。

これらの、フラットデザインではあまり使われないゴテっとさせる要素が、ゲームのような賑やかなビジュアルと合わせてもしっかり目立つUIを作るのに必要なのかもしれませんね。

これだけでも多少は「ゲーム」らしさのあるボタンになってきたのではないでしょうか。しかし、これではブレイブキャラバンの舞台である「中世ファンタジー」の世界観にはマッチしないボタンになってしまいますね。

STEP2「中世ファンタジー」らしさを加える

STEP1で「ゲーム」らしさのベースは出来たので、もう少しキーワードを絞り、 「中世ファンタジー」らしさを構成する要素が何かを探っていきます。ボタンのデザインのみを参考にするのではなく、ボタン以外のUIパーツや、本の装丁、ファッションなども、「中世ファンタジー」らしさを探るうえで有用です。

金や銀の装飾

セリフ体、明朝体

中世の書物などを見てもゴシック体よりもセリフ体が一般的ですね。日本向けのゲームなので明朝体に落とし込みます。

背景の描写は細かく

ただ立体的なだけでなくガラスや紙のように見せたり、イラストが背景に写り込んでいたり、世界観が想像できるようなUIが、ファンタジーらしさに繋がる要素だと思います。今回はコンバージョンボタンということもあり目立たせたいので、全面にイラストを入れてみました。

他に「中世ファンタジーらしさを感じる要素はあると思いますし、実際はもっと色々試しますが、盛り込みすぎても支離滅裂になるのでこの辺に収めておきます。
描写も細かくなってきて「中世ファンタジーのゲーム」らしいボタンになってきたのではないでしょうか。しかし、これでは『ブレイブキャラバン』のようにドット絵が走り回るような世界観に対してはミスマッチになってしまいます。