モバイルフレンドリーテスト再 20150128

２０１５年０１月２８日

◆前回以降作成しNGだったページを「RWD化」する

ユーザーのホームページ閲覧環境の急速な変化に伴い、「パソコン・タブレット・スマホ」と横幅等の多様化に、ホームページの作成側として対応を迫られている。

その為、これからのホームページ作りは、必然的に1つの「ソース」で全てのディスプレイ(ディバイス)に対応するもの（RWDと呼ばれる技法）が、要求されるであろうと考え対策を検討してきました。

調べて見るとこのRWDによるホームページ作成方法は、色々ある事が分かりましたが、希望するデザイン通りにはいかず、ページごとにカスタマイズが必要だった。

今年度作成したページの中で、最後まで未解決で残っていた2つのページについて、Google提供のフレンドリーtest^（※１）は「NG」であり、何回か改善しチャレンジした結果、このたびやっと「OK」になりました。

前記3つのディバイスに適合するかどうかは、それぞれの実機を使えば当然分りますが、各社の各種バージョンの実機が無くても、自作のホームページがPC上で、適合しているか試験出来るツールをGoogleから提供されていますから、ここえアクセスすればtestがして貰えます。

^（※１）

googleモバイルフレンドリーテスト・サイト 

今年に入り作成した全てのページ^（※２）について、その後多少の改善もしてフレンドリーtestで再度確認出来ました。本ページ自体も合格しています。(^。^)

従来はシュミレータ―^（※３）testのみで行なっていましたが、今回はGoogleのモバイルフレンドリーtestと、補助的にタブレット端末（Google Nexus7(2013)）を使用しました。

Googleツールの使用が良いと判断したのは、「googlebot」からこのホームページがどのように見えるかで判定するため、従来のシュミレータ―以上に強力（見かけ上の見映えだけでなくシビアな判定であると考えられ）であり、これがGoodleから推奨されている手法でもある為、結果は「googleの検索結果」にも反映され、閲覧者獲得にもつながると思われるからです。

今回合格したとはいえ、デザイン的にやむを得ず我慢した部分がありますので、今後、ページデザインの標準化を図りながら、RWD化を推進する予定です。気が付いた不都合部分は、別のRWD等を選び順次改善します。

 ■簡易的にRWDページかをチェックする方法

1. 画面右上に表示されている、最大化ボタンを「元へ戻す（縮小）」モードにする。
2. ウインドウの境界にマウスを置き、← →矢印を左右へドラッグする。
3. タブレットやスマホサイズに横幅を縮小した時に、全てのページ内容が折り返されて、判読できるか調べる。
4. 画像は横幅が縮小された時、高さも同じ比率で縮小される必要がある。
5. 段組みページは、全ての段組みが解除され、1列に表示されなければならない。

【図での説明】

 ◆ 画像はクリックするとlightboxで拡大されます。画像8までは連続表示する事も可能です。