だからレスポンシブWebデザインが重要！ 基礎からアイディア例まで完全攻略

さまざまなスクリーンサイズに対応するWebサイトのデザインを、レスポンシブデザインといいます。パソコン専用のURLとモバイル機器専用のURLを作るよりも効率的で、今では欠かせない技術となりました。

出典 : Polygon.com

レスポンシブデザインとは？

柔軟性のあるグリッドやスタイルを使うことで、いかなるサイズのスクリーンやデバイスであっても、それぞれに最適化されたデザインでWebサイト閲覧ができます。

下の写真のニュースサイトは、画面の大きさに合わせてスムーズにコンテンツが移動します。

出典 : thenextweb.co

Webサイトのレイアウトは、ブレイクポイントで切り変わります。ブレイクポイントとは、CSSを何pxから変更するかの境目のことです。

レスポンシブデザインに求められる技術

レスポンシブWebデザインは、ページ内の要素がスクリーンのサイズに合わせてスムーズに動く必要があるのですが、これを実現する作業は簡単ではありません。

通常は、パソコン向けの大きいサイズのページを作ってから、モバイル端末の小さいスクリーンにフィットするよう、その要素を縮める作業を行います。

その逆にモバイル端末サイズのWebサイトを、パソコン画面のサイズまで拡張する必要がある場合もありますが、そのときは空白のスペースを作らないように工夫しましょう。

この時求められるのは、次の3つの技術です。

• メディアクエリ：指定条件にあわせて別々のCSSを適用する技術
• フルードイメージ：画像をブラウザーの内側で伸縮させるためのCSS技術
• フルードグリッド：格子状の区切りに要素を当てはめていく「グリッドデザイン」と、要素を可変にレイアウトする「リキッドレイアウト」が組み合わさった技術

イチから実装する以外にも、フレームワークを使うという手段があります。さまざまな種類があるので、Webサイトの中身と機能に合わせて選びましょう。

レスポンジブデザイン設計のポイント8つ

1. ロード時間を短くする

レスポンシブデザインは、通常のWebサイトに比べるとロード時間が長くなりやすいです。サーバーからのレスポンス時間を縮め、ロード時間を早めるための対策は主に2点です。

• JavaスクリプトやCSSのファイルを統合する
• 画像のサイズやフォーマットの変更、キャッシュの効果的な使用、必要に応じたファイルの圧縮、画像内の空白スペースやコメントを削除
• 最適な画像サイズを決めてくれるプラグインを使う

2. 特定のSNSボタンを取り除く

実は、SNSボタンがロード時間を長くしているかもしれません。というのも、SNSボタンを追加すると、接続するサーバーの数が増えてしまいます。

通信速度が早くないモバイル端末の場合は、これが積み重なることでWebサイトのロードにとても時間がかかってしまうことがあるのです。

どうしても必要ではない限り、ツイートボタンやいいねボタンはなくすようにしましょう。

3. モバイルファーストデザイン

出典 : Too many faces of mobile first

モバイルファーストとは、その名の通りモバイル機器向けのWebサイトを最初にデザインして、その完成したものをデスクトップのスクリーンサイズにまで拡張することをいいます。

一昔前の携帯電話からでも表示できるようにしておけば、新しい機器でも表示できます。

出典 : StopPress

古い携帯電話を基準に開発するという方法は、実はとても理にかなっているのです。

昔の端末に載せる要素は極限までシンプルにしないと表示させられないのですが、残るものはそのWebサイトの一番大事なものです。新しいデバイスにはさまざまな機能を付け足すとしても、最初に主幹部を固められます。

実際は、ほとんどのデザイナーが真反対のことをやっています。最新のデバイス向けに開発して、そこからどうシンプルにしていくかを決めるのです。彼らは見た目を気にするあまり、使いやすさまで思考が及んでいないのです。

4. ブレイクポイントを適切に使う

デバイスに合わせたブレイクポイントを設けることで、どのデバイスからでも最適なサイズに調整されたWebサイトを見れます。実機で試しながら、適切なブレイクポイントを見つけましょう。

5. レスポンシブな文字のデザイン

スクリーンサイズが変われば文字の大きさや行の長さが変わります。大きい画面でも小さい画面でも関係なく、読みやすいフォントを選びましょう。

ユニバーサルリーダビリティを実現するために考慮すべきポイントのひとつは、センテンスの長さ（横幅）です。パソコンの画面なら英語で50単語から75単語、モバイル機器なら35単語から50単語を一行にいれるのが理想とされています。

6. メニューバーに工夫を

Webデザイナーたちはメニューばーやナビゲーションの制作に多くの時間を費やします。明確にナビゲートされていないWebサイトは使いづらく、ユーザーがサイトを離れていってしまうことがしばしばあります。

メニューばーやナビゲーションの使いやすさに大きく関わってくるのが横幅です。大きいスクリーンに小さすぎるメニューバーは合いませんし、逆もしかりです。

7. フレームワークを使って余計なトラブルを避ける

CSSフレームワークを使いこなすことでトラブルを避け、Webサイト制作をスムーズに行えます。バグ修正したり複雑なコードを書く手間が省け、他のデザインに時間を費やすことができるようになるかもしれません。

おすすめのフレームワークを5つ紹介します。

Foundation

出出典 : Foundation

bootstrapに比べレスポンジブデザインに適したフレームワークです。グリッドがより柔軟になっており、デザインがしやすいです。アプリ、Eメールなどを作るときにも役立ちます。現在Foundation6まで出ており、カスタマイズも可能です。

Skeleton

出典 : Skeleton

小さいプロジェクトならこれがおすすめです。スタンダードなHTMLのスタイルとグリッドしか変更できませんが、実はこれで十分なことも多いです。

BASE

出典 : Base

美しいWebサイトを作るのに役立ちます。ベーシックなUIエレメントを作ったり、レスポンジブデザインを作るのに最適な、軽量フレームワークです。

レスポンシブWebデザインの成功事例&アイディア

レスポンシブ対応しているWebサイトを並べ比較してみると、モバイルファーストに基づいて作られたものか、ブレイクポイントは最適か、文字は見やすいかなど、気になるポイントが浮き上がってきます。

ここからは優れたレスポンシブWebデザインの実例をご紹介します。

Bluegg – ブランディング会社

出典 : Bluegg

Tilde – ソフトウェア開発会社

出典 : Tilde

Treehouse – コーディング学習サイト

出典 : Treehouse

LightHouse – プロダクション

出典 : LightHouse

Stoli – 飲料メーカー

出出典 : Stoli

St. Louis Brewers Guild – ビール醸造所

出典 : St. Louis Brewers Guild

P & Co – アパレル

出典 : P & Co

Make – テクノロジークリエイティブ

出典 : Make

Techstyle – ファッションメディア

出典 : Techstyle

Ilya Flarin – デザインカンパニー

出典 : Ilya Flarin

REX – 不動産会社

出典 : REX

Anchour – ブランディング会社

出典 : Anchour

クライエントと一体になってブランドを開発する会社です。

レスポンシブデザインは万能か？

Webデザインをレスポンシブにしたからといって、ユーザーの満足度が上がるとは限りません。

特に、コントラストと可読性は、エンジニアが軽視されがちですが、デザインの初期段階から配慮するようにしましょう。

例えば、コンテンツをズームできるピンチズーム機能は、レスポンシブデザインにおいては取り除かれることが一般的です。なぜなら、レスポンシブデザインはスクリーンサイズに合わせて見やすいコンテンツを表示するためのものだからです。

しかし、視覚的に障害のある人や、ピンチズーム機能がどうしても必要なコンテンツもあるかもしれません。これを最終的に決められる開発チームの柔軟さと、ターゲット層をよく理解しているリサーチ力が求められます。

（翻訳：Juri Ando）