ホームページをスマホでの閲覧に適した表示にさせる（モバイルフレンドリー対策）

モバイルフレンドリーという言葉は Google が提供しているモバイルフレンドリーテストというサイトで知りました。知ったのは一年以上前ですが、面倒なのでほったらかしておりました。このたび一念発起して、このモバイルフレンドリー対策をすることにしまして、とりあえず目途はつきました。

このあとは、ブログに投稿してきた放浪記録をホームページに追加していく作業が残るだけです。現在のＨＰは、ブログの記事をリンクさせているインデックスのようなものでして、ＨＰとしての内容はないうえに、少々使いにくいし不細工です。ですからこれらを一部まとめるなり、表現を変えるなどして、自らの資産扱いにしたいと考えています。全て HTML ファイルは、メモ帳などのテキストエディターでゴリゴリ書いていきます。約1000ページありますので、１年では難しいかな。

モバイルフレンドリーサイトというのは、スマホやタブレットなど、パソコン画面に比べて小さな画面でもそれなりに読めるように対策（設計）されたサイトということです。パソコンの画面だけを意識して設計されたサイトだと、スマホやタブレットなどに表示させると字が小さくて読めないということが珍しくありません。これはスマホ利用者にとってはよく無いということで、Google としてはサイトの評価を下げ、検索ヒットしにくくなるということでした。

Google Search Console Mobile-Friendly Test

私としてはいちいち Google の言いなりになるのがイヤだったのでほったらかしておいたのですが、最近は自分がスマホをよく利用しているものだから、困るんですよね、不便なんですよね、出先で自分のサイトが使えないと。

ということで、自分のためにモバイルフレンドリー対策をすることにしました。古い話で恐縮ですが、ポイントは下記のとおりです。

1.フォントサイズが小さすぎないか？
2.ビューポートが設定されているか？
3.タップ要素同士が近すぎないか？
4.コンテンツサイズがビューポートに対応しているかどうか？

細かいことは分りませんが、調べてみるとやり方は概ね３通り、

１．htmlファイルを、ＰＣ用とタブレット用とスマホ用と、それぞれ用意する。

　これは困るんですよね、これから1000ページも追加しようとしているのに、２倍とか３倍になるなんて、本当に困るんですよね。だからダメ。

２．htmlファイルはひとつで、表示デバイスに寄って php等のスクリプトで動的にhtmlを編集して表示する。

いまさら php など勉強するのはめんどくさい。レンタルサーバーも、phpなどに対応したものでないといけません。それと何でも出来てしまうと、結果として時間がかかりすぎるというのもあって、これも却下したい。

３．htmlファイルはひとつ、cssを複数用意しておいて、表示デバイスによってcssで表示分けをする。

デザイン的なことは多少の制限を受けるかも知れませんが、htmlファイルは一元管理できるし、まあこれなら何とかなるだろうと思いました。ということで、サイトの横サイズを720pixelとして設計しなおし、表示デバイスの横ドットが720ピクセル以上か未満かによってcssを選択して表示するという形にしました。