8モバイルデザインの8つのゴールデンルール

Sep 17, 2025

操作方法

Mobile design: Apes gather in front of a Monolithic black smartphone; it glows with various UI elements. In the background lies a mountain range lit by a rising sun that radiates out in concentric circles.

モバイルデザインは比較的新しく重要な検討事項です。わずか10年前に、Webの設計はデスクトップコンピュータの設計を意味します。今はモバイル機器の設計も意味します。携帯電話は、増加する額のWebトラフィックを運転しており、数字は成長するのに過ぎません。

Statistaによると、2018年10月には、世界中で39億ユニークなモバイルインターネットユーザーと50％以上がありました。携帯電話を通じて生成されました。素晴らしいウェブデザインはもはや贅沢ではなく、必要なものです。

モバイルユーザーのための素晴らしいWebエクスペリエンスを作成するには、ただ作成以上のものが必要です レスポンシブウェブデザイン （トップですが ウェブサイトビルダー あなたのように、助けることができます ウェブホスティング 選択）。この記事では、創業用の携帯サイト設計原則を発見することができます。

01.目標指向の経験を築く

モバイルユーザーは非常に目標指向のユーザーです。彼らがウェブサイトを訪問するたびに、彼らは達成したいと思う特定の課題を持っていて、彼らは彼らが本当にすばやく必要なものを得ることを期待しています。それでは、どうやってそれを起こすことができますか？

あなたの理想的なユーザーを絵する： 家を建てるのと同様に、ウェブサイトを構築しています。そして素晴らしいWebデザインの基盤はあなたがあなたのユーザーについて持っている知識です。ユーザー研究は製品設計の最初のステップの1つであるべきです。あなたはあなたのユーザーが誰であるか、そして彼らが達成したいものを正確に理解する必要があります。あなたのユーザーの欲求やニーズを知っていれば、あなたが自分の期待に完全に一致することを知っているユーザーの旅を作成することができます（あなたが確実に保存することを確認してください。 クラウドストレージ ）。それから、徹底的に実行します ユーザーテスト あなたがそれらの目的を達成したことを確認します。

コアの目的の周りの経験を洗練します。 あなたはこのウェブサイトで何を達成したいですか？この質問に対する答えを見つけることは、モバイルWebエクスペリエンスを作成するときにするもう1つの重要なことです。あなたはエンゲージメントを促進しようとしていますか、ユーザーに製品を購入するか、サービスのためにサインアップしていますか？目標を明確に述べて、あなたがそれに到達するのに必要なステップの数をどのようにカットするかを考える。

02.より小さなスペースで作業するためにあなたのコンテンツを適応させる

コンテンツは、ほとんどのWebサイトに値を提供するものです。それは彼らを訪問している主な理由です。モバイルWebデザインに関しては、デスクトップエクスペリエンスを取得し、それをモバイルで複製することは不可能です。モバイルユーザーを念頭に置いてWebサイトを設計することが重要です。それは、ユーザーの画面サイズと習慣に対応するためにコンテンツと機能を適応させる必要があることを意味します。それで、これを達成するためにあなたはどんなステップを取ることができますか？

水平スクロールを避けます。 ユーザーは垂直方向にスクロールするが水平にはスクロールしないサイトに快適です。そのため、コンテンツを見るには水平スクロールが必要なページにはいけません。固定幅の要素は水平方向のスクロールを引き起こす一般的な理由の1つですので、特定のビューポート幅でのみ表示されるコンテンツがありません。

単一列レイアウトを目指してください。 シングルカラムレイアウトは、小さな画面でスペースが限られており、縦モードとランドスケープモードの間の簡単なスケーリングも可能です。

ユーザーは垂直方向にスクロールするが水平にはスクロールしないサイトに快適です。それが水平スクロールが必要なページであるべきな理由です。

ユーザーがズームを帯びえる必要がないことを確認してください。 テキストを読むか画像を見るためにズームインまたはズームインする必要があるときに、訪問者は簡単にイライラすることができます。ユーザーがサイズを変更する必要がないように、あなたのモバイルサイトを設計してください。

読みやすいフォントサイズを使う： 11ポイントはテキストの絶対最小サイズです。このサイズでは、ユーザーはズームすることなく典型的な視聴距離でテキストを読み取ることができます。

スケーリングされたフォントを選択します。 ウェブサイトの経験が読み取りを必要とするならば、それはHelveticaやRobotoなどのSANS-SERIF書体を使用する方が良いです。

An image showing two different sizes of touch target: the pair on the left are each smaller than the tip of a finger, while those on the right are each larger than the tip of a finger. — あなたが実際には指先に適したサイズであるタッチターゲットを設計するようにしてください。クレジット：アップル（画像クレジット：アップル）

指にやさしいデザインを使う： あなたがモバイルサイトをデザインするとき、訪問者はマウスの矢印の代わりに彼らの指を使うでしょう、そして人間の指先はマウスポインタよりも大きいです。各対話型要素が適切にサイズ決めされている指にやさしいインターフェースを設計するよう努めます。

MIT Touch Lab Study 指先の平均サイズは8~10mmです。また、10mm x 10mm、最小最小タッチターゲットサイズを作ります。

タッチターゲット間の相対距離も考慮してください。対話型要素が互いに近づくと、モバイルユーザーは誤って指で間違ったボタンをタップすることができます。それが起こるのを防ぐために、必ずボタンを正しく設定し、それらの間に十分なスペースを追加してください。

製品画像を拡張可能にします。 多くの研究は、人々が主に視覚学習者であることが証明されています。ほとんどの人は、そのように配信されたときにははるかに良い概念を理解し把握することができます。これがWebデザインの画像を使用するのは、キーメッセージを素早く合計するのに最適な方法です。

高品質の資産を提供するだけでなく、ユーザーがそれらを簡単に詳細に見ることができるようにそれらを拡張可能にすることが不可欠です。

画像はeコマースのウェブサイトで重要な役割を果たしています - 人々は決定を下すときに製品の画像に頼っています。高品質の資産を提供するだけでなく、ユーザーがそれらを簡単に詳細に見ることができるようにそれらを拡張可能にすることが不可欠です。一部の一部ではなく画像全体を展開してください。

プロモーションや広告に注意してください。 プロモーションや広告は、コンテンツを簡単にオーバーヘイションできます。広告のメッセージがいくつかの訪問者にとって働くかもしれませんが、大多数の場合、ユーザーはそれをスキップしてより貴重な情報に進みます。この現象はバナー失明として知られています。

連絡先情報を簡単に見つけることができます。 モバイルユーザは、問合せ先情報を見つけるためにウェブサイトを訪問します。緊急性に応じて、ユーザーは会社を呼び出し、連絡先フォームに記入したり、住所を見つけたりすることをお勧めします。 eコマースWebサイトの場合、電話番号はホーム画面上で右に利用可能になるはずです。

03.スキャンのコンテンツを最適化します

ユーザーがオンラインで読んでいないことはよく知られている事実です。彼らはスキャンします。新しい訪問者がWebページに近づくと、最初にやろうとすることはページをスキャンしてコンテンツを消化可能な情報に分割することです。いくつかの簡単な規則に従って、このタスクをユーザーにとって簡単にすることができます。

ページ上にコンテンツを提供する順序を注意してください。 人々は上から下へ読んだ。だからこそ、ページ上部の重要なものを保存し、階層に従って残りを下げることが重要です。

クラッタを切り下げる： ユーザインタフェース要素を介してコンテンツを優先する - 不要な機能的および装飾的な要素を削除することによって気を散らすことを減らす。ユーザーがタスクに集中するのが簡単になるため、最小限のスタイルを作成するよう努めます。

画像なしでテキストの長いブロックを避けます。 それは可能性が高いため、コンテンツの巨大な帯域内はスキップされます。テキストを分割するために見出し、段落または箇条書きを使用してください。

重要な要素により視覚的な重みを置く： キーメッセージのフォーカルポイントなどの重要な要素を作るので、訪問者はすぐにそれらを見てください。さまざまなサイズ、空白または鮮やかな色を使用して要素を強調します。

04.予測可能なナビゲーションを作成します

ユーザーがナビゲートするのに役立つすべてのWebサイトの最優先事項になる必要があります。結局のところ、人々がそれを見つけることができないならば、最も説得力のあるコンテンツは無用です。そのため、次の手順のいくつかを使用して、固体ナビゲーションシステムの設計に投資することが重要です。

おなじみのナビゲーションパターンを使用する： あなたのウェブサイトのナビゲーションメカニズムの作成に関しては、それは単純な規則を思い出す価値があります：ホイールを再発明しないでください - 身近な経験を作成するために努力してください。ほとんどのユーザーが独自のユニークなナビゲーションシステムを作成するのではなく、ほとんどのユーザーがよく知られているナビゲーションパターンに頼るほうが常に良いことです（例：ジェスチャーベースのナビゲーションシステムなど）。おなじみのナビゲーションを作成するとき、あなたはあなたの製品と対話するときに以前の経験に頼るのを助けます。

ナビゲーションオプションの総数に制限を置きます。 メニューのオプションを多すぎないでください。豊富なメニューがデスクトップサイトにはうまく機能する可能性がありますが、モバイルデザインに適合しません。すべてのナビゲーションオプションが画面の表示領域で利用できるわけではないので、モバイルユーザーにオプションのリストをスクロールするように強制します。可能な限り最小のメニュー項目をどのように提示できるか考えてください。理想的には、あなたがデザインするメニュー 7つの異なるカテゴリを持つ必要があります。

An image showing the navigation of ABC's mobile site – it focuses on a couple of core menu items, with everything else listed under a 'More' heading — ABCは、ナビゲーションメニューの最優先オプションのみを提供します - すべてのセカンダリオプションは「もっと」の後ろに隠されています（画像クレジット：ABC）

ナビゲーションオプションを優先します ：ユーザーが機能を扱う方法に基づいてナビゲーションを整理します。グローバルメニューの中で最も人気のあるナビゲーションオプションは上部に行くべきであり、プライマリアクションは画面の表示領域で利用可能になるはずです。

クリアラベルを書く： 各ナビゲーションオプションは、明確で簡潔なラベルを持つべきです。 jargonを避けます - あなたのデザインのナビゲーションはあなたの訪問者が理解できないという条件を含まないべきではありません。クリアラベルは訪問者に彼らの行動の結果を予測する能力を与えます。

インタラクティブな要素が対話型要素のように見えます ：ボタンやリンクを設計するときは、デザインがどのように配信されるかを考えてください。ユーザーは対話型オブジェクトとして要素をどのように理解していますか？オブジェクトが自分のように見えるようにする方法は、その使用方法をユーザーに伝えます。リンクやボタンのように見えるが対話的な要素（BOWSERの下線付きの単語やボタンではない単語を含む下線付きの単語など）は、ユーザーを簡単に混同できます。

現在の場所を通信します。 "ここはどこ？"ユーザーが効果的にナビゲートするためにユーザーが答えが必要な基本的な質問です。現在の場所を明確に示します。

An image of the ASOS mobile site navigation – the search icon appear prominently on the main navigation. — ASOSはそのモバイルウェブサイトの画面上部で検索を検索します（画像クレジット：ASOS）

検索機能を提供します。 コンテンツや機能がたくさんある複雑なサイトを設計する場合は、ナビゲーションを簡単にするために検索バーを提供するようにする必要があります。検索機能を実装することで、特定の質問を念頭に置いてサイトに来るモバイルユーザーのための情報/機能への迅速なルートを提供します。

メニューの検索オプションを非表示にしないでください。それはあなたのページで見る最初のことのうちの1つになるべきです。

ユーザーがホームページに戻るのを簡単にします。 訪問者は、彼らがページの上部にロゴをタップするとき、彼らはホームページに戻り、それがうまくいかないならば、彼らは欲求不満になるでしょう。

ユーザーを単一のウィンドウに保存します。 ユーザーを新しいウィンドウに送信するコールを避けます。一部のユーザーは、モバイルブラウザ内のWindowsを切り替えるのに問題があり、前のページを見つけることができない可能性があります。

05.障害物を作成しないでください

障害物は摩擦と摩擦を創造するのは、変換の最悪の敵です。幸いなことに、あなたが彼らを連携させるためにできる単純なことがあります。

訪問者を中断しないでください。 大きなポップアップは、Webエクスペリエンスに対する最も典型的なタイプの中断の1つです。長い間、そのようなバナーはプロモーションメッセージに専念していましたが、最近、多くのサイトはCookie（GDPR）の使用許可を得るために気をそらすポップアップを使用し始めました。あなたがあなたの訪問者に何を見たいのか、それが全体的な経験から気を散らすものではないことに関係なく、それが全体的な経験から気を散らすものではないことを確認してください。

ユーザーがあなたのウェブサイトを残さないでください。 ユーザーがサイトの外部に見える可能性があるユーザーの旅行の場所を識別してから、サイトに保存するためのコンテンツ/機能を提供します。 Ecommerce WebサイトのPromo Codeフィールドは、おそらく訪問者がクーポンを見つけようとする試みにサイトを残す最も一般的な例です。そのような行動を防ぐためにサイトにいくつかのクーポンを提供することははるかに良いです。

ユーザーにサインアップを強制しないでください。 要求の厳しいユーザーが情報を見ることができるかオンラインサービスを使用する前に、高い対話コストが高い - 登録が早すぎることができるユーザーがサイトを放棄させる。個人情報を提供する前に、訪問者はサイトが提供するものを理解したいと思います。

変換する障壁を有するユーザフローを作成するために、モバイルサイトは訪問者が登録することなくコンテンツを探索することを可能にするべきである。 eCommerce Webサイトの場合、ユーザーがゲストとして購入できるようにすることが不可欠です。

旅を続けるために別の装置に切り替えるのを簡単にします。 スタンドアロンの経験としてモバイルを検討しないでください。典型的なユーザーは、デスクトップ、携帯電話、タブレットなどのいくつかのデバイスを持ち、製品を使用するときにすべてのデバイスにわたってシームレスな経験を持つことを期待しています。たとえば、多くの人が製品検索にのみモバイルデバイスを使用してから、デスクトップに切り替えて変換します。ユーザーは、携帯電話で停止した場所からの旅を続けることを期待しています。

ユーザーの現在の進捗状況を同期するためにできることがいくつかあります。

ユーザーアカウントのためのWithList、お気に入り、バスケットを同期します。
登録されていないユーザー（電子メールへのリンクを送信するオプションなど）のデバイス間で情報を保存または共有する簡単な方法を提供します。

06.効率的な形式の設計

フォームエントリは、Web上で最も一般的なタスクの1つです。ユーザーがある種の形式を記入する必要がない経験を想像するのは難しいです。それはそのようなユビキタスの練習であるので、痛みのない形に記入する能力は、ユーザーが従事し続けることに非常に重要です。これはあなたが最小限に摩擦を保つのを助けることができるいくつかのヒントです：

フォームの入力を最小限に抑えます。 一般的に言って、ユーザーが提供しなければならないデータが少ない、彼らはあなたのWeb経験を楽しむことができます。これらのポインタはキーストロークを削減するのに役立ち、ユーザーは入力する必要があります。

フィールドの総数を最小限に抑えます。不要なフィールドを削除することで、常にフォームをできるだけ簡単に保ちます。あなたが本当に知る必要があるものだけを尋ねなさい。
ユーザーエラーの可能性を減らすために、自動修正、自動資本化、自動完了を使用してください。
ドロップダウンフィールドを避けます。ドロップダウンオプションを非表示にし、これは追加の対話コストを作成します - ユーザーは2回タップして正しいオプションを選択する必要があります。選択したオプションのドロップダウンフィールドを使用している場合は、ラジオボタンと交換することを検討してください。
ユーザーが戻り値を押すと自動的に次のフィールドに移動します。
リアルタイムインライン検証でフォームエラーを最小限に抑えます。
既存の情報を使用して便利さを最大化します。たとえば、登録されているユーザーの配送先住所や請求情報などのフィールドを事前に記入できます。
代替入力メカニズムを提供することについて考えてください。より良いユーザーエクスペリエンスを提供するためにどのデバイス機能を利用できるかを検討してください。たとえば、ユーザーにクレジットカードの詳細を入力する代わりに、デバイスのカメラを使用してカードをスキャンしてApple PayとGoogle Payの統合を行い、1タップで支払いを可能にするオプションを指定します。

An image showing the reasons customers abandon baskets during checkouts; the second most common reason, given by 27% of respondents, is that the checkout process was too long / complicated. — Baymard Instituteによるチェックアウト中の放棄の理由（イメージクレジット：Baymard Institute）

マッチングキーボードを提供します。 モバイルユーザーは、そのフィールドに適切なキーボードを提供するWebサイトを感謝します。この機能は、それらが追加の行動を実行しなければならないのを防ぎます。たとえば、ユーザーが電話番号を入力する必要がある場合、Webサイトは数値0から9のキーパッドを表示する必要があります。

正しいキーパッドを表示するようにHTML入力タイプを設定します。フォームデザインに関連する7つの入力タイプは次のとおりです。

入力TYPE =「テキスト」 モバイルデバイスの通常のキーボードを表示します。
入力TYPE = "Eメール" 通常のキーボードと '@'と '.com'を表示します。
入力TYPE = "TEL" 数値0から9のキーパッドを表示します。
入力TYPE = "NUMBER" キーボードを数字と記号で表示します。
入力タイプ= "日付" モバイルデバイスの日付セレクタを表示します。
入力TYPE = "DATETIME" モバイルデバイスの日付とタイムセレクタを表示します。
入力TYPE = "month" モバイルデバイスの月と年のセレクタを表示します。

ユーザーが場所フィールドを変更させてください。 多くのWebサイトはユーザーの場所を自動検出し、この情報を使用して関連コンテンツを提供します。場合によっては、ユーザーが異なる場所で結果を見たい場合があるため、ユーザーにその場所を変更できるようにする必要があります。

07.一貫した経験を作成するよう努めています

一貫性は、ユーザーエクスペリエンスの重要な柱の1つです。一貫したデザインはユーザーフレンドリーなデザインです - 一貫したデザインの作成に焦点を当てて、あなたはより直感的なデザインを作成します。常に、Webサイトを内部的かつ外部的に一貫したことにするように努めます。

内部の整合性： 一貫したデザイン資産のライブラリを作成し、あなたのウェブサイトのすべてのページに使用します。フォント、ボタン、リンク、アイコン、およびその他のすべてのUI要素は、ビジュアルの一貫性を保つためにWebサイトを越えて一貫している必要があります。

外部の整合性： あなたがデザインするウェブサイトがより大きな製品ファミリーの一部のように見えることを確認してください。たとえば、モバイルアプリがある場合は、モバイルWebサイトを使用するユーザーにとって精通していることを伝えます。

08.あなたの最高のモバイルサイトを構築します

ここに記載されているすべての点は業界のベストプラクティスと見なすことができます。しかし、何かが言われているという理由だけで、「ベストプラクティス」があなたのウェブサイトのための最適なソリューションであるという意味ではありません。それがあなたの設計決定をテストすることが常に重要である理由です。あなたのデザインプロセスの必須部分をテストし、定期的に経験を強化します。

この記事はもともと発行317で発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 問題317を購入する または ネットを購読する 。

関連記事：

携帯UIデザインの顔を変えている6つの傾向
より良いモバイルUXデザインのための10のヒント
ユーザーフレンドリーなモバイルインターフェイスの設計方法

8モバイルデザインの8つのゴールデンルール

01.目標指向の経験を築く

02.より小さなスペースで作業するためにあなたのコンテンツを適応させる

03.スキャンのコンテンツを最適化します

04.予測可能なナビゲーションを作成します

05.障害物を作成しないでください

06.効率的な形式の設計

07.一貫した経験を作成するよう努めています

08.あなたの最高のモバイルサイトを構築します

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

頭を描く方法：完全なガイド

Framer Xを使用して対話型プロトタイプを構築する

3 enestrib zbrush retopology techniques

2Dイラストを3Dアートに回す

キースホット付き溶岩ランプを作成する方法

より高速なWebサイトの構築方法

4人のUX戦略の4つのテネチー

あなたのスケッチスキルを磨く

カテゴリ