有名スマホゲームの汎用ボタンデザインを解剖

ボタンのデザインは多種多様で、そのゲームの個性が出る部分でもあります。

今回はそんなボタンの中でも、特に汎用ボタンのデザインを有名スマホゲームからいろいろ集めてみました。

パズル＆ドラゴンズ（パズドラ）

ボタンの地の部分にはうっすらと岩っぽい模様が入っています。

また、ボタンの輪郭部分は明るさを変えて立体感を出すようにしていますね。

上半分は明るく、中心付近で徐々に黒に暗くなり、下半分は暗くなっています。

モンスターストライク(モンスト)

地の部分は上から下にかけて徐々に暗くなるようなグラデーションが掛かっています。

加えて上側の輪郭部分には明るい黄色を用いることで、立体感を表現。

さらにモンストの場合は一番外側に黒いアウトラインがありますね。

ボタンの色が明るめなので、黒のアウトラインをつけることでどんな背景に置いてもはっきり見やすくなっています。

また細かいですが、暗めのオレンジで四隅に点を打つことで、プラスチック感/金属感のようなものを出しています。

このすば ファンタスティックデイズ（このファン）

地の部分はうっすらとボーダー柄になっています。

また、上側は白っぽく、下側は若干赤っぽくすることで立体感を出しています。

両側には模様が描かれており、ゲーム感を増しています。

さらに白いアウトライン（フレーム）を付けています。

モンストの場合はボタン色が明るいため黒いアウトラインでしたが、このファンの場合はボタン色が比較的暗い色なのでアウトラインには白を使っています。

七つの大罪 ～光と闇の交戦（グランドクロス）～

綺麗で透明感のあるボタンですね。

一般的なボタンと同様に上側が明るくなっていますが、下側も大きめにぼやけるように明るくすることで、透明な素材に光が入ったような表現になっています。

さらに、地の部分に濃い色を使ってうっすらマダラ模様を描くことで、深さを表現しています。

両側にはゲームの雰囲気に合ったデザインがうっすらと。

加えてフレームも付けることで、ゲームの個性を表現しています。

スターライトステージ（デレステ）

地には星のデザインがされており、若干上から下にかけて暗くなるようなグラデーションが掛かっています。

輪郭はパズドラと同じような上下に分けた明暗の付け方ですが、下側の暗い部分は明度を下げるのではなく、彩度を上げて描かれています。

おそらくその下に真っ黒な部分があるので、その部分との明度さを保つためにこのような色にしたのでしょう。

アウトラインの黒部分は、下側を太くすることで厚みを表現しています。

ラブライブ！スクールアイドルフェスティバル（スクフェス）

長方形の左上と右下が切り取られた形のボタンで、ゲーム内ではこの形に統一されています。

上側にテキスト、下側に「進む」ことを意味する矢印が描かれていますね。

これはメイン画面のフッターボタンなどとデザインを合わせるために、このようなデザインにしたのだと思われます。

また、外側にはフレームがあり、右下にドロップシャドウを掛けています。

アークナイツ

非常にシンプルなボタンです。

地の部分はほぼ一色で、アウトラインなどありません。

それでも背景に紛れずしっかりと見えるのは、背景をぼかして表示していることが多いからでしょう。

また、若干ドロップシャドウが掛かっているようにも見えます。

ボタンに書かれている内容もテキストではなく、シンプルなアイコンの場合が結構あります。

いわゆるソシャゲという分野の中では比較的珍しいデザインですが、洗練されている印象ですね。

どうぶつの森 ポケットキャンプ（ポケ森）

こちらも比較的シンプルなボタン。

暗い色を下にずらして描くことで、厚みを表現しています。

特徴としては角丸の大きさと形。

左右が半円になっているわけでもなく、一般的な角丸の大きさよりはかなり大きい、独特な角丸の大きさになっています。

さらに角丸の形が正円ではなく少し歪んでいます。

これらによってほのぼの感というか、どうぶつの森の雰囲気を表現している素晴らしい形です。

まとめ

ゲームによって汎用ボタンのデザインは様々な個性がありました。

そのゲームの雰囲気に合ったボタンにすることが重要ですが、多くの汎用ボタンに見られる特徴を最後にPointとしてまとめてみます。