More than 3 years have passed since last update.

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

Posted at 2021-03-12

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

今回は、モバイルファーストのレスポンシブデザイン実践ガイドとして2回に分けて投稿しております。第2回目の今日は、ヒントとテクニックの説明、そしてワークフローを使った実践的なレッスンを提案します。

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

今回はUXPinのデザイナーを支援するプロセスについて説明します。

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

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

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

引用: Maadmob

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

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

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

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

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

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

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

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

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

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

ここでは例を作成し、スマートフォンからタブレットやデスクトップにコンテンツをスケールアップする方法を説明します。無料トライアルを作成して、以下に従ってください。

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

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

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

最新モデルのバイク
一番売れている自転車
"自分にぴったりの乗り物を見つけよう "CTA
会社名とヒーロー像
ナビゲーション
6.検索
2番目に売れている自転車
ギフト券
証言
最新のブログ記事

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

スマートフォンで見る

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

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