【モバイルフレンドリー対応】手打ちレスポンシブへの道【前編】

手打ちレスポンシブへの道【前編】
　【後編】はこちら

※Googleのモバイルフレンドリー・アルゴリズム適用により、同じような目にあっている方の何かの参考になればと思い、あえて記録に残してみました。
文章が長くなったので、前編と後編に分けました。

【Google様のダメ出し】
ある日、Googleのウェブマスターツールに見慣れないメッセージが。

http://www13.plala.or.jp/bigdata/ でモバイルユーザビリティ上の問題が検出されました

http://www13.plala.or.jp/bigdata/ のウェブマスター様
Google のシステムは、貴サイトの 44 ページをテストし、そのうちの 98% に重大なモバイルユーザビリティ上の問題を検出しました。この 43 ページの問題の影響で、モバイルユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイルフレンドリーとは見なされないため、スマートフォンユーザーにはそのように表示、ランク付けされます。

『スマートフォンユーザーにはそのように表示、ランク付けされます。』って、要は
「スマホ対応してないサイトは検索順位下げるんでそこんとこよろしく」
ってことなのでは。
会社での評価は全く気にしないが、Googleの評価は気になる。
しかも98%に問題あり。98%って...

そういえばちょっと前から、iPhoneからGoogle検索したときに、検索結果のスニペット部分に灰色で「スマホ対応」というフラグが立っているページがあるのを薄々気づいていたのだが。

かといって、当サイト、ホームページビルダーや WordPress などを一切使わずにタグはテキストエディタで全て手打ち（手書き）だし、そもそも個人の趣味でやってるだけのサイトなので、スマホ対応をSEO業者に外注したりする気も全くないし。

で、色々と調べてみると、スマホ対応の手法としては主に、

①スマホ用に別のページを用意し、アクセス時にパソコンからのアクセスかスマホ・タブレットからのアクセスかを判定して自動振り分けされるよう設定
②単一のhtmlで、アクセスしてきたデバイスの画面サイズに応じてレイアウトが変化するような制御をcssファイルに記述する（レスポンシブwebデザイン）

の２つの方法があることが分かったのですが、Googleの「モバイル SEO - ウェブマスター向けモバイルガイド」のページを見る限り②の方法がおすすめのような気がするし、①の方法だと管理しないといけないページの数が単純に倍になるので、後々のメンテナンスが大変そう（ロクにメンテしてないけど）・・・

というわけで、当サイトもモバイルフレンドリー対応のため渋々レスポンシブwebデザイン対応してみることにしました。
もちろんタグ手打ちで。

【2%の可能性にかけてみる】
今のところ、アクセス数は落ちてないみたいだし、Googleといえども警告メッセージを送ってすぐにペナルティ適用、なんて無慈悲なことはしないはず。
一週間後から適用とかだと絶対間に合わないしイヤだなぁ、と思いながら調べてみると、（2015年）4月21日にモバイルフレンドリー・アルゴリズムが適用される、とのこと。

あと1ヶ月しかない。🆘

コード完全手書きなので、レスポンシブ対応するのに全ページ全面書き直しはかなり辛い。
下手すりゃ週末全部潰れるよ、これ。

何とか作業量を軽減できないかと思い、最初のメッセージを改めて見てみると、
「98% に重大なモバイルユーザビリティ上の問題を検出しました。」
とあったので、残り2%と同じような感じにすれば真面目にレスポンシブ対応しなくても当面乗り切れるのではないかと考え、2%がどのページかを確認してみると、
iPhone定規（📏iPhoneものさし）【iPhone5/5s/5c専用】
iPhone5シリーズ（320x568表示、640x1136ピクセル）で見たときに正確な定規になるように、他のページとは違う viewport の設定をしているページでした。
というわけで、2%の可能性にかける試みはあえなく粉砕したものの、そこそこ幅広のページでもレスポンシブ対応できることがわかった。（ruler.html は幅640ピクセルで作成）
とりあえず、上記の「iPhone定規」のページの viewport の設定
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">
を頼りに、何か作ってみることにする。

【とりあえず作ってみた】
レスポンシブ対応の手法について調べたところ、具体的なコードが書かれたサイトや、（少し怪しげな）テンプレート無料配布サイトはたくさんあったものの、一応標準的な手法を理解した上で作った方が後々楽だろう、という判断で、下記の書籍を購入。
ヨドバシで立ち読みして比較しました。
若干情報が古いような気もしたが、より汎用的なコードを書きたかったので。

【楽天ブックスならいつでも送料無料】レスポンシブWebデザイン「超」実践デザイン集中講義 ...
価格：2,376円（税込、送料込）

で、本を見ながらレスポンシブなレイアウトのページをとにかく作ってみよう、ということで本ページ（responsive_1.html）を作ったというわけです。
ただ単に既存のページはどこから手をつけたら良いのか見当がつかなかったからなんですが。

（手打ちレスポンシブへの道【後編】に続く）

※本に書いてあったこととググった情報の寄せ集めでとりあえずコードを書いただけなので、後編でもcssの書き方とかについてはほとんど触れていません。
また、所詮「なんちゃってレスポンシブ」なので、このページのhtmlのソースやスタイルシート (responsive.css) を見てもあまり参考にならないかと思います。