道楽者の詩

写真とカメラ、山登り、ギターをはじめ、日々の私情をつらつらと

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

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

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

 

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

Google Search Console Mobile-Friendly Test

 

 

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

 

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

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

 

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

1.htmlファイルを、PC用とタブレット用とスマホ用と、それぞれ用意する。

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

 

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

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

 

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

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

 

4.時間の無駄なのでとっとと諦めて、はてなブログ一本で運用する

ブログって言うのは便利な面もあるのですが、自分の資産の使い捨て的なイメージが否めません。古い記事を掘り起こしてくるのは自分でもめんどくさいです。思いついたことや、タイムリー的な事柄はブログでいいのですが、自分の資産的なものはホームページという形にしておきたいのです。

 

お勉強と試作等も含め、丸四日かかりましたがやっと目途がつきました。

 

f:id:Bluesboy:20161215224111j:plain

cantam.daynight.jp

 頭の中で構想がまとまってしまうと、あとのことは誰かにやってもらいたくなるのですが、もう誰もいなくなってしまいました。

 

スポンサーリンク