手打ちdeレスポンシブ実装!【後編】
 【前編】はこちら


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


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

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

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


「問題ありません。 このページはモバイル フレンドリーです。」


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

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

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


ユーザー エクスペリエンス
コンテンツのサイズを表示域に合わせる
ページ コンテンツの幅は 672 CSS ピクセルですが、表示域の幅は 640 CSS ピクセルしかありません。次の要素が表示域から外れています:


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

width: 100%;
padding: 5%;

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


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

「pcからのアクセスが大半を占めるサイトはレスポンシブwebデザインに対応する必要は無い」と書いてあるサイトもあったが、当サイトは最もアクセスが多いページが
iPhone・iPad コピペ入力用半角カナ文字一覧
で、サイト全体でiPhone・iPadからのアクセスが7割以上を占める状況。(2015年3月現在)
レスポンシブ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,178から
(2024/9/23 17:59時点)


【なんちゃってレスポンシブのためのTips】

・PageSpeed Insights で「ユーザーエクスペリエンス」が大体80点以上あれば「モバイルフレンドリー」(100点を目指す必要なし)
・viewport の設定は、
 content="width=device-width, initial-scale=0.5"でOK
・上記viewport設定の時 font-size: 1.1em; でOK
・上記viewport設定の時、TABLE タグに
 style="font-size : 18px;" で表の中も大体OK
・フォントサイズでどうにもならないときは、
.sp_only.pc_only といったクラスセレクタを設定し、ブレイクポイント前後で display: none;display: inline; を入れ替える
・あるいは単に隠すだけでもOK
・モバイルフレンドリーテストに合格すれば、再クロール後3日くらいで「スマホ対応」フラグが立つので焦らない


 ◀ 手打ちdeレスポンシブ実装!【前編】に戻る