WordCamp San Francisco 2014におけるLuke Wronblewskiの講演です。UIデザインで考慮すべきは、画面サイズと解像度だけでなく、視聴距離、ポスチャー（詳細後述）、周囲の明るさという要素も必要になってくるという話。

• スマホ端末を両手もしくは片手で持つ場合を合わせて、75%のユーザは親指を使って操作している。
• タブレットのランドスケープモードとポートレートモードの利用比率は、6:4とか7:3とか言われるが、要は両方に対応する必要があるということ。
• タブレットとキーボード付きのタッチ画面対応ラップトップを全てプログラム的に判別はできない。よって、画面のサイズが一定サイズ以上になると、マウス/キーボード向けの操作ヒントを画面に適宜表示するという工夫が必要になってくるかも。
• 解像度だけで判断もできない。同じ1920x1080であっても、ユーザが利用しているのは、10フィート（304 cm）先の距離にある50インチ（対角127 cm）のHDTVの画面かもしれないし、1フィート（30.4 cm）先の手元にある5インチ（対角12.7 cm）のGalaxy S4かもしれない。
• スマホの画面の横幅と、TV画面の左端に帯状で表示されるエリアのコンテンツは、どちらも320pxであるケースがありうる。しかし、同じ内容のコンテンツを表示するにも、10フィート（304 cm）先のTV画面と1フィート（30.4 cm）先の手元で操作する場合ではデザインは変わってしかるべき。
• 10フィート（304 cm） / 2フィート（60.9 cm） / 1.5フィート（45.7 cm） / 1フィート（30.4 cm）の単位で、ユーザと画面の距離を考慮に入れたデザインをする。例えば、Netflixのページで各映画/番組を示すボックス枠は、1フィート（30.4 cm）先の手元のスマホで操作する場合は1インチ（2.5 cm）の高さにする。1.5フィート（45.7 cm）先の手元で操作するタブレットの場合は、高さが1.75インチ（4.4 cm）。2フィート（60.9 cm）先のラップトップだと高さ2.25インチ（5.7 cm）となる。10フィート（304 cm） 先にある大型TVになると高さ5.25インチ（13.3 cm）が適切なサイズとなる。
• Google Glassで見るコンテンツは、8フィート（243 cm）先の25インチ（対角63.5 cm）HDスクリーンに相当。ピクセルだと640x360になる。そこに投影するのに適切なデザインは、既存のウェブサイトのサイズを調整したものではなく、壁の電光掲示版に表示するようなシンプルな情報。どのようにスクリーンが周りの環境になじむかというポスチャーの概念を考慮することも必要となる。Glassは音声で操作をすることからも、例えば二者択一のようにシンプルな操作ができるデザインが合う。
• また、10フィート（304 cm）先のTV画面は、やや暗い場所に置かれているケースが多い。昼と夜でカーナビ画面の色調を反転させるように、光の状況をセンサーで感知してバックグランド色を切り替える工夫も必要になってくる。W3CのMedia Queries Level4におけるレスポンシブの仕様には、使用する端末の周りの光のレベルも入ってるので、将来的には考慮すべきポイントとなる。

#ui

ワザノバTop200アクセスランキング