[レベル: 中級] ネイティブ Lazy-load を簡単に実装する WordPress 用のプラグインを Google が公開しました。 ネイティブ Lazy-load は JavaScript のライブラリを利用することなく loading 属性を追加するだけで、画像と iframe の遅延読み込みを可能にします。 1 か月前にリリースされた Chrome 76 でサポートされました。 設定不要、インストールするだけで WP で Lazy-load Native Lazyload プラグインの使い方は非常にシンプルです。 インストールして有効にするだけです。 設定項目はありません。 有効にすると、img タグと iframe タグに loading=”lazy” 属性をプラグインが自動的に追加します。 現状では、loading 属性をサポートするブラウザは Chrome 76（以上）だ

[レベル: 上級] Google Chrome 76 がネイティブ lazy-load をサポートするようになりました。 JavaScript のライブラリを利用することなく、ブラウザの標準機能として画像の遅延読み込みが可能になります。 ネイティブ lazy-load は開発版 Chrome (Canary) で試験運用されていました。 自動で遅延読み込み 次の動画は子猫の画像だけを掲載したデモ用ページをスクロールした様子です。 デベロッパーツールの Network パネルで見ると、スクロールに応じて画像が順に読み込まれているのがわかります。 この遅延読み込みは JavaScript で実装しているわけではなく、Chrome の標準機能として実装された lazy-load の機能で実現しています。 loading 属性でネイティブ lazy-load ネイティブ lazy-load を利用

[レベル: 中級] 昨日とおとといに続いて、今日も 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（パフォーマンス バジェット）

[レベル: 上級] リッチリザルト テストツールで、コードスニペットによる検証が可能になります。 現状では、URL を入力し公開されているウェブページの検証だけに対応しています。 米サンフランシスコで先週開催された Chrome Dev Summit 2018 で、Google の Matin Splitt 氏がセッション中に紹介しました。 （※今日までブログ更新を休む予定でしたが、今日から再開します。） RRTT でコードによるリアルタイム検証 リッチリザルト テストツール（以下、RRTT）のトップページに「< >コード」のオプションが見えます。 現在の RRTT では、URL の入力ボックスだけが表示されています。 コードを貼り付けて検証できます。 コードスニペットによる検証は、構造化データ テストツールでは可能です。 しかしながら、その後継ツールとしてベータ版が公開されている RRT

WebP – Webを速くするためにGoogleがやっていること Make the Web Faster 01 – Jxck 画像は、サイズが大きい（大きくなりがちな）コンテンツの一つです。 最近は画像を使わないページはほとんどなく、むしろ使う量はどんどん増えているんじゃないでしょうか。また、HiDPI対応などでサイズも増えつつあるでしょう。 Googleの調査では、現在Web上のトラフィックの65%を画像が占めているそうです。Introで解説したように、パフォーマンスを考えるとファイルサイズは「なるべく小さく」が望ましいため、画像は通常圧縮された形式で使用されます。 WebPは、Googleが開発した圧縮形式で、従来の形式よりもファイルサイズを小さくすることを目的としています。今回はそんなWebPの概要と使い方、注意点を取り上げます。 画像圧縮とは？ ここで対象としているのはピクセル形式

[対象: 中〜上級] Googleはリッチスニペットテストツールを大きく改良しました。 リッチスニペットテストツールは、リッチスニペットに使われる構造化データが正しく構成できているかを検証し検索結果での表示をシミュレーションするためのツールです。 大きな改良点は次の3つです。 名称を「Structured Data Testing Tool」に変更 ユーザーインターフェイスと結果表示を一新 日本語を含む英語以外の言語にも対応 名称を「Structured Data Testing Tool」に変更 ツールの名前が「Structured Data Testing Tool」に変わりました。 日本語だと「構造化データ テスト ツール」になるでしょうか。 ユーザーインターフェイスと結果表示を一新 UIがガラリと変わりました。 すっきりしていて見やすくなったと僕は感じます。 レシピのリッチスニペッ

This domain name registration has expired and renewal or deletion are pending. If you are the registrant and want to renew the domain name, please contact your registration service provider. 2023 著作権. 不許複製 プライバシーポリシー

HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ

フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイルサイトとモバイルファースト インデックスに関するおすすめの方法 Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。 モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。このページで説明するおすすめの方法は、モバイルサイト全般にあてはまり、当然のことながら、モバイルファースト インデックスにもあてはまります。 ユーザーに最適なエクスペリエンスを提供できるよう、このガイドで紹介されているおすすめの方法を実践してください。 モバイル フレンドリーなサイトを

ウェブサイトを運営していて、デスクトップ用サイトURLとスマホ用サイトURLを分けている場合あります。この場合、きちんと検索エンジン向けに設定を行わないとスマホ用サイトの存在を認識してくれないケースがあります。それは主に、URLをデスクトップとスマホで分けて運用しているページの場合が多いです。 このような場合は、デスクトップ用URLとスマホ用URLの双方を検索クローラーに伝える必要があります。 今回は、canonical属性とalternate属性を使ってスマホページの存在を検索エンジン向けに伝える方法を紹介します。 目次 canonicalとは alternateとは Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある URLを分けている場合の対策方法 レスポンシブデザインの実装を検討しよう よくある質問とその回答 canonicalとは canoni

WordPressの新エディター「Gutenberg」を試してみる WordPressの新しいエディター「Gutenberg（グーテンベルグ）」を試してみました！従来のエディターより分かりやすく、使いやすくなっている印象です。 続きを読む WordPressの使い方2018/8/7

これだけは押さえてほしい構造化データ2つのポイント 難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。 検索エンジンがページの内容を理解しやすくなる 検索結果に様々な要素が表示されるようになる(場合がある) 検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。 そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニ アルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを参考にして、検索結果に表示していま

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

Analyticsを利用したサイト改善案シリーズ第２回です。 まず、ランディングページ自体、ブログにあまり必要ないと考えられていますが、実はそうではありません。 ブログも記事を書けば書くほど多くのランディングページが生まれているのですが、それらを単に無視しているだけであり、気付くことが出来れば、それなりに対処することが出来るのです。 ランディングページとは？ Web制作やマーケティングに関わっていない、一般的なブロガーさんであれば、なんですかそれは？という言葉かもしれません。 簡単にいうと、制作したサービスや商品につなげるために、入り口的ページです。 多くの場合、広告をクリックした時の、最初のページに用いられます。 なぜなら、せっかく広告をクリックしてくれたにもかかわらず、興味を持ってもらえなければ、直ぐに離脱されてしまいます。そこで、ユーザーの興味を強く引くための、協力な入り口専用ページ

これ衝撃的ですね。うちもたまにやられますが、ここまで露骨にパクるとは…。 ブログ記事がsque Inc.の「LINEナビ」に丸パクリされた話 | しゅうまいの256倍ブログ neophilia++ 丸パクリされるとGoogleからペナルティを喰らう可能性も インターネットを全力で楽しむshumaiさんのブログが、「LINEナビ」というブログに丸パクリされたという事件です。（追記：「LINEナビ」は非公式のメディアです。株式会社squeが運営） 当該記事は削除されたようですが、他にもパクリと思われるコンテンツが大量に掲載されています。 ん…ってか、うちのブログもパクられてるじゃないですか！まったく気がつかなかった…。元記事はこちら。 3本やられてますね。ひどい話でございます。画像の差し替えやってやろうと思いましたが、面倒なのでやめておきます。株式会社squeさん、削除お願いいたしますね。（追

１．決済ステップをビジュアル化して遷移率をアップECサイトの一般的な法則としてカートから決済完了までのページ遷移数は少なければ少ないほどコンバージョン率が高い。極端に言えば、一つのページで商品の確認から決済までいければベストだが、多くの場合それは難しい。 従って、上の画像のように決済完了までのプロセスをビジュアル化しよう。これがなければお客様は「購入に時間がかかる」と感じて離脱してしまう。もちろん、簡単に購入できるように決済プロセスを出来る限り簡単にしておくことが重要だ。 ２．購入ボタンを２カ所に設置して誘導率向上『ランディングページのコンバージョン率を５倍にする２１の簡単な方法』でご紹介している通り、CTAボタンの「場所」「大きさ」「色」はコンバージョン率に大きな影響を与える。ショッピングカートでは、ファーストビューとページ下の２カ所に購入ボタンを配置することでユーザビリティが上がり決済

みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す