Bark to Imagine

レスポンシブWEBデザインとは?レスポンシブWEBデザインよくわからないWEBディレクターのための入門講義

top

弊社ではレスポンシブWebデザインでの制作を推奨しています。(弊社サービス紹介ページ) ということで、レスポンシブについての問い合わせをよくいただきます。
コーダー(技術者向け)のレスポンシブの記事は以前まとめましたので、今回はコーディングができないけど、WEB関連の仕事をしている人、代理店の人、ディレクター、デザイナーさん向けのレスポンシブWebデザインについてまとめますのです。
 
「レスポンシブってよく聞くけど、よくわからない!」という方、「クライアントにどう提案すればいいの?」という方に是非ご一読いただきたい記事です。
 
 
00
江崎社長、自ら社内研修をしていただいた様子を、特別にブログに掲載!
 
 

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

toha
そもそもレスポンシブWebデザインとは、ワンソース・マルチデバイス(One source Multi Device)で対応するWebデザインの手法のことです。
 
現在、デバイスはPCだけでなく、スマートフォン(以下スマホ)やタブレットなどの多くの端末があります。
それら全てに1つのソースコードで対応させようというのがレスポンシブWebデザインです。
 
 

なぜレスポンシブWebデザインが求められているのか?

why
昨今、スマホ・タブレットが急速に普及し、サイトによってはPCで見ているユーザーよりモバイル端末で見ているユーザーの方が多くなってきています。
 
これだけだと、スマホサイトをPCサイトと別に作成すればいいのでは?と思うかもしれませんが、モバイル、特にタブレットだと端末によって横幅がまちまちで、従来のユーザーエージェントによる切り分けだと、全てのデバイスで最適なユーザー体験を提供できない可能性があります。
 
iPadでサイトを見ていると横幅が広すぎてコンテンツもそのまま間延びしているサイトを見た経験はないでしょうか?
多くの人がすごく見づらいという印象を受けたと思います。
 
これはiPadに最適化されていないためです。
もちろんiPadだけでなく、他の端末で見ても同じような問題がしばしば起きます。
 
このような問題に対応できるのがレスポンシブWebデザインなのです!
 
 

レスポンシブWebデザインの3つメリットは?

3
大きく分けて以下の3つがあります。
 
 
・管理性/更新性が良い
・1つのURL
・マルチデバイス対応
 
 

・管理性/更新性が良い
 
一昔前のPCサイト、スマホサイト、ケータイサイトなどのように、デバイスごとにサイトの構築・更新をするのは、非常に手間です。
 
それが、レスポンシブだと、ワンソース(1枚のHTML)で作成するため、ひとつのレイアウトを変更するだけで、全てのデバイスの表示に対応でき簡単に更新ができます。
ワンソースなので、管理するのも楽になりますよね。
 
 
・1つのURL
ワンソースということは、1つのURLに統一されるということです。
デバイスごとに、URLを分けて、転送・リダイレクト処理は不要です。
 
そのため、「ソーシャルメディアの分散を避けられる」、「SEOに有利」、「リダイレクトをせずに済む」といったメリットが有ります。
 
 
・マルチデバイス対応
 
ウィンドウサイズによって適切なレイアウトに切り替えているので、現在あるスマホ・タブレット・PCだけでなく、今後新しいデバイスが出てきたとしても、そのデバイスに適したサイズでWEBの表示ができます。
 
 
・・・とここまではいいことだらけのレスポンシブWEBデザインですが、もちろんそのデメリットもあります。
 
 

レスポンシブWebデザインのデメリットは?

demerit
 
レスポンシブWebデザインのデメリットとして、次の3つが考えられます。
 
・動作が重くなる可能性
・複雑なレイアウトのコーディングはやりにくい
・構造が複雑化することで、工数がかかる
 
 
・動作が重くなる可能性
 
CSSで、PCサイト、スマホサイトに適した画像を切替えた処理をしている場合、本来表示に関係のない画像を読み込んでしまうことがあります。
つまり、スマホサイト用にアクセスをしているときに、表示されないはずのPCサイトをわざわざ読み込んでしまい、処理に時間がかかり重くなる、ということです。
 
技術的に解決すること(JavaScriptで切り替えるなど)も、もちろん可能ですが、コーダーというよりは、ワンランク上のフロントエンドエンジニアとしての知識が必要になります。
 
・複雑なレイアウトのコーディングはやりにくい
 
全てのデバイスを対応する、となると必然的にシンプルなレイアウトでないと、対応が難しくなります。
グリッドデザインと呼ばれる文字や画像、カラムなどの要素を格子上にレイアウトされたデザインであれば、比較的レスポンシブ化しやすいのですが、より複雑な、レイアウトがグリットでない、曲線の多いデザインなどの場合は、レスポンシブ化の難易度があがります。
 
その場合は、レスポンシブ化せずに、スマホやタブレットでそれぞれのサイトを作成し、振り分けたほうが効率的になることが多いです。
 
・構造が複雑化することで、工数がかかる
 
ワンソース・マルチデバイスで、作るサイトはひとつだから、それぞれ作るよりもかんたん・安上がりでできますよね?というのは、大きな間違いです。
設計段階で無理なレイアウトをして場合、それを無理やりにレスポンシブ化する場合は、余計な工数がかかりますので、その分コストも跳ね上がります。
 
 
 
 
 
 
 
 
 
・・・さて、みんなわかってくれましたかね・・・
 
 
 
 
 
 
うん?みんな何してるの?
 
 
 
 
 
 
 
 
ketai

 
 
 

あっ、スマホでのレスポンシブの様子を確認してるんですね。
けっして、LINE GAME してるわけじゃないよね。
 
 
 
 
 
 
 
 
 
・・・うん?次は何?
 
 
 
マンガを読むな!仕事中ですよ!
誰ですか、職場にジャンプとか、マガジンを持ち込んでるのは・・
 
manga
 
 

寝てるやつもいるし・・・
これだから、ゆとり世代は困ります!(怒)

 
 
 
 
 
 
・・・あれ?そんなにじっくり何を読んでるの?ヒロシくん。。。
 
 
 
 
ugoku01
 
 
 
 
 
 
そのぐらいじっくり、業務で使う技術本も読み込んでください!
 
 
 
もういいや、まとめに入ります。
 
 

レスポンシブWEBデザインについてのまとめ

 
コーディングができないけど、WEB関連の仕事をしている人、代理店の人、ディレクター、デザイナーさん向けのレスポンシブWebデザインのお話です。
このようなお話をクライアント様、代理店様とお話する機会も多いので、記事としてまとめてみました。
 
社内のメンバーには理解してもらえませんでしたが。。。
 
 
事例として紹介できるものは少ないのですが、弊社では、レスポンシブWEBデザインの構築を数多く行っております。
難易度・工数がケースバイケースなので、単純に○万円!とお見積もりできませんが、ご相談あれば、お気軽にお問い合わせ下さい。
 
 
 
docci-(2)
 
 
 
ちゃんちゃん♪(完)