タブレット端末に最適化したサイトを構築するための推奨ガイドラインのドキュメントをGoogleが公開しました。 Guildelines for tablets – Webmasters — Google Developers 公開されたばかりで英文だけなので日本語に訳します。 【UPDATE】 現在は日本語化されています。 タブレット向けガイドライン モバイルユーザー向けのウェブサイトをどのように構成するかを考えるときは、タブレット端末を使ってサイトにアクセスするユーザーについて考えることが普通です。検索エンジンにとって分かりやすい、タブレットに最適化したウェブサイトを構築するためのGoogleからの特定の推奨はありませんが、デスクトップとスマートフォン、タブレットのユーザーを適切に扱うためにいくつかのアドバイスがあります。 レスポンシブ・ウェブデザイン スマートフォンに最適化したウェブサイ

+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1

[対象: 中〜上級] 僕が日々チェックしている海外（英国）のサイトにRockectMillというサイトがあります。 RockectMillはつい先日、サイト名とドメイン名を変更し併せてサイトのデザインも一新しました。 新しいデザインにどのような特徴を盛り込んだかを公開しています。 そのなかから、僕たちにとって参考になりそうなユーザビリティ向上のための工夫を4つ今日は紹介します。 レスポンシブ・ウェブデザイン フローティング メニューバー どこからでもアクセスできるコンタクトフォーム 分かりやすい404エラーページ 1. レスポンシブ・ウェブデザイン モバイルデバイスやタブレット端末の表示に最適化するためにレスポンシブ・ウェブデザインを採用しています。 スマートフォン (iPhone) 表示 タブレット (iPad) 表示 どんな端末からでも見やすいレイアウトとデザインで閲覧できます。 レス

このサイトをリニューアルして数ヶ月経つが、リニューアル後からレスポンシブWebデザインに対応している。レスポンシブWEBデザインというのは、ざっくり言えば、 従来PC用/モバイル用とWEBページを分けるのが主流だったが、一つのWEBページをスクリーンの幅に合わせてデザインを柔軟に切り分けるというもの。技術的にはCSS（スタイルシート）を使用する。 といった感じだと思う（デザインは専門外なので多少の誤りはご勘弁を）。で、このレスポンシブWEBデザインにしてから悩みがあった。それはスマホとかで見るとサイトがやたらと重いこと。この原因が最近ようやく分かって、対策出来たのでご紹介。 当サイトのデバイス別表示 まずはこのサイトがどんな感じになっているかを紹介してみる。 PCでトップページを表示するとこんな感じになる。 この状態でブラウザの横幅を狭めていくと、、、 サイドバーが消える。簡単に言えばこれ

[対象: 中級] 今日は、スマートフォン向けのサイトを検証するときに便利なツールを2つ紹介します。 レスポンシブ・ウェブデザインでの表示を簡単に確かめられるブックマークレットとスマホでのページ閲覧をシミュレーションするアプリケーションソフトです。 1. レスポンシブ・ウェブデザイン ブックマークレット 1つ目はレスポンシブ・ウェブデザインがどのように機能しているかをチェックするブックマークレットです。 こちらのページにアクセスして「RWD Bookmarklet」というボタン（リンク）をブラウザのお気に入りに追加するか、ブックマークバーにドラッグ&ドロップします。 レスポンシブ・ウェブデザインを確かめたいページでブラウザに追加したそのリンクをクリックすると下のような画面になります。 中央上にある赤枠で囲んだ4つのアイコンをクリックすると解像度を変化させた表示に切り替えることができます。 ア

海外ではレスポンシブWebデザインがいち早く企業や団体のサイトに取り入れられ、すでにたくさんの事例が上がっています。今回はそんな海外の数ある事例の中で、有名企業・団体のレスポンシブWebデザイン事例についてご紹介したいと思います。日本も2012年内のうちに、多くの有名企業がレスポンシブWebデザインによるサイト構築を進めるのではないかと感じています。 NTT DATA NTT DATA海外向けコーポレートサイト。とても美しいレスポンシブWebデザインの事例です。単にデザインだけの美しいだけでなく、350ページ(※注：ツールを使用して確認)を超える全ページを、ストレスなく閲覧できる設計になっています。特に、ニュースコンテンツもうまくレスポンシブ対応されている点や、スマートフォンで利用した場合の導線の引き方がスマートでした。(スマートフォンではシンプルなナビゲーションになっており、扉ページを挟

スマートフォンで企業のウェブサイトを訪れたとき、パソコン用の画面が立ち上がって非常に見にくい思いをした経験を皆さんお持ちだろう。パソコン用、スマホ用、ケータイ用と3種類のサイトが用意されていれば問題は起こらないが、企業側としては手間もコストもかかる。 一方、さまざまな端末からのアクセスを、ひとつのサイトで対応する方法があり、グーグルもこの方法を推奨している。具体的には、すべてのデバイスに単一のURLで同じHTMLを提供し、見映えを指示するソースの部分（CSS）のみを使って、デバイスごとにデザインを変更するのである。 スクリーンの幅に合わせ、コンテンツの形が柔軟に変わる NHKスタジオパークのサイト。単一のサイトがデバイスによって自動的に形を変える（左上から時計周りに、スマホ表示、タブレット表示、パソコン表示） このような考え方を「レスポンシブ・ウェブデザイン」と呼ぶが、これを実装したウェブ

PCサイトとスマホ向けサイトの表示分け方法にはいくつかあると思いますが、Official Google Webmaster Central Blogによると、GoogleはレスポンシブWebデザインの利用を推奨しているようです。 » Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites そのうち日本語訳も出ると思うのでここではざっくりと。 レスポンシブWebデザインを使うと、「すべてのデバイスに対して同じURLとHTMLを提示し、見た目はCSSだけで切り替える」ということが可能になります。 Googleは「Building Smartphone-Optimized Websites – Webmasters — Google Developers」

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）

デスクトップ用ページとスマートフォン用ページを提供しているサイトで、URLを同じにするか別々にするかはそれぞれにメリット・デメリットがありどちらが絶対的に優れているかを判断することは難しい。 スマートフォン用のURLが検索結果に表示され続けて困っているウェブ担当者に対して、グーグルのジョン・ミューラー氏は次のように公式ヘルプフォーラムでアドバイスしている。 可能なら、CSS3のMedia Queriesのような特別なスタイルシートを使い（レスポンスWebデザインを使って）、同じURLでスマートフォンに専用のコンテンツを見せるといい。こうすることの利点は、特別なURLを必要とせずクロールやインデックスについて考えなくていいし、スマートフォンユーザーをどのようにしてリダイレクトするかを考慮する必要もないことだ。 SEOを最優先するなら同じURLを使うのがベストに思える。しかしMedia Que

今日は、スマホ対応で注目を集める「レスポンシブ・ウェブデザイン」の良い点と悪い点を述べていきます。 結論としては、レスポンシブ・ウェブデザインはすごいと思いますが、現状では、スマホ向けにはレスポンシブ・ウェブデザインを採用せずに専用の軽いHTMLを用意して対応するべきだと私は考えます。そうでなければ、完全にモバイル・ファーストでのデザインで進めることです。その理由を解説していきます。 3分でわかる？ レスポンシブ・ウェブデザイン「レスポンシブ・ウェブデザイン」のことを耳にしたことはあるでしょうか？ 2011年に日本でも注目された、Webページのデザイン手法で、PC向け・スマホ向け・タブレット向けなど、さまざまな画面サイズのデバイスに対応したWebデザインを柔軟に実現できるようにするものです。わかりやすく言うと、次のような仕組みで実現しています。 CSS3の「Media Queries（メデ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

PCにモバイル、スマートフォンにタブレット、そして今後はデジタルTVまでユーザーがデジタルコンテンツに多種多様なデバイスでアクセスし、消費する時代が本格化している最中。デバイス毎にウェブサイトをデザインしていてはキリがないとばかりに、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやOSにデザインを柔軟に対応して表示させる手法。今回は、そんなレスポンシブWebデザインを実践しているサイトからThe Next Webが厳選した10の素敵なサイトを紹介します。 — SEO Japan 最近、皆が異なる方法でコンテンツを消費している。私の母はネットブックを持っているし、友人は27インチのiMacを持っていて、ガールフレンドと私はスマートフォンを持ち、彼女の母はiPadを持っている。 あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのこ