レスポンシブデザインを始めるデザイナー向け！役立つ10のヒント

最近の調査によると、全アメリカ人の4分の1がモバイルデバイスを使ってウェブにアクセスしています。 世界の5人に1人がスマートフォンを所有しており、半数以上がインターネットサーフィンに使っています。あなたのウェブサイトがそれらのデバイスでうまく読みこめない場合は、モバイルユーザーの巨大な塊を失うことになります。 レスポンシブルデザインを採用するときです。 始めるのは複雑かもしれませんが、役立つヒントをここで紹介します。

 

 

1. 1.まずモバイルから

デスクトップやラップトップ画面デザインを計画する前に、モバイルデバイスのUXについて考えてください。 多くのデザイナーがモバイルファーストの流れを受け入れています。 なぜ？モバイルはデスクトップよりも関連性が高まっているからです。地球上のおよそ7人に1人がモバイルデバイスを使ってインターネットにアクセスしています。 まずユーザーが自分の携帯電話であなたのウェブサイトとやり取りする方法に焦点を当てます。 次に、より大きな画面サイズ用のデザインを構築します。

 

 

1. 2.メディアクエリに慣れる

メディアクエリはCSS3の機能で、特定のデバイスのさまざまな条件にコンテンツが応答できるようにします。 メディアクエリは、デバイスの解像度、高さ、幅および方向をチェックします。 次に、この情報を使用して、適用するCSSルールを決定します。 メディアクエリは、レスポンシブデザインの原動力です。

 

 

1. 3.ユーザーにとってモバイルが意味するものを理解する

人々は、スマートフォンでウェブサイトと違ったやり取りをします。 分析を使用して、ユーザが携帯電話で自分のウェブサイトを訪問した理由を把握します。 彼らは、検索バーを介して迅速な情報を取得することがあります。 それがあなたのユーザの間で共通している場合は、検索バーを目立つようにして、常に提示してください。

 

 

1. 4.パーセンテージを使用する

レスポンシブデザインの最も難しい部分の1つは、フルードグリッドを実装することです。フルードグリッドはメディアクエリと連携して、異なるビューポートにコンテンツを表示します。

ビューポートごとにブレークポイントを設計する代わりに、最大レイアウトサイズを設定します。 そこから、ピクセルではなく、縦横比で幅と高さを定義します。 これによってサイトはパーセンテージに基づいてレイアウトを再配置できます。

 

 

1. 5.スピードの必要性

レスポンシブデザインの欠点の1つは、ローディング時間が遅いことです。 実際、最近の調査によると、反応性サイトの大多数（48％）は4〜8秒の間に負荷をかけています。 そのロード時間の長さは1997年には許容されましたが、2014年にはスマートフォンユーザーの64％が4秒以内にサイトを読み込む予定です。

 

低速サイトの主な理由は、最適化されていない画像です。 それらのイメージがあなたの応答性を低下させないようにしてください。 アダプティブイメージやTinyPNGなどのツールを使用して、大量の画像を素早く縮小できます。

 

 

6. 6.不必要なものを消去する

あなたのユーザー体験だけでなく、ウェブサイトの速度についても、過度の要素を取り除きます。 あまりにも多くの要素によって重み付けされたウェブサイトは、使用したり、見ることが楽しくはありません。 圧縮にはGZIPのようなプログラムを使います。

 

 

1. 7.ハンバーガーメニューを使うか

ハンバーガー・アイコン（隠されたメニューを表示する3行とも呼ばれます）は、激しい議論の源です。 一部の人々はそれを嫌い、一部の人々はそれを愛していますが、最高の実践は何でしょうか？

 

レスポンシブデザインの場合、最高の実践は常に利便性の問題です。 ユーザがメニューオプションを見るためにアイコンをタップしなければならない場合、疲れてしまいます。 最も人気のあるメニュー項目は表示すると、ユーザを不満から救うことができます。 ハンバーガーメニューのナビゲーションでは人気の低いリンクを入れ込みましょう。

 

 

1. 8.読みやすくする

ユーザが読んだりピンチ・ズームしたりしないようにしてください。 小さな画面から読み込むのに十分な大きさのテキストを作成します。 私は、16 px、1 em、または12 ptのテキストサイズをお勧めします。 pxからemへの変換ガイドがあります。 見出しをデザインするときは、FitTextのようなツールを使ってレスポンシブなテキストを作成します。

 

 

1. 9.適切なボタンサイズを使用する

モバイルデバイスでは、不動産はプレミアムです。 小さなボタンサイズは避けてください。 快適なタッピングのためにボタンのサイズが少なくとも44 x 44ピクセルであることを確認してください。 もう１つの便利なヒントは、余白の代わりにパディングを使用することです。 パディングはタップ可能領域を増加させますが、マージンは増加しません。 余白はボタンの周りの空白を増やします。

 

 

1. 10.スクリーンオリエンテーションのためのデザイン

統計によると、横長の向きは縦向きの59％から41％になります。 両方の向きで見栄えがよくなるようにサイトを設計しますが、景観に注意を払うようにしてください。 画像が伸びていないことを確認してください。

 

 

 

 

 

▼レスポンシブデザインに関して、これらの記事もおすすめです。入門のテクニックから、実装例、裏技まで様々な記事がそろっています。

レスポンシブデザイン

 

 

 

※本記事は10 Tips to Get You Started with Responsive Designを翻訳・再構成したものです。