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

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

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

本のキャプチャ

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

本のキャプチャ

これからの「標準」を学ぶ
マルチデバイス対応サイト構築
[Amazonでみる]
[楽天でみる]

著:
エ・ビスコム・テック・ラボ
出版社:
マイナビ
発売日:
2015/4/23

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

データも単なる数字であれば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日)」宣言にどんぴしゃのタイミングで、当ブログも諸般の事情でモバイル対応はしていませんでしたが、これを機に取り入れようと思っています。

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

本のキャプチャ

これからの「標準」を学ぶ
マルチデバイス対応サイト構築
[Amazonでみる]
[楽天でみる]

著:
エ・ビスコム・テック・ラボ
出版社:
マイナビ
発売日:
2015/4/23

献本の御礼

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

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

top of page

©2017 coliss