WNT-Design-20160905
Design

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

thumbnail_b_design_150905

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


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

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

img_design_160826_01

『ブレイブキャラバン』ってどんなゲーム?
『ブレイブキャラバン』とは、RPGの人気ジャンルであるハック&スラッシュ要素とトレジャーハンティング要素を取り入れた横スクロールアクションRPGです。
あらすじ
聖ナダル歴994年 獅子の月
エルシド城を囲む森に ふたりの娘の姿があった
ローブに身を包んだエルシド王国・第一王女リーゼと
手に剣を携えた第二王女のグリンデ
これは辺境の王国からはじまる、若き王女と英雄たちの物語である。

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

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

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

img_design_160826_02

立体的

賑やかなビジュアルを背景にしてもボタンと認識させる必要があります。

賑やかなビジュアルを背景にしてもボタンと認識させる必要があります。

太い縁

立体的なだけでなく縁をつけるなどして視認性を高めます。

立体的なだけでなく縁をつけるなどして視認性を高めます。

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

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

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

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

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


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

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

金や銀の装飾

中世らしさを彷彿させる甲冑や剣などでも使われる装飾ですね。

中世らしさを彷彿させる甲冑や剣などでも使われる装飾ですね。

セリフ体、明朝体

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

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

背景の描写は細かく

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

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

他に「中世ファンタジーらしさを感じる要素はあると思いますし、実際はもっと色々試しますが、
盛り込みすぎても支離滅裂になるのでこの辺に収めておきます。

描写も細かくなってきて「中世ファンタジーのゲーム」らしいボタンになってきたのではないでしょうか。
しかし、これでは『ブレイブキャラバン』のようにドット絵が走り回るような世界観に対してはミスマッチになってしまいます。


STEP3『ブレイブキャラバン』らしさを加える

ここまで「中世ファンタジー系ゲームの土台は出来たと思います。
後は要素の引き算などしながらバランスを取り、『ブレキャラ』らしさを作っていきます。

デフォルメされた世界観

縁を太く、装飾は最小限に抑えます。 金色も彩度の低い現実的な色味ではなく、 彩度の高い金を使いデフォルメします。

縁を太く、装飾は最小限に抑えます。
金色も彩度の低い現実的な色味ではなく、
彩度の高い金を使いデフォルメします。

かわいいフォント

ゲーム内でも使われている"くろかね"というフォントと、装飾的な矢印を使用します。

ゲーム内でも使われている”くろかね”というフォントと、装飾的な矢印を使用します。

ドット絵とキャラクター

ボタン背景のイラストを、ゲーム内でドット系の背景に差し替え、アクセントとしてゲーム内に登場するキャラクターを左下に入れます。

ボタン背景のイラストを、ゲーム内でドット系の背景に差し替え、アクセントとしてゲーム内に登場するキャラクターを左下に入れます。

そして実際にこのボタンが使われた画面はこちら!

img_design_160826_12

img_design_160826_13


まとめ

  1. 大きいジャンル(ゲーム)
  2. 細かいジャンル「中世ファンタジー)
  3. タイトル(ブレイブキャラバン)

上記のように大まかなキーワードから、細かいキーワードへ「らしさ」を探りながらデザインを固めていくプロセスを取ってみました。
具体的なデザインイメージが浮かばない時などは、このようにキーワードで分解してみるとヒントが見つかるかもしれませんね。

今回はボタンを例に解説しましたが、上で述べたようなプロセスは、ボタンだけでなく他のUIパーツや、ページ全体のトンマナを作る上でも応用の出来るものになっていると思います。
是非、参考にしてみてください!


『ブレキャラ』は好評配信中!

ガチャなし!リセマラなし!
ドットキャラクターが駆け抜ける爽快アクションRPG!
指一本のかんたん操作でド派手なバトルを楽しもう!
『ブレイブキャラバン』公式サイト

アプリのダウンロードはこちら!

App Storeでダウンロード
Google Playストアでダウンロード

thumbnail_b_design_150905

記事が気に入ったらシェアしよう

この記事を書いたメンバー

古賀 国朗 デザイナー

webを中心に色々なデザイン作っています。
新しいものが好きです。
漫画は毎週読んでます。

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 射手座
  • 山羊座
  • 水瓶座