INDEX of This Page
形、大きさ、距離。インターフェースデザインの出発点
本日は「UI画面について」というテーマで、T Fキリンさんにお話を伺います。よろしくお願いします。
よろしくお願いします。
インターフェースデザインの出発点について教えていただけますか?
はい。私たちは、いろいろな種類のシステムに囲まれて生活しており、それらはみな、異なった種類の画面を備えています。テレビの大型画面、スマホの小さい画面、PCやタブレットの画面、他にもスマートウォッチの極小な画面や、切符の券売機、車のナビゲーションシステムなど、さまざまです。
大きさも形も、画面までの距離も、すべて違っています。インターフェースのデザインは、まず画面の特性を考えることから始まります。画面が四角いものなのか、曲面のあるものなのか。四角い画面なら、表示する画像も四角形だと収まりが良さそうです。画面に曲面があるのなら、それに沿うように何かを表示したら便利そうです。
他にも、縦に長いのか、それとも横に長いのか。近くにあるのか、遠くにあるのか。画面の形は変わるのか、固定されているのか。それら画面の特徴によって、検討できることが変化します。インターフェースのデザインはここから出発します。
画面の形
画面の形について詳しく教えてください。
インターフェースはここから始まると言っても差し支えないのが、画面の形です。私たちが見るほとんどのインターフェースは、画面の形が「四角形」であることを前提に作られています。
もしこれが四角ではなく、丸かったり、部分的に変形していたりしたら、どうなるでしょうか。ヘッダーもフッターも、要素の整列の仕方も、ナビゲーションも、ほとんどすべてのデザインが変わってしまうことが想像できるのではないかと思います。まず、画面の形状はどうであるか。ここがインターフェースデザインの出発点です。
近くは小さく、遠くは大きく
画面までの距離もデザインに影響するのですか?
はい、画面の形の次に検討することは、画面までの距離です。例えば、スマートフォンやタブレットは手の届く距離で、テレビなどはかなり遠くから見ることになります。したがって、実物の大きさと体感的な大きさには違いが出てきます。
体感的な大きさとしては、「遠くのものは大きく」、「近くのものは小さく」デザインする必要があります。デバイスにはそれぞれ使用に適した距離があり、それに見合った文字の大きさやレイアウトでデザインすることになります。
変えられないことと変わること
画面には変えられないことと変わることがあるとのことですが、具体的にはどういうことでしょうか?
画面サイズは可変か固定か、画面の縦横比はいくつか
画面には、変えられないことと変えられること(変わること)があります。画面のサイズは、PCのブラウザは可変ですが、それ以外のデバイスでは固定です。また、画面の縦横比もPC以外では固定であり、それらの条件を前提にしてレイアウトを検討する必要があります。
画面の向きは縦か横か
画面の向きも重要なんですね。
はい、さらに画面サイズが固定である場合、画面の「向き」によっても適不適が生まれます。横向きと縦向きでは、サービスとしてデザインできることのギャップが大きいこともあり、場合によってはガラッとインターフェースを変えたほうが良いケースがあります。