Googleモバイルフレンドリーに対応しよう！ダメなレスポンシブWebデザインから卒業するために知っておきたいことがよく分かるオススメの本

マルチデバイス対応のWebページを制作する際、何を参考にしていますか？
他のWebページがどのように実践しているか参考にしたり、実機でレイアウトを試したり、レスポンシブのツールを使ったり、いろいろあると思います。

去年の暮れにGoogleはモバイルガイドをリリースしました。当然これは2015年4月から導入されたモバイル検索のランキングに繋がり、マルチデバイスに対応するための初めての指標とも言えます。

本書はGoogleの「モバイルガイド」「モバイルフレンドリーテスト」「PageSpeed Insights」を軸に、Webサイトをマルチデバイス対応にするための「それが知りたかった！」「どうやって実装するの？」という必要な知識やテクニックがしっかり学べる一冊です。

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

マルチデバイス対応にする際、考えなければならないポイントは多岐に渡ります。一つひとつを確実にマスターしていきましょう。

各ポイントごとにすぐに使える実装サンプルがコードとともに詳しく解説されており、アイデアとなる実例も豊富に掲載されています。
コードは全てサポートサイトからダウンロードできます。

チートシートやデータ的な情報も充実！

データも単なる数字であればWebで調べれば簡単に見つかるかもしれませんが、その数字の意味すること、どのように役立てるかといった補足的な情報が一味異なります。

一つのことをするのには、さまざまな方法があります。例えばデバイスに合ったページを提供するためには、レスポンシブWebデザイン、UAによるページの振り分け、UAによる動的配信など、各アプローチのやり方・利点・欠点など、実装方法だけでなく検討の際の判断材料にもなるでしょう。

レスポンシブを採用した際に大切なのは、デバイスごとにどのようにレイアウトを適用させるか。

基本的なものから、BootstrapやFoundationといったフレームワークをはじめ、

2014年9月にレスポンシブ対応となったAppleの公式サイトなど、実際の例を見て参考にするのもよいでしょう。

技術の進化は早いです。これから先利用するであろうCSS4などの情報も掲載されており、ワクワクしますね。

もちろん、今使える技術もばっちりです。

レイアウトの基本構造、マルチデバイス向けのテキストや画像、リンクやボタンなどのタップターゲットなど、ページを構成する各パーツをデバイスに合った形で表示するデザインや実装は後半から。

まずは、レイアウトの基本構造。
段組みのさまざまなバリエーションごとにその仕組みと実装方法が数多く掲載されています。

段組みの数やサイズを変えるだけでなく、マージンを使ったりなどの実用的なテクニックが役立ちます。

画像も単に異なるサイズのものを用意するだけでなく、拡大や縮小、トリミング、背景として使う画像など、いろいろな方法があります。

モバイル フレンドリーを考えた際に大切なのは、タップターゲットの設定。十分な大きさを確保し、タップのミスが発生しないようサイズや間隔をデザインすることが求められています。

ページのパフォーマンスも重要視されるポイントです。現在のページにどのような問題点があり、それがなぜ起きているのか、どうやって改善させるのか、表示速度改善が可能なポイントをチェックし、実行してみましょう。

パフォーマンスとかよく分からない、という人でも大丈夫。Googleデベロッパーツールの基本的な使い方からデータのどこを見て、どのような判断ができるのか初心者でも分かりやすく解説されています。

「ファーストビューのCSSをインライン化」、最近多くのサイトで利用されてきているテクニックですね。

マルチデバイス対応サイト構築の目次

1. マルチデバイス対応の指標

   マルチデバイスに対応したページを作成するときの指標

   マルチデバイス対応のために必要な設定

2. ビューポートの設定

   ビューポートの設定を行う

   ビューポートの設定をしたときのページの表示範囲の大きさ

3. デバイスに合ったページの用意

   デバイスに合ったページを用意する

   セパレートURLでデバイスに合ったページを用意する

   動的配信でデバイスに合ったページを配信する

   レスポンシブWebデザインでデバイスに合ったデザインを用意する

   3種類の方法を組み合わせて利用する

   さまざまなデバイスでの表示を確認する

4. デバイスの判定

   デバイスの判定

   CSSのメディアクエリでデバイスの特性を判別する

   CSSOMのメディアクエリでデバイスの特性を判別する

   メディアクエリで判別できる特性

   メディアクエリで判別できるメディアタイプ

   JavaScriptで特性の値を取得する

   ユーザエージェントでデバイスの種類を判別する

   ブラウザの対応機能を判別する

5. パーツのマルチデバイス対応

   パーツの作成

   レイアウトの基本構造

   テキスト

   画像

   ビデオ

   タップターゲット

6. 画像の最適化

   画像のクオリティを維持しつつデータ量を削減する

   画像を最適化&再圧縮する

   レスポンシブイメージを利用する

   SVGを利用する

   Webフォントやアイコンフォントを利用する

   CSSで作成したパーツを利用する

7. Webページの高速化

   Webページの表示の仕組みと高速化

   リソースのデータ量をミニファイ処理で削減する

   HTTP圧縮を利用する

   ブラウザキャッシュを利用する

   ファイルを一つにまとめてHTTPリクエストを減らす

   レンダリングブロックを排除する

   コンテンツの優先順位を調整する

本書のリリースは正に、Googleの「モバイル フレンドリー アップデートを開始します (2015年4月21日)」宣言にどんぴしゃのタイミングで、当ブログも諸般の事情でモバイル対応はしていませんでしたが、これを機に取り入れようと思っています。

マルチデバイスにする際に、知りたかったこと必要なテクニックが網羅されており、これからの「標準」としてマスターしておきたいことがしっかり学べます。

献本の御礼

最後に、献本いただいたマイナビの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス