1. TOP
  2. WEBサイト制作
  3. レスポンシブデザインについて

レスポンシブデザインについて

 2018/03/07 WEBサイト制作 WEBデザイン Fumio Sakurai
この記事は約 5 分で読めます。 651 Views

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

ユーザーが閲覧するデバイスが昔と比べて多種多様になっていることを前回お話しました。

スマホ・PCのデザインはどう違うか

スマホからのアクセスが70%を超えているからといって、スマホ向けのサイトだけを作ればいいというケースはほとんどないのではないかと思います。

その理由は大きく次の2つです。

  • 一覧性に欠ける
  • インパクトが弱い

いずれもスマホの画面の狭さが原因です。

大きくなると利便性が損なわれるため、ホログラミングなどの3D立体表示技術がもっと進歩し定着するまでは、この問題は解決されないままではないのかと思います。

例えば、新聞が電子化されてスマホで見れるようになっても、紙の新聞がなくならないように。

人は変化を嫌う生き物なので(参考:イノベーター理論)

WEBサイトの目的は「情報を待つ人の元に届ける」ことなので、なるべく多くの人に見やすい形で情報を届けたい。

そのために生まれたWEBサイトの制作方法が「レスポンシブデザイン」です。

レスポンシブデザインによってサイト設計を行うことにより、スマホでもPCでも見やすいサイトを作ることができます。

仕組みは、ユーザーが閲覧するデバイスの画面サイズごとに「CSS(カスケイドスタイルシート)」を使って表示を切り替えるという形になります。

 

 

この作り方が定着する前は、パソコン用とスマホ用のサイトを別に作っていたため、1つのサイトに、2つのサイトを作成するに近い工数がかかってしまっていました。

それにより、WEB制作会社では、スマホ対応が別料金になっていたり、高額だったりで未だにスマホ対応していないサイトが世の中に多い原因になってしまっていたように思います。

サイトは極力レスポンシブデザインで制作することを私はオススメしています。

その最大のポイントは

「管理(保守・更新)しやすい」ことです。

ビジネスの内容も、世の中の環境も日々変動します。

ユーザーに新しい情報を届けていくことによって、厳しいビジネスの世界で生き残る。

そのためには、更新のしやすさが一番重要だと私は考えます。

レスポンシブデザインのメリット・デメリット

良いことづくめに見えるレスポンシブデザインですが、メリットだけではなくデメリットもあります。

メリット

  • 1つのソース(htmlなど)で複数デバイスに対応できるので、制作後の保守管理がカンタン
  • デバイスごとにドメインが分かれないためシェアされたときなどのSEO上も有利
  • デバイスごとに表示する情報が変わらないため、情報整理が容易
  • Googleの「モバイルファーストインデックス」にも対応している
    (参考:Google「モバイルファーストインデックス」について)

デメリット

  • 複雑なレイアウトのPCサイトに対応しづらい(シンプルなデザイン向け)
  • デザインやレイアウトの制限が多い
  • PCとスマホでレイアウトを分けた場合、不要な情報まで読み込んでしまうため、読み込み速度が多くかかることがある
  • 多くのデバイスに対応させるための設計が難しい

ECサイトやニュースサイトなどは情報の一覧性がより重要となるため、レスポンシブデザインでモバイル対応まではやらず、スマホ版はアプリケーションにしたり、スマホ専用のサイトを別で設計することが多いです。

(例:Amazon・楽天・NewsPicks等)

デメリットにおける問題点の大半は初期のデザイン構成で決まります。

世界的な傾向としては、1カラム(列)のセンタリングでフラットなデザインが主流となっています。

個人的にも大半のサイトはこの形式で作ることが工数・保守の容易さ共に優れていると思います。

また、レスポンシブデザインのレイアウトは以下の3タイプがあります。

  • リキッドデザイン
  • フレキシブルレイアウト
  • 可変グリッドレイアウト(bootstrapなど)

詳細はLIGのこちらのページが分かりやすいです。

(参考:「必読!5分でわかるレスポンシブWebデザインまとめ」

コーディングの際に再度説明しますが、

1000px以下(モバイル)はリキッドデザイン

1000px以上(PC)はフレキシブルレイアウトが制作工数とのバランスがいいと思います。

※PCにおいては高解像度化が進み、画面の横幅がどんどん広くなってしまっているため、画面いっぱいに情報を表示するレイアウトの実装作業が難しくなっているため。

レスポンシブでのサイト制作やメディアごとの表示についてはこちらで詳しく解説しました。

CSSトレーニング①「レスポンシブで崩れにくいレイアウトの基本」

 

まとめ

  • 更新・保守の容易さが一番重要
  • レイアウトはCSSで切り分ける
  • レスポンシブデザインのデメリットはデザイン設計で対応
  • 1カラムのセンタリングデザインが主流

次回は、WIndows系とApple系のデバイスの表示を近づけるためのポイントについて解説します。

それではまた。

Make the world better place

 

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • スマホ・PCのデザインはどう違うか