🦁

モバイルファーストのレスポンシブデザイン実践ガイド

2021/03/15に公開

UI/UX

デザイン

モバイルファースト

tech

(原文) A Hands-On Guide to Mobile-First Responsive Design

モバイルファーストのアプローチは、その名の通り、最小の画面に合わせてデザインし、上に向かって作業します。これは、レスポンシブデザインやアダプティブデザインを作成するための最良の戦略の一つです。

引用: UXPin

モバイルファーストのアプローチは、プログレッシブ・エンハンスメントの考え方です。モバイルデザインは、最も難しいものとして、最初に行うべきだという思想です。モバイルデザインの疑問に答えが出れば、他のデバイス向けのデザインはより簡単になります。結局のところ、最小のデザインは本質的な機能だけを持つことになるので、これでUXの心臓部をデザインしたことになります。
反対のアプローチは、グレイスフル・デグラデーションです。これは、最初からすべての複雑な機能を取り入れ、後から小さいデバイスのためにそれらの機能を削除します。グレイスフル・デグラデーションの問題点は、最初からすべてを包括したデザインを構築すると、コア要素と補足要素が結合し、区別や分離が難しくなることです。全体的な考え方は、エクスペリエンスを「削っている」ので、モバイルデザインを余計なものとして扱ってしまう危険性があります。

私たちは、彼らと一緒にモバイルファーストのアプローチを用いた段階的な強化を強く推奨しています。この記事では、ヒントとテクニックを説明し、最後にモバイルファーストのワークフローを使って仮想的なウェブサイトを構築する実践的なレッスンで締めくくります。

モバイルファースト＝コンテンツファースト

あなたのサイトがモバイルデバイスに適している場合、すべてのデバイスでうまく変換されます。しかし、より重要なのは、モバイルファーストのアプローチはコンテンツファーストのアプローチでもあるということです。モバイルには、画面サイズや帯域幅などの制約があり、これらのパラメータの中で設計することで、コンテンツに嫌でも優先順位をつけることになります。

モバイルファーストのアプローチは、有機的にコンテンツに焦点を当てたデザインになり、ユーザーに焦点を当てたデザインになります。サイトの中心はコンテンツであり、ユーザーはそのためにそこにいるのです。

ただし、モバイルユーザーはデスクトップユーザーとは異なるコンテンツを必要とすることがあります。デバイスに特化したコンテンツは、コンテキスト、つまり、ある状況や環境の中で、ユーザーは何をより高く評価するかを考慮することで判断できます。このような状況を想定して計画を立てる最善の方法は、ユーザーシナリオを作成することです。

引用: UXPin

モバイルファーストのアプローチのもう一つの利点は、小さな画面のブレイクポイントをコンテンツの周りにうまく配置できることです。これもまた、小さなフレームワークの中に、すでに大きくなったデザインを詰め込む必要があります。しかし、モバイルファーストのアプローチでは、ブレークポイントはコンテンツを中心に自然に展開されるので、面倒な編集は必要ありません。

モバイルファーストのデザインプロセス

UXPinを使ってプロセスを説明します。

いつものように、レイアウトを最も効率的に構造化するためには、ワイヤーフレーム化が初期段階で推奨されます。ワイヤーフレームやプロトタイピングの際には、レスポンシブブレークポイントメニューを使用して、最小の画面サイズから始めて、異なる画面サイズに移動するプロセスを合理化します。

これらのプリセットは、適切な画面サイズをレイアウトしてくれるので、コンテンツだけを念頭に置いてワイヤーフレームを作成することができます。

手順は以下の通りです。

1. コンテンツインベントリ - スプレッドシートまたはそれに相当するドキュメントには、含めるべきすべての要素が含まれています。

引用: Maadmob

2. 視覚的階層 - コンテンツインベントリの要素に優先順位をつけ、最も重要な要素を目立つように表示する方法を決定します。

3. 最小のブレークポイントでデザインし、スケールアップする - 最初にモバイルワイヤーフレームを構築し、それをより大きなブレークポイントのモデルとして使用します。ホワイトスペースが多くなるまで画面を拡大する

4. タッチターゲットを大きくする - 指はピクセル精度のマウスカーソルよりも幅が広いため、タップするためには大きな要素が必要です。この記事を書いている時点で、Appleはタッチターゲットに44ピクセル四方を推奨しています。ハイパーリンクには十分なスペースを与え、ボタンは少し大きくし、すべてのインタラクティブな要素の周りには十分なスペースを確保してください。

5. ホバーに頼らない - 言うまでもないことですが、デザイナーはインタラクティブな仕事の中で、ホバーやマウスオーバーの効果に頼ることがよくあります。モバイルフレンドリーを考えているのであれば、そうではありません。指先のためのホバーコントロールはまだありません。

6. 「アプリ」を考える - モバイルユーザーは、エクスペリエンスの動きと適度なコントロールに慣れています。キャンバス外のナビゲーション、拡張可能なウィジェット、AJAXコール、またはユーザーがページを更新せずに対話できる画面上の他の要素について考えてみてください。

7. 大きなグラフィックを避ける - 画面が数インチしかない場合、横長の写真や複雑なグラフィックはうまく表示されません。携帯画面でも読みやすい画像でモバイルユーザーに対応しましょう。

8. 実際のデバイスでテストする - webサイトの使い勝手の良さを自分の目で確認することに勝るものはありません。デスクトップやノートパソコンから離れて、実際の携帯電話やタブレットで製品を読み込んでみましょう。ページをタップしてみてください。サイトはナビゲートしやすいですか？タイムリーに読み込まれていますか？テキストやグラフィックは読みやすいですか？

これは基本的な概要です。プロセスの完全なガイドについては、無料の Content Wireframing for Responsive Design をダウンロードしてください。

モバイルファーストのデザインチュートリアル

デバイスによって画面サイズや向きが異なるため、ユーザーのために複数のレイアウトをデザインすることは理にかなっています。幸い、独自のレスポンシブやアダプティブのバリエーションをUXPinで作成することができます。

ここでは例を作成し、スマートフォンからタブレットやデスクトップにコンテンツをスケールアップする方法を説明します。

コンテンツの優先順位を設定する

モバイルファーストのアプローチは、デスクトップファーストとは異なり、小さくデザインしながら情報を削るのではなく、徐々に大きくなっていくレイアウトに情報を追加していくという点にあります。モバイルを考えるということは、情報を排除するということではありません。情報を一次、二次、三次のコンテンツに分類することを意味します。

この例では、ホームページには会社名や製品へのリンクなど、特定の要素が必要であることがわかっています。ブログ記事も悪くないでしょう。しかし、前述したように、すべてがスマートフォンのビューに収まるわけではないので、サイトの目的である「バイクの販売」を達成できるものに基づいて優先順位を設定しています。

最新モデルのバイク
ベストセラーバイク
「自分にぴったりの乗り物を見つけよう」CTA
会社名とヒーロー画像
ナビゲーション
検索
2番目に売れているバイク
ギフト券
お客様の声
最新のブログ記事

その受注リストをもとに、売上を得るという設計上の課題を解決する自信を持って制作することができます。

スマートフォンビュー

ユーザーはどれだけ必要としているのか？

モバイルファーストで考えることで、本当に大切なものは何かを考えさせられます。このスマートフォンビューでは、売れ筋のバイクや最新モデルは売上に直結するので、商品券や人気のないモデル、最新ニュースなど、その他のアイテムはページ内に置いておくことができます。最後の行動を促すフレーズは特に目立ち、指一本のタップで簡単にヒットさせることができます。

タブレットビュー

タブレットサイズの表示を想定してデザインしているので、製品の追加などの二次情報を追加できるようになりました（例：「コンデンサ」など）。また、ページ上部のナビゲーションを拡張して、実際に販売につながらずに販売を促すコンテンツ、すなわち、紹介文を追加することもできます。

選択肢が増えるので、スマートフォンのUIに何を盛り込むかを決めるよりも、意外と難しいかもしれません。二次要素と三次要素の違いは曖昧な線であり、何でもかんでも入れたい誘惑が強いです。

その衝動に抵抗しましょう。順番付きコンテンツリストを使います。スマートフォンと同様、スペースはやはり限られています。

デスクトップビュー

最後に、デスクトップビューは、あなたが重要だと判断する限り多くの情報をサポートすることができます。これは、ホームページは、適切であるかどうかにかかわらず、適切と思われる全ての情報を収容することができます。追加コンテンツのいくつかに注目してください。

ギフト券
お客様の声
最新のライトニングボルトバイクを探るブログ記事

デバイスに適したレイアウトを自分でデザインする

UXPinを使用している場合、これらのビューに異なるレイアウトを作成するのはかなり簡単です。

UXPinプロトタイプを開きます。
UXPinエディタの右下にある "add new adaptive version "をタップします。

プリセットサイズを選択するか、独自の寸法を入力してください。

プリセットサイズを選択するか、独自の寸法を入力してください。

これで完成です。キャンバスの上にある異なるサイズをタップしてブレイクポイントを切り替え、必要に応じて調整しましょう。自分でモバイルファーストのプロトタイピングを試してみたい方は、UXPinで無料トライアルを開始してみてください。