表題の通りですが今更運営しているサイトをレスポンシブ化しました。
というかそもそも「モバイルフレンドリーではありません」とか出ててかなり放置状態だったので直すことにしました。
サイト自体は全然複雑なものではないので修正は簡単なのですが、あまりにも雑なデザインだったのでこれも設計し直しました。
再設計
対象は逆引きPHPというPHPの組み込み関数なんかの使い方を調べるサイトなんですが、ちょっと調べるためのものなので「シンプル＋見やすい」というのが設計の目標です。余計なものは排除して目標のものをすぐに見つけ出せるようにします。
今までサイドバーとメインカラムの２カラムでしたがシングルカラムに変更しました。
before after
以下この作業のポイントをあげてみました。
Google Analytics
アナリティクスを調べて見るとどうやらサイドバーにある目次はあまり使われていないようでした。
トップページ→目的のページ→トップページ→目的のページ
といった感じでサイドバーの目次はほぼ使われていないようでした。目次はこれ以上なんともしようがないのでサイドバーを排除し迷うことなくトップページへ戻ってもらうことにしまいた。
広告の置き場所
サイドバーがなくなってしまったので広告の置き場所がなくなってしまいました。そこで他のサイトでもよくある様にコンテンツの間に広告を配置することにしました。ついでにレスポンシブな広告を置くことでモバイルフレンドリーにしました。
画面幅
横幅が広すぎるとタイトルとコンテンツの位置がずれすぎておかしいので固定幅としました。ただしモバイル版では横の余白は無駄なので@mediaタグで余白を小さくしました。
項目ごとのタイトル
hrで項目を切っていたのですが無駄に画面を占有していると思ったので消しました。ただしこのままでは項目のタイトルが埋没してしまうので赤い下線を引いて目立たせました。さらにアイコンを置くことで目に飛び込みやすくしました。
フォント
フォントも変えました。SourceHanCodeJPという和文フォントを使用しています。フォントはプログラムをしていてもそうですがかなり印象を変えます。読者の読む気持ちに影響を与えると僕は考えています。今回は読みやすく柔らかいイメージのあるフォントを採用しました。もう少し太くして可読性をあげるべきか迷いましたが堅いイメージが大きくなるのでNormalなフォントよりさらに軽めのものにしています。
モバイルフレンドリーになった
無事モバイルフレンドリーになった様です。ただ検索結果ではまだモバイルフレンドリーではない記載があってテストページの「GOOGLEに送信」ボタンを押したらキューに追加したと出ていたので順番待ちのようです、もうしばらく様子をみます。
2018.5.23追記：「モバイルフレンドリーではありません」が消えてました！
あと黄色い警告が出ていてまだ問題がある様でしたが、広告用のスクリプトのところで警告になっているのでこれもしばらく様子をみます。
終わりに
とりあえずモバイル対応できましたがアクセス数が下がってしまう可能性もあるのでしばらく今のサイトを監視します。こういうのはやはり少しずつ変更していく方がSEO的には安全ですね。
フリーランスの仕事でも新しいページを作って欲しいというのがありますが、実際には今のサイトを少しずつ変更していった方が良いと個人的には思っています。ただコーディングしにくいのもあるので考えものですが。
それでは良いモバイルライフを！
