MeM0

おそらく好きなコンテンツの話か雑記

ポケモン剣盾のUI

割と法則が見えそうだったのでUIコンポーネントを探すまでやろうかなと思ったけど、あまりかっちり完璧にはできそうになかったのでやったという気持ちだけ残しておく。ゲームの実装はほっとんど知らないのでレイアウトも色指定も自分が知らないやり方の可能性がある。

f:id:mitsuya0:20200304002205p:plain

カラー

見てわかる通り結構色数が多い。大体各メニューにメインカラーが設定され、濃さが二段階存在しているように見える。大体メインカラーが背景になっていてその隣接に一段濃い(一概に濃いとは言えず、メインとの同系色に乗算系をかけてる予感がする)色を載せてる。ショップは例外。これが乗算で法則があるのか、単に似た色を当てたんだろ うかってのを探している間にやる気がなくなってきたのは内緒。

グレースケールも色々準備されていて、ぱっと見フィボナッチぽいけど厳密に検証してないのでわからない。今回のポケモンUIは中央下部のメッセージに濃いグレーを採用していたり、フォーカス色が#000000で黒が結構印象的。あとついでにメッセージを補足すると、人と話すものは白で、それ以外は黒になっている。白は不透明の白とライトグレーで作られてるが、黒側は中央は不透明のダークグレーで斜めの左上と右下は若干透明で抜け感を出してるっぽい。

タイポグラフィ

フォントはカタカナの垂直な濁点とかはみ出具合からおそらくロダンNTLG。レベルの欧文はFuturaのはず。英語版はFuturaで全部組まれてるぽいのでやたらスタイリッシュに見える。左上の英語はAkzidenz-GroteskっぽいけどGの入りが水平なので微妙に異なってわからない。

種類はこのメニューだと多分、L,M,S,XSあたりのサイズが準備されるように見える。ポケモン名やアイテム名がM、ステータス回りがS、下のメニュー等がXSって感じなはず。ロダンを持ってないから検証できてないけど、似た感じの新ゴを当てるとmdpi換算で24px, 14px, 11px, 10pxな気がするが何かいびつに見えるので数字は自信がない。あと多分何らかのカーニングが走ってる。ちょうど今この文章を書いてて思ったが、Futuraはあるので英語版でやればよかった。

コンポーネントとレイアウト

カプセル型を盾に並べてそのしたに65°の斜めが走る。この斜めはほかの要素でも多用されており、画面切り替わりのトランジションでも細かく活用されているので今回のポケモンのUIのリズムと一貫性に一役買ってる。あと背景の白は若干赤と青のぼかしが入ってる。

ボタン系はカプセル型のリストと円+アイコン+ラベルで構成されたコンポーネントの二種類。両方しっかりめのドロップシャドウ入り。前者は同列の内容が連続するときに使われて、後者はカテゴリ等別レベルの入り口に使われている。フォーカスは両方黒反転。

長方形のテーブルが見えるが、ステータス等見るだけのものに対して採用されてるぽい。テーブルだけやたらグレー感があってもったいないようにも見えるが、自分もパッと改善策が浮かばない。

マージンはリストが5の倍数、テーブルが4の倍数に見える。Switchのキャプチャがjpgで撮られて境界線がぱっとしないので予想。

所感

あまりパーツにゲームの雰囲気を入れすぎない最近の任天堂のUIっぽい感じ(ゲーフリだけど)。同じスイッチで発売されたピカブイはグラデを多用していたが、そこからもかなりすっきりしている。ただ、ゼルダほどストイックになりすぎずカラフルでとっつきやすい印象。文字数も多く、日本語だと文字サイズもちょっと大きく見えて、若干やぼったくも感じるが全然許容範囲だし、これは英語版試すべきだなーって気がしている。