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

２０１５年０１月０４日

◆試験的に「RWD化」して見た

HP作成用国際規格(HTML5)が、昨年W3Cから正式に勧告^{（※１、２）}されました。また、Google社からは「モバイルフレンドリーテスト」というツールが公開されました。

現行のotosan pageで早速テストした結果、「モバイルフレンドリーではありません」と表示されてしまいました。しかし、実機のタブレット（Google Nexus7(2013)）では表示されていたのに？（Googlebotからはモバイル用に見えていなかった？）・・・と言うことがきっかけになり検討を始めました。
何回か改良した結果やっと「問題ありません。このページはモバイルフレンドリーです。」と表示されるところまでたどり着きました。(^_^;)

これからのHP作成方法は、ディスプレイサイズの多様化（大きく分けてスマホ・タブレット端末および従来のパソコン）に対応した一つのものになり、これが今後のトレンドになるような気もします。

合格したとはいえ今回はトップページのみであるため、今後はサイト全体を構築し直さねばなりません。

今回TOPページの作成は、RWD（レスポンシブ・ウエブ・デザイン）^{（※３、４）}と呼ばれる手法が使われる為、いろいろのページを参考に、見よう見まねでプロトタイプを作成してみました。

この特徴は

1. 表示幅の異なる、どのデバイスからも見れる。
2. HPのURLは1つで良い。（htmlも一つで良い・・・ワンソース）。
3. googleにインデックスされ易く、推奨されている手法^（※５）でもある。

等が考えられる。

プロトタイプのもので改良を重ねたもので、「モバイルフレンドリーテスト」^（※６）を行ってみた結果、やっと「問題ありません。このページはモバイルフレンドリーです。」と表示（合格？）されました。

しかし、作成方法には無駄があり可なり大型ソースになってしまいました。もっとコンパクトに作る必要があると感じています。

今後サブ（子）ページについては、TOPページより種類が多い為標準化して種類を減らしながらやる予定です。

 ■モバイルフレンドリーテスト ツールの使い方

1. 下記、参考になったページリンク６．モバイルフレンドリーテストページを開く。
2. ①「ウエブページのURLを入力」欄へテストするページのアドレスを入力する。
3. ②分析ボタンを押す。
4. 分析が始まる。
5. 結果表示が出る。

 ◆ 図はクリックするとlightboxで拡大されます。