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

前知識として、念のため。

PC用サイトとスマートフォン（以下スマホ）用サイトを用意する場合、↓このように、ユーザが閲覧しているOSやブラウザ（ユーザーエージェント）を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的です。

この人はパソコンで閲覧しているから　→　パソコン用のHTMLを表示
この人はiPhoneで閲覧しているから　→　スマホ用のHTMLを表示
というように、複数のHTMLを割り振っています。

それに対しレスポンシブWebデザインは、

OSやブラウザを判断基準にしているのではなく、↓ブラウザの横幅サイズを判断基準にして、CSS（スタイルシート）を切り替えている手法です。

この人は1200ピクセルのブラウザで見てるから　→　○○という装飾
この人は480ピクセルのブラウザで見てるから　→　■■という装飾
といった感じで、1つのHTMLを使用します。

メリット１　ワンソース管理！

上図の通り、1つのHTML（ワンソース）を管理します。
例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替え程度の小規模メンテナンスなら作業時間も減りますし、ミスのリスクも減ります。

※レイアウト変更やコンテンツまるごと追加という中規模～大規模のメンテナンスなら話は別です。

メリット２　SEOに有効的！

Googleは、サイトの構築手法の一つとしてレスポンシブWebデザインを推奨しているようで、「Google ウェブマスター向け公式ブログ: Google がお勧めするスマホに最適化されたウェブサイトの構築方法」では下記のように述べています。

つまり、↓こういうことだと理解しています。

メリット３　URLが統一されることでシェアがしやすく！

例えば、レスポンシブWebデザインではなく、PC用ページとスマホ用ページを用意しているサイトがあったとします。

ユーザーAさんが、そのサイトをPCで閲覧中、TwitterでそのサイトのURL（PC用）を共有しました。

オフィスで仕事中のBさんは、PCでAさんのツイートを見てURLをクリック。
→　PCサイトを開き、特にストレスもなく閲覧ができました◎

電車で移動中のCさんは、スマホでAさんのツイートを見てURLをクリック。
→　スマホでPCサイト開き、操作にストレスを感じてすぐ離脱×

というようなことが起こってしまい、「PC用とかスマホ用とか分けないで…」となる可能性がありますが、レスポンシブWebデザインではブラウザの横幅サイズを判断基準にできるため、表示が自然と切り替えられ上記のようなことが起こりません。

メリット２で引用したGoogle公式ブログでも、

PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり…

と書かれています。

デメリット１
見えないだけで存在してるんです…だからスマホだと重くなるかも

例えば、
ブラウザ横幅が1200ピクセル（PCと仮定）の時は、大きい画像を表示
ブラウザ横幅が480ピクセル（スマホと仮定）の時は、大きい画像を非表示
というように作成するとします。

切り替えの要であるCSS（スタイルシート）上は、
480pxの時だけ「display:none;（非表示）」と書いたとします。

でもHTML上は、「img src=”xxx.jpg”」という記述自体が非表示になるわけではありません。HTMLソース上に存在するのは変わらないので、ユーザが使用しているブラウザはその画像を当然読み込もうとします。
もしサイズが重い画像を使用していたら、スマホサイトの表示速度は著しく落ちてしまいます。

スマホの回線速度もだいぶ速くなってきたとはいえ、まだまだこれからの印象です。
少なくとも私は、LTEですが残念ながらそこまで恩恵を実感できていません…。
なので、注意が必要です。

デメリット２
構築が複雑になる＝構築に時間がかかる＝費用が増える

切り替えるレイアウト毎にデザインを用意したり、
HTMLコーディングの構築が複雑だったり、
チェックが増えたり、
など従来の制作方法と比較して設計段階でも構築段階でも複雑になるため、従来より費用が増えてしまうケースもあります。

その他のデメリット

その他にも、

・スマホやタブレットであえてPCサイトが見たい場合でも、見ることができない

・ちゃんと設計しないと、タブレットのたて向きと横向きとで全然違うレイアウトになって、操作に混乱を招いてしまう

・CSS3だけだとフィーチャーフォン（ガラケー）に対応できない

などが挙げられます。

まとめ

数年前に彗星の如く現れたレスポンシブWebデザイン。

素晴らしい手法の一つだとは思いますが、あくまで構築手法の一つです。上記のように万能というわけではありません。
案件の内容によっては、その他の手法と組み合わせてやっていかなければいけないでしょう。

弊社のサイトで採用した理由としては、

• デメリット面よりもメリット面の比率が大きかった
• 新しいことにチャレンジしたかった

という理由があります。
リニューアルしてからまだ1ヶ月ちょっとしか経っていませんが、他の施策（コンテンツ発信力強化、ソーシャルメディア活用など）と合わせてアクセス数や問い合わせ数をかなり伸ばすことができたので、採用してよかったと感じてます。

レスポンシブWebデザインを推奨 or 批判するものではなく、
Web制作に関わることになった方々がこのエントリーを思い出して、検討材料の一つとして使ってもらえたらな　と思います。

（文・石川　イラスト・早水）

…配信元を読む

レスポンシブWebデザインの作り方（簡単設定方法）

作り方（簡単設定方法）

• 741
• 495
• 289
• 27
• 777

レスポンシブWebデザインは、スマートフォンやタブレットに最適化されたホームページを簡単に実装できる技術です（CSSの知識が必要です）。

今やPCよりもスマートフォンでホームページを閲覧されるユーザーが多く、情報をしっかりユーザーに届けるにはスマホ対応が必要不可欠になってきました。

レスポンシブなスマホ対応は、WordPressやMovableTypeなどの”CMS”、CSSフレームワーク”Bootstrap”などのテンプレートを使わなくてもHTMLとCSSだけで実装できます。

スマホ対応必須！モバイルフレンドリーが始まったよ

2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれました。スマホ対応にする事をモバイルフレンドリーと言います。

モバイルフレンドリーが発表されて7週間の猶予がありましたが、皆さんは管理されているホームページのスマホ対応はお済ですか？

当記事で紹介するレスポンシブWebデザインは、CSSがわかれば簡単にできるので、参考にしていただければと思います。

プロとしてホームページ作成をしている我々も、androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて、スマートフォンやタブレット用にホームページを調整するお仕事が増えてきました。今は他のWebデザイナーさん方もスマホ対応のお仕事で忙しくしていると思います。

一昔前は、m/だのi/だの携帯サイトを分散して作ってきてきましたが、別途携帯サイトやスマートフォン用に作られたHTMLを作る必要もなく、HTMLひとつとでスマホ用・タブレット用のCSSを用意すれば、端末のディスプレイサイトに合ったホームページを作る事ができるので、クライアントにとってレスポンシブWebデザインはコスト面でも優しい技術だと思います。

jQueryも使いませんし、CSS3のメディアクエリを利用するからといって、ホームページをHTML5で作らなきゃならないってことも無いですw

当記事では簡単に短く、ホームページをレスポンシブWebデザインにする方法を綴ります。

• レスポンシブWebデザイン設定の記述方法
• 画像の伸縮設定
• Internet Explorer（IE）対応について
• SEOにも効果的なレスポンシブWebデザイン
• レスポンシブWebデザインの表示確認
• レスポンシブWebデザインを仕事で導入するとなると
• .htaccessでの振分け方法もある

レスポンシブWebデザイン設定の記述方法

PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できるという事で、まずはソースを記載します。
HTMLのmetaに以下を記載。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->

端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。

次に３つ（任意）のCSSを用意します（数値は任意です。色々試してみて下さい）
■ PC：横幅769px以上
■ タブレット（android）：横幅768px
■ スマートフォン（android）：横幅640px
PCとタブレットの横幅は1024以上でも769以上でも良いでしょう。

/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が640pxまでの場合のスタイル記入～
}

また、@importで各CSSを読み込む方法もあります。

@import url(style.css) screen and (min-width: 769px);
@import url(tablet.css) screen and (max-width: 768px);
@import url(smart.css) screen and (max-width: 640px);

画像の伸縮設定

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

以上になります。

これでレスポンシブWebデザインが換装可能になりますので、細かく各CSSを調整していただければと思います。スマートフォンだけでもタブレットだけでも画像指定でそれぞれ独自のデザインにする事も可能です！
WordPressのプラグインを使わなくてもテーマに直接書き込めますし、MovabletypeやTYPO3などのCMSでも構築可能ですのでお試しあれ。

Internet Explorer（IE）対応について

レスポンシブWebデザインをIEに対応させる為の２つの方法を記載します。
⇒ Respond.jsを挿入する
⇒ Googleコードで公開されているcss3-mediaqueries.jsを挿入する
上記２つのいずれかをHTMLに挿入すればOKです。

しかし、スマートフォンやタブレットのブラウザには、インターネットエクスプローラーはありません。
あるとしてもほぼ使われてないと思って良いです。ですからクライアントからIEにも対応して欲しいと言われたらその旨を伝えてみてはと思います。IEでのレスポンシブWebデザインの確認はほぼ無意味でしょう（笑）
エゴを主張されてきたら追加料金で対応しましょう！

SEOにも効果的なレスポンシブWebデザイン

googleが公式ブログでレスポンシブWebデザインでのホームページ作成を推奨すると発表しておりました。
⇒ Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

レスポンシブWebデザインの表示確認

レスポンシブWEBデザインで作成したホームページを端末を分けて一括表示で確認できるサービスたち。
⇒ The Responsinator
⇒ Codebomber // Resizer
⇒ Responsive Design Testing

レスポンシブWebデザインを仕事で導入するとなると

レスポンシブWebデザインは、一つのHTMLで換装可能ですから、クライアントに提案をすると安くでスマートフォンサイトが作成できると思われますが、うかつに口頭で費用はこのくらいと少額で言ってしまうと後から痛い目に合うことでしょう…。

やはり計画性が大事！

デザイン次第でCSSを０から書き下ろす事にもなるので、手間暇のかかるレスポンシブWebデザイン、出来上がりのイメージをしっかり持ち、見積りをしましょう。

これからはWindows8も普及してきてそうだし、タッチUI前提のWebデザインに移行しても良いですね。

何故、レスポンシブWebデザインを採用するのか？
それはやはり、HTMLが一つで済み、制作・管理・更新の効率が良いからでしょう。

.htaccessでの振分け方法もある

レスポンシブWebデザインは、一つのHTMLでPC用のCSS・スマートフォン用のCSS・タブレット用のCSSを切り替える訳ですが、.htaccessでの切り替え方法もあります。
⇒ .htaccessでスマートフォンサイトをアンドロイドやiPhoneで判別表示

個人的にはこのエントリーで綴ったHTML一つで作るレスポンシブWebデザインでの作成の方が気楽で良いです。

…配信元を読む