はじめまして。技術小僧のジョーです。現在入社3ヶ月目、学ぶことが多すぎてパンク気味です。これから、技術サイドの話は僕からお届けします。見習い小僧×技術小僧企画の記念すべき第一弾として、小僧ブログでスマートフォン対応を実現しようということになりました。
スマートフォン最適化の方法ですが、大別すると①別途スマホ用のサイトを１から作る②プラグインでパパッと最適化する③レスポンシブデザインを適用するの3つに絞られるかと思います。①の方法だと『最適化』とは言えず、またWordPressを使用したブログということもあって、運用の煩雑さからも今回の課題には適していません。一方、現状の小僧ブログでは、スマートフォン対応に②の方法を利用しています。
これはWordPressのスマートフォン最適化用のプラグインを使用していて、制作の手間もかからずとってもラクチンです。しかし、このプラグインで自動生成したスマホ用サイトでは、確かにスマホサイトらしいUI（ユーザーインターフェース）にはなりますが、元々あったデザインはほとんど活かされていません。PC版に登場する愛くるしい小僧アイコン等のデザインが無いなんて！モッタイナイ！！もちろん、スマートフォン最適化プラグインの中にはよりPCデザインに近づけてくれるものもあります。しかしプラグインによってスマホに最適化されたデザインは、ほとんどがプラグイン独自のUIを組み込むものです。今回の場合は、元々のシンプルなデザインをスマートフォンでもほとんど完全に継承しつつ、なおかつスマートフォンの画面幅に最適なサイズで表示したいということなので、選択肢は③レスポンシブデザインに絞られます。
それでは、レスポンシブとは一体全体何なのかと誤解を恐れずに言いますと、『1つのHTMLファイルに対して、画面幅に応じて複数のデザイン(CSS)を適用する』ということです。『画面幅に応じて』というところがキモです。サイトのウィンドウサイズを変更すると、レイアウトががらっと変わる、あれです。
上に出したのが先日ブログでもお伝えした『ARです蚊？』アプリのサイトです。ウィンドウサイズをガンガン変えてみてください。（IE9未満は非対応）いかがでしょうか。5段階ほどカクカクっとレイアウトが変わるのをご覧いただけたかと思います。いずれのサイズにおいても横スクロールバーが出ないので、スマートフォンの小さな画面であっても縦方向のスクロールだけでサイトの全体を閲覧することができますね。これがレスポンシブデザインです。
というわけで、『見習い小僧×技術小僧 企画第一弾』のスマホ対応ミッションは、小僧ブログのレスポンシブデザイン化という方法でクリアしていこうと思います。また次回からは実際に小僧ブログを段階的に設計＆コーディングしていく予定なので、乞うご期待です！
■おすすめ記事
紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選
