製作開始日:2015年3月23日

本当はホームページ製作関連の話は別サイトを作って書いていこうと思っていたんだけどなかなか進まないので・・・。ホームページ製作に興味が無い方は,スルーという事でお願いいたしますm(__)m

最近のこと,Googleさんからメールが届いたのさ。私が作っているサイトで「問題が検出されました」だってさ!

問題内容の詳細

今回指摘された問題の根本的な部分は「スマホやタブレット等で見やすいページ構成になっていない」という事。

でもって,「モバイルユーザーがGoogleで検索をしたときに,あなたのサイトは見やすくないのでランクを下げますよ」みたいな文面が書かれている・・・。

ぶっちゃけ最近発生した問題ではなく,私がホームページ製作の練習を開始した5年前からの問題なのだ(笑)。

私がもらったメールの雰囲気だと,Googleのウェブマスターツールを使っていてモバイルに対応していないページを持っている人のほとんどに通知している感じ。

たぶんスマホやタブレットでGoogle検索をかけたとき,スマホ対応サイトの順位はぐんと上がって,非対応のサイトは順位が急降下・・・なんて処理に変わるんでしょうねー。PCでのランクは変わらないんだろうか?

ウェブマスターツールの指摘

Googleウェブマスターツールの画面で見てみると,以前は「重大な問題はありません」だったのに,いつの間にか「問題が検出されました」に変わっている・・・。

そして私が作っている別サイト「宮城県で子供と遊ぶ!」とメニュー画面のみの「boatrockfish.com」は大丈夫みたい・・・。

去年の3月に「Dreamweaver CS6」を買ってから,素人レベルだけど「可変グリッドレイアウトのレスポンシブWebデザイン?」で作れるようになったからだと思う。

画面のサイズに合わせてページが自動で調整されるもんね!うまく調整されているかどうかは謎だけど(笑)。

メッセージの「~検出されました」の後にある「詳細を表示」をクリックして進んでいくと・・・

修正が必要な項目は5つ

問題点の詳細が一覧表示される。

4番のエラーを見てみると,Flashを使っているページもアウトらしい。

スマホではFlash非対応が増えているというのは以前から知っていたんだけど,Flashアニメを作ってみたかったんだよねー(笑)。

Flash以外のエラーについて自分なりに考えてみると,要するに固定幅で作ったページをスマホで縮小して全体が表示されるので,フォントサイズも小さいし,タップ要素が接近する・・・ってな感じだろうか?

スマートフォンで見たときのプレビュー画面

ユーザビリティ エラー1番の「ビューポートが設定されていません」からたどっていくと,スマートフォンで見たときのプレビューを確認することができる。

私はホームページ作りが趣味なのに未だにガラケー&タブレット無しの人間・・・。なので,こういった機能はめっちゃ助かる。Googleさん,ありがとう!

小さい画面に収まるように縮小されたら,そりゃぁ文字が小さくなってリンク間の距離も狭くなりますわなー。

でもってズームで拡大すると文字は大きくなるけれど,左右間のスライドが必要になるから不便なんだってさ・・・。PCでも横スクロールのバーを操作するのって面倒だもんね。

Googleアナリティクスで見た閲覧者のデバイス割合

アクセス解析ができるGoogleアナリティクスで訪問者の割合を見てみると,最近はスマホからのアクセスがPCを上回る事もしばしば。

これからはスマホ対応サイトじゃないと見てもらえない日がくるかもしれないね・・・。

面倒だけどGoogleさんから「あなたのサイトはモバイルフレンドリーとは見なされません」って言われちゃったし,全ページリニューアルを目指して頑張ってみようと思う。酒飲みながら,やる気が続く限り(笑)。

修正するページの総数は266ページもあるよ・・・。数ヶ月はメンテナンスにかかりそう・・・。

という事で大して変わっていないように見えますが,新レイアウトはこのページからスタートなのだ。ブラウザの幅を拡大&縮小してみると私の努力が伺えるはず!自分的には少しずつ成長しているつもりです(笑)。

このレイアウトでエラーは改善されるかなぁ・・・。

※追記:ごめんなさい。IE8以下は,私の技術では対応不能かもしれません。修行が足りませんね・・・。