(原文) A Hands-On Guide to Mobile-First Responsive Design
今回は、モバイルファーストのレスポンシブデザイン実践ガイドとして2回に分けて投稿したいと思います。第1回目の今日は、モバイルファーストのアプローチの利点についてです。
引用: UXPin
私たちの強くおすすめするモバイルファーストというアプローチは、その名の通り、最小の画面に合わせてデザインし、上に向かって進んでいくというものです。これは、レスポンシブデザインやアダプティブデザインを作成するための最良の戦略の一つです。
- モバイルファーストのアプローチは、プログレッシブ・エンハンスメントの考え方です。モバイルデザインは、最も難しいものとして、最初に行うべきだという思想です。モバイルデザインの疑問に答えが出れば、他のデバイス向けのデザインはより簡単になります。結局のところ、最小のデザインでも本質的な機能だけを持つことになるので、すぐにUXの心臓部をデザインしたことになります。
- 反対のアプローチは、グレイスフル・デグラデーションです。これは、最初からすべての複雑な機能を取り入れ、後から小さいデバイスのためにそれらの機能を削除します。グレイスフル・デグラデーションの問題点は、最初からすべてを包括したデザインを構築するので、コア要素と補足要素を区別・分離するのが難しくなることです。考え方としては、ユーザー体験を「削っている」ので、モバイルデザインを余計なものとして扱ってしまう危険性があります。
モバイルファースト＝コンテンツファースト
あなたのサイトがモバイルデバイスで優れていれば、すべてのデバイスでより良く機能します。しかし、もっと重要なのは、モバイルファーストのアプローチはコンテンツファーストのアプローチでもあるということです。モバイルには、画面サイズや帯域幅などの制約があり、これらのパラメータの中で設計することで、コンテンツは必然的に優先度が上がります。
モバイル優先のアプローチは、有機的にコンテンツに焦点を当てたデザインになり、ユーザーに焦点を当てたデザインになります。サイトの中心はコンテンツであり、ユーザーなのです。
ただし、モバイルユーザーはデスクトップユーザーとは異なるコンテンツを必要とすることがあります。デバイスに特化したコンテンツは、コンテキスト、つまり、ある状況や環境の中で、ユーザーは何をより高く評価するかを考慮することで判断できます。このような状況を想定して計画を立てる最善の方法は、ユーザーシナリオを作成することです。
引用: UXPin
モバイルファーストのアプローチのもう一つの利点は、小さな画面のブレイクポイントをコンテンツの周りにうまく配置できることです。これもまた、小さなフレームワークの中に、すでに大きくなったデザインを圧縮しなければならないという最悪の事態に陥ります。しかし、モバイルファーストのアプローチでは、ブレークポイントはコンテンツの周りで自然に展開されるので、厄介な編集は必要ありません。
明日は、モバイルファーストのレスポンシブデザイン実践ガイド第2回目として、ヒントとテクニックを説明し、最後にワークフローを使って仮想的なウェブサイトを構築する実践的なレッスンを提案します。
本記事は2015/10/1投稿、2020/10/13更新を一部翻訳したものです