2015/04/21にスマホ対応したページを評価する「モバイルフレンドリーアップデート」が、Googleモバイル検索に導入されました。
検索結果で、スマートデバイス(スマートフォン)向けページがあるページがないページより優先的に上位に表示されるというものです。
詳しくはページ下の方にまとめてあります。
特定のページを(googleエンジンで)検索したとき、適切にスマートデバイス向けページへリダイレクトしていれば評価されるわけですが、スマートデバイス専用ページをPC向けとは別に用意できない場合は、PC向けページをスマートデバイスでも閲覧できるようにしておく必要があります。
そんな時に大活躍するのが、レスポンシブwebデザインです(既存ページの当座の対処としてはviewport等を調整する方が現実的かも・・・)。
このページでいう「モバイル」とは主に「スマートフォン」のことを指します。
レスポンシブデザイン、RWDと表記されることもあります。
画面の大きさによってレイアウトを自動的に変更するデザインのことです。
Javascriptなどを使ってデバイス(PCかスマフォかなど)を判別して、それぞれに最適化したhtmlファイル(+cssファイル等)を振り分けるのではなく、一つのhtmlファイルで複数種類のデバイスに対応(汎用化)することができます。
metaタグのname属性viewportを使ってページのサイズや縮尺をデバイスの幅に合わせてどう調整すべきか設定し、cssメディアクエリを使って画面の幅ごとのデザインを適用させるのが一般的です。
レスポンシブwebデザインの詳細や具体的な作り方などは以下のリンクを参照してください。
トレンドは変化しているので、都度google先生も訊いてみてください。
最後にグリッドシステムに絡んだ情報のリンクも掲載しましたが、レスポンシブwebデザインに直接は関係ないものの、グリッドシステムについても(コーディングの観点から)知識を深めておくと役に立つかもしれません。
ちなみにレスポンシブwebデザインでHTMLページを制作するのにHTML5やCSS3を使わなくてはならないということではありません。念のため。
webページの制作会社でクライアントのページを制作している場合と、自社サイトを内製している場合では、コストの考え方は微妙に違ってくると思います。
なので、結局、臨機応変というか、場合によりけりなのですが、制作コスト・管理コストで考えるとレスポンシブwebデザインが絶対的に有利とはいえません。
(ほぼ)同じコンテンツをPCとスマートデバイス両方で閲覧できるという前提ならば、HTMLファイルを一つで済ませるレスポンシブwebデザインはリソース的にはコストが少なくすみます。
たとえば、テキスト修正だけでも二つ(以上)のファイルを修正しなくても良い分、修正漏れなどのリスクも少なく、制作コストも管理コストも少なくて済むように見えます。
が、実際に運営してみると最初の設計(デザイン)が甘かったりして、細かいところでストレスがかかってくるのが実際です。
当初はPCもスマートデバイスも全く同じコンテンツを見せるという仕様だったのに、この内容はPCのみ、こっちはスマートデバイスのみ・・・という前提をひっくり返すような仕様変更をさらっとされるのが現実ですし、結局のところ、定型的なデザインの箇所であっても、都度マイナーチェンジが必要になって、毎回クロスブラウザチェックに加えてデバイスチェックも必要になることが多々あります。
意外と制作側のコスト(工数)は差がないのでは・・・とがっくりくるかもしれないことは覚悟して導入した方が良いです。
また、このページもかろうじてレスポンシブwebデザインを導入していますが、ご覧のように文章が多いです。これを小さな画面で読もうとすると見にくいと思います。
つまり、コンテンツによっては、ボタンのサイズや行間といった見た目や使い勝手のデザインのほかに、スマートデバイスでも読みやすい文章に構成するなどといった情報デザイン(コンテンツデザイン)が必要になってきます。
それを踏まえての仕様作成、設計、デザインの考え方(モバイルファースト)が重要になってきます。・・・これが結構労力(コスト)がかかります。
運用が始まってからの修正は手間がかかることが多いので、あとで変更なんか必要ないぐらいに最初の設計・デザインをしっかり行うことが重要です(これにはPCでもスマートデバイスでも読みやすくするための文章づくりのルールやスマートデバイスでのスクロールやタップ等が多すぎないような操作ルールなどの策定も含まれます)。
(レスポンシブwebデザインでなくてもそうなんですが)実際の運用を始める前に動作テストおよびクロスブラウザチェック・デバイスチェックをがっつり行うこと、仕様変更はしっかり手順を踏んで(デザイン・開発などにちゃんと根回しして)、テストの時間もしっかり確保して行うことを、運営さん側にも理解してもらうことが重要です。
なお、レスポンシブwebデザインに直接関係ないですが、OS・ブラウザ(およびそれらのバージョン)、デバイスによる動作・表示の差異の許容範囲をあらかじめ共通認識として共有しておくと、つまならない後戻り処理が少なくなると思います(例えば「汎用的なスマートデバイスでもtext-shadowが表示されない環境があるのを許容範囲と認識してないテスターがやたらしつこく改善の要求をしてくること=コスト」が減るかもしれません)。
組織にしても個人にしても(一般的な知識とは違った意味で)ノウハウを蓄積するには、時間がかかります。・・・ということを理解して導入しましょう。
そして、本当にレスポンシブwebデザインが最適なのか、制作コスト・管理(運用)コストの視点だけでなく、そのコンテンツの特性を踏まえてユーザーにとってはどうなのかという視点でも考慮して、ベストな方法を選択してください。
そんなわけで、あとで変更なんか必要ないぐらいに最初の設計・デザインをしっかり行うために、モバイルファーストという考え方があります。
字面だけみると、モバイル向けの設計やデザインを先にやったら、PC向けの設計・デザインも楽になるよぐらいな感じなのですが、突き詰めるとモバイル前提というよりはユーザーの導線や使いやすさということを前提に設計するってことです。
いろいろ調べてみると「モバイルファーストとは、お客さまのニーズへの最適化」らしいですよ。・・・「ユーザーファースト」って言ってくれればいいのにね。
端的に言うとスマートデバイス(主にスマートフォン)向けに最適化されているかどうかということなのですが、googlebotによって条件を満たしたページと判断された場合は、[スマホ対応] ラベルが適用されるようです。
そして、スマートデバイス向けに最適化されている(たとえばレスポンシブwebデザイン等でスマートデバイスでも快適に表示されるようになっているとか、スマートデバイス向けページへリダイレクトされるなどの対応がされている)ページは、そうでないページより検索結果が上位に表示されるようです。
詳細は以下のページを参考にしてください。
2015/05/11現在、世間的に検索結果に目立った変化はないようですが、新しいアルゴリズムのもとで再評価されていないページがあるため、検索順位にまだ反映されていないということらしいので、数か月先には対処を具体的に考える必要も出てくるかもしれません。
理想としては、PC向けページとは別にモバイル向けを用意し適切な方法でリダイレクトを設定しておくか、レスポンシwebブデザインを導入して同一ページでモバイルでも最適にみられるようにすると良いのですが、日常業務に追われて、すぐにはそんなことやってられないと思うので、まずはモバイル フレンドリー テストで、モバイル向けに最適化されているかどうか確認してください。
チェック項目は以下の4つらしいです。
もし、チェックツールでダメ出しされたら、とりあえずviewportを何とかしてください。これがたぶん、一番手っ取り早いです(とはいえgoogle先生はレスポンシwebブデザインがお好みのご様子)。
viewportをどうにかすると、サイト全体が表示崩れを起こしたりしやすいと思うので、細心の注意が必要です。
あとは、モバイルの場合のページ全体の幅の指定とフォントサイズを調整すれば何とかなる可能性があります。
なお、google先生の気分次第でこのあたりの仕様は突然変更されると思うので、昨日大丈夫でも今日はダメってこともあり得ます。
もちろん、モバイルフレンドリーの対策をとったからと言って、それだけでSEO対策は完結ではないので注意してください。