レスポンシブデザインについて調べてみた

皆さん、こんにちは！Design Switchです。前回は「お題を決めてUIをデザインしてみた」について紹介しました。まだ記事を読んでいない方はこちらからどうぞ。

早く夏になって欲しいと願うARCHECOのアシスタントデザイナーです。さて今回は、タブレットサイズを意識したレスポンシブデザインについてです！
皆さんは、PCとスマホのUIを作り終えていざ実装するぞ！となった時に、「あ、ここタブレットだとどう表示するべきなんだろう。。🤦‍ 」と悩んだことはありませんか？自慢できることではありませんが、私は経験したことがあります。😭

そんな失敗を未然に防ぐために、例えばApple公式サイトではタブレットサイズになったときのために、どのようなレスポンシブデザインが施されているのか分析し、どのように工夫する必要があるかについて考察したいと思います。

仮説

本記事では、レスポンシブなデザインを以下のように定義します。

“ 画面サイズが変わった時に繰り返し同じモジュールを使用することができるUI ” 

モジュールとは、部品と部品を合体させてできた一つのデザインの塊のことです。このようなモジュールがサイトの中で組み合わさることで、一つの大きなサイトができます。

さて、どの画面サイズにでも対応できるようなデザインにするためには、どのような工夫が必要でしょうか？私自身パッと思いつく工夫としては、以下2点のようなことが挙げられると思います。

① コンテンツエリアをタブレットを横にした時のサイズである1024pxにしてデザインをする。
　→こうすることで、タブレットを横にした時までは、PCと同じデザインを使い回すことができると思います。

② 画面サイズが元々のデザインより大きくなる場合は、コンテンツエリアの左右のマージンのみが増えるようにデザインする。
　→画面サイズが元々のデザインより大きくなった時、コンテンツが一緒に伸びていかないようにすることでUIの崩れを防ぐことができ、デザインを使いまわせるのではと思います。

では、実際どうなっているのでしょうか！？調査結果をみてみましょう。

調査結果

まずは、① コンテンツエリアをタブレットを横にした時のサイズである1024pxにしてデザインについてこの方法を使用しているのかをみていきたいと思います。Apple公式サイト（https://www.apple.com/）で早速、google chromeの検証ツールを開いてみました。

ヘッダーを見ると、なんと！1024pxをコンテンツエリアにしていました！
1024pxの内22pxずつ左右にpaddingが定義されていました。なので、コンテンツ自体は、980pxの中に収まるようになっていました。

そして、1024pxになった時は、ほとんどのUIが980pxの中に収まっていたので、PCのデザインがそのままタブレットのデザインとして使われていました。やはり、このおかげで、実装時にレスポンシブ対応する範囲が俄然少なくなっているように思いました。

ここで、もう一つの仮説であった、② 画面サイズが元々のデザインより大きくなる場合は、コンテンツエリアの左右のマージンのみが増えるようにデザインする を確かめるために、みていくと、左右のマージンのみが広がっていました。中のコンテンツも変に間延びする部分などはみられませんでした。

考察

調査した結果、コンテンツエリアはpadding含め1024pxでデザインすることでタブレットを横にした時までは、PCのデザインがそのまま使えるようになっていました。また、画面サイズが大きくなった場合もコンテンツが無理に引き延ばされることなく、コンテンツエリア外の左右のマージンのみが増えていました。

では、この2つだけを守ってデザインするとレスポンシブなデザインになるのでしょうか？おそらく、それだけではレスポンシブなデザインにはならないでしょう。なぜなら、一つの理由は1024px以下のスマホのデザインの場合やタブレットを縦で使用した場合のことも考える必要があるからです。

レスポンシブデザインにするためには、モジュールに可変領域を広く取る必要があると思います。可変領域とは画面サイズに合わせて表示エリアが拡大縮小するエリアを指しています。可変領域を十分に取ることで、画面サイズが1024px以下になった時もUIが崩れずに使い回すことができるデザインになります。その点、Appleのサイトには様々な工夫がありました。

まず一つ目は、配置の方法です。Appleでは基本的に下の写真のように一つのコンテンツを一つの背景の中央に揃えることで、可変領域である余白を広く作り、画面サイズが変わっても、画面全体のバランスを保ちつつも、崩れにくいUIを実現していると思います。

二つ目は、写真の切り抜きを使用している点です。これによって、写真が画面幅に大きく左右されない状態になっています。切り抜きではない全画面の写真の場合、画面幅が少し変わるだけで、写真のサイズ感が変化してしまいます。この写真の切り抜きは、可変領域の広い配置を可能にしている要素の一つと言えるのではないでしょうか。

最後に3つ目は情報設計の部分です。やはり、情報量の多いものを一つのページの中にデザインするとなるとレスポンシブなデザインにするのは、難しく思います。実際、情報量の多いサイトを見るとPCとタブレットとスマホのデザインがそれぞれ大きく変わるものが多いと感じました。一方、Appleでは多くの製品がありながらも、各ページに出ている情報量が少なく絞られています。これによって、各ページで十分な可変領域を設けることができるレスポンシブなデザインを可能にしていると思われます。

このように、デザインする上で可変領域を広く作る工夫を行うことで、レスポンシブデザインをすることができるのではないかと思います。

まとめ

🔳  レスポンシブデザインに必要なことは、コンテンツエリア1024pxでデザインをすることと、画面幅が広がった時にコンテンツ自体が引き延ばされるようなデザインにはしないこと。

🔳  しかし上記だけでなく、配置を中央揃えにしたり、写真の切り抜きを使ったり、可変領域を広く作るためにデザイン面で工夫が必要

🔳  デザインをする前に情報設計によって情報量を調節することもレスポンシブデザインには必要

最後まで読んでいただき、ありがとうございます！レスポンシブデザインはいかがでしたか？レスポンシブデザインは、ビジュアルの良さや実装のしやすさを担保するといった点でとても役に立ちます！それに加えて、デザインでも同じモジュールをPCとスマホデザインで使い回すことができるので、作業効率も上がります。皆さんも、ぜひ実戦で試してみてください😁さて次回は「UXデザインの法則」を読んで誤解して認識していた2つのことについてご紹介します。次回もお楽しみに！

▼ 次の記事

🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて

ARCHECO inc. | UX/UIデザイン、アプリ、WEB、新規事業