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

※「モバイルフレンドリーでない」との Google のダメ出しをくらったので、タグ100%手打ち（手書き）のしょぼいサイト（当サイトのことです）を「なんちゃってレスポンシブ対応」にするまでのあれこれを綴ってみました。


【微妙な余白問題】
とりあえず作ってみたページ、iPhoneで見ると右端に微妙な余白ができている。
viewport の設定を、
<meta name="viewport" content="width=device-width, initial-scale=0.5">
としているので、iPhoneなら640pxとなるはずだが、微妙にはみ出ている感じ。
iPadでみると右端の余白は無いので、どうやら幅が640pxに収まっていない模様。

ソースを見てもどこをどう直したら良いのかさっぱりわからないので、Googleの助けを借りてみる。

モバイルフレンドリーテスト　で確認。

Googlebot から見たスクリーンショット（モバイルフレンドリーテストで確認できる）上はきちんと横幅一杯に収まっている。

うーむ。わからん。
次行ってみよう。

ウェブマスターツール > PageSpeed Insights
で「モバイル」のタブを確認すると、

ちょうど5%分はみ出していたので、スタイルシート（responsive.css）を確認すると、
width と padding の使い方を間違えていたのが原因だった。

width: 100%;
padding: 5%;
というアホなミスであった。
（width:100% + border指定 の場合も同様にはみ出るので注意）


【大きな表問題】
本サイト（fragment.database.）は、一応何かの時に役立つデータベースとして作っているので、大きい表を掲載したページが多く、縦長ならまだしも、横長の巨大な表があるページがあり、もっとも幅広のもので
東海道新幹線「こだま☆楽旅IC早特」用時刻表
の表が横幅1000px以上あった。
どう考えてもこれを横幅640pxに押し込むとユーザビリティが今より悪化するのは目に見えている。

「pcからのアクセスが大半を占めるサイトはレスポンシブwebデザインに対応する必要は無い」と書いてあるサイトもあったが、当サイトは最もアクセスが多いページが
iPhone・iPad コピペ入力用半角カナ文字一覧
で、サイト全体でiPhone・iPadからのアクセスが7割以上を占める状況。
レスポンシブwebデザインに対応せずにアクセス半減、とかもイヤだが、かといってユーザビリティの悪化を解決できるアイデアも技術力も無い。
ここは無理せず（無理して？）とりあえず横幅640pxに押し込んでみて、Googleに採点してもらうことにした。

で、フォントの大きさやら何やらを試行錯誤した結果、当初無理があると思われた下記のページも、なんとか一応モバイルフレンドリーと判定されたので、一旦はこれで良しとしよう。

無理があると思われたページと、試行錯誤後の PageSpeed Insights の点数は、
・東海道新幹線 EX-IC早得（タイプB）用時刻表　 → 81/100
・東海道新幹線「こだま☆楽旅IC早特」用時刻表　 → 85/100

ある程度フォントが小さくなっても、ほとんどのページは「モバイルフレンドリー」にすることができた。


【最後は力業】
フォントのサイズ調整とかでは何ともならなかったのが以下のページ。
・ボタン電池・コイン電池互換表（SR,LR,CR）
・iPhone・iPad 用 JISかな入力用キーボード

「ボタン電池・コイン電池互換表」のページは、スマホから見たときはいくつかの「列」を表示しないよう設定することにした。
「行（横方向）」ではなく「列（縦方向）」なので、表の該当する TD タグ全てに
<TD class="pc_only">
とひたすら書き込んで、ブレイクポイント（769px）未満の時は表示されない（display: none;）よう、スタイルシートを設定した。
もっと洗練されたやり方はあると思いますし、この処理がSEO的に問題あるのか否かも分かりませんが、とりあえず最低限の目的は達成したので OK ということで。

で、一番最後まで残った「iPhone・iPad 用 JISかな入力用キーボード」のページは、iPhoneで見たときと、pcで見たときとで、表示される表（TABLE）自体を差し替える力業で対応した。
（ブレイクポイント前後で display: none; と display: inline; を入れ替える）


で、とりあえず全ページの「なんちゃってレスポンシブ化」完了。
2015年4月21日のモバイルフレンドリー・アルゴリズム適用には何とか間に合いました。💮

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

　　　【前編】に戻る