無料ホームページをモバイルフレンドリーにする3つの条件

html5-386614_640

前回のブログで、無料ホームページサービスで開設されているページのモバイルフレンドリー対応に成功したことを書きました。

今回はその続きで、対応の過程でわかったことの詳細をご紹介します。

 

無料ホームページで運用されているページがまだまだたくさんある現実

詳細の説明に入る前に、これは筆者の反省でもあるのですが、世の中の商用ウェブページがすべて自由度の高いサーバーを使って独自ドメインで運用しているわけではないということを今回改めて認識しました。

レンタルサーバーコストやドメイン取得費用が今ほど安くなかった時代(ほんの10年くらい前ですが)には無料ホームページサービスを利用したサイトがたくさんありました。

そしてその頃からまじめに運用しながらこつこつと評価を積み上げてきたページほど、今身動きがとれない状況になっています。

プロバイダの中の人の話によると、同じような境遇で困っている方が少なくないようです。この記事が、現在無料ホームページサービスを運用していてモバイルフレンドリー化に困っている方々のお役に少しでもたてば幸いです。

 

今回対応したウェブサイトの状況

さて、今回対応させていただいたホームページの状況を簡単に説明すると以下のようになります。
多くの所謂”無料ホームページサービス”は同じような状態だと思いますので、参考になるのではないでしょうか。

  • プロバイダー提供の無料ホームページスペースである
  • URLはプロバイダー支給のもの。変更不可
  • 同じドメインでの有料上位プラン等なし
  • 自作CGI不可
  • SSI不可
  • FTPサーバーあり

以上のような状況から、今回の対応は以下のような条件下でモバイルフレンドリー対応しなければなりませんでした。

  • サーバー移転はできない
    • プロバイダ提供のURLは他社サーバーに移すことができません。
  • 独自ドメインが使えない
    • そもそも独自ドメインが設定できないサービスでしたが、たとえ使えたとしても1ヶ月未満で今の評価を移すことは不可能です。時間があれば独自ドメインを取り(サーバーも移して)半年くらい掛けてじっくり評価も移していく作戦が取れます。しかし狙いのキーワードで検索上位を安定してキープしている現在、急いでurlを変え今までの評価を無くしてしまったら本末転倒になってしまします。
  • リダイレクトは無意味
    • 例えば meta html-equiv=“refresh” ではすべてのアクセスがリダイレクトしてしまいますので、それでは意味がありません。もちろんスマホだけ別途用意したスマホページに飛ばせれば良いのですが、今回のサーバーではuser agentを見てスマートフォンだけをリダイレクトさせるようなスクリプトは動きません。

つまり、今のサーバー、今のurlで、PCとスマートフォンどちらでアクセスしても破綻の無いデザインかつリピーターである既存のお客様の使い勝手を下げないページに作り変える必要があるということです。

 

PCでもスマートフォンでも見やすいモバイルフレンドリーページにする3つの基本条件

今回は元々のトップページをベースにして、モバイルでも見やすく操作しやすいページにする方針を固めて作業を進めました。

具体的には

  1. テキストをモバイルでも読みやすい大きさにする
  2. 各リンク、ボタン等の配置を見直し、スマホでも押し間違えなどがないようにレイアウトする
  3. 昔懐かしいカウンターや、外部との相互リンクなど無駄なパーツを極力外しシンプルな構造にする

これが基本です。

この3点だけを押さえてページを見直した結果、HTMLだけでモバイルフレンドリーテストに合格するページにすることができました。

とはいえ、一発でテストに合格した訳ではありません。

出来上がったソースは非常にシンプルなものですが、合格するまでにはいろいろと試行錯誤しながらテストを重ねました。

その過程で分かったことのうち、モバイルフレンドリーの評価基準としてかなり根源的だと思われる点が2点見つかったのでブログの読者の皆様にお知らせします。※あくまでも筆者の見解です。

  • vewportは必須ではない

「モバイルフレンドリーでありません」と表示判定されたときの理由の一つに「モバイル用 viewport が設定されていません」という項目があるので、必須だと思われている方が多いようです。筆者もそう思っていました。しかし実験の結果として、viewportの設定は必須ではありませんでした。
条件次第ではvieportを指定することで却って落ちることもあるようですし、極力シンプルにするためにも今回はあえて何も設定せずに済ませました。

  • ページ全体のボリュームによってテキストが小さすぎるかどうかの評価が変わる

「テキストが小さすぎて読めません」という項目があります。これを解消するためにまずは単純にテキストサイズを大きく指定してみました。テキストサイズを大きくしてもページ全体が読みにくくならないように、なるべくインデックスされている内容に影響が無い範囲で極限までbody内のテキスト量を減らしてテストしてみたところあっさりモバイルフレンドリーになりました。
次にこのモバイルフレンドリーと判定されたソースのbody内にテキストを増やして再度試したところ、先ほどと同じフォントサイズでも「テキストが小さすぎて読めません」となってしまいました。
そのソースのテキストサイズを少しずつ大きくして何度試してみても「小さすぎ」と判断されます。これ以上大きくすると一行5文字くらいになってしまいそうだったので途中でやめましたが、単純なHTMLではページ内のテキスト量によってGoogleが判断する読みやすい文字の大きさが変わるようです(どういうロジックかまでの判断は今のところ推察できていません)。

以上の理由からも、多くの無料ページでよく付けられているカウンターなどプロバイダが提供するCGIツールやバナーリンク、一時流行ったブログパーツや場合によっては広告なども、本来のページの内容に無関係なものは極力外した上でモバイルフレンドリー対策をすることをお勧めします。

なお、htmlでテキストサイズを大きく指定しておいてCSSで表示サイズを小さめに調整してブラウザに表示した場合にどうなるかまでは今回時間がなくてテストできませんでした。これは後日改めてテストしてみようと思います。

 

ところで以前のエントリの繰り返しになりますが、このトップページだけの対策はあくまでも4/21のロジック変更を受けないための最低限のものになります。

本来望ましいのは、モバイルのユーザー体験を考慮したサイト設計にすることですので、その点をお忘れなく。

とはいえ、この対策は実際にモバイルでアクセスした際のユーザーの操作感やコンテンツの見やすさを実際に改善していますので、スパム扱いされる心配はありませんからその点はご安心ください。

まずはこの対応で一番影響を受けやすいトップページへの影響を抑えていられるうちに、サイト全体の見直しを進めてください。

もちろん弊社でお手伝いさせていただければ、一緒に最善の対応を考えさせていただきますので、お気軽にご相談ください。

所沢地区・埼玉県以外のお客様にももちろん対応できます。詳しくは問合せフォームまたはお電話でお問い合わせください。

では

 


Tagged on: , ,