レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニックを読んでみた
レスポンシブWebデザインとは？
最近は殆どの人がスマートフォンを持っています。
スマートフォンでウェブサイトをみると、スマートフォンに最適化されたサイトも多くなってきました。多くのブログもスマートフォンとPCでは異なるデザインが表示され、スマートフォンでも見やすく表示されます。
スマートフォンで見やすいサイトはスマートフォンサイトといわれて、今までのPC用のサイトとは違った新たな考え方や技術が必要とされるため「スマートフォンサイトの作り方」は着目されています。
スマートフォンサイトを作る方法は、大きく分類すると２種類の方法があります。
- PCのWebページとは別に、スマートフォン用に特別のWebページを作る方法
- スマートフォンとPCはともに単一のWebページだが、スクリーンサイズに応じてレイアウトを調整する方法
上記１の考え方は簡単です。PCからアクセスが来た場合はPCのWebページを表示させ、スマートフォンからアクセスが来たらスマートフォンのWebページを表示します。この方法はだれでも思いつきますので簡単な方法です。ただ、デメリットとして同じコンテンツなのにWebページが２つできてしまったり、URLが２つできてしまったりなど管理が面倒です。
単一のWebページでPCもスマートフォンも最適化なレイアウトで表示されたほうが、手間は少ないです。ただ、それを実現するには技術や手法が必要です。その手法の一つが「レスポンシブWebデザイン」という方法です。
レスポンシブWebデザインとは、
小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすくレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します
とあります。
本の対象読者は？
この本の対象読者はWebデザイナーだと思われますが、Webシステムの技術者にもおおいに役に立ちそうです。
最近はスマートフォン対応が必須の要件となってきておりますので、技術力を向上させるためにも、「レスポンシブWebデザイン」について知る必要があります。
レスポンシブWebデザインの技術
本書は、レスポンシブWebデザインの技術について詳しく述べられております。
その技術をひとつだけ紹介しますと、画面デザインは小さな画面からデザインすることです。これは私も本書を読む前から感じていたのですが、PCに最適にデザインされた画面をスマートフォンに最適化しようと思ってもうまくいかないことが多いです。
一からWebページを作る際は、小さな画面であるスマートフォンのWebページからデザインしていき、次第にタブレット、PCなど大型の画面を設計することです。
広いキャンパスに無理やりコンテンツを当てはめてPC画面を作ってしったWebサイトを、スマートフォンで表示させようとすると情報がグチャグチャになってしまいます。シンプルなスマートフォンの画面から作っていき、段々と大型の画面をデザインするほうが手間は少なくなります。
本書を読んで
デザインするためには、細部までこだわり、非常に繊細な部分には考えを及ぼさなければならないことを理解できました。シンプルなよいデザインは応用範囲がひろく、スマホ、タブレット、PCなど画面サイズが異なるデバイスでも簡単に展開できます。
Webのデザイン、Webのシステムを携わる人間にとっては必須な知識と感じました。
