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