[レベル: 上級] ウェブで優れたユーザー エクスペリエンスを実現するために “Web Vitals（ウェブ バイタル）” というコンセプトを Google は導入しました。 Web Vitals の土台として次の要素を重要視します。 読み込み時間 インタラクティブ性 ページ コンテンツの視覚的な安定性 それぞれの要素を測定するための指標とツールの提供を始めています。 Core Web Vitals: ウェブに関する 3 つの主な指標 Web Vitals を数値化するために、ウェブに関する特に重要な 3 つの指標を Google は設定しました。 ひっくるめて、“Core Web Vitals”（コア ウェブバイタル）と呼びます。 Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift

[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）

[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します

[対象: 中〜上級] Googleが提供するPageSpeed Insights（ページスピード・インサイト）ツールを使うとサイトの表示速度を診断できます。 スピード診断に加えて、モバイルサイトのユーザーエクスペリエンスを診断する機能を昨年12月からベータ版として試験的に提供していました。 このユーザーエクスペリエンス診断機能を正式に導入したことをGoogleは公式アナウンスしました。 モバイルサイトのユーザーエクスペリエンスを診断 PageSpeed Insightsでは、モバイルサイトにおける次の5項目に関するユーザーエクスペリエンスを評価点付きで診断できます。 viewport の設定 コンテンツのサイズを表示域に合わせる 判読可能なフォント サイズの使用 タップ ターゲットのサイズを適切に調整する プラグインを使用しない 修正が必要な項目に関しては問題点の詳細を提示します。 ちなみ

[対象: 初〜中級] SEOではなくユーザーエクスペリエンス/コンバージョンが今日の記事のトピックです。 「ローテーションバナー」を使うべきでないという趣旨の記事をConversionXLブログが公開しました。 ローテーションバナーは、スライド式に自動的に画像が切り替わるバナーで、バナースライダーやカルーセルと日本語では呼ぶこともあります。 個人的にもローテーションバナーが僕は大嫌いなので（笑）、ConversionXLが説明するローテーションバナーの欠陥を紹介します。 なお記事の日本語ではなく主要ポイントを抜き出した説明になります。 理由1: 人間の目は動くものに反応する（そのため重要なものを見逃してしまう） 人間の目は本能的に動くものに反応するようにできています。 つまり勝手に動くローテーションバナーに無意識に反応してそれを見てしまいます。 ローテーションバナーがそのページの唯一コンテ

[対象: 中級] Google検索のCTR（クリック率）を調査したデータをまとめたレポートを、CATALYSTが公開しました。 この記事では、このCTR調査レポートのなかから主だったデータを紹介します。 調査方法 対象キーワード: 17,500個 対象サイト: 59サイト 対象期間: 2012年10月〜2013年6月 利用したデータ: Googleウェブマスターツールの検索クエリ 調査方法の詳細はレポートを参照してください。 検索結果10位のCTR 下の表は、検索結果1位〜10位まで、言い換えると検索結果1ページ目のCTRを表しています。 上の表のデータをグラフ化したものです。 1位のCTRは17.16%です。 やっぱり1位はダントツで高いですね。 上位の4位で全体の83%を占めています。 Above the foldに表示されることが重要だとCATALYSTは述べています。 48%のユー

[対象: 全員] Googleは、Googleアカウントのログイン状態にかかわらず、すべてのGoogle検索をHTTPSでの接続つまりSSL検索を利用するように仕様を変更しました。 すでに実施済みです。 僕たちにとってこれが何を意味するかというと、Google検索からのトラフィックの検索キーワードを取得することが不可能になります。 Googleアナリティクスでいうと、「(not provided)」だけになってしまいます。 HTTPSへ強制的にリダイレクト Googleアカウントからログオフした状態で、http://www.google.co.jp/ のように http:// で始まるURLでGoogle検索にアクセスしても、 https:// で始まるURLに強制的にリダイレクトされます。 FirefoxやChromeでは、ブラウザが内蔵しているGoogle検索ツールやアドレスバーからG

[対象: 全員] Tag Assistant（タグ・アシスタント）というChromeの拡張機能をこの記事では紹介します。 Tag Assistantを使うと、GoogleアナリティクスをはじめGoogleが提供するサービス・ツールのタグが正常に動いているかどうかを検証できます。 使い方は簡単です。 インストールして有効化したら調べたいページでアイコンをクリックします。 “working”と出ていれば正常に動作しています。 Googleアナリティクスのトラッキングコードだけでなく、タグマネージャのタグやAdWordsのコンバージョンタグ、リマーケティングタグもチェックしてくれます。 正常に動いていないときは“not working”が表示されます。 “working”あるいは“not working”をクリックすると詳細な情報が表示されます。 オプションで「Detailed Informat

[対象: 中〜上級] 価値のある質の高いロングテールキーワードを、簡単にできる作業で“再”最適化することにより、検索からのアクセスを短期間に大きく伸ばせる方法をこの記事では解説します。 Kaiser the SageブログのJason Acidre氏が公開した“How I increased my blog’s Search Traffic by 44% in under a month”（1ヶ月足らずでブログの検索トラフィックを44%増加させた方法）というタイトルの記事がソースになります。 Acidre氏は、この記事で説明している方法を用いて自分の個人ブログの検索流入を短期間に40%以上も上昇させることに成功しました。 難しいことはなくて誰にでも今日からすぐに始められる施策です。 またブログの事例ですが、それなりに価値があるコンテンツがすでに存在し検索からトラフィックがあるサイトならば特

[対象: 全員] GoogleのMatt Cutts（マット・カッツ）氏に対して行ったインタビューをStone Temple ConsultingのEric Enge（エリック・エンゲ）氏が公開しました。 貴重な情報をたくさん含んでいるなかから、“価値のあるオリジナル”なコンテンツの考え方についての応答を紹介します。 他の店舗と同じ商品を取り扱うECサイトや多数の場所に店舗を展開する店舗ビジネスに役立つでしょう。。 Q (Eric Enge): 60の都市に店舗を持つピザ屋の例について話してみたい。サイトを作るとしたらそれぞれの都市ごとにページを作らなければならないが？ A (Matt Cutts): ここで面倒なのはまったく同じコンテンツでそれぞれのページを埋めてしまうことだ。「私たちの手作りピザは50年以上前と変わらない製法で愛情を込めて作られています……」、同じ情報を伝える6、7個の

[対象: 全員] High RankingsのJill Whalen（ジル・ウェイレン）氏が、パンダ・アップデートやペンギン・アップデートにやられ悲惨な状況に陥ったサイトを診断した体験から今後あるべきSEOの姿について 18 SEO Killers You Must Clean Up and Avoid for 2013 and Beyond という記事を書いています。 僕にとってとても共感できるすばらしい記事でした。 ジルさんの許可を得られたので日本語に訳します。 なお記事中のリンクはすべてHigh Rankings内の別コンテンツ（英語）へのリンクになっています。 2013年とその先、一掃し回避しければならないSEOを台なしにする18個のこと SEOが終わっていないことは明らかですが、トリック的なSEOや手っ取り早いSEOは、完全には終わっていないとしても間違いなく生命維持装置につなが

[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化

Googleは、ウェブページの表示速度を検索順位を決める要因の1つとして採用したことをウェブマスター向け公式ブログで明らかにしました。 ページの読み込み時間をアルゴリズムに組み込む予定だということは去年に発表されており、ついにそれが実現化したことになります。 まず重要点を3つリストアップします Google.comの英語の検索ですでに導入済み 影響を受ける検索は限られていて全体の1%以下 200以上のアルゴリズムの1つに過ぎず、関連性がもっとも重要視されることに変わりはない 順位決定のアルゴリズムにページの表示速度が組み込まれたということは大きな出来事ですが、過剰に反応することは控えた方がよさそうです。 表示速度と関連性のどちらが重要かと問われたら、間違いなく関連性の方が重要です。 以前にGoogleのMatt Cutts（マット・カッツ）氏がビデオで説明したとおりです。 先に関連性・有益