サイトにレスポンシブウェブデザインを採用しました

私のサイトをレスポンシブウェブデザインにしました。
何かと言うと、パソコンでもタブレットでもスマホでも、どのデバイスで閲覧してもサイトのレイアウトが自動的に調整（主に横スクロールが発生しないように）されるというものです。


PC用




タブレット用




スマートフォン用




だいぶ前から、PC以外のデバイスからのアクセスが増えていたので、いつかやらなきゃな～とはずっと思っていたのですが、そんなにパパッと簡単にできるものではないのでズルズルと先延ばしにしていたところ、先日、googleから「対応してください」的なメールがきたので重い腰を上げました。



実際に着手してみると、もともとサイトのレイアウトをcssで行っていたため、htmlの方にはそれほど修正をかけずにすんだのですが、それでも動画や問合せフォームの対応などにはけっこう頭を使いました。

そんなこんなでなんとか1週間程度で完了した（と思う）のですが、動作確認は自分が持っているデバイスのみでしか行っていないので、何かの機種で見たらレイアウトがガタガタになっているかもしれないのが気になるところ。
しかし、個人運営の限界ということで本日公開に踏み切りました。

一応、googleのモバイルフレンドリーテストをしたところ、「問題ありません。 このページはモバイル フレンドリーです。」という診断結果を得たのでソース的にはクリアしたということでしょう。




対応してないとこのような診断をされる↓




これからも微調整が必要かと思いますが、とりあえず肩の荷が下りた気分です。
モバイル対応についてはgoogleがコンテンツを公開しているので、これからやってみようという方は参考にしてはいかがでしょう。


↓この記事がお気に召したらソーシャルで共有してくれると嬉しいです↓
（ボタンは記事の一番下）