MENU

【UI】はねろ!コイキングのUI

暇つぶしに「はねろ!コイキング」を遊んでいるのですが、ただ遊ぶのは時間の無駄なのでで、キャプチャとってUIのサイズなど、ざっくり調べてみました。

画面サイズ

Retina対応もあり。720×1280で作るパターンと1080×1920で作るパターンがあります。

1280x720px

  • 8の倍数でパーツを作成するとやりやすい

  • 最新の端末だと解像度が足りない

1920x1080px

  • 6の倍数でパーツを作成するとやりやすい

  • 最新の端末の解像度はだいたい足りる

タイトル画面

f:id:min0124:20170618144904p:plain

左がAndroidで、右がiOS

Andoroidはナビゲーションバーが入る分だけ、見え方が少し違います。(※はねろ!コイキングの場合)

f:id:min0124:20170618144920p:plain

画面解像度を1920x1080px(以下1080px)とすると、Androidはiosと違いナビゲーションバー(126x1080px)が常に表示されるような仕様です。

ですので左右の絵もAndroidは72px分(片側36px)、背景が延長して見えます。

※iOSで最大までズームアウトしても左右が余るのは、横幅の範囲をAndroidに合わせている為と思われるます(Androidのズームアウトのほうが比較的ぴったりです)

文字サイズ

f:id:min0124:20170618153457p:plain

f:id:min0124:20170618153513p:plain

1080px(720px)で

  • 見出し(ex.ランクアップなどの見出し) 57pt(38pt)

  • 通常テキスト(ex.とっくん) 51pt(34pt)

  • 小さめのテキスト 36pt(24pt)

  • 小文字(ex.ランク)27pt(18pt)

POP

f:id:min0124:20170618155423p:plain

大きくは2種類。重なる時は高さが少し違うPOPあり

1080px(720px)で

大POP

  • 1374x1020px(916x680px)

  • 1278x966(852x644px ※上に重なる場合)

小POP

  • 984x966(656x644px)

  • 816x966(544x644px ※上に重なる場合)

同じサイズで位置がずれる場合もある

f:id:min0124:20170618155254p:plain

ボタン

f:id:min0124:20170618191014p:plain

カメラボタン

  • 114x126px(76x84px)

ヘッダーボタン(ダイヤ購入)

  • 144x360px(96x240px)

汎用ボタン

  • 834x150px(656x100px)

閉じるボタン

  • 120x330px(80x220px)

ショップボタン

  • 150x225px(100x150px)

フッターボタン

  • 168x1080px(112x720px)

f:id:min0124:20170618221117p:plain

はねろ!コイキング!ボタン

  • 258x852px(175x568px)

まとめ

ゲームをやっていると

  • リーグ周回時のUIのテンポ

  • ポッチャマ、リザードンなどの一部のポケモンのタッチ判定

  • タップではなくなぞると餌を自動的にたべること

など、UI・UXの不満は多々部分が出てくるのですが、

でも基本的には大きい文字でのUI表示などコンシューマぽくて、好きです。

あとキャプチャ撮るだけだと気がつくことは少ないので、できればUIパーツをトレースして再現するともう少し勉強になると思いました。