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

[(原文) A Hands-On Guide to Mobile-First Responsive Design](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89%E3%80%802)

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

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

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

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

![](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-2i7-768x663.png.webp)

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

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

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/09/image0212.png.webp)
引用: [Maadmob](https://maadmob.com.au/resources/content_inventory)

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

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

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

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

**6. 「アプリ」を考える** - モバイルユーザーは、モーションと、その経験の中での適度なコントロールに慣れています。キャンバス外のナビゲーション、[拡張可能なウィジェット](https://www.uxpin.com/docs/getting-started/downloading-and-using-uxpin/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89%E3%80%802)、AJAXコール、またはユーザーがページを更新せずに対話できる画面上の他の要素について考えてみてください。

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

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

これは基本的な概要です。当社のプロセスの完全なガイドについては、無料の [Content Wireframing for Responsive Design](https://www.uxpin.com/studio/ebooks/content-wireframes-responsive-design/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89%E3%80%802) をダウンロードしてください。

### モバイルファーストのデザインチュートリアル
デバイスによって画面サイズや向きが異なるため、ユーザーのために複数のレイアウトをデザインすることは理にかなっています。幸い、独自のレスポンシブやアダプティブのバリエーションを[UXPin](https://www.uxpin.com/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89%E3%80%802)で作成することができます。

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

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

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

1. 最新モデルのバイク

2. 一番売れている自転車

3. "自分にぴったりの乗り物を見つけよう "CTA

4. 会社名とヒーロー像

5. ナビゲーション

6. 6.検索

7. 2番目に売れている自転車

8. ギフト券

9. 証言

10. 最新のブログ記事

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

## スマートフォンで見る

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-3-1024x579.png.webp)

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

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

## タブレットビュー

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-4-1024x521.png.webp)

タブレットサイズのビュー用にデザインしているため、追加の製品（「コンデンサ」など）などの二次情報をより適切に追加できます。また、ページ上部のナビゲーションを拡張して、実際に販売につながることなく販売を促進するコンテンツ、つまり紹介文を追加することもできます。

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

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

## デスクトップビュー

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-5-1024x638.png.webp)

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

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

### デバイスに適したレイアウトを自分で設計する
UXPinを使用している場合、これらのビューに異なるレイアウトを作成するのはかなり簡単です。

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

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-6.png.webp)

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

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-2i7-768x663.png.webp)

* ゼロからすべてを再現する必要はありません。デザインの要素をコピーするサイズを選択します。

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/HandsOn-8-1024x639.png.webp)

これで完成です。キャンバスの上にある異なるサイズをタップしてブレイクポイントを切り替え、必要に応じて調整しましょう。自分でモバイルファーストのプロトタイピングを試してみたい方は、[UXPin](https://www.uxpin.com/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89%E3%80%802)で無料トライアルを開始してみてください。

**本記事は2015/10/1投稿、2020/10/13更新を翻訳したものです**