アークナイツはYostarより配信中のスマホ本格戦略タワーディフェンスゲームです。
今回はこのアークナイツのメイン画面UIを解剖していきます。
メイン画面UI
アークナイツのメイン画面UIはこのようになっています。
順に要素を見ていきましょう。
両側のボタン
アークナイツのメイン画面UIの中で最も特徴的だと言っても良いのが両側のボタンデザインでしょう。
図の赤い部分です。
平面的ではなく、少し斜めにして奥行きを表現しています。
画面の端から中心の方に向かって奥に進んでいるような表現です。
右側のボタン群は左端の水平位置が揃っていませんが、それでも余白の大きさや平行性を揃えることで、整ったデザインになっています。
中央のキャラクター
そして、中央にはキャラクターが描かれています。
（中央の黄色い領域）
アークナイツの大きな魅力の1つは「キャラクターの良さ」だと思います。
そのキャラクターはメイン画面の中で、最も目に留まる配置になっています。
先ほどの両側のボタンによって奥側へ視線が誘導され、自然とキャラクターに目がいくようになっています。
さらに、よく人間が綺麗と感じる比率として「黄金比」が挙げられますが、水平方向を黄金比（≒1:1.6）に分けてみると、ちょうどキャラクターが黄金比の部分に配置されていることがわかります。（濃い黄色の縦線が1:1.6の分割線）
このように、大きな魅力であるキャラクターに、自然と目がいくようなデザインがされています。
左上の小さなボタン群
さらに、左上には通知や設定などの小さなボタン群が並んでいます。
（左上の紫の部分）
このUIの優れているところは、デザイン性だけを重視せずに利便性も兼ね備えているところです。
小さいボタンに関しては斜めに配置せず、押しやすいように平面的に配置しています。
まとめ
アークナイツのメイン画面UIについて、解剖してみました。
- ボタンを斜めに配置することで奥行きを表現している
- 奥行き表現と黄金比を利用して目のいく部分を作る
- デザイン性ではなく利便性も兼ね備えている
コメント