グーグルのモバイル検索結果で上位に表示されるために--新基準への5つの対策

Nick Heath (TechRepublic) 翻訳校正: 川村インターナショナル 2015年05月07日 06時00分

  • このエントリーをはてなブックマークに追加

 Googleが先日、携帯電話上で検索結果に順位を付ける仕組みを変更した。

 Googleのアルゴリズムが変更されたことで、モバイルデバイス上での使用や閲覧が簡単にできるように最適化されていないサイトは、モバイル検索結果の順位が下がる可能性がある。

 Google検索の半数はモバイルデバイスから実行されている。同社は2月にこの変更を発表したとき、サイトの検索結果順位に「多大な影響」が及ぶと警告していた。

 Googleは、各サイトが同社のモバイルフレンドリーテストに合格したかどうかを確認できるツールを提供している。本記事では、このテストに合格するために採用すべきアプローチを紹介する。

リンクやボタンを近づけすぎない

 Googleは、リンクやボタンといったタップ可能な要素の位置が近すぎて、ユーザーが誤って別の要素をタップしてしまう可能性があると判断した場合、そのサイトを減点する。

 Googleはこの問題を回避するために、タップ可能な要素を大きめに作成するか、要素の周囲のスペースを広げることを推奨している。タップ可能な要素に触れるとき、ページ内の他のタップ可能な部分に指が重ならないようにするのが理想だ。

 同社のガイドラインによれば、成人の指の腹は幅約10mmだという。したがって、適切なモバイルビューポートが設定されたサイトでは、ボタンやリンクのタップターゲットを約48ピクセルにするといい。リンクやボタンをそれより小さくする必要がある場合は、その周囲32ピクセル以内に他のタップ可能な要素を配置しないようGoogleは提案している。

コンテンツの幅をスクリーンより広げない

 Googleはモバイルデバイス上での横スクロールバーを快く思っておらず、ページの幅をデバイスのスクリーン内に収めることを求めている。

 Googleは、テキストコンテナや画像コンテナの幅を設定する際、ピクセルのような固定値ではなく、パーセンテージのような相対値を使用するよう推奨している。さらに、絶対位置指定を使用したページに要素を配置するとき、大きな値を使わないように警告している。その要素が、画面上に表示される部分の外側に配置されてしまうことを避けるためだ。

 CSSメディアクエリを使えば、ウェブサイトの閲覧に使うデバイスのサイズに応じて、異なるレイアウトやスタイルをサイトに適用することができる。Googleは、CSSメディアクエリを初めて使用するユーザー向けに、「Web Fundamentals」ガイドを提供している。

プラグインはできるだけ使用しない

 大半のモバイルデバイスは、サードパーティーのテクノロジをブラウザで実行可能にするプラグインをサポートしない、とGoogleは仮定している。

 つまり、ページの表示に「Flash」「Silverlight」「Java」のプラグインが必要なウェブサイトは減点される可能性があるということだ。

 Googleは、それらの効果をブラウザベースのテクノロジを使って実装するように推奨している。参考までに、同社が代替技術として勧めているのは、HTML5の音声と動画高度なグラフィックスプレゼンテーション効果ネットワーク接続ローカルのストレージファイルへのアクセスだ。

ビューポート幅を指定する

 サイトのHTMLでビューポートを指定しておかないと、下のスクリーンショットのように、モバイルブラウザ上で表示されるページがデスクトップブラウザ向けページのようにレンダリングされてしまうことがある。

figure_1
提供:Google

 その結果、文字が読みにくくなり、ボタンなどのインタラクティブ要素をタップしにくくなる。

 Googleは、HTMLのヘッドでタグを使って、ビューポートをデバイスの幅に合わせて設定するようアドバイスしている。

文字を読みやすくする

 サイトの文字が小さすぎて、モバイルデバイスの画面で読みにくい場合、Googleはそのサイトを減点する。

 Googleは、文字のサイズを小さな画面でも読みやすいように拡大する効果的な手段として、先ほど紹介したビューポートをデバイスの幅にあわせて設定する手法を推奨している。

 フォントを適切に拡大できるようにするため、同社はページのボディでフォントサイズを16ピクセルに、行の高さを1.2emにそれぞれ設定し、テキストの残りの部分のサイズをベースサイズである16ピクセルの相対値に設定することを勧めている。たとえば、CSSで12ピクセルのフォントサイズ(ベースサイズの75%)を適用する「small」クラスセレクタと、20ピクセルのフォントサイズ(ベースサイズの125%)を適用する「large」クラスセレクタを作成する。

この記事は海外CBS Interactive発の記事を朝日インタラクティブが日本向けに編集したものです。

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

  • このエントリーをはてなブックマークに追加

この記事を読んだ方に

連載

CIO
デジタル“失敗学”
コンサルティング現場のカラクリ
Rethink Internet:インターネット再考
インシデントをもたらすヒューマンエラー
トランザクションの今昔物語
エリック松永のデジタルIQ道場
研究現場から見たAI
Fintechの正体
米ZDNet編集長Larryの独り言
大木豊成「仕事で使うアップルのトリセツ」
山本雅史「ハードから読み解くITトレンド放談」
田中克己「2020年のIT企業」
松岡功「一言もの申す」
松岡功「今週の明言」
内山悟志「IT部門はどこに向かうのか」
林 雅之「デジタル未来からの手紙」
谷川耕一「エンプラITならこれは知っとけ」
大河原克行「エンプラ徒然」
内製化とユーザー体験の関係
「プロジェクトマネジメント」の解き方
ITは「ひみつ道具」の夢を見る
セキュリティ
企業セキュリティの歩き方
サイバーセキュリティ未来考
ネットワークセキュリティの要諦
セキュリティの論点
スペシャル
ざっくりわかるSNSマーケティング入門
課題解決のためのUI/UX
誰もが開発者になる時代 ~業務システム開発の現場を行く~
「Windows 10」法人導入の手引き
ソフトウェア開発パラダイムの進化
エンタープライズトレンド
10の事情
座談会@ZDNet
Dr.津田のクラウドトップガン対談
Gartner Symposium
IBM World of Watson
de:code
Sapphire Now
VMworld
Microsoft WPC
Microsoft Connect()
HPE Discover
Oracle OpenWorld
Dell EMC World
AWS re:Invent
AWS Summit
PTC LiveWorx
吉田行男「より賢く活用するためのOSS最新動向」
古賀政純「Dockerがもたらすビジネス変革」
中国ビジネス四方山話
ベトナムでビジネス
日本株展望
企業決算
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]