超カンタン！ホームページをモバイルフレンドリーに対応する3ステップ
2015/09/24
簡単・シンプル・使いやすい！月間100万人が使うブログサービス【JUGEM】
Googleアルゴリズムのモバイルフレンドリー対応が始まって1週間が経過しましたが、担当Webサイトのモバイル対応はお済でしょうか？
モバイルフレンドリーに関する詳しいことは「ウェブマスター向けモバイルガイド＿https://developers.google.com/webmasters/mobile-sites/?hl=ja」より確認してもらうとして、以下に、モバイル対応が完了していないWebサイト担当者さんの苦労をサポートできればと少しばかりのアドバイスをさせていただきます。
こんな気苦労がありませんか？
Googleがモバイルフレンドリーのアナウンスを出したのが2月の下旬、（Googleウェブマスター向け公式ブログ）その時点から、現段階で対応が取れていないということは、
- 「クライアントや上層部の承認がおりない」
- 「予算が確保できない」
- 「対応に掛かる工程、費用が膨大だ」
などが要因ではないかと推測します。
なかでも「クライアントや上層部の承認がおりない」については、ひたすら内容を説明し、理解してもらうしか方法はない（実際のアクセス数が低下することを除けば）のでしょうが、その他２つの境遇の担当者に関しては、解決の方向性を提案できるかもしれません。
モバイル化の種類とメリット/デメリットを理解する
モバイルフレンドリー対応としての手法は、大きく2種類あります。
- アクセス端末の情報を取得し、指定の画面サイズ以下であればモバイル用CSSを読みこませる
- アクセス端末の情報を取得し、指定の画面サイズ以下であればモバイル用サイトへジャンプさせる
１の方法は、一般的に「レスポンシブデザイン」と呼ばれるものの手法であり、1つのソースでモバイルとPCを振り分けられるので、更新作業などの管理運営が容易に行えるメリットがあります。デメリットとしては、PCとモバイルのHTMLが共通であることから、デザイン・レイアウトの自由度が少ないことがあげられます。
２の方法は、上記とは全く逆のメリット･デメリットを持っているので、この2種は相互関係にあるといえるでしょう。（２の方法の代表的なホームページとしては「Yahoo!JAPAN」があげられます。PCでもモバイルでも大変見やすく親しみ易いUIとなっています。）
どちらを選ぶかは、そのホームページの特性や管理体制などによって変わってくると思いますが、中小規模のホームページ（特に、今回のような状況でお悩みのホームページ担当者の多く）では、レスポンシブデザインをチョイスしたいところでしょう。
レスポンシブデザインのミニマム手法
ステップ１
さて、レスポンシブデザインを選ぶとして、既存のホームページをモバイルフレンドリーに対応するにあたり、初めに確認しなければならないことはHTML＋CSSでW3Cの規定に則り、文書が正しくマークアップされたものであるかどうかということ。
先にも記載しましたが、レスポンシブデザインはHTMLは共通でCSSを切り替えることでPCとモバイルの両方を表現する手法のため、正しくマークアップできていなければ、そもそも論になってしまいますのでご注意を。
ステップ2
次に情報の精査を行います。ここでいう精査は、モバイル表示として掲載する情報の範囲を決めることでもあります。
先に記載した、モバイルフレンドリー対応が進んでいない現状として、情報量の多さによる、期間（時間）と費用が問題となっている場合、まずはフェーズを分けることで、優先順位を決めて公開情報を決めるべきです。
優先順位の決め方の例としては、アクセスログからランディングページとなっているコンテンツ、およびトップページ、問い合わせなどのコンバージョンに直結するページなどが最優先となります。
あなたのホームページにとって最小限の情報をセレクトすることになりますが、全てのページでフォーマット化されており、CSS記述の変更で大部分のページレイアウトが変更可能であれば、大雑把に情報セレクトしておけば良いでしょう
ステップ３
FireFoxアドオン「Web Developer」でモバイル原案を作る
セレクトした情報をモバイル用にリデザインするにあたり、該当ページの素（ベース）情報を把握します。つまり、PC用にデザイン・レイアウトされている装飾物を全てカットし、必要でないものを全てそぎ落とします。
これにより、最小限必要なものが見えてくることになり、それに基にリデザイン・レイアウトしやすくなります。
そのため、HTMLの記述からCSSを削除する作業を行うことになりますが、FireFoxブラウザのアドオン「Web Develpoer」を使用するとその作業時間が大幅に短縮できます。
アドオンを有効化し「全てのCSSを無効化」を選択すると、（画面はツールバーにアドオンを表示させた状態）
設定されたCSSが無効化され、視覚的な効果を狙っていた装飾のいっさいがカットされ、最小限の素（ベース）情報だけが表示されます。
あとは、これらの記載内容を基にモバイル原案を起こし、モバイル用にデザイン（id, class等は流用）したCSSを読み込めば完了です。
あくまでもミニマムなモバイル対応ではありますが、この考え方は規模の違いこそあれど、サイトリニューアルやランディングページ作成などにも役立つ手法ですので、覚えておくとなにかと重宝します。是非、お試しください。
