Blog

【UI/UX学んでみた】物理的な制約って?
UI / UX|2025.05.28デザイナーとしてのスキルアップを目指すべく、新しい知識を吸収していく【学んでみた】シリーズ。今回も引き続き、「UI/UX」について学んでいきます!
今回のテーマは「物理的な制約」。え?UIデザインをするのに、物理って何?
筆者自身の想いや考えたことも一緒に書いていきますよ~!
■インターフェースの起点は、デバイスとの物理的な接触から
・デバイスの物理特性について理解することはUIデザインをするうえで避けて通れない。
🧠毎年のように新しいデバイスは登場しているから、実装のスタンダードも時代の流れでどんどん変わっていくんだろうな。ついていくので精一杯だけど、キャッチアップは必須。
■入力手段の違いは、インターフェースデザインに根本的な影響を及ぼす。
・PCは細かい操作が可能で、縦スクロールに強い。
🧠最近は横スクロールで見せるサイトも増えてきたよなあ。特段見づらいと感じたことはなく、斬新で面白いと思う。ただ一見して操作方法が分かりづらいので戸惑う人も多いかも。
・スマホとタブレットは操作に指を使うので操作対象のパーツにはある程度の大きさが必要になる
🧠小さすぎるボタンは押しにくいし、距離が近すぎるオブジェクトは誤って隣の要素を押してしまったりして、ユーザにストレスを与えてしまう。
・スマホとタブレットは文字入力や細かい操作には向かない閲覧向きのデバイス
🧠確かに、実生活でも「スマホは文字入力に時間がかかるから、出来るだけPCで」作業する癖がついている。メール返信や問い合わせ、移動中でもできるけどやっぱりやり辛いんだよなあ。反面、動画や画像を閲覧するのはあまりストレスなく出来る。
■PCではホバーを使えるが、スマホ・タブレットでは使えない。
・ホバーが使えない=押せるかどうかを目視だけで判断できる必要あり
🧠ホバーが使えない分、枠で囲ったり背景色で明確に他と区別するなどして「押せる感」をぱっと見で伝える必要がある。レスポンシブデザインの際は、初めからスマホファーストで考えておくとよいのかも。
■PC・スマホ・タブレットでは対象を直接選択する。TVではフォーカスを移動して選択する
・TVでは直接選択ができないので、フォーカスの現在地を明確に示す必要あり
🧠配信プラットフォームで、どこにフォーカスがあるのかわからなくて誤った操作をしてしまった経験がある。TVは見た目の綺麗さというよりも「明確さ」が重要
・また、要素を近接させておくことが重要
🧠いきなり画面の端から端にフォーカスが移動すると認識しづらいし、今フォーカスはどこ?!と探すことになる。
■デバイスによって、画面との距離は異なる。画面の大きさと向きも異なる
・画面の大きさや解像度によらず、デバイスごとに適した距離はある程度決まっている。その距離がデザイン上の制約となる。
🧠スマートフォンは画面が小さくとも距離が近いので、細かいパーツ配置でもOK。逆に、TVは画面自体は大きいが距離が遠いので、大きいパーツで配置する必要がある。画面の大きさに関わらず、配置できる情報量に差がないというのは意外だ。
■画面の大きさとアスペクト比は、デバイスごとに固有であり、変更できない
・PCとそれ以外のデバイスでは、画面の「可変性」に大きな違いがある。
・アスペクト比は時代によって変化するものであり常に揺らいでいる
🧠PCのコーディング、この可変なのが中々大変で、毎回レスポンシブ対応には苦労しているんだよなあ…。
🧠特にスマートフォンは画面の巨大化が顕著だよなあ。今後もどんどん大きくなって、そのうちタブレットと大差なくなったりするんだろうか。
■画面の距離・大きさ・向きの違いはインターフェースデザインに影響を及ぼす。
・画面の向きによって機能やインターフェースは大きく異なる。サービス機能レベルで変わる場合も。
🧠デザインするうえで(特にスマートフォンなど画面幅が小さくなる場合に)枠に収まりきらない時がままある。そんな時はガラッと見せ方や場合によっては機能を変えてしまうのも一つの手
■androidとiOSの違いは、戻るボタンの有無に大きく起因している
・iPhoneは物理ボタンなし(「iPhone8」まではホームボタン1つのみ)、Androidは「戻る」「ホーム」「メニュー」の3ボタンが主流となっている。
🧠アプリによってはiPhoneとandroidでインターフェースが大きく異なる場合もあるようで、ボタン一つの有無でここまでインターフェースが変わってくるのは興味深い。iPhoneでは戻るボタンを画面上に表示するためどうしてもスペースに限りが出てくるが、サービスの質に差が出ないのだろうか?
————-
今回は固有のデバイスの話が多くて、身近に感じました。
次回は「ソフトウェア」の影響について、考えていきます!