老眼のユーザビリティ

驚愕ですが、15歳を過ぎると既に「老眼」の症状が進行しているそうです。

私はUI、ユーザビリティに関わっていますが、スマホなど近くが見えない老眼症状を感じる年齢になり、毎朝茶碗に盛られたお米にも焦点が合わず経験と感覚で食事してたりします。

そこはポジティブに受け止めて、自身でもある団塊ジュニア世代(第二次ベビーブーム世代)の大きなターゲットに向けたユーザビリティを考えてみます。


スマートフォンの画面

私の場合、画面との距離は30cm程度で持つとピントがハッキリとします。

一般的に近点距離の年齢別の目安として、
20歳で15cm
30歳で21cm
40歳で33cm
50歳で60cm
60歳で150cm

以上の距離が必要とのデータもありますので安定して進行しているようです。

下記はiPhone6系の画面にそれぞれのサイズの文字を表示させています。
※一部ブラウザの基本仕様により、10pxより小さいサイズはCSSで設定しても10pxで表示されてしまいますので、最小サイズは10pxに設定

⇒スマホでの実サイズ表示はこちら

確認してみると、10pxの文字は自身には可読性が低いと感じられます。

40代から老眼の症状が気になってくるといわれておりますが、
目の負担により、肩こり、頭痛、吐き気の症状があり仕事に支障をきたします。

ですが現実問題として老眼鏡をかけてスマホを見る行動について、外出中は特に難しいと感じています。

スマホの画面表示の場合は、優先度が高い部分での10px、12pxの文字の運用はターゲットにより控えるべきですが、
弊社の「フォントサイズ運用ガイドライン」を確認すると↓

優先度が低い訴求部分で10px、12pxの文字が運用されております。

メインターゲットにもよりますが、年齢に応じたCSSを使い分けるのも大変な手間なので、対象利用者は端末の文字サイズを「設定」から「標準⇒拡大」に変更する勇気ある決断が必要です。


混雑率200%~の車内

フォントサイズを大きくするなど物理的な対応を行い何とか乗り切れたとしても、どうにもならない状況が日々の通勤時に発生します。
「混雑率200%~の車内※」
(※週刊誌程度ならなんとか読める)
です。

主観では満員電車で必要外のスマホ利用は控えるべきと考えますが、
混雑率200%を超えてくると、車内で他の乗客と適切な感覚を確保する事は難しく、
その利用シーンではスマホ画面との距離は20cm程度まで近くなる状況になります。

そのなかで老眼の場合、ピントが合わず30cm以上距離をとる必要が出てきます。

物理的に無理があり他の乗客の迷惑となりますので利用者はスマホの使用を控えましょう。


大画面テレビ

老眼より近視の影響もありますが、
視聴距離が2mを越える4Kや8Kの50インチ越え大画面テレビのきめ細かさを認識をするためには、画面に近づく必要があるため高解像度化の恩恵がありません。

そんな状態で4Kの恩恵を得られるのは視聴距離が40~60cm程度と短いPCの画面など24インチ前後のモニター/ディスプレイです。


サービス側のユーザビリティ配慮

 
たとえば利用者が、書き方がわからない漢字を調べる場合

ブラウザに読みを入力。
・「忖度」…画数が少ないのでや文字が小さくても構成が判断できます。
・「薔薇」…この画数は厳しいです。

状況によって利用者はピンチ操作で画面表示を拡大します。
したがって、サービス側での配慮としては、10pxや12pxの文字サイズの運用を避けつつhtmlのメタ設定では、

<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no" />

この記述内の
「user-scalable=no」部分を設定さえしなければ、利用者はピンチ操作で任意のページを拡大縮小できるようになります。是非配慮をしてあげてください。


その他の配慮

紙に印刷して展開する細かい数字などの資料ですが、
若い方には読めても、歳を重ねた方には大変な苦痛が起き、目が疲労して頭痛、肩こり、吐き気の症状があらわれます。
是非配慮をしてあげてください。

また、社内の廊下の奥に人がいる場合でも、歳を重ねた相手側にはあなたが誰か認識できていない場合があります。
是非察してあげてください。


まとめ

老眼のユーザビリティ対応

・~10px、12pxの文字使用は避ける
・HTMLメタ内「user-scalable=no」の運用は避けピンチ操作に対応する

次回も情報設計、ユーザビリティに関係した話題をお届け致します。
デジマースのネモトでした。

Featured Video Play Icon

左利きの視点から見たユーザビリティ

こんにちは、ユイPです。毎日暑いですね。平成最後だからって夏頑張りすぎじゃない?

突然ですが、あなたの利き手は右手ですか?左手ですか?おそらくほとんどの方が右手だと思います。
左利きの人口は全世界で約11%だそうです。100人いたら11人。多いか少ないかで言えば少ない方ですよね。
ところがどっこい、私ユイPは左利きです。お箸を持つのも字を書くのも絵を描くのもボールを投げるのも左手。スマホを持つ手は右です。

みなさんも一度はネット上で「左利きは●●が不便~!」みたいな話を見かけたことがあるのではないでしょうか。確かに世の中は右手を使う事を前提に作られているものが多いので正直不便に感じる事も多いです。
でも不便な事ばっかりじゃなくて、利点もあるのでは?そもそも今右利きを前提に作られているものも、少しの工夫で左利きにも優しくなるんじゃないかな?と考え、今回は左利きである私の視点から身の回りに溢れるもののユーザビリティについて書いていきたいと思います。
※決して「左利きってほんと不便なの!配慮してよ!」という愚痴をぶつける記事ではありません。


1.改札

改札でICカードをタッチしたり切符を入れる場所は右側ですよね。右利きの方はおそらくみなさん右手を使う方が多いと思います。私も無意識下では左手でICカードを持ってしまうので手をクロスした状態でピッとやります。もう慣れてしまいましたが…。

もしも改札が、両側どっちにタッチ(切符)してもいいよ!という設計になったら理想的です。

コストや事故など色々考えるとなかなか実現は難しいと思いますが。

2.スープレードル

ユイPが個人的に1番左利きでストレスを感じるのがこれです。ファミレスのスープバーなどでよく見かけるこやつ。
この写真のものは丸いお玉型をしているのでまだそこまで使いにくくないのですが、お店にあるもっと細くて先が尖ったタイプのやつ…(写真が用意出来なかったのでこちらから)使いづらさが最上級です。仕方がないので右でいつも使いますが、注ぎにくいのでこぼしてしまったりする事もあります。

なのでどちら側からでも注げるように、両側に注ぎ口があるレードルがあったりしたらいいなあと思います。

左利き用も売っているので自宅ではそれを使うしかないですね。

3.ハサミ

どうしようもない。
左利きハサミを常備するか、右で扱えるようにするしかない。私もハサミは右で使えます。右利き用でも普通に左手でも切れるやつあるんですが、切れないやつと何が違うんでしょうね?

4.お菓子の切り口

お菓子の切り口って左手で持って、右手で開ける事が想定されているので左側に切り込みが入っているものが多いです。なので左手で開ける場合裏返して開ける事が多いです。開ける事に支障はありませんが、切り口のガイドが見えないので切り方を失敗してしまう事もなくはないです。

両側どちらからも開けられるものだと嬉しいです。

5.電話機

会社でおなじみ!電話機。

左でとって右手でメモなどが出来るよう、左側に受話器がついていますよね。左利きは右でとって左でメモします。私も会社のデスクでは右側に電話を置いていますが、もしこれが位置固定で左側にしか置けなかったら…手がクロスしてメモが取りづらい。
なので受話器は上側にあったりすると平等かもしれません。

昔なつかしのこの形を更に改良していけば使いやすそう。

6.スポーツ

体育のキャッチボールとかだとペアの相手に嫌がられる事もありますが、勝負の世界だとレフティって有利とも言われますよね。これは左利きのメリットだと思います(私はスポーツ苦手なのであまり感じたことないです)。
左利きの人はおそらく利き足も左利きの人が多いですよね。サッカー選手でいうとメッシでしょうか。

7.銀行とか役所にある固定されたペン

(手作り感の強い写真ですみません)
紛失や盗難防止なのでしょうが、右側に固定されている事が多いですよね。この固定している紐やチェーンの長さが短いと書きづらい…。

これはシンプルに真ん中に設置する、そして紐は長めにしておいてほしいです。

8.楽器

私は学生時代左利き用のベースを弾いていました。まず左利き用の楽器を扱っているお店はあまり多くありません。そして左利き用を使っていると「あ、ちょっと貸して~」と友達に借りる事も出来ませんでした。
右も左もわからない初心者なら、一般的な右利き用で始めるのもアリだと思います。かつて私も楽器屋さんのお兄さんにもそう言われました。
(それでも当時の私は好きなアニメの推しキャラクターがレフティのベーシストだったという理由で左利き用を買いました。世界のポール・マッカートニーもレフティ)

9.キーボードとペンタブとマウスと私

これはペンタブで絵を描く方限定の悩みだと思うので、伝わりにくい方には申し訳ありません。

左手でペンを持っているとキーボードのCtrl+Z(を始めとした一般的なショートカットキー)が押しにくい!

カスタマイズ出来るタイプのキーボードやワイヤレスだといいのですが、普通に設置されているものだと右手がつりそうになります。
Photoshopなどはショートカットキーもカスタマイズ出来るのでそういった所で対処していくしかありません…。

ですが、左手でペンタブを使っている時にも利点はあります。
そう、それはマウス。

マウスは右という左利きさん、私もですが身近にも多いです(マウスも左だわ…という方がいたらごめんなさい)。
マウスが右だとペンタブを左手で使いながらマウスも握っていられるんですよね。これはとても利点だと感じています!

10.ノート

横書きのノートは左手の側面が確実に真っ黒になります。

ペンだとにじんでしまったり…これはもうどうしようもないです。にじまないボールペンが好きです。
またリング式のノートやファイルも手にリングが当たって書きづらいので、私はこれは取り外しの出来るルーズリーフを使って対処していました。会社のファイルなども出来る限り取り外しの出来るものだと嬉しいですね。

ただし唯一右利きに勝てる所があります。それは「縦書き」。

身近な所でいうと国語のノートでしょうか。これはものすごく書きやすいです。

11.左利き=天才じゃない?という風潮

世界の名だたる偉人には左利きがとても多いです。レオナルド・ダ・ヴィンチも、ミケランジェロも、ピカソも、アインシュタインも、ニュートンも、エジソンも、ベートーヴェンもみんな左利きです。左利きの人は右脳が発達しているから、何かに長けていることが多い…という説がありますね。
ですが私は左利きでも今のところ何も発明していないので凡人です。
「左利きなんだ!なんかかっこいいね!」と言ってくる方たまにいますが、反応に困る。


というわけで、いくつか紹介をしてみました。いかがでしたでしょうか。
不便な点も多いですが、メリットがあるものもあれば、自分なりに改善できる点、世の中全体で改善して頂けたら使いやすくなりそうなものもありました。

世界の89%は右利きなので、多い方に有利な世界なのは当然だと思います。決して左利きにもっと配慮しろ!なんていうつもりはありません。正直私は日常生活を生きる上で左利きであることにそこまでストレスや不便さを感じていません(ここまでこれだけ色々書いたのに)。

ですが今回の利き手の話に関わらず、多い方だけを優先するのではなく少ない方に対しても少しでも配慮をする事が、デザインや開発をする上で心に留めておくべき大事な事なのではないでしょうか。

とりあえず左利きの人が食事の席で人の左側に座りたがる事を許してください。

さもユイPが人類の左利き代表のように書いてしまいましたが、そんなわけはないのでこういう意見のやつもいるんだなあ~という気持ちで受け止めて頂けたら嬉しいです。
それではまた次回!

右手で書きました。


★ほぼ毎日更新中!
デジマースブログ公式ツイッター

エレベーターの開閉ボタンについて-2-

こんにちは、はらです。
私は前回エレベーターの「開く」「閉じる」ボタンのアイコンは紛らわしいという記事を書きました。

その記事では「なぜ紛らわしいのか?」「こうすると良いのでは?」など、あれこれ語ったにも関わらず、実際に新しいアイコンデザインは考えませんでした。

すると、やはりと言いますか…「あれこれ語ったのなら究極のアイコン作れるよね?」という声が上がりました。(震え声)

という事で今回、私が思う理想の「ひらく」「とじる」ボタンを実際に制作したいと思います。
エレベーターのボタンに関して現在はこうだという定量的な表現ができないので、デザイン上必要な条件を満たしていくという方法で最良の答えをみつけていきます。
この記事を書き終える頃にはきっと、とてもわかりやすい「ひらく」「とじる」ボタンが完成しているはずです!(震え声)

制作する上で注意した点

前回の記事を参考にしながら、制作する上で注意するポイントをまとめました。

1.ひらくボタンが優先されているか?

「ひらく」ボタンはドア挟み防止という安全上の理由から「とじる」ボタンより優先度を高く設定する必要があります。今回は色やアイコンの形状により優先順位を明確にします。
(開きたいと思った時に「とじる」ボタンに目線を向けてしまうとそれだけで時間を無駄にしてしまうので優先順位を明確にする事は大切ですね!)

2.色使いは適切か?

エレベーターの「あける」ボタンに色が付いている場合は緑色が使われています。
目立つので赤では?と思った方もいらっしゃるかもしれませんが、赤色は機械に使用すると非常用ボタンや緊急連絡ボタンなど「緊急」を連想させてしまうため、ボタンに利用すると押す際にためらいが生じます。また、焦りも増徴させてしまいます。黄色も同じように使い方次第で警告や注意喚起を連想させるため普段使いのボタンに使用すべきではありません。
緑は安心感、落ち着き、緊張の緩和などをのイメージに繋がります。機械に使用すると、進む、平常運行、作業完了、準備完了、充電完了、といったような安全なイメージ繋がります。以上の事からボタンを目立たせるという目的に使用する色は「緑」が良いといえます。

3.一目見ただけでアイコンの意味が理解できるか?

エレベーターのアイコンが抱えている問題はコレですよね…。一目見ただけでアイコンの意味が理解できるかという問題。ボタンが「ひらく」か「とじる」かを判断する時間は4秒前後のため当然アイコンは一目見ただけで判断できるようになっている必要があります。アイコンに対し過剰な装飾を加えたり、余計な立体感を加えると情報量が多く人によって処理に時間がかかってしまったり、解釈に違いが出てしまいます。いかにシンプルにするのかが重要です。今回は一つの記号に対し2つ以上の情報を与えないよう意識して制作を行います。

4.文字の表現は適切か?

年齢や国籍の事を考えるならば文字表記なしで伝わるのが理想ですが、前回の記事で文字に関しても触れたため今回は文字による補足も加えます。その文字表記に関して漢字は絶対にオススメしません。いわずもがなですが、「開」「閉」はとても紛らわしいです。焦っていない状況でも間違えます。文字を載せる場合はひらがなで、「ひらく」「とじる」がもっとも間違えにくいです。「左右」もそうですね「ひだり」「みぎ」と書いたほうが間違いを減らす事ができます。

この4項目を満たすと、わかりやすいアイコンになります。
それでは早速、上記のチェック項目を基に制作して行きたいと思います。

実際に考えてみた

良いと思えたもの

いろいろ迷いましたが完成!

もうすでにありそうですね…分かりやすくするために必要な4項目を全て満たしているので、押し間違いの発生率を下げることができる…はず…です。


「ひらく」ボタンのサイズを大きくしなかった理由

利用シーンあるいはユーザーの属性によって、どちらのボタンを重要と捉えているのかが変化するため、今回の記事ではボタンサイズを統しました。

介護施設や病院など判断や動作に時間が必要な方の利用が多いと考えられる場合は「ひらく」のボタンサイズを大きくするべきだと考えております。

「ひらく」を大きくする事は、目立たせる手段として大変効果的なため、サイズ感に関しては大変迷いましたが、今回は「ひらく」を目立たせるのではなくどちらが「ひらく」か判断を早めるという考えのもと制作を行ったため、サイズを統一いたしました。

また、「ひらく」を大きくする事によって、階数ボタンとの優先順位が変化し、階数ボタンよりも先に「ひらく」ボタンに目線が向かう可能性があると考えたためサイズを統一いたしました。

最後に…。

いかがでしたか?結局ありそうな形に収まりましたね…。
ひらくボタンは安全上必要な場合がありますが、とじるボタンは最悪無くても問題ありません。ですので閉じるボタンを削ってしまうのも手かと思います。とじるボタンが無ければ、ひらくボタン一択になり、迷う要素はありません。海外ではとじるボタンは無い事が多いそうです。
ただ、日本のUIは丁寧&補足詰め込みが大好きなので、削ったところで「このエレベーターには閉じるボタンがありません」なんていうシールが張られてしまいそうですね!
手でとめるというのも究極ですよね!何も迷いません。物理的にとめて開く…究極に直感的です。ただ、挟まると言う危険と恐怖がありますので良くはないですけど…。
このボタンの問題、完全な解決難しいと思いました。人が人である限り…。

ちなみに…アップル銀座のエレベーターには操作ボタンが全くありません。

それではまた。

(はら)

エレベーターの開閉ボタンについて

身の回りのUI第2弾です。

エレベーターの「開ける・閉める」ボタンが間違えやすいという話を昔からよく聞きますよね?未だにこの話を聞くということは、車のワイパーが未だに昔と変わらず棒が左右に動き水をよけている事と同じで、もはや解決策がないのかもしれません…

ということで、今回はエレベーターの開閉ボタンが間違えやすい理由についてあれやこれやと考えていきたいと思います。

※本文中に出てくる「かご」とはエレベーターの人が乗る箱状の部分の事です。


では、突然ですが問題です。
どちらがエレベーターの「あける」ボタンでしょうか?

左ですね。

簡単に答えることができたはずです。

「あれ?いつもは迷うけど、今回は迷わなかったな」と思った方もいらっしゃるのではないでしょうか?

迷わなかった理由は“状況が違う”からです。

エレベーターで「開ける/閉める」の二択を迫られるときは「慌てて人が駆け込んできた」「早く閉めたい」など慌てている状態が多いですが、今回は違いますよね?自宅やオフィスで、ゆっくりしながら落ち着いて答えましたよね?(多分ですが…)

人は焦るとパフォーマンスが低下し、ミスを起こします。焦るという状況が発生しやすい環境も改善する必要があるため、開閉ボタンの問題をアイコンのデザインだけで解決するのは難しいかもしれません。ですが今回はアイコンのデザインでミスを軽減しようという考えのもと話を進めます。

なぜ間違うのかを考える

1.ひらくボタンを押すまでの手順の問題

ドアが閉じるまでは4秒前後です。その4秒前後で「ひらくボタン」を見つけて押す必要があります。ドアが閉まりかけの時に人が乗ろうとしてきた場合は4秒も確保できません。
このことから分かるように、アイコンデザインの良し悪し以前に押すまでの時間が短いという問題があります。
エレベーターのボタンは、どちらが「開く」か「閉じるか」に迷うよりも先に“探す”という行為を先に行う必要があります。ですので、開閉ボタンのデザインは「限られた時間でいかに早く見つける事ができるか」が重要になってきます。

※ちなみに…車椅子用ボタンを押すと閉まる時間が10秒ほどになります。また、エレベーター内のミラーは、車椅子の方がバックで降りるために設置されています。(かごの中で回転するのは難しいためです)

2.アイコンのデザインの問題

エレベーターの開閉アイコンは同じようなデザインのものが多いのですが、規格により統一されているわけではないので、アイコンを記憶しても意味はありません。統一してくれればいいんですけどね…。
開閉ボタンのアイコンは、迷わず行動に移せるほど分かりやすく、誰が見ても同じ意味を想像できる形が理想的です。そこを踏まえた上で現在頻繁に見かけるアイコンについて考えると、完全なものではないように思えますのでその理由について説明いたします。

頻繁に見かけるアイコンのデザインがわかりにくい理由

こちらのアイコンはよく見かけますが、パッと見た時に、どちらなのだろうかと迷い、結局補足の文字に頼ることが多いので、なぜ間違えやすいのかについて考えてみたいと思います。

1.ひらいている様子が伝わりにくい
「ひらく」も「とじる」も中心に矢印が寄せてあり、どちらも閉じていると言われれば閉じているように見えます。

2.ドアなのかが分からない
矢印のみだと、何がどのように動くのかが分かりにくいです。シンプルですがパッと見た時の情報が少ないです。

3.三角形だと矢印として伝わりにくい
人によっては矢印という意味よりも先に三角形ととらえる可能性があります。情報量を減らすという意味では成功していますが、「矢印」「三角」のどちらにも見えるとういあいまいな状態は、ナビゲーション目的のデザインにおいては避けるべきです。

以上のことからアイコンは「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要となることが分かりました。


今回はボタンの開閉が間違えやすい理由についてあれやこれやと考察してみましたが、「限られた時間でいかに早く見つける事ができるか」「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要なのではということが見えてきました。
ほとんどのエレベーターのボタンは「左がひらくボタン」です。また、色が付いているならば「色がついているほうがひらく」です。もちろん全てのエレベーターにあてはまるわけでは無いのですが、ほとんどがこのようになっています。
このような情報をユーザーが予め持っていればいいのですが、当然そうはいきません。そもそもUIデザインではユーザーの知識や経験を頼りに設計することはあってはならないことです。ユーザーは何も知らないし、間違うことを前提に設計する事が基本です。
少し話がそれましたが、今後もエレベーターのボタンに関して気になることがあれば記事にしたいと思います。
それではまた次回

(はら)

スマホ画面サイズとユーザビリティ/2018年版

今回はスマホ/モバイル端末を中心に、スマホの画面サイズ画素密度と目の距離に関係するユーザビリティを考えてみます。

画面サイズと画素密度の相対関係を考えると非常に奥が深く楽しそうなので、まずは個人的に思い入れがある端末の画面サイズで画面サイズスペック表を作ってみました↓


主要画面表示機器スペック表

スマホ画面サイズ / ppi リスト

iPhone 3G
3.5 インチ 320× 480  HVGA 163ppi

iPhone 3GS
3.5 インチ 320× 480  HVGA 163ppi

iPhone 4
3.5 インチ 640× 960  Retina 326ppi

SO-01B
4.0 インチ 480× 854  FWVGA 254ppi

IS03
3.5 インチ 640× 960  WVGA 330ppi

iPhone 4S
3.5 インチ 640× 960  Retina  326ppi

iPhone 5
4.0 インチ 640×1136 Retina  326ppi

iPhone 5S
4.0 インチ 640×1136 Retina  326ppi

iPhone 6
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 6plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 7
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 7plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 8
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 8plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone X
5.8インチ 1125×2436 SuperRetinaHD 458ppi


ガラケー画面サイズ / ppi リスト

W11H
2.2 インチ 240× 320  QVGA 182ppi

W52SA
2.8 インチ 240× 400 WQVGA 167ppi

W54SA
3.0 インチ 480× 800 WVGA 311ppi

MARVERA KYY08
3.2 インチ 480× 854 FWVGA 306ppi


ガラホ画面サイズ / ppi リスト

MARVERA KYF35
3.4 インチ 480× 854 FWVGA 288ppi


iPad画面サイズ / ppi リスト

iPad
9.7 インチ 768×1024   132ppi

iPad 2
9.7 インチ 768×1024   132ppi

iPad 3
9.7 インチ 1536×2048 Retina  264ppi

iPad 4
9.7 インチ 1536×2048 Retina  264ppi

iPad Air
9.7 インチ 1536×2048 Retina  264ppi

iPad Air2
9.7 インチ 1536×2048 Retina  264ppi

iPad (2018)
9.7 インチ 1536×2048 Retina  264ppi

iPad Pro9.7
9.7 インチ 1536×2048 Retina  264ppi

iPad Pro10.5
10.5 インチ 1668×2224 Retina  264ppi

iPad Pro12.9
12.9 インチ 2048×2732 Retina  264ppi

iPad mini
7.9 インチ 768×1024   163ppi

iPad mini2
7.9 インチ 1536×2048 Retina  326ppi

iPad mini3
7.9 インチ 1536×2048 Retina  326ppi

iPad mini4
7.9 インチ 1536×2048 Retina  326ppi


携帯ゲーム機画面サイズ / ppi リスト

Nintendo DSi LL (上画面)
4.20インチ 256× 192      76ppi

Nintendo 3DS (上画面)
3.53インチ 400× 240 WQVGA 132ppi

Nintendo 3DS LL (上画面)
4.88インチ 400× 240 WQVGA 96ppi

Nintendo Swich(携帯モード)
6.20インチ 1280× 720  HD 237ppi


モニター画面サイズ / ppi リスト

モニター/デスクトップ
24.0 インチ 1920×1080 FHD  92ppi

MacBook Pro
15.4 インチ 2880×1800 Retina 221ppi


TV画面サイズ / ppi リスト

ブラウン管TV
29.0 インチ  640× 480  SD  28ppi

ハイビジョンブラウン管TV
32.0 インチ 1280 × 720  HD  46ppi

フルHDTV
50.0 インチ 1920×1080 FHD/2K 44ppi

4K TV
60.0 インチ 3840×2160  4K  73ppi

8K TV
60.0 インチ 7680×4320  8K  147ppi


大きさと密度の移り変わり

2001年から3G携帯電話(フィーチャーフォン)がサービス開始されましたが、その当時の画面サイズは下記でした。

--------QVGA端末--------
・240×320 pixel (QVGA解像度)
・2.2インチ
・画像密度は182ppi
---------------------
※ppi (pixels per inch)
1インチ当たりの画素数
数値が大きいほど高精細


現在の端末と比較すると、
四角い大きな画素(ドット)がハッキリと認識できるもので、
いわゆる「8ビット的」な画質制約の中でサービスやその広告バナーを作っていました。

WEBページの容量制限(Web1ページ100KBまで等)もあり、質素倹約の時代だったのです。

その後は画面の高精細化と大型化が進み、「VGA解像度の端末」(QVGAの倍の解像度もつ端末)が登場することで、フィーチャーフォンは成熟期を向かえます。

-------- VGA端末 --------
・480×800 pixel (WVGA解像度)
・3.0インチ
・画像密度は311ppi
---------------------

そして、新しい市場/エクスペリエンスに向けて登場したのがスマートフォンです。

日本ではiPhoneやAndroid端末を発売開始した2010年あたりからスマートフォンの普及が始まりましたが、
大型化した画面と高細化した解像度を十分に処理できるスピードとOSの環境が整うまで時間がかかり、
特にAndroid初期端末の「モッサリ感」は苦い記憶として残っている方も多いのではないでしょうか。

-------- iPhone 6 --------
・750×1334 pixel (Retina HD)
・4.7インチ
・画像密度は326ppi
---------------------


最適視聴距離による体験

それでは本題である「画面サイズ/画素密度と目の距離に関係するユーザビリティと満足度」について「ブラウン管式の家庭用TV」の時代まで戻ってから考えてみます。

過去のブラウン管TVの場合、画面の高さの「5~7倍」離れて視聴する状態が「最適視聴距離」とされてきました。
「最適視聴距離」とは「1ドットを構成するRGB画素」が距離をとることで程よくぼやけ、溶け込み、画面全体が「綺麗な一枚絵」として視聴できる距離とされています。


液晶TV/ハイビジョンTVの場合は(共にフルHDレベルの条件)、ブラウン管(SD)と比較して高精細になった為、画面の高さの「3~4倍」の離れた距離で十分な絵が視聴出来るようになりました。


----最適視聴距離の基準設定要素----
・16:9のアスペクト比
・視野角33度
・視力1.0での走査線識別が出来ない距離
※ハイビジョンTV走査線数(1125本)
---------------------

過去のTVと比較して、液晶TVの画素密度(ppi)は「4K化」「8K化」など高精細化が進んでおります。
家庭環境において意識して見入る映画や鑑賞コンテンツについては、
視野角を踏まえたうえで今後も視聴距離が近くなっていく可能性があります。

それでは、そのTVよりも高精細な画素密度を持つスマートフォンの「最適視聴距離」はどうでしょうか。


スマホの最適視聴距離?

まず、スマートフォンについては「最適視聴距離」の概念は適切ではないと考えます。

理由として、手に持って使用するスマートフォンはTVなどの機器とは利用環境がそもそも異なり、目と端末の距離は常に意識せず一定に保たれています。
距離の違いは身体特徴のほか、近視、遠視、老眼など視力の個人差により出てきます。

目に負担の少ない利用距離の確認方法としては、今回詳しく紹介は行いませんが「ハーモン距離」と言われる距離測定の考え方もあります。

「画面の大きさ」「画素密度」の違いはユーザビリティと体験に大きな影響を与えます。
年齢によってはスマートフォンを使うこと自体が負担となり使いにくい場合もありますので、
自身の環境に適した使いやすい機器を選んでいくことが大切です。


年齢による距離の違い

下の表を見る限り、
「20歳」と「30歳」「45歳」の裸眼状態では文字を読める最適な距離がまず違うことが確認できます。


注目する部分は、「20歳」と「45歳」では距離の開きが3倍近い点です。
既に「45歳」の裸眼状態では、ピントが合わず「近く」が見えにくい為、
腕を伸ばし頭を引くといった、若年利用者とは異なる厳しい使用環境が待ち受けています。

素直に老眼鏡を受け入れる割合も少ないことから、
サービス設計する側は、利用者の大半をも占める興味深いこのターゲット層も踏まえてガイドラインを策定して、適切なサービス設計を行なうと良いのではないでしょうか。


最後に

モバイル端末の普及により目の疲労に拍車をかけているこの現代だからこそ、普段のデスクワークで使用するPCモニターの適切な配置が必要です。
幅広い利用者に向けてユーザビリティを考えていくのであれば、なお大切な心掛けなのではないでしょうか。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。