データ ハイライター を利用して、イベント情報を Google 検索に表示させよう

Google ではより便利な検索結果を提供するため、構造化データの活用にますます力を入れています。たとえば、ユーザーが検索結果上でコンテンツを見つけやすいよう、リッチ スニペット などを提供しています。
これまでは、サイトの HTML コードをマークアップする方法しか、Google に構造化データを提供する方法はありませんでした。しかし、ウェブサイトによってはマークアップするのが難しい場合があります。
そこで、Google は、HTML コードを変更する必要がない簡単な方法として、「データ ハイライター」をウェブマスターの皆さまに提供します(英語では既に提供していましたが、この度日本語での提供を開始しました)。現時点では、対応する構造化データはイベント(コンサートやスポーツ イベント、展覧会、ショー、お祭りなど)のみとなっていますが、今後、他のデータ タイプにも対応していく予定です。 データ ハイライターは、HTML コードを変更する必要はなく、クリックするだけで操作できる簡単なツールです。Google ウェブマスター ツールにおいて適切な権限をもっている方であれば、どなたでも使用できます。使い方は、ウェブサイト内にあるイベント情報の載ったページ上で、主要なデータを 1 つ 1 つマウスで選択しハイライトしてタグ付けをするだけです。


複数のイベントを一定の形式で掲載しているページであれば、皆さんがタグ付けしていくうちに、データ ハイライターはその形式を学習し、追加すべきタグの候補を自動的に表示するので、作業のスピードアップが図れます。同様に、一定の形式で書かれたイベント情報が複数ページに渡る場合も、いくつかのページに対してタグ付けを行うと、データ ハイライターは形式の種類を学習し、タグの候補を表示します。通常、手動で 5~10 ページ分のタグ付けをすれば、Google の高度な機械学習アルゴリズムは、サイト内の他の似たページも認識できるようになります。
作業が終わったら、データ ハイライターが現在認識しているすべてのイベント データのサンプルを確認できます。それが正しければ「公開」をクリックします。

それ以降、Google はサイトをクロールしたときに最新版のイベント リストを認識し、それを検索結果の表示対象にします。クロールされたデータは、構造化データ ダッシュボード から調べることができます。クロールされたデータはいつでも確認でき、また、公開を取り消すことができます。

以下の、操作手順を説明する動画をご覧ください。



データ ハイライターの使用を開始するには、ウェブマスター ツール にアクセスしてご自分のサイトを選択し、左のサイドバーにある「最適化」リンクをクリックし、続いて「データ ハイライター」をクリックします。

この記事に関するご質問がありましたら、ヘルプ センターの記事 をお読みいただくか、ウェブマスター ヘルプフォーラム にてお尋ねください。データ ハイライターをぜひご活用ください。

ウェブマスター ハングアウト、始まりました!

Google はこの度、ウェブマスターのみなさまをサポートする新しいチャネルとして、Google+ のビデオチャット機能であるハングアウトを利用したウェブマスター ハングアウトを開始しました。毎回トピックを設定し、事前に質問を集めるなど、みなさまにとって利用しやすいように、そしてより深いサポートができるような内容にしたいと思います。

初回のウェブマスター ハングアウトは、トップレベル ユーザー の皆さんにも参加していただき、2013 年 2 月 6 日に行いました。当日の様子は こちらの動画 でご覧いただけますので、ぜひご確認ください(既に 1000 人以上の方々にご覧頂いています!)。



次回のウェブマスター ハングアウトは、2013 年 3 月 6 日に行います。テーマは再審査リクエストです。以前にもブログ(再審査リクエストを送信する際にご確認いただきたいこと再審査リクエストへの回答が、より具体的になりました)や、フォーラム(Google 社員によるウェブマスターの豆知識: 再審査リクエストにまつわる誤解 Part 1Part 2Part 3)で再審査リクエストについてはいろいろご案内しておりますが、ここでは基本的な流れや書き方のポイント、そしてみなさんからのご質問に回答したいと思います。質問方法や、詳しい参加方法につきましては、こちら をご覧ください。

今後のウェブマスター ハングアウトの告知は、ウェブマスター ヘルプフォーラム、Google+ の Google Japan for Business アカウント を通じて行われます。ぜひチェックしていてください。

それではハングアウトでお会いしましょう!


行政機関のウェブマスターのみなさまからの質問を受けて

市町村や都道府県、そして国といった行政機関のウェブサイトがきちんと表示されることは Google 検索にとっても非常に重要なことです。例えば、行政機関はたくさんのコンテンツをサイト上で提供していますが、その多くは市民にとって重要な情報源となっています。Google で行われる検索のうち、およそ 20 % が地域に関連する情報ですが (英語)、地方自治体はまさにそのような地域に関連する情報のエキスパートと言えるでしょう。

こうした理由から、私はこの数年 National Association of Government Webmasters (NAGW) の全国会議でお話してきました。ウェブマスターの方と検索について話をするのはいつも大変興味深いもので、行政機関のサイトを運営する方とお話すると、特有の悩みや質問があることがわかります。今回は、行政機関のウェブマスターの方との会話の中でよく話題に上がる質問と、それに対する Google の回答をご紹介したいと思います。

質問 1: 検索結果や Google マップ上に表記されている電話番号や住所が間違えている時、どうすれば修正できますか?


行政機関のウェブマスターの方は、その機関のウェブサイトの運営だけでも膨大な作業量がありますが、その他にも、ウェブ上での他の問題を解決するように求められるそうです。その中で圧倒的によく聞かれる問題は、検索結果上に表示されている誤った電話番号や住所をどうすれば修正できるのか、というものです。この修正方法については Google プレイス においてリスティングの管理者権限を得ることで、電話番号や住所などの情報をご自身で修正したり追加したりすることが可能になります。

Google マップ上の多くのロケーション(オフィス、公園、ランドマークなど)は、Google+ ローカルのページ を持っています。例えば、 San Francisco Main Library の Google+ ローカル ページには連絡先や開館時間の他、ユーザーからのレビューや写真など、ユーザーが楽しめる要素も掲載されています。もし検索ユーザーがサンフランシスコの図書館を探していると思われる場合、関連する地図とこのリスティングが表示されれば、ユーザーがほしい情報にたどり着くのに役立つでしょう。

もし政府機関にお勤めで、このリスティングの編集を希望される場合は、サイトと同じドメインの E メール アドレスをもとに共有の Google アカウントを利用されることをおすすめします。なお、リスティング ページのオーナー確認は、基本的に電話やハガキにて行われます。


質問 2: 私たちのオフィスのリスティング情報は追加したのですが、他に追加をしたい公共施設(図書館や公民館など)のリスティング情報が 43 件もあります。どのように追加すればいいですか?


10 件以上のリスティング情報や住所がある場合、スプレッドシート ファイルを利用して、一括でアップロードすることが可能です。http://www.google.co.jp/places/ にログインし、電話番号入力画面で [一括アップロード] をクリックするか、リスティング ダッシュボードで [データ ファイルをアップロード] をクリックすると、スプレッドシート アップロード画面に切り替わります。

オーナー確認でお困りの場合は、こちらの トラブル シューティングのページ をご参照ください。


質問 3: .go.jp ドメイン から .co.jp ドメインへの移行を予定しています。どのような手順を踏めばいいですか?


詳しい情報は こちらのヘルプ記事 でご案内していますが、基本的なプロセスには以下のステップが含まれます。

  • 新旧両方のドメインが同じウェブマスター ツールのアカウント上に追加されているか確認してください。
  • すべてのページに 301 リダイレクト を設定し、検索エンジンにサイトが完全に移転したことを伝えてください。
  • 古いサイトのすべてのページを移転先のサイトのホームページにだけリダイレクトさせるような設定はしないでください。ユーザー エクスペリエンスに悪影響を与えます。
  • 以前のサイトと新しいサイトのページが 1 対 1 で対応しない場合(対応させることをおすすめします)は、以前のサイトの各ページをコンテンツが類似している新しいページにリダイレクトするようにしてください。
  • リダイレクト設定ができない場合、クロスドメインでの canonical リンク の利用を検討してみてください。
  • 移転先が Googlebot によってクロール可能な状態にあるか、ウェブマスター ツールの Fetch as Google 機能を利用して確かめてください。
  • ウェブマスター ツールの アドレス変更ツール を使い、Google にサイトが移転したことを通知してください。
  • サイトへのリンク ページを確認し、古いサイトのコンテンツにリンクをしている重要なサイトのウェブマスターにサイトの移転を伝えましょう。
  • コンテンツや URL 構造、ナビゲーションを大幅に更新するなど、サイト移転と同時に他にも大きな変更を行うことは避けることをおすすめします。
  • Google が新しい URL を早く見つけ出すことができるように、Fetch as Google 機能を使って URL を送信してください。また、新しいサイトの URL を網羅したサイトマップの送信も行ってください。
  • 混乱を避けるため、できるだけ長い期間(少なくとも 180 日間)古いサイトのドメインの管理権限とリダイレクトの設定を維持してください。

  • サイトの一部を移転する場合はどうしたらいいでしょうか?この質問もよくお受けします。例えばある市のサイトにあった観光情報のセクションだけを新しい独自ドメインに移動したい、といったケースです。

    こうしたケースでも新旧両サイトのウェブマスター ツールへの登録、301 リダイレクトの使用、古いサイトへのリンクの整理など多くのステップは共通します。しかし、サイトの部分的な移転となりますので、ウェブマスター ツールのアドレス変更ツールを使う必要はありません。もし何らかの理由で、部分的にでも同じコンテンツを両方のサイトで掲載する必要がある場合は、クロスドメインでの canonical 設定 を行い、どちらか一方を canonical 指定しください。


    質問 4: たくさんの作業を経て、各ページの内容に合ったタイトルやメタ ディスクリプションを個別に設定したのですが、これが Google 検索上にきちんと表示されるにはどうしたらよいでしょうか?


    各ページの内容に合ったタイトルやメタ ディスクリプションの設定は Google 検索エンジン最適化(SEO)スターターガイド でもおすすめしていますので、そうした作業を進められるのはとても嬉しく、検索エンジンと相性の良いサイトを運営する上でも重要です。適切なサイトのタイトルと説明 は、検索ユーザーが、どのページに探している情報があるか検討し検索結果をクリックする上で役立ちます。ちなみに、私がお会いした行政機関のウェブマスターの方々は、サイトのコンテンツや構成に十分な注意を払い、またユーザーにとってわかりやすいタイトルや説明の設定に努めていました。

    Google 検索でのページ タイトルと説明(スニペット)の生成は完全に自動化されており、ページのコンテンツとウェブ上での言及のされ方の両方に基づいて行われています。サイトに変更があるとそれは再クロール時に検知されますが、それ以外に Google 側にページの変更を伝える方法が 2 つあります。

    • 最新の XML サイトマップ を送信するとサイト上のすべてのページについて Google が把握できます。
    • ウェブマスター ツール上の Fetch as Google 機能を使って変更のあったページの URL を Google に伝え、URL をインデックスに送信する ことができます。
    • URL とそのページからリンクされているすべてのページを送信することも可能です。例えばサイト内のあるセクションをすべて更新した場合、そのセクションのメインとなるページや index ページの URL をこの方法で送信すると、セクション内のページを網羅的に伝えることができます。

    質問 5: 行政機関向けの YouTube パートナー プログラムにはどのように申し込むことができますか?


    このご質問には、残念なニュースと良いニュース、そしてさらに良いニュースがあります。まず、行政機関向けの YouTube パートナー プログラム は残念ながら終了となりました。しかし、このプログラムで提供していた機能の多くは、現在一般の YouTube アカウントでも利用することができますのでご安心ください。例えば、今は一般アカウントでも 10 分以上の動画をアップロードすることができます。
    そして、「さらに良いニュース」をご紹介しましょう。YouTube では最近、行政機関の方々にも役立つと思われる機能をたくさん追加しています。


    ここでご紹介した情報が皆さまのお役に立つことを願っていますが、行政機関の方々が知りたい内容のすべてをカバーできてはいないと思います。さらに知りたいことがありましたら、 Webmaster Academy (英語) をご参照ください。検索エンジンと相性の良いサイトの作成や運営について学ぶことができます。また、具体的な質問がありましたら、ウェブマスター ヘルプ フォーラム までお寄せください。

    新しくなった画像検索 – ウェブマスターの皆さまへのポイント

    Google で画像を検索するとき、画像とメタ データ(画像に関する詳細情報)の両方を見ながらたくさんの画像に目を通したいと思うユーザーの方が多いかと思います。検索ユーザーとウェブマスターの双方からのご意見をもとに、今まで以上に優れた検索体験を提供するため、Google 画像検索のデザインを改良しました。具体的には、検索結果にパネルを挿入し、そこに選択した画像を表示することにより、これまでよりも速く、美しく、信頼性の高い検索結果ページとなりました。パネル上に表示される画像は、キーボード(←→)を使って素早く切り替えることができます。また、他の結果画像の閲覧に戻りたいときは、そこから下にスクロールすれば続きを見ることができます。


    ウェブマスターの皆さんに知っておいて頂きたい変更点をご紹介します。
    • 従来のように別のランディング ページへユーザーをリダイレクトする代わりに、これからは検索結果の画像のすぐ下に、画像に関する詳細情報(メタ データ)を表示します。 画像が含まれているページのタイトル、ドメイン名、および画像サイズといった主要な情報を画像の横に見やすく表示します。
    • ドメイン名をクリック可能にしたことに加え、元の画像が載っているページを訪れるための新しいボタンも追加しました。つまり、クリックして元の画像の載っているページへ移動できる箇所が、これまでの 2 つから 4 つに増えます。Google で実施したテストでは、これによりクリックが増加する傾向が認められました。
    • 元の画像のページを iframe に読み込んで詳細画像の背景に表示することはなくなります。これにより、ユーザーに対してより速い検索体験を提供することができ、また、元の画像があるサイトのサーバーへの負荷を減らし、さらにウェブマスターが利用するページ ビューなどのデータの精度を高めることもできます。画像検索クエリ データは従来通り、ウェブマスター ツールの 上位の検索クエリ で確認できます。
    ご質問がありましたら、ウェブマスター ヘルプ フォーラム までお寄せください。

    関連ブログ記事(Google Japan Blog) : 画像検索が新しくなりました

    あなたのサイトは大丈夫?身近に潜むハッキングの危険とその対策

    サイトがハッキングされることは悩ましい問題で、Google はハッキングされたサイトのウェブマスターの方々がサイトをクリーンにし、2 度とハッキングされないように整備することへのサポートを、できる限りしたいと考えています。このブログ記事では、よく見られる 2 種類のハッキングの手法について解説し、さらにハッキングされた際の解決方法や参考になる関連情報についてご紹介します。

    ユーザーの皆さんに Google 検索を安心してご利用頂くために重要なことは、検索結果上に表示しているリンク先が、どれを訪れても安全である、という状態にすることです。しかし、残念ながら、悪意のある第三者が一般のサイトをハッキングして検索結果を操作したり、悪意のあるコンテンツやスパムをばら撒くために利用することがあります。Google では、ハッキングされていると検知したサイトに対して、「このサイトは危険にさらされている可能性があります」という警告を検索結果上に表示することで、検索ユーザーやウェブマスターに対して注意を喚起しています。

    ハッキングされたサイトへの警告メッセージの表示

    Google ではハッキングされたサイトのウェブマスターの皆さまに、サイトをクリーンにするために必要な情報を可能な限り早く提供したいと考えています。また、サイトをウェブマスター ツールに登録しているウェブマスターの方には、サイトがハッキングされていると検知した際にメッセージも(可能な場合は疑わしい URL も例示しながら)お送りしています。

    また、あなたのサイトがマルウェアに感染し、他ユーザーへの感染源になってしまうことも、時にはあるかもしれません。Google ではマルウェアへの感染を確認したサイトについても検索結果上で「このサイトはコンピュータに損害を与える可能性があります」という警告を表示しています。さらに Chrome などのブラウザでは感染の疑いのあるサイトを訪れようとすると、さらに警告を表示する場合があります。また、ケースによってはマルウェアについてのより詳細な情報をウェブマスター ツールの [マルウェア] セクションで提供する場合があります。マルウェアへ感染した際の対処方法についてまとめたヘルプ記事 も提供していますので、ぜひご覧ください。

    ここからは、第三者があなたのサイトをハッキングする際に利用する代表的な手法を 2 つご紹介しましょう。

    コンテンツの挿入

    ハッカーはあなたのサイトに、彼ら自身のサイトへのリンクを挿入して検索結果上での上位表示を企むことがあります。こうしたリンクは多くの場合、ウェブマスターが気づきにくいように隠された形で挿入されます。また、こうした悪質なリンクが検索エンジンのクローラーに対してだけ表示されるように設定していることもあります。
    挿入されたコンテンツの例
    このようなコンテンツを検知した場合、Google ではウェブマスター ツールを通して詳細情報と共にメッセージをユーザー アカウントにお送りします。もし自分のサイトがこのような形でハッキングされていると疑われる場合は、 Fetch as Google 機能を使って、Google に対してあなたのサイトがどのようなコンテンツを返しているかを確認することができます。悪質なコンテンツが挿入されていないか確認する際は、.php ファイルや、テンプレート ファイル、CMS プラグインなどを見てみるとよいでしょう。

    リダイレクトの悪用

    ハッカーはリダイレクトを悪用し、ユーザーをスパム サイトや悪意のあるサイトへと誘導しようとすることもあります。狙われるのがサイトを訪れるすべてのユーザーであることもありますし、より特定のユーザーをターゲットとすることもあります。例えば、検索エンジンを経由してサイトを訪れるユーザーを狙うこともあれば、モバイル端末を利用しているユーザーのみをターゲットとすることもあります。もし、サイトに直接アクセスすれば全く問題なく表示されるのに、検索結果を経由してサイトを訪れようとすると予期せずリダイレクトされる場合、あなたのサイトがこの手法によって改ざんされている可能性が非常に高いと言えます。

    ハッカーがこの手法を利用する際には、サーバーの設定ファイル (Apache における .htaccess など)を書き換えて、ユーザーごとに異なるコンテンツを表示させる場合があります。サーバーの設定ファイルを確認し、以下のような書き換えがされていないか見てみることをお勧めします。



    また、JavaScript をサイトのソース コードへ挿入することでこの手法を行う場合もあります。このような JavaScript は、その目的がわからないようにデザインされている場合があるので、”eval” や “decode”、“escape” といった文字列を手がかりに探してみると良いでしょう。

    問題の解消と予防


    サイトがハッキングされたりマルウェアに感染したりした場合、改ざんされた箇所をすべてクリーンにするだけでなく、そうした事態を引き起こした脆弱性にも対策を行うことが重要です。Google では サイトのクリーンアップマルウェアへの感染を防止する ために役立つ情報をまとめたヘルプ記事も提供しています。また、Google ウェブマスター ヘルプ フォーラム や皆さんが利用しているホスティング プロバイダーに具体的な対策方法について問い合わせることも役立つでしょう。 サイトがクリーンな状態になったら、再審査をリクエストしてください。 問題がすべて解消されたことが審査で確認されると、検索結果上の警告メッセージが削除されます。 この記事についてご質問やご意見がありましたら、いつでも ウェブマスター ヘルプフォーラム までお知らせください。

    YouTube 字幕を使って Google Webmaster Central Channel の動画を見よう!

    Google サーチ クオリティ チーム は、様々な形でウェブマスターの皆さんへの情報発信を行っています。ヘルプ センターブログヘルプ フォーラム などは日本のウェブマスターの皆さんにも馴染み深いかと思いますが、YouTube 上にある Google Webmaster Central YouTube Channel についてはご存知ない方もいらっしゃるかもしれません。

    Google Webmaster Central YouTube Channel ではサーチ クオリティ チームのメンバーが Google 検索やウェブ スパム、ウェブマスター ツールに関する様々なトピックについて解説する動画を多数アップロードしています。動画のほとんどは 5 分以内の短いものですので、短時間で手軽に内容を確認することができます。また、実際のツールや検索画面も動画上で紹介されますので、新しいツールの使い方を確認する上でも便利でしょう。

    これまで、「(自動翻訳機能もあるけれど)日本語字幕を整備して、もっと動画コンテンツを利用しやすくしてほしい」という声を頂くことがありました。こうした声にお応えして、日本語の字幕を追加する作業を進めています。最近字幕を追加した動画には以下のようなものがあります。

    日本語の字幕を表示するには、YouTube 動画の右下のメニューから [字幕] ボタンをクリックし、[日本語] を選択してください。(関連ヘルプ記事



    サーチ クオリティ チームでは今後も日本語の字幕追加作業を進めていきたいと考えています。ウェブマスター ヘルプ フォーラムに、字幕追加リクエストを募集するスレッドを設置しましたので、もしリクエストがありましたら、ぜひ「この動画の字幕が欲しい」という投稿をお願いします。皆さまからの投稿をお待ちしております。

    レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす

    データを重要視している Google では、アクセス解析を行い自分たちのウェブサイトを分析することに多くの時間を費やしています。みなさんも同じように分析をされてみると、最近の傾向としてモバイル端末からのトラフィックが増加していることに気が付くでしょう。この 1 年、多くの主要なサイトではスマートフォンやタブレットからのページ ビューの割合が大幅に増加しました。つまり、多くの人が最新の HTML や CSS、JavaScript に対応したブラウザでサイトにアクセスしているということです。しかしこれは同時に、例えば幅が 320px というような狭い画面に表示されているということも意味します。

    Google では、アクセシビリティ (英語) の観点から、すべてのユーザーが、心地よくウェブページを閲覧できることを目指しています。モバイル用のウェブサイトを作るのか、あるいはデスクトップとモバイル環境の両方でうまく表示されるように、既存サイトや新規サイトを適合させるのかという点について Google は深く検討してきました。複数のサイトを用意すれば、ハードウェアごとに最適化したサイトを提供できます。しかし、1 種類のサイトで両環境に対応できるなら、正規化 された URL を保持できる上、複雑なリダイレクトを避け、ウェブ アドレスの共有をよりシンプルにできます。このような保守性の観点から、Google では、1 つのページをモバイル端末とデスクトップの両方に対応させるよう、次のガイドラインを満たす方法の検討を始めました。

    1. ページは、どの画面解像度でも読みやすく表示される
    2. どの端末でも表示できるようにコンテンツをひとかたまりごとにマークアップする
    3. ウィンドウサイズにかかわらず、水平方向のスクロール バーは表示しないようにする

    画像サイズを変更すると、コンテンツは縦に並び、ナビゲーションは適切に変化し、画像はリサイズされる
    - Chromebooks (英語)
    それでは、Google の実施している施策と、そこから得られた発見をご紹介します。

    実装

    まずなによりも、、シンプルでセマンティックなマークアップを用いることです。これによって、レイアウトの変更が必要な場合でも、コンテンツがうまくリフローするような柔軟性をページに与えることができます。サイトを リキッド レイアウト (英語) なスタイルにしたなら、既にモバイル対応の第一歩を踏み出していると言えるでしょう。コンテナ要素には width を指定するのではなく、代わりに max-width を指定します。同じく height の代わりに min-height を使います。こうすることで、大きめのフォントや複数行に渡るテキストの場合でも、コンテナからはみ出すことがなくなります。固定幅の画像によってリキッド カラムが強制的に広げられた状態になるのを防ぐため、下記の CSS ルールを適用します。
    
    img {
      max-width: 100%;
    }
    
    リキッド レイアウトから始めるのはよい方法ですが、精巧さに欠けるところがあります。ありがたいことに メディアクエリ (英語) には現在、ほとんどのモバイル端末や IE9+ などの最新ブラウザが対応しています (英語)。メディアクエリによって、「モバイル環境ではグレードをうまく落としたサイト」になるか、「合理的な UI をうまく利用してグレードアップしたサイト」になるか、大きな違いが生じます。しかしまずは、スマートフォンがウェブ サーバーからどのように認識されているのかを考慮する必要があります。

    viewport メタ タグ

    1 ピクセルが 1 ピクセルでなくなるのはどんなときでしょうか。それはスマートフォン上で表示されるときです。初期設定では、スマートフォンのブラウザは、高解像度のデスクトップ ブラウザと同じような挙動を見せ、まるでデスクトップのモニターで表示しているかのようにページをレイアウトします。ズームインしなければ判読できない小さな文字の「オーバービュー モード」で表示されるのはそのためです。デフォルトのビューポート幅 (英語) は、画面の実際の物理的なピクセル (英語) の数にかかわらず、初期設定の Android ブラウザでは 800px、iOS では 980px です。 より読みやい縮尺でブラウザにページを表示させるには、 viewport メタ タグを使用する必要があります。
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    モバイル端末の画面解像度は多岐にわたりますが、最新のスマートフォン用ブラウザの多くは現在、320px ほどの標準的な device-width であるとされています。モバイル端末が実際には物理的に 640px の場合、320px 幅の画像は、画面の横幅に合ったサイズに変更され、その過程で倍の数のピクセルを使用します。小さい画面ではテキストがより鮮明に見えるのはこのためでもあります。標準的なデスクトップのモニターに比べるとピクセルの密度が倍になっているのです。
    viewport を指定するメタ タグで width = device-width を設定する利点は、ユーザーがスマートフォンやタブレットの向きを変えたときに表示を更新してくれる点です。これをメディアクエリと組み合わせて用いることで、ユーザーが端末を回転させた時のレイアウトを微調整できます。
    
    @media screen and (min-width:480px) and (max-width:800px) {
      /* ランドスケープモードのスマートフォン、ポートレートモードのタブレットまたはウィンドウ幅の狭いデスクトップ向けのスタイル
      */
    }
     
    @media screen and (max-width:479px) {
      /* ポートレートモードのスマートフォン向けのスタイル */
    }
    
    実際には、サイトの流れや各種端末上での表示に応じて、異なるブレークポイントを使用する必要があるかもしれません。また、メディアクエリの orientation を使って、ピクセルで幅などのサイズを指定することなしに特定の向きに対応させることも可能ですが、ブラウザが対応している場合 (英語) に限ります。
    
    @media all and (orientation: landscape) {
      /*ランドスケープモード向けのスタイル */
    }
     
    @media all and (orientation: portrait) {
      /*ポートレートモード向けのスタイル */
    }
    
    コンテンツは縦に並び、画像は縮小して表示する
    - Google 選ぼう 2012

    メディアクエリの例

    2012 年春、Google について のページをリニューアルしました。リキッド レイアウトの設定以外にも、メディアクエリをいくつか追加して、タブレットやスマートフォンなどの小さな画面での閲覧性を向上させました。
    さまざまなデバイスの解像度に対応させる代わりに、比較的広いブレークポイントを設定するという方法を取りました。1024px を超える画面解像度では、Google が標準で使っている 12 カラム グリッドに従って、元々デザインした通りにページを表示します。801px から 1024px の画面解像度では、リキッド レイアウトによって、若干圧縮されたバージョンが表示されることになります。
    画面解像度が 800px まで下がる場合に限り、主要なコンテンツとはみなされないコンテンツはページの下部へと送られます。
    
    @media screen and (max-width: 800px) {
      /* この場合のみ適用されるスタイル */
    }
    
    
    最後に記述するメディアクエリにはスマートフォンを想定した幅を指定します。
     
    @media screen and (max-width: 479px) {
      /* この場合のみ適用されるスタイル */
    }
    
    ここまで来たら、もう大きな画像はロードしませんし、コンテンツ ブロックも縦に並べるだけです。また、コンテンツの項目の間に少し余白を足して、それらが別々のセクションであることがわかりやすくなるようにします。 こういったいくつかのシンプルな方策によって、さまざまな端末上でサイトを利用できるようにしました。
    コンテンツは縦に並び、大きな画像は表示しない
    - Google について

    まとめ

    モバイル端末や狭いビューポートでもサイトをアクセスシブルにする、シンプルで簡単な「たったひとつの冴えたやりかた」のようなものはないということを覚えておきましょう。リキッド レイアウトは、第一歩としては非常に優れていますが、デザインにおける何らかの妥協が必要となる場合があります。メディアクエリは、さまざまな端末上での表示をより洗練されたものにするのに役立ちはしますが、トラフィックの 25% (英語) は、現在この技術をサポートしていないデスクトップ ブラウザからのアクセスであることや、ある程度 パフォーマンスへの影響 (英語) が生じることにも注意しなければなりません。 また、サイト内で趣向を凝らしたウィジェットを使用している場合、細かいコントロールが難しいタッチ端末では、マウスほどの素晴らしい挙動が望めない場合があります。
    ポイントは、より早い段階でより頻繁にテストを行うことです。実際にスマートフォンやタブレットから自分のサイトを使ってみることも大変重要です。本物の端末でテストできない場合は、Android SDK (英語) や iOS Simulator (英語) を使用してください。友人や会社の同僚に頼んで、彼らの端末からサイトを表示してもらい、彼らがどのように操作するのかを観察するのもよいでしょう。
    モバイル ブラウザにサイトを対応させることは、新たなトラフィックを得ることにつながります。そして、「それらにどのように対応していくか」という課題は、多くのウェブマスターにとって、取り組みがいのある新たな課題と言えるでしょう。
    下記のサイトで Google におけるレスポンシブ ウェブ デザインの例をご覧いただけます。

    ご質問やご意見がありましたら ウェブマスター ヘルプフォーラム までお知らせください。

    2013 年 4 月追記:「携帯端末(主にスマートフォン)向けサイトの構築方法の基本的な考え方について」をテーマにウェブマスター ハングアウトを実施しました。



    ウェブマスター向けヘルプフォーラムをご利用のみなさまへ。2012 年もありがとうございました。

    Google ウェブマスター向け公式ヘルプフォーラム は 2009 年の 3 月に開設して以来 4 年、 ウェブマスターの方々の問題解決やディスカッションの場として多くの人々に利用されてきました。本当にありがとうございます。ここで、2012 年のウェブマスター向けヘルプフォーラムのハイライトをご紹介いたします。

    新しいトップ レベル ユーザーの誕生、交流
    Google のヘルプフォーラムでは、ユーザーのみなさんの疑問や問題解決を的確にサポートしたり、ユーザー間のディスカッション、情報交換に積極的に参加しフォーラムを盛り上げていただいているアクティブ ユーザーの方々にトップレベル ユーザーというタイトルを付与しております。ウェブマスター ヘルプフォーラムでは昨年に引き続き、今年も新しいトップ レベルユーザー(癋見no さんdronpa さん)が誕生しました。 2011 年はトップ レベル ユーザーの方々をアメリカのオフィスにご招待して、「グローバル トップレベル ユーザー サミット 2011」を開催しましたが、2012 年もさらにいくつかの新しいコミュニケーションの場を持つことができました。たとえば今秋には、トップレベルユーザーと Google のウェブマスタートレンドアナリストとサーチクオリティチームで ハングアウト を行いました。普段はフォーラム上でしか聞くことのできないトップ レベル ユーザーのご意見や疑問点などを直接伺うことができ、非常に貴重な機会となりました。

    ウェブマスター ツールの新機能「リンクの否認ツール」の公開
    2012 年 10 月に、あなたのサイトと、サイトへのリンクとの関係性を否認するウェブマスター ツールの新機能「リンクの否認ツール」を公開しました。こちらの機能は、サイトへの不自然なリンクを理由に手動によるスパム対策が実施されているというメッセージが Google から届いた際に、ウェブマスター向けガイドライン違反となる箇所の違反状態を解消するためにお使いいただけます。また、フォーラムでは、みなさまからいただいた声をもとに、豆知識Q & A という形で、日本独自の情報を発信しました。 さて、ここでフォーラムで活発にディスカッションに参加し、いつもフォーラムを盛り上げていただいているみなさまのお名前をご紹介いたします。みなさま、いつも活発なご参加ありがとうございます!

    あうらゆうまさんマサさんたむらはんさん癋見no さんsuzukik さんdronpa さんden さんSEM-ADVISER さんhnxyy654 さん

    ウェブマスター ヘルプフォーラムでは、2013 年もますますみなさまのお役に立つ場所となるべく、様々な取り組みを行っていきたいと思います。来年もどうぞフォーラムへのご参加をよろしくお願い致します。
    それではみなさま、よいお年を。

    p.s. フォーラムで 2012 年のブログ人気記事 をご紹介しております。今年最も多くの方に読んで頂いた記事は「Google 検索が、高品質なサイトをよりよく評価するようになりました」でした。2 位以下の記事については、ぜひ以下のリンクからご覧ください。
    ウェブマスター ヘルプフォーラム:年末年始のサポート体制と 2012 年のブログ人気記事のご紹介

    ウェブマスター ツールの「サイトの確認」について覚えておきたいポイント

    サイトの所有権の確認」は ウェブマスター ツール を利用する際に行う最初のステップです。特に複数のユーザーでウェブマスター ツールを使う際にサイトの確認状態を簡単に維持し、メンテナンスを最小限にとどめるために、いくつかのヒント、アドバイスをご紹介します。

    • サイトの確認方法はいくつか種類がありますが、どの方法を選ぶかはお使いの CMS やホスティング サービスの環境に合わせて選んでいただくことが可能です。サイトの確認状況がちょっとした設定変更などによって意図せず失われてしまうことを避けるために、2 種類の確認方法を同時に利用できるように設定しておくと良いでしょう。
    • 2009 年、サイトの確認用のメタタグと HTML ファイルのフォーマットを更新しました(英語)。もし古いフォーマットをまだお使いの場合、新しいフォーマットへと変更することをお勧めします。新しい メタ タグ は “google-site-verification” と呼ばれる専用のもので、新しい HTML ファイル はファイル名と一行の情報のみの非常にシンプルなものです。古いフォーマットについてもサポートを行っていますが、長期的な視点からは新しいフォーマットを利用することをお勧めします。
    • 特定のユーザー、グループのウェブマスター ツールへのアクセスを解除する際には、その際に利用していた確認用の情報(HTML ファイルやメタ タグなど)も併せて削除してください。そうした確認用の情報をサーバー上に残したままにしておくと、アクセスを解除したいユーザーが再びアクセスすることが可能になってしまう恐れがあります。サイトの所有者(アクセス可能なユーザー)の一覧は、ウェブマスター ツール上で、目的のサイトの[設定] メニューの [ユーザー]から確認することができます。
    • もし複数のユーザーがウェブマスター ツールにアクセスできるようにする必要がある場合は、[ユーザーの追加]機能を使うことをお勧めします。この方法では、サーバー上やファイルの設定などを行う必要がなく、簡単にアクセス可能なユーザーのリストを管理することが可能です。 また、複数のユーザーでウェブマスター ツールをご利用になる際は、あなたのドメイン上のメール アドレスを持ったユーザーのみをアクセス可能とするといったポリシーを設定することも良いでしょう。そうすることによって、同じドメインのメンバーのみがアクセス可能なユーザーとしてリスト上に表示されているかを確認するだけで、適切に管理を行うことができます。そして、もし同じドメイン上のメンバーが会社や組織を辞めた際には、(そのメール アドレスが失効しますので)ウェブマスター ツールへのアクセスも自動的に失効します。
    • ウェブマスター ツールでは「制限付きユーザー(データの閲覧のみが可能なユーザー)」という権限の設定も可能です。多くの場合データの閲覧が可能であれば事足りますし、複数のレベルの権限を適切に設定しておけば、より高度な権限を誰にどのような理由から与える必要があるかという判断が、その場しのぎではなく、より適切、一貫性を持って行えるようになるでしょう。 
    以上のヒント、アドバイスがウェブマスター ツールでのサイトの確認設定の管理をシンプルにする上でお役に立てば幸いです。ご質問がありましたら、ウェブマスター ヘルプフォーラム までお寄せください。 *また、ウェブマスター ヘルプフォーラム上で今回の記事に関連する情報を扱ったスレッドがありますので、ぜひこちらもご覧ください。 関連スレッド:Google 社員によるウェブマスターの豆知識: ウェブマスター ツール「サイトの確認」の方法について(Google ウェブマスター ヘルプフォーラム)