レスポンシブデザインとは
画面サイズに応じてスタイルを切り替え、同一のHTML（コンテンツ）で複数のデバイス（PCやスマホ）に最適な表示を提供するデザイン手法です。
具体的には
<head>内に<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no”>のように「viewport」を宣言します。
スタイルシート内で@media only screen and (max-width : 780px) {〜}のように画面サイズに応じたスタイルを指定します。ここでは「最大幅が780px以下（タブレット）」の場合のスタイルを「〜」で指定しています。
通常、どのデバイスにも適用できるスタイルを書き、次にデバイスごとに切り替える部分を仕上げていきます。例えばこのサイトはPCで見れば2段組ですが、スマホの狭い画面で見るとヘッダ→本文→サイドバー→フッタ左・中・右という順に表示されます。これはスマホ用スタイルに「横並び指定を解除」という指定をしているからです。
なぜ今頃？
Googleが「4/21までにスマホ対応しないと検索順位を大幅に下げるよ！」と言ってきたからです。
一企業に振り回されるのも変な話ですが、検索順位対策（SEO：検索エンジン最適化）はたいへん重要ですのでしかたありません。SEOを除いて考えても、いつかはやるべきことです。逆に、せっつかれた今がチャンス！ということですね。
当サイトは、仕事を優先して対処していませんでした。
既存サイトのデザインポリシーを引き継いで
レスポンシブ化することも可能です。
基本的にはWordPressを用いたCMS化とともに行います。
どうぞご相談ください。
コメントする