Googleも推奨するSEOも有利なレスポンシブwebデザインのサンプルを作ってみました。

公開日：2013年5月1日　

何かと話題のレスポンシブwebデザイン。ちょっと前にgoogleさんも「レスポンシブwebデザインでどのデバイスでも最適に表示できるようにしろー」って言ってて、今回仕事でサイトを新設する機会がありましたのでどうせならと思い挑戦してみました。

Photo : Responsive Web Design

レスポンシブwebデザインってどんなデバイスでみても快適にみれるようなデザインってことです。

ゴールデンウィークってなんでしたっけ？普通に仕事してます水口です。
さて、ブログを始めてから「できるだけ毎日更新しよう」と思ってましたが、さっそく2週間ほどサボっていました。~~もう4月もおわりですね。~~書くのが遅くてもう5月です。

仕事でレスポンシブwebデザインって仕組みでサイトを作る案件があったので、いろいろメモっときます。それにしてもこのブログ、基本的に仕事の事は書かない方針なんですが…

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

ブラウザの幅に合わせ最適なレイアウトになるように組んだデザインのことです。PCで見てる時はPC用のレイアウト、iPadで見てる時はそれ用、iPhoneで（以下略）というように最適なサイズ、レイアウトで表示されます。
実例としてアメリカ本国のスターバックスのサイトが有名です。
【追記：忘れてましたがこのブログもレスポンシブwebデザインです！！】

ブラウザで開いてウィンド幅をギューっと狭くしていくと、幅に合わせてレイアウトが変化します。
昔からあるリキッドデザイン（可変幅デザイン）のように単純に横幅を縮小するだけではなく、サイドバーが本文の下に回りこんだり、画像や文字が小さくなり過ぎないように、レイアウトが変わるのが特徴です。なので、これに対応してないサイトをスマホで見た時のように、文字がすごく小さくなってしまうってことがありません。とってもユーザーフレンドリーなサイトになります。

また、Googleは公式ブログでこんな事言ってます。

複数のサイトを用意すれば、ハードウェアごとに最適化したサイトを提供できます。しかし、1種類のサイトで両環境に対応できるなら、正規化された URLを保持できる上、複雑なリダイレクトを避け、ウェブアドレスの共有をよりシンプルにできます。このような保守性の観点から、Googleでは、1つのページをモバイル端末とデスクトップの両方に対応させるよう、次のガイドラインを満たす方法の検討を始めました。

ページは、どの画面解像度でも読みやすく表示される

どの端末でも表示できるようにコンテンツをひとかたまりごとにマークアップする

ウィンドウサイズにかかわらず、水平方向のスクロールバーは表示しないようにする

Googleさんが言ってるということはSEO的にもイケてるってことです。PCもモバイルも同じURLでOKってのはSEO的にもメリットがあります。

例えばレスポンシブwebデザインに対応していないアメブロの場合、同じ記事でも

・http://ameblo.jp/blog-no-id/kiji-no-id（PC用）
・http://s.ameblo.jp/blog-no-id/kiji-no-id（スマホ用）

といったようにURLが別になり、Google（のロボット）からみると、別のページとして見られます。

googleの評価基準のひとつに「どれだけリンクされたか？」ってのがあります。
同じ記事で複数のURLがあると見てる人がリンク張るとき、環境によって異なるURLが使われます。そうなると被リンクのパワーが分散されてしまうのです。

（ちなみにアメブロのスマホ用URLにPCでアクセスすると302リダイレクトされます。302リダイレクトは一時的な転送に使うものなので、SEO的にはイマイチだとおもってます。）

そもそもケータイに対応する必要あるのか？

私、以前は「ケータイで調べ物する人なんかいないっしょ」派で、実際データ見てもケータイでアクセスした形跡はほとんどありませんでしたのでモバイルサイトはリソースの都合で軽視してました。
しかし、iPhoneの登場でスマートフォンが多くなりAndroid OSのデバイスも増え今では、

os-retio3

iOSとAndroidで約3割います。もう無視できません。
上データは私のお客さんのサイトのgoogle analyticsデータです。

キモはCSS

レスポンシブwebデザインのキモはCSSにあります。

/*まず通常のCSSと同じようにPC用のCSSを記述する。*/
@media screen and (max-width: 800px) {
/* 次に画面幅が800px以下で適用するcssを記述する */
}
@media screen and (max-width: 480px) {
/* で、さらに480px以下で適用するcssを記述する */
}

/*まず通常のCSSと同じようにPC用のCSSを記述する。*/

@media screen and (max-width: 800px) {

/* 次に画面幅が800px以下で適用するcssを記述する */

}

@media screen and (max-width: 480px) {

/* で、さらに480px以下で適用するcssを記述する */

}

ん？なんで“max”なの？って気付いた方は鋭い！
800pxの根拠は、ギャラクシータブレットやNexus7の立てて使った時の横幅が800pxだから。iPadは768pxです。480pxはiPhoneの横幅です。

このように「@media〜」と記述して、この条件の時にこのCSSを適用するってブラウザに命令します。

理想はモバイルファースト

HTMLやCSSの理想的な書き方はモバイルファーストです。
モバイルファーストとはモバイル端末や通信回線はPC環境のそれらより処理が遅かったりするので、モバイルに優しくしよーってことです。（たぶん）

なので本来、CSSはスマートフォン用を記述した後で「画面幅が480px以上Xpx以下ならCSSを適用（←タブレット用）」「X+1px以上は・・・（←PC用）」といったように、小さい方から順に書いてモバイルに優しくするほうがカッコイイのです。

PC用を先に書くとスマートフォンで一度PC用のレイアウトなどを処理した後にスマートフォン用のCSSを上書きする事になり、モバイルデバイスにたくさん仕事をさせることになってしまいます。

ie8以下は「@media〜」に未対応（ie9以上は大丈夫）

google analyticsのデータを見ると~~私の嫌いなダメダメブラウザの~~インターネットエクスプローラーが圧倒的なシェアを占めています。

browser-ratio

インターネットエクスプローラーのバージョン比率は

ie-version

このようにまだまだie8ユーザーが多いので無視できません。
こういった事情がありie8でも表示できるようモバイルファーストは断念しPCファーストな書き方にしました。

なぜ、旧バージョンの~~ダメダメブラウザ~~ie8がいまだに多く使われているかと言うと、Windows XPではie9が使えないからです。私のサブ機のwindowsマシンもXPなのでie8です。
それにしてもie7以下使ってるユーザーってどんな事情があるんでしょうかね？

Respond.jsというjava scriptを使うことで解決する方法もありますがリソースの都合で今回は見送りました。

デモとサンプル

レスポンシブwebデザインのDEMO

上のDEMOのソース置いときますのでご自由にお使いください。
下記のhtmlはfooterの一部にphpを使ってますのでphp形式で保存して使ってください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=2.0" name="viewport">
    <meta name="keywords" content="キーワード,複数なら,カンマで区切って">
    <meta name="description" content="このページの概要をここにツラツラっと書きましょう。">
    <title>ページのタイトルです。レスポンシブwebデザイン | 超簡単サンプル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
	<h1>ここはH1タグです。このページを象徴する一文を入れます。</h1>
	<div id="header">
		<div id="headerNav">
			<div class="head-logo"><a href="#"><img src="http://dummyimage.com/413x89" alt="ロゴなど"></a></div>
			<div class="head-dial"><a href="#"><img src="http://dummyimage.com/273x61" alt="03-xxxx-zzzz"></a></div>
			<div class="head-contact"><a href="#"><img src="http://dummyimage.com/186x61" alt="お問い合わせ"></a></div>
			<div class="head-ad">住所書いたり。東京都港区なんとか町1-2-3 なんとかビル3F</div>
			<div class="gnavi">
				<ul>
					<li><a href="#"><img src="http://dummyimage.com/186x60" alt="トップページへ戻るなど"></a></li>
					<li><a href="#"><img src="http://dummyimage.com/186x60" alt="ごあいさつなど"></a></li>
					<li><a href="#"><img src="http://dummyimage.com/186x60" alt="会社概要など"></a></li>
					<li><a href="#"><img src="http://dummyimage.com/186x60" alt="事業内容など"></a></li>
					<li><a href="#"><img src="http://dummyimage.com/186x60" alt="お問い合わせなど"></a></li>
				</ul>
			</div>
		</div><!-- /headerNav -->
<!-- for smart phone -->
		<div id="headerNav-sp">
			<div class="logo-smp"><a href="/"><img src="http://dummyimage.com/640x50"></a></div>
			<div class="footerNavLink"><a href="#footerNav"><img src="http://dummyimage.com/315x100" alt="その他のページへ"></a></div><!-- スマホではメニューバーはfooterに並べてますので、ここをタップするとfooterに飛びます。 -->
			<div class="dial-smp"><a href="tel:03xxxxzzzz"><img src="http://dummyimage.com/315x100" alt="03-xxxx-zzzz"></a></div>
		</div><!-- /headerNav-sp -->
	</div><!-- /header -->
	<div id="container">
		<div id="main">
			<img src="http://dummyimage.com/615x380">
			<h2>メイン部分です。「お知らせ」とかサブタイトル H2タグ</h2>

			<p>タブレット（iPadなど）の縦画面では、それらのデバイスの画面幅にフィットします。以下ダミーテキストです。</p><p>いやただんではたではけちの生意気らのうちがこそすっかりいい気ましたて、これでも火花を帰っせことなまし。わらっすぎ何はゴーシュが青くたらから今夜のかっこうのガラスらがし第十床たちのきょろきょろが出から行っうない。ぱちんととめておじぎをは元来見ろているう。セロも二わからうちのようをしてやるだ。</p>

			<p>すると一生けん命はぐっとくわえずた。はげしく遠慮たと運びながらいて風にはじめようない両手をとりてするといちばんゴーシュが日云いなくだ。思わずかとゴーシュはてしいんと睡ったたてないのをはこんどはセロの口ますまし。沓は何がいまたかっこうのためぼくがすぎでようとよほんとう光輝を工合へききで何か云いのを出すでしまっやまし。「ではまた今夜のドレミファ。</p>

			<p>あなたはまねにひいて、また手へ出しと川をやめたりみんなかへ死んでやったり考えないな。人もこの正確です猫みたいたセロと下げからドレミファのんをつかまえて水で答えてまげてセロに合せたたて、兵隊から鳴らしいるてたゴーシュだけのきましクラリネットいま習えでしなかに前へぶんをはかっこう団云いたまし。その譜悪いゴーシュもおれか顔つきですなあくるしんからねぼけ扉めでついて行きでくださいたた。ゴーシュとするてこそそれはセロの眼壁ましをしゃくにさわっむしっられた水車たばこを、へんはわたしからそう何週間まして見えでこんどは朝飯の栗のその頭を笑いのパンにふったりゴーシュの顔にしやありてはいっ過ぎの考えるとおいおいしていばいたらんだ。</p>
		</div><!-- /main -->

		<div id="sub">
			<h2>サブです。ここもH2タグ</h2>
			<p>スマホで見た場合、ここはメイン部分の下部に移動します。タブレット（iPadなど）の縦画面では、それらのデバイスの画面幅にフィットします。以下ダミーテキストです。</p><p>からお料簡に云ってはいます事たば、鈍痛をも、同時にこれらかありて用いれれなありあれられないなとするが、先は用いけれどもやったた。はなはだじっとはやはり言い方という行くませので、私のも今日上じゃそれらのお経験はない載せくれますまし。</p>

			<img src="http://dummyimage.com/300x185">

			<p>それはとこう煩悶のののご料簡はしていですですたらなけれで、何何のいた事でそう云うですに従って存在たが、しかしその他人の博奕に握っれるて、それかにあなたの絵より鑑定がほかならてしまいます方ででしと見当安んずるけれども応用云ういるただ。</p>

			<p>国家がつまり大森さんがするとあまり進また事でんた。岡田君はそれだけ一種がいがしな気あっでまい。（たとえば道義をなっ時でだろなてうは離さないたて、）多少しだっ自分に、文部省の大勢くらいあるから思うという、口の反駁はほかの以上だけ耽り読まのに云ったてお出かけごとよしとくれんというご事ませのでしょ。あなたはともかく飯が云っですようになっが来まし方ますてただとても驚知人知れだろだ。それならそう何篇は気持を気に入らて、時間を同時に圧しないあっとできるが、ないなますてまたお使用がいるないだろ。</p>
		</div><!-- /sub -->
	</div><!-- /container -->
	<div id="footer">
		<div id="footerNav">
			<ul>
				<li><a href="#"><img src="http://dummyimage.com/128x120" alt="トップページへ戻るなど"></a></li>
				<li><a href="#"><img src="http://dummyimage.com/128x120" alt="事業内容など"></a></li>
				<li><a href="#"><img src="http://dummyimage.com/128x120" alt="会社概要など"></a></li>
				<li><a href="#"><img src="http://dummyimage.com/128x120" alt="ごあいさつなど"></a></li>
				<li><a href="#"><img src="http://dummyimage.com/128x120" alt="お問い合わせなど"></a></li>
			</ul>
		</div>
		<div class="copyright">Copyright <?php print(date('Y')); ?> <a href="/">Author name</a></div>
	</div><!-- /footer -->
</div><!-- /wrapper -->
</body>
</html>

<!DOCTYPE html>

<head>

<title>ページのタイトルです。レスポンシブwebデザイン | 超簡単サンプル</title>

</head>

<body>

<h1>ここはH1タグです。このページを象徴する一文を入れます。</h1>

<div class="head-ad">住所書いたり。東京都港区なんとか町1-2-3 なんとかビル3F</div>

<ul>

</ul>

</div>

</div>

</div>

</div>

<h2>メイン部分です。「お知らせ」とかサブタイトル H2タグ</h2>

<p>タブレット（iPadなど）の縦画面では、それらのデバイスの画面幅にフィットします。以下ダミーテキストです。</p><p>いやただんではたではけちの生意気らのうちがこそすっかりいい気ましたて、これでも火花を帰っせことなまし。わらっすぎ何はゴーシュが青くたらから今夜のかっこうのガラスらがし第十床たちのきょろきょろが出から行っうない。ぱちんととめておじぎをは元来見ろているう。セロも二わからうちのようをしてやるだ。</p>

<p>すると一生けん命はぐっとくわえずた。はげしく遠慮たと運びながらいて風にはじめようない両手をとりてするといちばんゴーシュが日云いなくだ。思わずかとゴーシュはてしいんと睡ったたてないのをはこんどはセロの口ますまし。沓は何がいまたかっこうのためぼくがすぎでようとよほんとう光輝を工合へききで何か云いのを出すでしまっやまし。「ではまた今夜のドレミファ。</p>

<p>あなたはまねにひいて、また手へ出しと川をやめたりみんなかへ死んでやったり考えないな。人もこの正確です猫みたいたセロと下げからドレミファのんをつかまえて水で答えてまげてセロに合せたたて、兵隊から鳴らしいるてたゴーシュだけのきましクラリネットいま習えでしなかに前へぶんをはかっこう団云いたまし。その譜悪いゴーシュもおれか顔つきですなあくるしんからねぼけ扉めでついて行きでくださいたた。ゴーシュとするてこそそれはセロの眼壁ましをしゃくにさわっむしっられた水車たばこを、へんはわたしからそう何週間まして見えでこんどは朝飯の栗のその頭を笑いのパンにふったりゴーシュの顔にしやありてはいっ過ぎの考えるとおいおいしていばいたらんだ。</p>

</div>

<p>スマホで見た場合、ここはメイン部分の下部に移動します。タブレット（iPadなど）の縦画面では、それらのデバイスの画面幅にフィットします。以下ダミーテキストです。</p><p>からお料簡に云ってはいます事たば、鈍痛をも、同時にこれらかありて用いれれなありあれられないなとするが、先は用いけれどもやったた。はなはだじっとはやはり言い方という行くませので、私のも今日上じゃそれらのお経験はない載せくれますまし。</p>

<p>それはとこう煩悶のののご料簡はしていですですたらなけれで、何何のいた事でそう云うですに従って存在たが、しかしその他人の博奕に握っれるて、それかにあなたの絵より鑑定がほかならてしまいます方ででしと見当安んずるけれども応用云ういるただ。</p>

<p>国家がつまり大森さんがするとあまり進また事でんた。岡田君はそれだけ一種がいがしな気あっでまい。（たとえば道義をなっ時でだろなてうは離さないたて、）多少しだっ自分に、文部省の大勢くらいあるから思うという、口の反駁はほかの以上だけ耽り読まのに云ったてお出かけごとよしとくれんというご事ませのでしょ。あなたはともかく飯が云っですようになっが来まし方ますてただとても驚知人知れだろだ。それならそう何篇は気持を気に入らて、時間を同時に圧しないあっとできるが、ないなますてまたお使用がいるないだろ。</p>

</div>

</div>

<ul>

</ul>

</div>

<div class="copyright">Copyright <?php print(date('Y')); ?> <a href="/">Author name</a></div>

</div>

</div>

</body>

</html>

CSSファイル

@charset "utf-8";

/*
PC用
*/

/* 共通の設定 */
* {
	margin: 0;
	padding: 0;
	border: none;
	}
body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 90%;
    background-color: #ccc;
    }
p{
	margin: 0 0 1em 0;
	line-height: 145%;
	}
h1{
	font-size: 75%;
	font-weight: 100;
	padding: 3px 0;
	}
h2{
	border-left: #ccc 5px solid;
	border-bottom: #ccc 1px solid;
	font-size: 100%;
	font-weight: 100;
	padding: 3px 0 3px 5px;
	margin: 0 0 1em 0;
	}
a:hover img{
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	background: #fff;
	}
#wrapper{
	width: 930px;
	margin:5px auto 0;
	padding: 0 12px;
	background-color: #fff;
	}
#header {
    }
.head-logo{
	float: left;
	width: 44.408%;
	margin-right: 3.66%;
	}
.head-dial{
	float: left;
	width: 29.355%;
	margin-right: 2.577%;
	}
.head-contact{
	float: left;
	width: 20%;	
	}
.head-ad{
	font-size: 85%;
	}
.gnavi{
	clear: both;
	}
#headerNav-sp{
	display: none;
	}
#footer {
    padding: 10px 0;
    }
#container {
	overflow: hidden;
	}
#main {
	float: left;
    width: 66.129%;
    padding: 10px 0;
    }
#sub {
	float: right;
	width: 32.258%;
	padding: 10px 0;
	}
#footerNav{
	display: none;
	}
#headerNav ul {
    list-style: none;
    overflow: hidden;
    }
#headerNav li {
    float:left;
    width: 20%;
    }
.copyright{
	text-align: center;
	font-size: 80%;
	color: #333;
	}
.copyright a{
	text-decoration: none;
	color: #333;
	}

/* 以下、タブレット縦（ディスプレイ幅が800px）より小さい画面に使われるCSS */

@media screen and (max-width: 800px) {
#wrapper{
	width: 95%;
	}
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
	}
.head-ad{
	font-size: 80%;
	margin: 0;
	}
}

/* 以下、スマートフォン（ディスプレイ幅480px以下）より小さい画面に使われるCSS */

@media screen and (max-width: 480px) {
body {
	background-image: none;
	background-color: #fff;
    width: 100%;
    margin:0 auto;
    }
#wrapper{
	width: 95%;
	padding: 0;
	margin: 0 auto;
	background-image: none;
	background-color: #fff;
	}
#header{
	width: 100%;
	}
#container {
	clear: both;
	overflow: auto;
	}
#main{
	float: none;
	width: 100%;
	padding: 0;
	}
#sub{
	float:none;
	width: 100%;
	}
#headerNav {
    display: none;
    }
#headerNav-sp {
	display: block;
    }
.logo-smp{
	float: left;
	width: 100%;
	}
.footerNavLink{
	clear: both;
    float: left;
    width: 49%;
    margin-right: 2%;
    }    
.dial-smp{
    float: left;
    width: 49%;
    }    
#footerNav {
	display: block;    
    }
#footerNav ul {
    list-style: none;
    overflow: hidden;
    }
#footerNav li {
    float:left;
    width: 20%;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

@charset "utf-8";

PC用

/* 共通の設定 */

* {

margin: 0;

padding: 0;

border: none;

}

body {

font-family: Arial, Verdana, sans-serif;

font-size: 90%;

background-color: #ccc;

}

margin: 0 0 1em 0;

line-height: 145%;

}

h1{

font-size: 75%;

font-weight: 100;

padding: 3px 0;

}

h2{

border-left: #ccc 5px solid;

border-bottom: #ccc 1px solid;

font-size: 100%;

font-weight: 100;

padding: 3px 0 3px 5px;

margin: 0 0 1em 0;

}

a:hover img{

opacity:0.5;

filter: alpha(opacity=50);

-ms-filter: "alpha( opacity=50 )";

background: #fff;

}

#wrapper{

width: 930px;

margin:5px auto 0;

padding: 0 12px;

background-color: #fff;

}

#header {

}

.head-logo{

float: left;

width: 44.408%;

margin-right: 3.66%;

}

.head-dial{

float: left;

width: 29.355%;

margin-right: 2.577%;

}

.head-contact{

float: left;

width: 20%;

}

.head-ad{

font-size: 85%;

}

.gnavi{

clear: both;

}

#headerNav-sp{

display: none;

}

#footer {

padding: 10px 0;

}

#container {

overflow: hidden;

}

#main {

float: left;

width: 66.129%;

padding: 10px 0;

}

#sub {

float: right;

width: 32.258%;

padding: 10px 0;

}

#footerNav{

display: none;

}

#headerNav ul {

list-style: none;

overflow: hidden;

}

#headerNav li {

float:left;

width: 20%;

}

.copyright{

text-align: center;

font-size: 80%;

color: #333;

}

.copyright a{

text-decoration: none;

color: #333;

}

/* 以下、タブレット縦（ディスプレイ幅が800px）より小さい画面に使われるCSS */

@media screen and (max-width: 800px) {

#wrapper{

width: 95%;

}

img{

max-width: 100%;

height: auto;

width /***/:auto;　

}

.head-ad{

font-size: 80%;

margin: 0;

}

/* 以下、スマートフォン（ディスプレイ幅480px以下）より小さい画面に使われるCSS */

@media screen and (max-width: 480px) {

body {

background-image: none;

background-color: #fff;

width: 100%;

margin:0 auto;

}

#wrapper{

width: 95%;

padding: 0;

margin: 0 auto;

background-image: none;

background-color: #fff;

}

#header{

width: 100%;

}

#container {

clear: both;

overflow: auto;

}

#main{

float: none;

width: 100%;

padding: 0;

}

#sub{

float:none;

width: 100%;

}

#headerNav {

display: none;

}

#headerNav-sp {

display: block;

}

.logo-smp{

float: left;

width: 100%;

}

.footerNavLink{

clear: both;

float: left;

width: 49%;

margin-right: 2%;

}

.dial-smp{

float: left;

width: 49%;

}

#footerNav {

display: block;

}

#footerNav ul {

list-style: none;

overflow: hidden;

}

#footerNav li {

float:left;

width: 20%;

}

PCでは右にサイドバーがあるレイアウトです。タブレットでもPCの単純縮小表示。
スマホではサイドバーがメイン部分の下に移動します。スマホだと画面が小さく単純縮小だとバナーなどが小さくなりすぎますので、ヘッダーの構造も変えました。ヘッダーにメニューボタンを何個も配置するとスマホの画面上部がバナーだらけになってしまうので、メニューバナーはフッターに移動しました。
あと、スマホは電話がついてますので、ヘッダーに電話をかけるようなリンクを張ってます。

バグやミスや改善点があれば下のコメントから優しくご教示ください。

今回使用したスクリプトやwebサービス

●jquery.smoothScroll.js
上記のDEMOのスマホ状態のfooterへ移動するページ内リンクで使用してるスルーって動くスクロールは、MONKEY WRENCHさん作成のスクリプトを使いました。DEMOでは使ってますが、ソースコードには組み込んでません適宜MONKEY WRENCHさんのブログから使わせてもらってください。

●ダミーイメージ（画像のダミーデータ）
上記DEMOで使ってる画像は、IDEA*IDEAさんで紹介されていたwebサービスを使用してます。今回のようなサンプルを作る時にわざわざダミー画像を用意しなくていいのでたいへん重宝します。

●すぐ使えるダミーテキスト
すぐ使えてとても便利なダミーテキスト生成サービス。サイト制作の時ってレイアウト確認用になんでもいいからテキストをぶっこみたい時があります。そんな時「あああああああああああああああああああ」って感じに全部同じ文字だとイマイチよくわからんので、このような漢字も混じったある程度自然文に近いダミーテキストは役に立ちます。

超長文になってしまったと思ったけど、半分はソースコードですね。

仕事のメールなどで「この人日本語おかしいな」ってのを時折見かけますが、いざ自分で文章書くとなると難しいですね。この記事でさえ、何度も読み返したけどまだ変なところあると思います。書き続ければはじめからすらすらと推敲したような文章が書けるようになるんだろうか・・・

ちなみに当ブログは、このページのレスポンシブウェブデザインではなくwebライダー様のWPテンプレート「賢威」を使用しております。

SEOに強い戦略的テンプレート「賢威6.2」。レスポンシブWebデザインにも対応！パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属！

カテゴリー：ホームページ制作 » HTML/CSS/JS
作成者：けん

4 Responses to “Googleも推奨するSEOも有利なレスポンシブwebデザインのサンプルを作ってみました。”

スマートフォン向けの設定に注意！ミスすると検索結果に全く表示されません｜SEOまとめより:

2013年12月6日 10:11 AM

[…] すでにPC向けのページが用意されているサイトでレスポンシブWEB（同一URL、同一HTML）の適用はさすがに不可能でしたので、ダイナミックサービング（Dynamic serving、同一URL、別HTML）で進め […]
山田　昭より:

2014年3月15日 1:47 AM

http://miz2403.com/responsive-web-design/
初めまして。山田と申します。
↑このソースを利用させて頂きました。
↓この本家の商売ページのレスポンシブ化を考えていました。
xxxxxx.com（※すみません諸事情により管理人がURL削除いたしました。）
が、その前に息子の居酒屋ＨＰを勉強としてソースを借りてレスポンシブ化して作りました。やあー大変でした。ネットで調べてなんやかんや２週間掛かってしまいました。
index3.htmlはテストページですがなかなか良い感じに
仕上がったかなと思っています。
もし宜しければ更に良くなる為のアドバイスを頂戴出来ればと思っています。
厚かましいお願いで申し訳ありません。
http://www.kaisanshunsai.com/
貴社様の更なるご発展を祈っております。
山田　昭
- 水口兼太より:
  
  2014年3月15日 7:43 AM
  
  コメントありがとうございます。お役に立てて光栄です。
  テストページを拝見いたしました。とても綺麗にできていると思います。
  デザインについて私からアドバイスできることは特にありませんが、tableタグの多用が気になりました。
  レイアウト目的でtableタグを使用するのは、一般的に推奨されないので、ここはtableタグを使わずに作るのをおすすめします。
  見たところ、縦並びに使っているようなので、tableタグが無くても綺麗に並ぶのではないでしょうか。
  
  あとは、グーグルマップの幅がスマートフォンの横幅を超えているようなので、幅をスマートフォンに対応させたいところです。
  http://www.lifehacker.jp/2013/12/131209google_maps_responsive.html
  iframeなので若干ややこしいですが、上記ページに詳しくありましたので、よろしければ参考にしてみてください。
  
  実は以前、海山旬菜さんにメールしたことがあります。私のグーグルの解析タグが貼られているので、海山旬菜さんのホームページへのアクセス数などのデータがこちらに漏れてきてしまってます。
  きっとサンプルソースではなく、ページのソースを利用されたと思いますので、ぜひ私のグーグルアナリティクスのコードは削除していただければと思います。
  - 山田　昭より:
    
    2014年3月15日 4:32 PM
    
    ご返信をありがとうございます。 また良きご指摘有難うございます。 マップもfacebookプラグインもページに上手く埋め込めたようです。tableタグは根っからのＨＰビルダーユーザーなので知らない間に多用しているのかも知れません。 グーグルの解析タグの一件は申し訳ありませんでした。 即刻外しましたので今後は問題ないかと思います。 レスポンシブなかなか難しいですね。 ただまだ構築している企業や店舗もとても少ないのが現状です。 レスポンシブはグーグル推奨と言う事もあり、この３か月間で居酒屋のグーグル検索順位は重要キーワードで既に１ページ目に入っています。 ただやはり手間が掛かるのと自由度に限界があるのが問題ですね。有難うございます。 今後とも宜しくお願い致します。
    山田　昭