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

レスポンシブ・ウェブデザイン 特集

このサイトでは、WEBサイトの作成方法として今流行している「レスポンシブWEBデザイン」について解説しています。

「『レスポンシブWEBデザイン』という言葉は聞いたことあるけど、なんだかよくわからない!」という方も多いと思います。

すごく簡単に説明すると、ある1つのWEBサイトを、パソコン・スマートフォン・タブレッド等どれを使って閲覧しても、表示崩れなどなく綺麗で見やすいサイトが表示されるように工夫してサイトを作ることです。

この短い文だけでは、まだまだ伝わりにくいと思います。
出来る限りわかりやすく解説していきたいと思っていますので、どうぞよろしくお願いします!^^

スポンサーリンク
  1. レスポンシブWebデザインの基礎知識
    1. 入門編 その1<そもそもどんなデザインなの?>
      1. 今、スマートフォン・タブレットが大流行!
      2. スマートフォンやタブレットでPCサイトを見ると…?
      3. レスポンシブ(良い反応)で快適インターネット♪
    2. 入門編 その2<今まではどうやってスマホサイトを表示させてたの?>
      1. スマートフォン用サイトはこのように表示させていた
      2. じゃあ、タブレットは?
    3. 入門編 その3<レスポンシブに必要な要素【media query】>
      1. レスポンシブを実現させるのは【CSS】!
      2. CSSで【media query】を使おう!
      3. 【media query】の具体的な記載方法
      4. 気を付けて!【media query】の弱点
    4. 入門編 その4<スマホサイトが綺麗にみえるおまじない【viewport】>
      1. 【media query】だけだと、スマホでは…?
      2. スマホサイトのレスポンシブを実現する【viewport】
      3. 具体的な記述方法は、そのサイトによって様々!
  2. レスポンシブWEBデザインを採用しているサイトまとめ
    1. レスポンシブWEBサイトの「まとめサイト」
    2. 日本国内のレスポンシブデザイン集
    3. まだまだある!日本のレスポンシブデザイン
  3. IT企業OLの突撃!現場レポート
    1. レスポンシブWEBデザインのメリット
      1. WEBディレクターさんに突撃!
      2. レスポンシブWEBデザインは、多種多様なデバイスに簡単に対応!
      3. 更新が楽!
      4. SEO上、有利になる!
      5. URLの統一によりわかりやすく!
    2. レスポンシブWEBデザインのデメリット
      1. 導入にコストがかかる
      2. 設計をしっかりしなければいけない
      3. スマートフォン向けサイトが重くなりやすい
      4. ガラケーには非対応
      5. 終わりに…

レスポンシブWebデザインの基礎知識

入門編 その1<そもそもどんなデザインなの?>

ここでは、「レスポンシブWEBデザイン」とはそもそもどういったものなのか?を解説しています。

今、スマートフォン・タブレットが大流行!

一昔前に比べ、iPhoneやAndroidといったスマートフォンや、iPadといったタブレット型PCといった「携帯できる」かつ「インターネットが手軽にみられる」端末を持つ人が増えてきました。

従来型の携帯電話(ガラケー)でもインターネットは見れますが、PC用のサイトを見るのは至難の業ですし、ガラケー用にデザインされたサイト(カタカナが半角スペースになっていたりするアレ)を見ることになりますよね><

ですが、スマートフォンやタブレットだと、素早く簡単にPC用のサイトを見ることができます^^
現代人の生活に今やインターネットは必須不可欠ですし、今後ますますガラケーを持つ人が減っていくのではないでしょうか?

スマートフォンやタブレットでPCサイトを見ると…?

スマートフォンやタブレットでインターネットサーフィンをしていると、見るのが大変なサイトに出くわすことはありませんか?
具体的には、PCで見るのとそっくり同じデザインをしているサイトのことです。

横幅が広いPC用サイトに比べると、スマートフォン・タブレットはどうしても画面の大きさが小さくなります。
そのため、PC用サイトを見ようとすると、見たい部分を指でフリックしたり、ピンチイン・ピンチアウトの操作を繰り返さなければならず、少々面倒ですよね( ̄▼ ̄;)
特にスマートフォン…。

「このサイト、スマホやタブレットでも見やすく表示されてほし~~い!><」

そんな願い事をかなえちゃうのが

レスポンシブWEBデザインのスゴイところなのです!!

レスポンシブ(良い反応)で快適インターネット♪

「レスポンシブ」という単語の意味を辞書で調べてみました。

[形動]反応が良いさま。感じやすいさま。「―な走り」 goo辞書参照

つまるところ、「(端末に)良く反応する」WEBデザインを実現するのが【レスポンシブWEBデザイン】の醍醐味なのですね(´▽`)

スマートフォンなら、スマートフォンの小さい画面に適した横幅にあわせたデザイン。
タブレットなら、タブレットに適した横幅にあわせたデザイン。

それをな~んと!!HTMLとCSSで実現してしまうのです!!!

入門編 その2<今まではどうやってスマホサイトを表示させてたの?>

ここでは、レスポンシブ非対応サイトの場合、どのようにして各デバイスごとに最適な表示を実現させていたのか解説します。

スマートフォン用サイトはこのように表示させていた

レスポンシブデザインに対応していないWEBサイトはまだまだ多数ありますが、いろいろ見て回っていると、PCとスマートフォンそれぞれに適したデザインを用意しているサイトが多いですよね。

こういった場合、どうやってデバイスごとに最適化した見た目(と動き)を実現させているのでしょうか?

レスポンシブ非対応のサイトでスマートフォン用サイトを表示させたい場合、「spフォルダ」等別のフォルダを作り、そこにスマートフォン用のHTMLとCSSを記載する必要がありました。
具体的には、以下のような構成ですね。

<例>
root

CSS ─ style.css

img ─ 01.jpg

├index.html

sp─┬
├CSS ─ style.css
├img ─ 01.jpg
└─index.html

PC用とスマートフォン用2つ作成するわけですから、その分かかる時間も2倍!
あまりコストパフォーマンスが良いとは言えません><

じゃあ、タブレットは?

なおタブレットの場合、わざわざ別のフォルダを用意してコードを書くことは少ないですね…^^;
タブレットほどの大きさがあれば、PCサイトを見ることはそれほど苦になりませんので。

コードを書く場合もあると思いますが、その分作業時間が発生しますね…。
趣味で作るのなら問題ないですが、業者に依頼する場合は当然料金も発生するので、時間と資金に余裕がなければ難しいでしょう。

入門編 その3<レスポンシブに必要な要素【media query】>

ここでは、レスポンシブWEBデザインの実現に必要な要素の1つである【media query(メディアクエリ)】について説明します。

レスポンシブを実現させるのは【CSS】!

レスポンシブWEBデザインを実現する際重要なのは、HTMLというよりもCSSです。
このCSSを利用して、PC・iPad・iPhone・Androidなどなど、どのデバイスで見ても画像や文字が違和感なく表示されるように調整するのです。

では、具体的にどのような記述をCSSにすればよいのでしょうか?

CSSで【media query】を使おう!

それは、CSS3から新しく設けられた仕組み【media query】を利用する必要があります。
これを利用すると、ウインドウのサイズや解像度など、WEBサイトを見るための様々な環境にあわせてサイトの幅や画像の大きさを自在に調整することができるのです。

従来ですと、HTMLの最初に、CSSを読み込むために以下のような記述をしたりしていました。

↓全てのHTMLソースに共通するスタイルシート↓
<link rel=”stylesheet” type=”text/css” href=”common.css” media=”all”>

↓PCで表示する際に必要なスタイルを記述したスタイルシート↓
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen”>

↓プリントアウトする際に必要なスタイルを記述したスタイルシート↓
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”>

media queryとは、これを発展させた形になります。

@media」とCSSに記載することで、
従来よりももっと細かくスタイルを指定することが可能になったのです。

【media query】の具体的な記載方法

では、具体的にはどんな風に書くと良いのでしょうか。
以下のように記述します。

@media screen and (min-width: 320px) and (max-width: 768px) {
div {color:red}
}

min-widthは、「横幅の最小値」を指定します。
max-widthは、「横幅の最大値」を指定します。

つまりこの場合、「ウインドウの横幅が320pxから768pxまでの場合、divタグ内のテキストを赤色で表示しなさい」という意味になります。

320pxはiPhoneの縦向き(『ポートレート』といいます)時の横幅、768pxはタブレットのポートレートの幅です。

ということは、iPhoneあるいはタブレットでWEBサイトを見た場合、そのサイトのdivタグ内に書かれた文字は赤色で表示されるということなのです^^
パソコンで見た場合、この指定は適用されません。

勿論、width(幅)だけではなく、height(高さ)も指定できますよ。

気を付けて!【media query】の弱点

media queryも万能というわけではありません。
既に説明したように、CSS3から追加された要素なので、CSS2を用いて作成された従来型のサイトでは当然利用できません。

また、IEでは利用できないという極めて残念な事実があるのです>< (2013年時点)

……というのはちょっぴり語弊がありまして^^;
とある呪文をHTMLのheadタグ内に記載すると、一応IEでも使用が可能になります。

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

ちょっと面倒ですね(・∀・;)
この辺は、今後修正されていくことを期待しましょう♪

入門編 その4<スマホサイトが綺麗にみえるおまじない【viewport】>

このページでは、スマートフォン上でレスポンシブWEBデザインを実現するのにかかせない要素【viewport】について説明しています。

【media query】だけだと、スマホでは…?

前回の記事にて、レスポンシブWEBデザインを実現するには、CSSにて【media query】なる要素を記述する必要があるというお話をしました。

ですが…。

これだけですと、実は、スマートフォン上では正しく表示されないのです><
具体的には、PCと同じレイアウトのサイトが表示されてしまいます。

つまり、1つのページを全部みるためには、縦に横に何回もスクロールしなければならず、物凄く面倒くさい…(´・ω・`)
その上、文字が小さく表示されてしまうので見にくいことこの上ありません。

これじゃあ、レスポンシブデザインとはいえません。

一体どうすればよいのかというと、今度はHTMLソースにて、とある【おまじない】をしなければならないのです。

スマホサイトのレスポンシブを実現する【viewport】

スマホサイトでも違和感なく表示するためには、HTMLの冒頭に【viewport】なるものを記述しなければならないのです。

これを使って、「スマホサイトの幅や高さに合うように調整してね」という指示を与えます。

具体的には、HTMLの冒頭に書くheadタグ内に、以下のような感じで記述します。

<meta name=”viewport” content=”width=device-width, minimum-scale=0.25, maximum-scale=1.6″ initial-scale=1.0? user-scalable=yes>

【content=”width=device-width”】とは、
「どんなデバイスでWEBサイトを見ても、それぞれのデバイスにあった横幅で表示させてね」という意味です。

これで、iPhoneだろうがAndroidだろうが、微妙に幅が違うデバイスであっても、形が崩れたり字が小さすぎることもなく、綺麗なサイトを見ることができるようになるのです。

【minimum-scale】は最小倍率、【maxium-scale】は最大倍率を指定しています。

何を言ってるんだという話ですが、要は、ユーザーがサイトをどのくらいの倍率まで拡大縮小(いわゆる「ピッチ」ですね)できるかどうかを指定するのです。

【initial-scale】とは、ページが最初に読み込まれる際の倍率です。

そして、【user-scalable】でユーザーが拡大縮小しても良いのかダメなのかを指定します。

つまりこの場合、

「最初に画面を読み込んだときは100%の幅で表示されるよ。拡大は最大1.6倍、縮小は0.25倍までできるよ」

という意味になります。

具体的な記述方法は、そのサイトによって様々!

上記の指定ですが、全て書く必要はありません。

サイト作成者が、スマホサイトをどのようにユーザーに見せたいかによって、細かく指示することができます。

表示倍率を変えたり、ユーザーによる拡大縮小を出来なくさせたりですね。

一例をあげると、大手ポータルサイトのYahoo!をスマホで見ると、スクロールはできても、拡大縮小は出来ないようになっていたりします。

縦向きであろうが横向きであろうが、できないのです。

スマホの幅に適したデザインになっているので、わざわざ拡大縮小する必要がないのですね。

一番無難に、スマホサイトならではの拡大縮小を実現させたいときは、以下のような記述で十分です。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

これならば、縦向きだろうが横向きだろうが、拡大縮小もできますし、文字も画像も適度な大きさで表示されますよ^^

レスポンシブwebデザインはSEOに有利?

アフィリエイターさんを中心に絶大な人気を誇るサイト作成ツール「SIRIUS」などではPC、携帯、スマートフォンという端末毎にそれぞれ専用のフォルダを自動作成し、アクセスに応じて振り分けてくれていましたよね。

しかし、この従来の方法はPCのサイト内容を携帯、スマートフォン用にコピーして作成するため、グーグルウェブマスターツールで「重複コンテンツ」の警告があったという人がいたということを噂で聞いたことがあります。仮にですが、もしそれが事実であれば検索エンジン対策では致命的となるため、それを避けた人はPCサイトのみ、あるいはスマートフォンのみというようにサイトをそれぞれ特化させていた方も多いと思います。

これを解決してくれるのがレスポンシブwebデザインなんです。一つのサイトをCSSにより各デバイスに対応させてくれるので重複コンテンツのペナルティーの心配がありません。

そしてこれがSEO対策上の最大の利点のひとつとなるのです。

レスポンシブWEBデザインを採用しているサイトまとめ

レスポンシブWEBデザインを採用しているサイトは既に多数あります。

それらを一覧にまとめ、簡単に見ることができる「まとめサイト」がありますのでご紹介します。

レスポンシブWEBサイトの「まとめサイト」

海外をはじめ、この記事を書いている2013年の時点で既にレスポンシブWEBデザインを採用しているサイトは多数あります。

しかし、PCからそれを確認しようと思っても、当然、PC版しか見ることができません。
確認のために、1つのサイトをPCから、タブレットから、そしてスマートフォンからそれぞれ見てもよいのですが…それでは3度手間になってしまい非常に面倒くさいですよね><

というわけで、PCだけで全て見られれば便利だと思いませんか?
大丈夫!
既に、レスポンシブWEBデザインを1つのページで簡単にチェックできる「まとめサイト」が存在しているのです^^

具体的には、「PC版」「タブレット版」「スマートフォン版」の3つのサイト画面を1つの画像にまとめ、パッと見て、どのようにレスポンシブデザインを実現しているのかわかるようになっています。

そういったサイトをいくつも集めた「まとめサイト」が、こちら!!

日本国内のレスポンシブデザイン集

<Responsive Web Design JP>
http://responsive-jp.com/

こちらのサイト、日本国内のレスポンシブWEBサイトだけをまとめています!!
海外サイトのまとめサイトは多いようですが、日本国内のものは見当たらないようで…><
なので、日本のレスポンシブWEBサイトが見たい方には非常にオススメです♪♪

画面左から、スマートフォン⇒タブレット⇒PCの順に、非常に見やすく一覧表示されています。
そのサイト数、記事執筆時点で300件近く!!
まだまだ増えていくことでしょう。

PCで表示されている膨大な情報量が、タブレット、スマートフォンとデバイスの大きさが小さくなっていくにつれ、幅の小ささにあわせて綺麗に整理されて表示されている様子がよくわかります\(○^v^○)/

また、右端にはレスポンシブデザインについて様々な情報をまとめたリンクがはられていますので、こちらを読んでみると、「レスポンシブデザイン」とは何なのかより深く理解できると思います。

まだまだある!日本のレスポンシブデザイン

他にも、以下のサイトで日本発のレスポンシブWEBデザインサイトがまとめられています。

<WEBデザインクリック –PCサイトとスマートフォンサイトをどのように扱うか?国内のレスポンシブウェブサイトをまとめました>
http://webdesignmatome.com/webdesign/responsive
※こちらの記事では、16サイト紹介されています。
スマートフォンサイトの下にタブレット、PCの画像が重なり合っているため、端が若干省略されて表示されています。

<A40 –日本企業の海外向けレスポンシブWebデザインのサイトまとめ7個>
http://katoshun.com/blog/rwd-20130630.html
※記事タイトルの通りです。日本国内向けと海外向けで、サイト閲覧者の変化に合わせてデザインも変えているのですね。

IT企業OLの突撃!現場レポート

レスポンシブWEBデザインのメリット・デメリットを現役ディレクターに聞いてみよう!

IT企業OLがウェブ制作現場のナマの声をお届けします♪
https://tanshinnhikkoshi.com/web-designer.html

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

このページを執筆している、とあるIT企業のOLが、気になるレスポンシブWEBデザインについて、制作現場の声を直接聞いてまいりました。

WEBディレクターさんに突撃!

IT企業OL・綾子と申します。

私の会社には、WEBサイト制作の部署があります。

そちらに配属されている同僚のツテを辿って、とあるWEBディレクターの方に【レスポンシブWEBデザイン作成のメリット】について突撃インタビューを行いましたのでレポートいたします^^

綾子「それではインタビューを始めます。今回は、実際にレスポンシブWEBサイトの開発経験を持つWEBディレクター、Kさんからお話を伺います。宜しくお願いします(^-^)」

K「よろしく~」

綾子「早速ですが、レスポンシブWEBデザインを作成するメリットをお聞きしたいのです」

レスポンシブWEBデザインは、多種多様なデバイスに簡単に対応!

K「なんといっても、パソコンやスマートフォン、タブレットのどれでみてもWEBサイトが綺麗に表示されることが一番のメリットだよね」

綾子「デザインに統一感が出ますよね」

K「そうそう。レスポンシブに対応していないサイトは、スマートフォンやタブレットだとピンチイン・ピンチアウトしないと全部見れないから、見るのが面倒になるよね」

綾子「そうですね>< 何回もサイトを訪れる気力がなくなってしまうので、レスポンシブデザインはすごく魅力だと思います!」

更新が楽!

K「後、更新するのが物凄く楽になった。今までは、PC用とスマートフォン用とでHTMLをわけていたんだけど、それが必要なくなり、1つのHTMLソースで管理できるようになったからね。」

綾子「ええと、HTMLを1回更新すればOKということでしょうか?」

K「そういうこと。今までは、PCとスマートフォンで2回作業していたところ、1回作業すれば、自動的にPC用、タブレット用、スマートフォン用に対応した更新(画像やテキストの変更など)をしてくれるんだ」

綾子「わぁ~、それはスゴイ!作業が早く終わるということは、残業する時間も減りますね^^」

K「更新する量にもよると思うから、一概には言えないかな^^;;」

SEO上、有利になる!

K「まだメリットはあるぞ。SEOに強くなるから、閲覧者を呼び込みやすくなるんだ」

綾子「何故強くなるんですか?」

K「Googleが推奨しているんだ。レスポンシブ化することでサイト構造が単純明快になるから、Googleの検索システム上、サイトを発見しやすくなるということらしい。」

綾子「Googleは多くの人が使いますからね。Googleに嫌われちゃったら意味ないですものね><」

K「そういうことw」

URLの統一によりわかりやすく!

K「後、これはSEOの話にも関連してくるんだけど…。URLが統一されるから、よりわかりやすいサイト構造になるんだ」

綾子「う~んと…。スマートフォンでサイトを見ていると、http://www.test.com/sp/ のように、後ろにspってついているサイトに出くわすことがあります。そのことでしょうか?」

K「そのことだよ。spっていうのはスマートフォンのことだね。従来のサイトは、HTMLをPC用・スマートフォン用でわけているから、それに伴ってURLも別になるんだよ。」

綾子「そのURLを統一することで、どんなメリットが?」

K「サイトを見ているだけなら、あまり気にならないかもしれないけど…。SNSでこのサイトシェアしたい!ってなったらどうする?」

綾子「PC版のURLを貼ります」

K「でも、スマートフォンを使っているときにシェアしたいってなったらどうするの?」

綾子「そのときは、スマートフォン用のURLを貼ります」

K「君はそれでもいいかもしれないけど…SNSを見た第三者は混乱するんじゃないかな」

綾子「あっ!そうですね…」

K「URLを共通化できれば誰も混乱しないし、楽になると思うよ^^」

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

導入にコストがかかる

綾子「レスポンシブWEBデザインって本当にスゴイ技術だと思いますけど…まだまだ対応していないサイト多いですよね?」

K「そりゃあそうさ。レスポンシブの概念が最初に出てきたのは2010年の話。大手企業なら潤沢な予算でレスポンシブ化を業者に頼むことは可能だけど、中小では厳しいんじゃないかな」

綾子「そんなに高いんですか?」

K「既存のサイトを上手くレスポンシブ化するにしても、1から作り直すにしても、それなりの金額になるよ。作成時間もかかるしね。つまり、導入に結構なコストがかかってしまうんだ。」

綾子「レスポンシブサイトを簡単に作れるツールがあるんですけど、そういうのは使わないんでしょうか?」

K「使っている企業もあると思うよ。でも、普及はしてないんじゃないかな。そういうツールを使用すると、クライアントの細かい要望に応えられない場合が多いからね。結局業者に発注することになると思うよ」

綾子「なるほど~!それでレスポンシブ化していないサイトが多いんですね」

K「あくまで、今のところはね。これからますます増えていくことは間違いないよ。実際、誰もが名前を知ってるような大手企業は大抵レスポンシブ化してる。試しにスマートフォンで、何か自分の知っている大手企業名を入れて試してみると良いよ」

綾子「やってみます!(自前のスマートフォンを取り出し、知らぬ者はいない某大企業のサイトにアクセス)」

K「どう?」

綾子「……あの、URLに『mobile』とあるのですが」

K「まだレスポンシブ化していないんだね。スマートフォン用のサイトを別に用意している、というわけだ。大企業でも、理由があって対応していないところも多いんだね」

設計をしっかりしなければいけない

K「導入コストがかかる理由の1つに、最初の設計をしっかりしなければいけない、ということがあげられる」

綾子「設計は重要ですよね!ここで間違うと、後の作業も全部やり直しですし」

K「そう。設計は当然、どのデバイスで見ても違和感のないデザインにしなければいけない。
PCと同じような感覚でデザインしていると、いざコーディングしたときに、レイアウトが崩れてしまう可能性が十分にあるんだ」

綾子「ええと…例えばどんなふうにでしょう?」

K「たとえば…PC向けに、こんな画像を作ったとする。」

レスポンシブ・ウェブデザイン

綾子「文字が多めですね^^;」

K「これをスマートフォンで表示すると、どうなるだろう?」

綾子「ええと…画像が小さくなるわけですから…」

K「そう、一応読めるけど…読みにくくなるよね。こんな風に」

レスポンシブ・ウェブデザイン

綾子「これでは意味がないですね」

K「対策としては、『スマートフォン用に専用画像を作る』か、『PCで見てもスマートフォンで見ても違和感のない画像にする』ことになる。ここはデザイナーさんの腕にもよるだろうけど、最初の設計段階でそういった点も考慮しておけば、デザイナーさんも楽になるでしょ。」

綾子「なるほど!工数削減につながるわけですね。」

K「後、スマートフォンやタブレットは縦向き、横向きにできるよね。どちらの向きでも違和感のないデザインにしなければならないから、神経使うよ~^^;」

綾子「あっ!確かに。PCサイトだけ見ていると思いつかないですよね…」

K「だから、設計やチェックは念入りにしなければならない。HTMLのコーディングをするときも、今までより複雑なサイトになるから当然時間がかかる。だから、レスポンシブ化していないサイトを作るより料金が高くなったりするんだよ。」

綾子「レスポンシブって便利ですけど、その分手間もお金もかかるんですね…><」

スマートフォン向けサイトが重くなりやすい

綾子「えっ?どうしてですか?」

K「サイトが重くなる主な原因ってなんだろうね?」

綾子「ええと…文章よりも重いのは、写真とかイラストとかですよね」

K「そう、画像がスマートフォンサイトを重くする原因になるんだ」

綾子「え?レスポンシブだと、画像の大きさが小さくなりますよね」

K「なるよ。でも、100KBの画像が10KBに変化するわけじゃない。PC版と同じ画像を読み込むことになるからね」

綾子「PC向けの大きい画像は、スマートフォンだと見れなかったりしますよね?」

K「そういう大きな画像は、『スマートフォンで見るときは画像を非表示にしろ』と指示しているだけだよ。画像自体が消滅しているわけじゃないんだ」

綾子「えええ~!そうなんですか!!」

K「HTML上に記述が存在する以上、例え非表示でも読み込まなければいけない。それがあるから、どうしても重いサイトになりやすいんだ」

綾子「う。重いのは嫌ですね…(;´▽`A」

ガラケーには非対応

K「ガラケー、最近もってる人少なくなったよね。レスポンシブWEBデザインでサイトを作っても、ガラケーでは見る事が出来ない

綾子「確かに…私の周りでも持ってる人少ないですね。」

K「とかいいつつ、実はスマートフォンの契約数は、まだガラケーの契約数に負けてるんだけどねw(2013年春時点)」

綾子「ええ?、そうなんですか!?」

K「参考データはこちら
とはいえ…携帯販売会社も、新機種をあまり売らなくなってきてるしね。
もう何年かしたら、子供や高齢者向け以外のガラケーは完全になくなるんじゃないかな。
だからなのか、レスポンシブWEBデザインは、ガラケー用サイトを作ることを想定していない。」

綾子「では、ガラケーしかもっていない人はどうしたらいいんでしょうか?」

K「企業によっては、ガラケー用サイトを別に用意しているところもあるよ。でも、だんだんそういう企業も減ってくるんじゃないかなあ…維持費がかかる上に見る人が年々減少していくわけだし、費用対効果を考えるとね……^^;」

終わりに…

綾子「レスポンシブにもメリット・デメリットが存在することがよく理解できました。本日はお時間いただきありがとうございました^^」

K「どういたしまして。お役に立てたようなら何より」

綾子「デメリットもありますけど、将来的に導入する企業が今後も増えていきそうですね」

K「携帯端末でも簡単にインターネットが見れるようになるのは時代の流れだからね~。サイト更新やSEOのことを考えると、今よりもっと増えていくと思うよ。もしかしたら、レスポンシブデザインより素晴らしいシステムがこの先誕生して、皆そちらに乗り換える…ということはあるかもしれないけど」

綾子「インターネットの世界は日進月歩ですからね」

K「そうそう。1年前のデザインやコーディング技術がもう古い!っていうこともザラだからね^^;」

綾子「以上、レスポンシブWEBデザインのメリット・デメリットを現役ディレクターに聞いてみよう!突撃レポートでした~^^」

https://esoraumi.com/web-designer.html

コメント

  1. qsjmxmzwsycl より:

    suchspktzpzj canadian online pharmacy for viagra [url=http://www.prognozy.com/out.php?link=https://slashdot.org/submission/12129009/tips-on-how-to-take-care-of-your-hair\]canadian pharmacy viagra [/url] canada pharmacy for cialis canadian online pharmacy for viagra cialis from canadian pharmacies

  2. ciswasehmvis より:

    phlmnqwbvpdd montgomery case search
    san luis obispo superior court case search [url=http://marylandjudiciarycasesearchs.com/]montgomery county md case search[/url] alaska court case search marion county court case search

  3. Brianazegmnzxvw より:

    bijtowtcdnce virginia beach court case search
    wi circuit court simple case search [url=http://marylandjudiciarycasesearchs.com/]west virginia judiciary case search[/url] criminal case number search case search north carolina

  4. Brianmwypzixweb より:

    skewpvbofuly washoe county court case search
    nueces county civil case search [url=http://marylandjudiciarycasesearchs.com/]ohio circuit court case search[/url] cjis case search massachusetts judiciary case search

タイトルとURLをコピーしました