NowLoading...

NowLoading
  1. ホーム
  2. 技術備忘録
  3. アプリの画面デザインで最低限知っておかないと恥ずかしい基礎知識

デザイン

  • facebook
  • twitter
  • line
  • hatena
  • pocket

アプリの画面デザインで最低限知っておかないと恥ずかしい基礎知識

ソーシャルゲーム開発ではスマホの画面デザインしかしないので
ただひたすらスマホアプリの開発ばかりしていると、基本的なデザインの知識から取り残されていくと感じることが結構あります。

今一度、確認のために「アプリの画面デザインの基礎知識」をまとめておこうと思います。
基本的にはWEBに関係する知識なので、アプリだけでなくWEB全般の知識として覚えておくと便利です。

デザインサイズは倍サイズ

なんか気づけばまるで合言葉のようにスマホの画面デザインは倍サイズってみんな言うけど、
何を基準に倍って言ってるのかよくわからない。

WEBデザインしている人はPCとスマホ両方をデザインしているから、この辺りのルールは熟知していると思うので、なにを今更当たり前なことを? と思うかもしれませんが、
ゲーム業界のデザイナーで なんで倍なのか? ってことにちゃんと答えられる人は少数派な気がします。

現実世界の端末の画面サイズがpxに変換すると1/2ってこと

2019年現在 発売されているデバイスの画面サイズで今のところもっとも普及しているのがiphone6~8の端末サイズで画面が 4.7inch。
これをpxにそのまま直すと 375x667px

でも、デザインデータを作成するときは 750x1334px で作らなきゃいけない。
画面サイズ おおー、確かに倍になってる。

・・・え、なんで?

それはー Retina だから。

Retinaっていうのはスマホにフォーカスした解像度の再現技術で、小さな画面でも綺麗に映像や画像を表示するための技術らしい。 詳しいことはググってください。

―で、このRetinaていうのがデザインデータを倍にしている元凶で、
1pxの中に4px分の点を表示させることができる技術らしく、
(Retinaじゃない普通のディスプレイは1pxを1pxで表示します)
縦横各々2pxのデータが1pxの中に納まってしまうため、半分になるわけです。
解像度

―てなわけで、現実世界の端末サイズでデザインしたもの(375x667px)をスマホで表示しようとすると、
2pxが1pxとして表示されて半分のサイズになってしまうので、デザインデータは倍のサイズで作ってね。ということらしい。

ちなみにiphone10は3倍、4K対応の端末も登場してきているので、端末ごとの解像度対応がますます面倒になっていくのかと思うと気が重いですねー。。

なにを勘違いしたのか、750×1334 のさらに倍サイズでデータを作っていた人がおりまして。。
データ自体がメチャクソ重いうえに、書き出しの際にイチイチ1/2に変換してと・・・
無知って怖いですね。。。

dpiのはなし

デザインデータ作るときの解像度ってどうしてます?
僕はとりあえず72dpiに設定してますが、そもそもWEBやアプリの画面デザインにこのdpiって意味ないですよね。

はじめのうちは僕もよく分かってなくて、とりあえず先輩から「72dpiでいいよ」って言われたから、それに従って盲目的にずっと72dpiで作ってたってだけです。。

で、やっぱり僕と同じように解ってないデザイナーさんがチラホラいて、人によっては300とか350でデータを作っててリサイズしようとしたときに アレっ? てなったことが多々あります。

144dpi?

dpiが何なのかは他のサイトで、僕なんかよりもずっと詳しく解説してくださっているものが沢山あるので割愛しますが、
画面のサイズがディスプレイによって変わわるため、それに合わせて1pxのサイズもディスプレイによって変化してしまうので、dpiという単位がWEBなどのデザインデータでは無意味になります。
印刷データでもない限りdpi設定は不要ということです。。。。

・・・のはずなんですが、なにやらRetina対応なら144dpi(72dpiの倍)でデータを作れ と謳っているサイトがあれば、
72dpiでいいよ と言っているサイトもあり、何が正解なのか解らなくなってきました。。

でもさ、WEB用書き出ししたらみんな72dpiになっちゃうじゃん? 解像度変えても画面サイズ一緒なら絵は何も変わらないじゃん?
やっぱりdpiは関係ないんじゃないの?

WEBやスマホでの画面のデザインは端末の画面サイズが問題で、解像度がいくつであろうと関係ない。 比較 サイズが同じなら解像度を変えたところで、見た目は何も変わらないわけですよ。
だって、解像度は端末に依存するから

ということでデザインデータは72dpiのままでいいんじゃないかと僕も思います。
まぁ、この72っていうのも10年以上前のwin基準ですからね。曖昧っちゃ曖昧ですが。。。

奇数禁止

①に通じる話で、Retinaだと2pxが1pxで表示されてしまうので、1pxで作った画像は単純に言えば0.5pxになってしまうワケです。
でも画面で0.5pxを表示することはできないので、その画像は消えるかぼやけます。

同じく3pxや7pxなど奇数のサイズで作られたデータは端数部分が0.5pxになるのでやっぱりボヤっとした見た目になります。
3px
デザインがボヤっとした印象になっている場合は、デザインパーツを偶数にして作り直してみると綺麗に見えるようになるかもしれません。

ただ、グリッドやラインといった単純なパーツなら、px単位で指定して作れますが、
画像みたいに複雑なものだとそうはいかないので一概に全部偶数にすべきとも言い切れません。
切り出しサイズが偶数でも中の画像が奇数なら同じことなので、画像とシステム的に表示する箇所とデザイン段階で意識してつくることが大切です。 iminasi

1pxの線が端末上で消えるって大騒ぎしてたデザイナーがおりまして・・・無知って怖いですね。

画像は拡大しちゃダメ

アイコンやサムネイルなど、UIのいたるところで使いまわされるデザインパーツ。
全部同じサイズで表示するのがベストだけど、使いどころによってはサイズが変化するのは致し方ないこと。
ただ、この場合注意しなきゃいけないのは、拡大表示すると画像が荒れるので拡大しちゃダメってこと。

小さい画像を拡大すると元々存在しないデータを無理やり引き延ばすから汚くなる。 比較 縮小表示する分には画像の劣化は目立たないので問題ありません。
使いまわすようなパーツは最大表示サイズで作っておいて、画面に応じて表示サイズを変更すればOKで、わざわざ表示サイズ分を全パターン用意する必要は無いということですね。
ボタン ただ、画像丸ごと一律小さしてしまうので、アウトラインなど太さを維持したい場合は(2pxのラインを50%にすると1pxになってしまうということ)やっぱりサイズ違いを用意する必要がある。。
また、あまりにデカいものはメモリの消費が半端ないので、使いまわすとかえって端末に負荷をかけてしまう。そういうものは使いどころを限定して個別に用意するのもテクニック。

文字高の最低サイズ

スマホで表示される文字サイズの基準というのは、明確に定義されていませんが、
WEBにおいてはWCAG2.0から英語では18pt(約24px)が望ましいと言われていまるようです。
―ということはスマホでは9pt(12px)くらいがちょうどいいということでしょう。

実際、webサイトやアプリで多く使用されている文字のサイズは概ね24px(SP:12px)前後がスタンダードなようですね。

以前所属していたアプリ開発チームで研究した結果、
日本語の一般的なMSゴシック/明朝

日本語では20px(SP:10px)
英数字では16px(SP:8px)

が最低ライン。これ以下だと著しく視認性が落ちます。
読めなくはないが疲れます。

YES/NO 左右問題

サービスによって肯定的なボタンと否定的なボタンの並びが違う。よく見かけますね。 yesorno 特にルール的なものがないので、サービスの中で表現が統一されていれば問題ありませんが、
アプリ開発初期にはよく意見が分かれる頭の痛い問題です。

とくにMacユーザーとWinユーザーで大きく分かれます。
winの場合、エクスプローラのcloseボタンが右上なのに対し、macでは左上。

普段自分たちが使い慣れているものに準拠しようとするとそれだけでも意見が食い違います。
りんごとまど

ではUX的にはどうか?
例えば決定ボタン。
ユーザーにとって押しやすい方がいいか、悪いかの話になると
課金に繋がるものは安易に押せるようにするのは危険とか、 課金させたいから押しやすくしようぜとか、 運営の都合で考え方が変わるので正解がありません。

ユーザーが右利きか左利きかによって使い勝手も変わるし
お国柄によっても左右の意味が違ったりするので、やはり答えは出せそうにありません。
多くの宗教では”右”が神聖という考え方があります。

重要なボタンは画面中央の下側に置く
みたいなのが多くなってきているようですが、
結局のところサービス内でルールが統一されていればどっちでもいい
といったところではないでしょうか。 modal

Backボタンは小さいほうがいいみたいな記事を以前見たことがありますが、どうでしょうね。

アプリにおいてはよく使うボタンで
バックキーが目立たないと、行った先のページで詰んでしまうため

どこにあるのかわからないくらい目立たないのはNGです。 戻るボタン サイズ云々というよりもBackボタンとして認識できるか否かの問題です。
目立たせるために大きくしたところで、バックキーだと認識できなければ無意味ですから。

Fuckin’ Apple

iphoneて新機種が発表されるたびに画面サイズ変えてくるじゃないですか。
あれデザイナーからすると非常に迷惑ですよね。

「それを言うならAndroidだって機種ごとにマチマチでもっと面倒じゃないか。」
という声が聞こえてきそうですが、
実はAndroidの方が画面サイズの画角は概ね統一されていたりします。

2018年あたりのスタンダードは 16:9 がほとんど。
端末によって数pxの違いがありますが、画面表示させると1~2pxズレるか、空白が入るだけでデザインへの影響がほぼありません。

一方iphoneは機種ごとに画角ごと変えてきやがるんで、それこそ世代ごとにデザインを変えていかないといけないという不毛な対応が求められます。
しかも対応させないとstore申請弾かれるし・・・

そもそも16:9は日本の企業がテレビモニターの規格で打ち出し始め、世界的に浸透していった比較的新しい基準です。

appleだけが独自路線突っ走って新機種で市場調査してるような状況なんで
そう考えると Fuckin’Apple! て言いたくなりませんかデザイナーの皆さん?

関連記事

もっと見る

技術備忘録 でよく読まれている記事

人気記事TOP10