レスポンシブデザインの本意は、多くの人に理解されていません。

的を射ない理解の上でデザインをすることで、レスポンシブデザインが本来解決してくれるはずの問題に悩まされ、工数が膨れ上がったり、低品質な成果物を世に出してしまうことになることがよくあります。

レスポンシブデザインとはなにか

立ったレスポンシブくん

レスポンシブデザインは、「表示領域のサイズやデバイスの種類に関わらず適切に表示されるようにページを設計することで、結果的にどの環境においても最適化された体験を提供できるようにする」ための設計手法です。

従来のユーザーエージェントを基にデバイスごとのページに振り分けるという設計では、あらゆるデバイスに対して最適化させることが困難でした。クライアント環境が多様化して、特定の環境だけに向けて設計することは非効率的なアプローチになったからです。今や無限の多様性を誇るスマホやタブレットのサイズ、及びその縦画面と横画面の表示。巨大化するデスクトップのディスプレイ。加えて、今後未知のクライアント端末が生まれることも十分考えられます。

レスポンシブデザイン以前のやり方では、それら全てのケースを想定してテストする必要がありました。もっとも、実際にそれだけの工数を設けることはできないので、一部のケースだけをテストして、それ以外の環境でも適切に表示されるかは保証できません。

理想的なあり方

レスポンシブデザインでは、表示領域のサイズやデバイスの種類に関わらず適切に表示されるようにウェブサイトを設計するため、あらゆる環境に対して最適化させることが現実的になります。

正しい設計をすると、どのビューポートの幅においても、フォントサイズや余白、それに加えて審美的な意味でのデザインの見え方も調整された状態になります。次に上げるいくつかのサイトは、これらの要件を満たしている理想的な例だと思います。

実際にウィンドウの幅をリサイズしてみると、その幅に応じて随時デザインが適切な形に組み変わっている様が確認できます。

これらの例のように、あらゆる幅での見え方を想定して設計できれば、結果的に既存のデバイスのサイズにとらわれずに常に最適化されたサイトになります。

現場の現状

しかしながら、現場でそれが広く理解された上で実践されているとは言い難いと思います。

現状よく行われているワークフローとしては、「スマホ版」と「PC版」というように固有のキャンバスサイズ上で2通りの見え方だけを想定してデザインカンプを作成し、ウェブサイトとしても2通りの見え方しかしないように実装することが多いと思います。ですが、それではレスポンシブデザインとは言い難いです。

仮に、スマホは幅320px、PCは幅1024pxと想定してデザインカンプを作成し、それをそのまま実装すると以下のような形になると思います。

レスポンシブデザインのダメな例

制作要件にあるデバイスのサイズをピックアップして、それぞれのサイズでの見え方を定点的にテストするというアプローチはよく行われています。ですが、これはレスポンシブデザインの意図としては間違いで、結果的には非効率的な対応となります。

基本的には、クライアント環境のビューポートのサイズは想定できないと考えます。特定のデバイスのサイズにこだわりすぎることにはあまり意味がありません。特定の環境に依存させず、どの幅においてもコンテンツが適切にデザインされているというのが正しい形です。

とはいえ現実的には、ビューポートの幅が320pxから1920px程度までの範囲で最適化されていれば十分だと思います。

設計の方法

それでは、レスポンシブデザインはどうやって設計していけばいいのでしょうか。

レスポンシブデザインは、ビューポートに応じて独立して見た目が切り替わる部品を、ページに配置しただけのものであると言えます。そのため、デザインはページという単位でなく、独立したそれぞれの部品として考えられるべきです。

コンテンツの幅が固定されているデザインでは、それぞれのパーツはその幅における見え方だけしか気にする必要がありませんでした。ですが、レスポンシブデザインではコンテンツの幅はビューポートのサイズによって変更されるため、それに応じてそれぞれの部品が適切な見え方に変更される必要があります。

分かりやすい例として、Google Developersのレスポンシブ ウェブデザインの基礎という記事に掲載されていた動画を引用します。

引用元:レスポンシブ ウェブデザインの基礎 | Web | Google Developers

また、上記の記事にはデザインの方法として以下のように述べられています。

まずコンテンツが小さな画面にコンテンツが収まるようにデザインし、そのうえで、ブレークポイントが必要となるまで画面を広げていきます。こうすることで、コンテンツに基づいてブレークポイントを最適化するとともに、ブレークポイントの数を最小限に抑えることができます。

引用元:レスポンシブ ウェブデザインの基礎 | Web | Google Developers

実際にこれに基づいてデザインすれば、理想的なレスポンシブデザインを実現することができるはずです。ただ、これはインブラウザデザインの上で成り立つことが前提のワークフローであり、デザイナーのスキルにばらつきがある中で採用するのはかなりハードルが高いでしょう。

片肘をついて寝転ぶレスポンシブくん

インブラウザデザインが最適な方法であることに対して、既存のデザインツールでは、詳細にレスポンシブデザインに取り組むことは難しいです。

それを踏まえると、デザインカンプに重きを置き過ぎず、実装段階へ至ってからレスポンンシブデザインとしての設計を考えればうまくいくはずです。これは、デザインのフェーズはデザイナーだけで終わらず、実装者にも及ぶとも言えます。

これを成功させるには、デザイン段階から実装する工程を想定し、レスポンシブデザインとして適応できるデザインカンプを作る必要があります。具体的には、デザインカンプのそのサイズにおける見た目は、幅が変わったときにはどのように変化するべきで、それは実現可能なのかを全ての要素に対して考えることです。

その上で、デザインの続きを実装者へ引き継がせることになるため、デザインのルールには一貫性を持たせ、それを維持したまま拡張していけるようにしなければなりません。基本的なルールである余白やフォントサイズのパターンをデザインカンプから読み取ることが難しい場合、レスポンシブデザインを適応するに当たってデザインを拡張するための基準が定まらず、コミュニケーションの手間が増えたり、デザイナーの意図と違った結果になることが多いからです。

次の工程を意識しながら現在の仕事をすることが、成功のための必要条件だと言えるでしょう。

参考資料