ユーザーフレンドリーなモバイルインターフェイスの設計方法

Sep 12, 2025

操作方法

いくつかのモバイルデザインは問題に苦しんでいます：それらは表面に素晴らしく見えるかもしれませんが、それらを使い始め、あなたはすぐにすべての重要な要素が無視されていることを知っています：人間工学。人体に適合するデザインを作成する高貴な芸術は、（逆のまわりではなく）デザインの世界の本当の英雄の1つです。

人間工学は常に産業設計者にとって非常に重要でしたが、デジタルデザイナーにもますます重要になっています。どうして？スマートフォンやタブレットがデジタルデザインと対話する方法を変えているからです。私たちのデジタルの友達に何をすべきかを伝えるために、私たちはもはや厄介なキーボードとマウスを使うだけではありません。今それはより直接的で、より物理的です。私たちは私たちのデバイスを持っています。私たちはそれらをタップします。私たちはそれらをつまんでください。私たちは愛情を込めて彼らを脳卒中します。

私たちの最愛のモバイルデバイスとのこのますます身体的な絆は、デザイナーはデザインの外観と感じているだけでなく、それを使用する身体的側面について考えています。デザイナーは、ユーザーがスマートフォンやタブレットをどのように保持し、対話するかについて考えます。彼らが快適に手を伸ばすことができるスクリーンの量と手にどのように感じるかについて。デザイナーはモバイルデザインの人間工学を考えるように強制します。

それでは、人間工学的な、したがって使用するのが快適なモバイルデザインを作成することについてどうやって進みますか？

01.オフィスから出て

可能なデザインについて考え始める前にも、一部の直接観測を実行するためにオフィスから出てください。朝または午後を過ごして、いつ、いつ、そしてなぜ人々が彼らのモバイルデバイスを使用しているのかを見てください。

人々が自分のデバイスとどのように対話しているかについての注意を払って、彼らが時々やっているかもしれないものと彼らが争う必要があるかもしれないかもしれません。この情報はデザインの人間工学に通知するのに役立ち、それがあなたが実際に現実の世界で起こることを知っているシナリオからテストすることができるデザインをテストすることを意味します。

02.複数ホールドのための設計

The three main holds used for a smartphone, and the frequency which they’re typically used — スマートフォンに使用されている3つの主なホールド、およびそれらが通常使用されている頻度

モバイルデバイスを使用して人を遵守した場合は、すぐに自分が使用することを確認します。さまざまな保留。使用されるさまざまなホールドとユーザーが自分のホールドを変更する頻度とは、複数の保持を念頭に置いて設計することが重要です。

たとえば、片手での使用を念頭に置いてスマートフォンデザインを起動します（これが最も困難なものとして）、常にそれらのそれぞれがどれだけ快適な方がどれほど快適になっているかを確認します。

03.到達範囲内の人気のあるコントロールを置く

Green areas are easy to reach, amber takes more effort and red areas are hard to reach — グリーンエリアは到達しやすい、琥珀色はより多くの努力を取り、赤い地域は到達するのが難しいです

ボタンやリンクなど、頻繁に使用されるコントロールを配置します。ここで、フィンガーや親指で簡単にアクセスできます。スクリーンの真ん中と下部は、使用するのに良い分野ですが、底部の角は片手だけでデバイスが保持されているときにタップするのに困難である可能性があります（もっと読むここに）。

それはまだ画面の上部にメニューを配置するための規約です。ただし、これは届かない領域になる可能性があるため、メニューを表示するためのスワイプアクションをサポートすることをお勧めします。

04.上記のコントロールを配置します

The BBC iPlayer iPad app places controls in easy to reach areas and below content — BBC iPlayer iPadアプリは、エリアとコンテンツの下に到達できるコントロールを配置します

あなたは彼らが画面をタップするときに誰かの指や親指を隠したくないので、コンテンツを上記のコントロールに配置します。また、スマートフォンが片手で保持されているときに頻繁に隠されている底部の角など、キー情報が画面の領域にないことを確認してください。

05.ポートレートモードでデザインしてください

HOLDが使用されるかもしれませんが、スマートフォンやタブレットの両方にはるかに一貫していることが1つのことは、人々が大部分の時間のためにそれらを垂直に保持する傾向です。ビデオや写真の表示などの特定のタスクに水平方向の保持がよく使用されますが、これは規範ではなく例外です。

もちろん、モバイルデザインは理想的には縦（垂直方向）モードとランドスケープ（水平）モードの両方をサポートする必要がありますが、ビデオまたはフォトヘビーサイトやアプリケーションを設計していない限り、縦モードでデザインしてください。

06.親指のためのデザイン

The Spotify app is designed to be thumb-friendly, with large tap targets — Spotifyアプリは、大きなタップターゲットを持つ親指にやさしいように設計されています

親指はすべてのスマートフォンの相互作用の大部分を駆動します。これは、モバイルが一方で保持され、それが両手で保持されているときに頻繁に使用されるときに排他的に使用されているからである。

親指は指よりわずかに大きく、したがってより大きなタップターゲットが必要です。これらのタップを少なくとも44 x 44ポイント（16 x 16mm）をターゲットにするようにしてください。それらの間で少なくとも7点（2.5mm）。より大きなタップターゲットは常に良く、確かに44 x 30ポイント（16 x 11 mm）を下回るべきではありません。

タブレットを設計している場合でも、デザインが遭遇する最も正確な接触方法をサポートする必要があるため、親指のためのデザイン。大きなタップターゲットは親指にとって良いことではありません、それは指に最適です。

07.大きなジェスチャーのためのデザイン

とても大きいタップターゲットが優れています。タップターゲットが大きいほど画面全体がありますか？ユーザーがフォトギャラリーで前後に移動すること、またはメニューを表示することを可能にするなど、大きなジェスチャーでデザインするようにしてください。

ユーザーがジェスチャーがサポートされていることを認識しないかもしれないことを忘れないでください、それで、次の写真を育てるために矢印アイコンをタップするなど、何かをするための二次的な方法を提供することを常に良い考えです。

08.挑戦に上がる

人間工学では、2.5番目から97.5パーセンタイルのユーザーから97.5パーセンタイルまでのデザインを作成することで、少なくとも95パーセントのユーザーに合わせてデザインの話を聞くことができます。私たち全員が常に常に喜ばせることができないことを知っているので、常に難しいユーザーが常にあります。その間のもの。

これが、挑戦的なユーザーやシナリオを念頭に置いて設計することが良い考えです。たとえば、片手でコーヒーを飲みながら通りを歩いて、もう一方の携帯電話で、または関節炎を持つ人を考えてください。

09.相互作用を最小限に抑えてください

最も快適なモバイルデバイスの対話がどのようなものであるかを知っていますか？それはタップ、スワイプ、またはプレスではありません。それはまったく対話ではありません。あなたのモバイルデザインが必要ではない、あなたが人間工学を心配する必要があるほど少ないです。私は常に対話を最小限に抑えようとします。可動性を低下させ、自動対価を使用し、ユーザが本当に通知する必要があるものだけに通知を制限する。

プロトタイプデザイン

あなたは単にあなたがそれを物理的に持っているまでモバイルデザインの人間工学を判断し、さまざまなグリップを試してみることはできません。これが私ができるだけ早くデザインを試作する理由です。私たちが好き軸しかし、他にはたくさんあります 素晴らしいプロトタイピングツール 。

クイックトライアルでは、単純なペーパープロトタイプで基本的なユーザーテストを実行することもできます。モバイルデバイス上にスケッチまたは紙の印刷版は、人間工学について驚くべき量を教えてくれます。

11.テスト、テスト、次にもう少しテストします

人間工学的なモバイルデザインを作成するための1つの保証された方法を知りたいですか？それはデザインをテストし、次に繰り返しテストし、テストし、テストし、テストし、あなたが異なるデバイスの束をカバーしていた様々な人々を持っているまで続けます、すべてのデザインが使うのが快適です。それは簡単です。

モバイル機器はもちろん「モバイル」になるように設計されているので、環境や状況でデザインをテストするためにオフィスから出てください。コーヒーショップは常にテストするのに良い場所です。ASのテストデザインできるだけ多くの人々（少なくとも5つまたは6つ）、スマートフォンを使うなどのより困難なシナリオに焦点を当てています。ユーザーの対話がより拘束されているときに設計がうまく機能する場合は、残りの時間をたどることは確実に優れています。それは主にあなたが本当に人間工学的なモバイルデザインを作成できることを継続的にテストしそして反復することによってです。

この記事はもともとネット誌に登場しました。 ここで購読する。

関連記事：

フォローしている必要がある16 UX / UI Instagramアカウント
20の最高のワイヤフレームツール
2018年の最大のUX設計動向

ユーザーフレンドリーなモバイルインターフェイスの設計方法

01.オフィスから出て

02.複数ホールドのための設計

03.到達範囲内の人気のあるコントロールを置く

04.上記のコントロールを配置します

05.ポートレートモードでデザインしてください

06.親指のためのデザイン

07.大きなジェスチャーのためのデザイン

08.挑戦に上がる

09.相互作用を最小限に抑えてください

プロトタイプデザイン

11.テスト、テスト、次にもう少しテストします

操作方法 - 最も人気のある記事

犬を描く方法

マンガクラシックを再現する

クリップスタジオペイントでゾンビを描く方法

インクで有機テクスチャを作成する

オイルの肖像画を塗る

How to make 3D lettering in Illustrator

映画館のための世界を築く方法

クリエイティブデザインの短縮を満たす秘密

カテゴリ