web集客コンサルのここだけの話 -9ページ目

web集客コンサルのここだけの話 -9ページ目

ホームピグアメブロ

芸能人ブログ人気ブログ

29May
- 【ページの表示速度改善】遅延読み込みのやり方
  Webコンサルタントの松崎です。これまで「表示速度の改善はユーザーへの配慮で一番大事です」というテーマで、「画像の軽量化のやり方」や「次世代画像形式WebP・AVIFのメリットと変換方法」、「過剰なモーションの見直し（JavaScript最適化）」、そして「Webフォントの見直し」など、ホームページの表示速度を改善して、ユーザーの使いやすさをアップさせるための具体的な方法をご紹介してきました。今回は表示速度改善の有効な手法「遅延読み込み（レイジーロード）」について解説します。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次遅延読み込みとは何か？遅延読み込みのメリット初期表示速度の向上ネットワーク帯域の効率的な利用サーバー負荷の軽減ユーザーのデータ通信量削減遅延読み込みに適したコンテンツ画像動画アイフレーム（iframe）大きなデータテーブル遅延読み込みのやり方 1. 画像の遅延読み込み 2. 動画の遅延読み込み WordPressでのやり方プラグインを使う方法手動でコードを追加する方法遅延読み込みの注意点 SEOへの影響ユーザーの使いやすさへの影響ファーストビューのコンテンツ重要な指標への配慮ユーザーへの思いやりとしての遅延読み込み効果的な遅延読み込みでユーザーの使いやすさを向上初期表示で必要ないコンテンツの読み込みを後回しにするこの技術を使えば、ページの初期表示速度を大幅にアップすることができます。ユーザーに必要なものから順に表示して、スムーズで快適なホームページになるように改善します。遅延読み込みとは何か？遅延読み込み（レイジーローディング）とは、ページを開いた瞬間にすべてのコンテンツを一度に読み込むのではなく、スクロールしていった時、表示が必要になった時点で読み込む技術のことです。具体的には、画面に表示されていない部分（スクロールしないと見えない下の方の画像など）は、ユーザーがその部分までスクロールした時に初めて読み込むようにする方法です。これにより、初期表示時に読み込むデータ量を減らし、ページの表示速度を向上させることができます。例えば、長いページがあって、そこに10枚の大きな画像が使われているとします。普通なら10枚全部を最初に読み込むので時間がかかりますが、遅延読み込みを使えば、まず画面に見える最初の2枚だけを読み込み、他の8枚は下にスクロールした時に必要に応じて読み込むといった具合です。遅延読み込みのメリット遅延読み込みには、いくつかの大きなメリットがあります。初期表示速度の向上最も大きなメリットは、ページを開いた瞬間の表示速度がかなり速くなることです。画面に見えない部分の読み込みを後回しにするので、初期表示に必要なデータ量が減り、ユーザーが素早くコンテンツを見始められるようになります。スマホの通信環境が不安定な場所では、このメリットはとても大きいです。例えば、3G回線では5MBのデータをダウンロードするのに10秒以上かかることもありますが、遅延読み込みで初期表示を1MB程度に抑えれば、2秒程度で表示できるようになります。ネットワーク帯域の効率的な利用実際に見られることのないコンテンツ（ユーザーがスクロールせずに離脱するページ下部など）の読み込みを省略できるため、サーバーとユーザー間の通信量を削減できます。ユーザーのデータ通信量の節約にもなりますし、サーバー側の負荷軽減にもつながります。また細かいことですが、データ量の節約になるのでありがたい配慮です。サーバー負荷の軽減必要なコンテンツだけを配信することで、サーバーの処理負荷やトラフィックを減らすことができます。アクセスが多いホームページでは、この効果が積み重なって大きな負荷軽減につながります。ユーザーのデータ通信量削減スマホユーザーにとって、データ通信量の削減は直接的なメリットです。データプランに制限があるユーザーや、通信速度制限がかかっているユーザーにとって、必要最小限のデータだけをダウンロードすることは重要です。遅延読み込みに適したコンテンツすべてのコンテンツに遅延読み込みを適用すればいいというわけではありません。遅延読み込みに適したコンテンツは以下のようなものがそうです。画像ホームページの中で、最も容量が大きいのはほとんどの場合で画像です。そのため、画像は遅延読み込みの最も一般的な対象となります。【遅延読み込みが適している画像】画面下部に配置された画像商品ギャラリーやフォトギャラリーの画像ブログの記事中に複数使われている画像カルーセル（スライダー）内の2枚目以降の画像 ECサイトの商品一覧ページでは多くの商品画像が使われることが多いため、遅延読み込みの効果が顕著に表れます。最初の画面に表示される商品だけをすぐに表示し、スクロールしながら次の商品画像を読み込んでいくことで、ユーザーにスムーズな操作環境を提供することができます。動画動画ファイルは画像よりもさらに重いので、遅延読み込みの効果が大きいです。特にホームページ内に複数の動画を埋め込んでいる場合は、必ず遅延読み込みを検討すべきです。 YouTube動画を埋め込んでいる場合も、プレビュー画像だけを表示して実際に再生ボタンを押したときに動画プレーヤーを読み込むという方法が効果的です。これにより、ユーザーが視聴する意思のない動画については、重いプレーヤーの読み込みを完全に省略できます。アイフレーム（iframe） SNSフィードやマップ、外部サイトのコンテンツを表示するアイフレームも、遅延読み込みするようにしましょう。特にGoogleマップは読み込みが重いので、必要になったときだけ読み込むように設定すると効果的です。 FacebookやTwitterなどのSNSウィジェットも、予想以上に多くのリソースを消費します。これらは画面下部に配置されることが多いので、遅延読み込みの良い候補となります。大きなデータテーブル製品スペック表や価格表など、大量の行や列を持つデータテーブルも、遅延読み込みの対象となります。特に初期状態で折りたたまれているようなテーブルは、展開されたときに初めて読み込むようにすると効果的です。遅延読み込みのやり方それでは、実際にどのように遅延読み込みを実装すればよいのか、具体的な方法を見ていきます。 1. 画像の遅延読み込み画像の遅延読み込みの設定は一般的で、様々なやり方があります。 HTML5のloading属性を使う方法（最も簡単）最新のブラウザでは、img要素にloading="lazy"を追加するだけで、簡単に遅延読み込みを実装できます。 <img src="example.jpg" loading="lazy" alt="例の画像"> この方法は最も簡単ですが、古いブラウザでは動作しない点に注意が必要です。ただ、最近のブラウザのほとんどはサポートしているので、おそらくはこれで十分です。 JavaScriptライブラリを使う方法より細かい制御や古いブラウザへの対応が必要な場合は、JavaScriptライブラリを使う方法があります。代表的なライブラリには以下のようなものがあります。 lazysizes lozad.js vanilla-lazyload 例えば、lazysizesを使った実装は以下のようになります。  <script src="lazysizes.min.js"></script>  <img data-src="example.jpg" class="lazyload" alt="例の画像"> このように、src属性の代わりにdata-src属性を使い、classに「lazyload」を追加します。これにより、画像が表示領域に入ったときに自動的に読み込まれるようになります。 2. 動画の遅延読み込み動画も画像と同様に遅延読み込みが可能です。 YouTube動画の遅延読み込み方法 YouTube動画の埋め込みは、遅延読み込みの効果が特に大きい対象です。以下のような方法で実装できます。まず、通常のiframe埋め込みではなく、動画IDだけを持つコンテナを用意しますそのコンテナ内に、YouTubeのサムネイル画像を表示します（これは軽量です）再生ボタンの見た目のデザインも配置しますユーザーがクリックしたときだけ、JavaScriptでiframeを生成して実際の動画プレーヤーを読み込みますこの方法の優れている点は、ユーザーが実際に動画を見たいと思うまで、重いYouTubeプレーヤーを読み込まないことです。サムネイル画像は数十KBしかないのに対し、YouTubeプレーヤーは1MB以上のデータをダウンロードするため、大きな通信量の削減になります。また、複数の動画がある場合は特に効果が高く、ユーザーが興味を持った動画だけが読み込まれるので、不要なデータ通信が発生しません。ページの初期表示も大幅に速くなります。 CSSでプレイボタンをきれいに表示すれば、ユーザーにとっては普通の埋め込み動画と変わらない見た目になるので、使い勝手も損なわれません。 WordPressでのやり方 WordPressを使っている方も多いと思いますので、WordPressでの遅延読み込みの実装方法も紹介します。プラグインを使う方法 WordPressでは、プラグインを使えば簡単に遅延読み込みを実装できます。人気のプラグインには以下のようなものがあります。 WP Rocket（有料） Autoptimize a3 Lazy Load Lazy Load by WP Rocket（無料）例えば、「Lazy Load by WP Rocket」をインストールして有効化するだけで、ホームページ内のすべての画像に自動的に遅延読み込みが適用されます。設定画面で細かい調整も可能です。手動でコードを追加する方法より細かい制御が必要な場合は、子テーマのfunctions.phpなどにコードを追加する方法もあります。 function add_lazy_loading_to_images( $content ) { return preg_replace( '/(<img[^>]+)src=/i', '$1 loading="lazy" src=', $content ); } add_filter( 'the_content', 'add_lazy_loading_to_images' ); このようなコードを追加すれば、投稿内のすべての画像に自動的にloading="lazy"属性が追加されます。遅延読み込みの注意点遅延読み込みは効果的な技術ですが、いくつか注意すべき点もあります。 SEOへの影響 Googleは画像やコンテンツのインデックスを作成する際、遅延読み込みされたコンテンツも基本的にはクロールできますが、実装方法によっては問題が生じることがあります。特に、JavaScriptに依存した実装では、クローラーがそのコンテンツを見つけられない可能性があります。【注意するポイント】 HTML5のloading="lazy"属性を優先して使用する noscript要素内にも画像を記述する重要なコンテンツは遅延読み込みを避ける商品画像など、検索エンジンからの流入に重要な画像は、遅延読み込みを避けるか、SEOに配慮した実装にすることが大切です。ユーザーの使いやすさへの影響遅延読み込みはユーザーの使いやすさを向上させる目的で行いますが、間違ったやり方をすると逆効果になることもあります。スクロール時に画像が遅れて表示されて、がたつきが発生するプレースホルダーがなく、空白が表示されてしまうスクロールが速すぎると画像が読み込まれない【注意するポイント】適切なプレースホルダーを用意する（ブラウザの表示幅変更防止）画像サイズ（width/height属性）を明示的に指定するスクロール前に少し先の画像も先読みするよう設定するプレースホルダーについては、グレーの背景や、画像のアウトラインだけを表示するなどの工夫ができます。こうすることで、画像読み込み時のレイアウト崩れを防ぎつつ、ユーザーにも「ここに画像が表示される」ことを伝えられます。ファーストビューのコンテンツページを開いたときに最初に表示される部分（ファーストビュー）のコンテンツには、遅延読み込みを適用すべきではありません。これらのコンテンツは可能な限り早く表示することが重要です。ホームページのヒーローイメージ（メイン画像）やロゴ、メニューなどは遅延読み込みの対象外としなければなりません。重要な指標への配慮 GoogleのCore Web Vitalsなど、表示速度に関する重要な指標への影響も考慮する必要があります。特にLargest Contentful Paint（LCP）という、ページの主要なコンテンツが表示されるまでの時間を示す指標は重要です。 LCPの対象となる可能性が高い大きな画像や要素には、遅延読み込みを適用せず、優先的に読み込むようにしましょう。逆に、LCP対象外の画像には積極的に遅延読み込みを適用することで、バランスを取ることができます。ユーザーへの思いやりとしての遅延読み込み遅延読み込みは、ユーザーの使いやすさを考えた配慮です。インターネットを利用するユーザーは、様々な環境で私たちのホームページを訪れます。高速な光回線を使っている人もいれば、地下鉄の中で不安定な通信環境の中でアクセスしている人もいます。データ通信量を節約したい人や、古いスマホを使っている人もいます。そんな多様なユーザーすべてに、快適なホームページ体験を提供するためには、「必要なものを、必要なときに」というアプローチが大切です。遅延読み込みはまさにその考え方を実現する技術なのです。またこういった表示速度の改善を含む、ユーザーに優しい親切なWebサイトにするための取り組みを紹介している記事もありますので、是非あわせて読んでください。効果的な遅延読み込みでユーザーの使いやすさを向上遅延読み込みは、初期表示速度の向上、通信量の削減、サーバー負荷の軽減などの効果をもたらし、結果としてユーザーの満足度を高める効果的な技術です。画像、動画、アイフレームなど、容量の大きいコンテンツを後から読み込むことで、「見たいコンテンツをすぐに見られる」という快適な閲覧体験をユーザーに提供できます。実装方法も、HTMLのloading属性やJavaScriptライブラリ、WordPressプラグインなど様々な選択肢があり、ホームページの規模や目的に応じて最適な方法を選べます。 SEOへの影響や使いやすさなど配慮すべき点はありますが、適切に実装すれば「速さ」と「使いやすさ」の両立が可能です。表示速度の向上は、直帰率の低下、滞在時間の延長、コンバージョン率の向上など、大きなメリットが出てきます。是非あなたのホームページにも、ユーザーへの思いやりとして遅延読み込みを取り入れてみてください。それが「使いやすいホームページ」への第一歩となるはずです。表示速度に関してお悩みであれば、当社のホームページを使いやすく改善する取り組みを重視したWebコンサルティングを是非ご検討ください。ユーザーファーストの視点で、サクサク動く快適なホームページに改善するお手伝いができます。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
28May
- 【ページの表示速度改善】Webフォントの見直し
  Webコンサルタントの松崎です。これまで「表示速度の改善はユーザーへの配慮で一番大事です」や「画像の軽量化のやり方」、「次世代画像形式WebPやAVIFのメリットと変換方法」、「過剰なモーションの見直し（JavaScript最適化）」など、ホームページの表示速度を改善するための具体的な方法をご紹介してきました。今回は、意外と見落とされがちな表示速度低下の原因「Webフォント」について説明します。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次 Webフォントとは何か？ Webフォントのメリット Webフォントの種類 Webフォントが表示速度に与える影響表示速度低下の主な原因 Webフォントを最適化する5つの方法 1. 必要な文字だけを読み込む（サブセット化） 2. フォントの種類・ウェイトを制限する 3. フォント表示方法を最適化する 4. フォントファイル形式を最適化する 5. フォントのプリロードを活用する代替方法：システムフォントの効果的な利用フォントスタックの活用制作会社に依頼する際のポイント Webフォントの利用判断チェックリストユーザーファーストでフォントを選ぶ美しさと速さを両立するフォントの最適化フォントはページの見た目の印象を大きく左右するものですが、使い方を間違えると表示速度に悪影響を与えます。どうすれば「デザイン性」と「表示速度」のバランスを取れるのか、一緒に見ていきましょう。 Webフォントとは何か？あなたは「フォント」と聞くと、何を思い浮かべますか？フォントとは文字の形や太さ、デザインのことです。手書きの手紙では、人それぞれに個性的な「字体」がありますよね。パソコンやスマホでも同じように、文字の見た目を変えることができます。 Webフォントとは、インターネット上で利用できる特殊なフォントのことです。普通はパソコンやスマホには限られた種類のフォントしかインストールされていません。でも、Webフォントを使えば、閲覧しているユーザーのスマホやPCにインストールされていないフォントでもホームページの文字として表示できるものです。簡単に言うと、「どのデバイスでも同じ見た目の文字を表示できる仕組み」です。 Webフォントのメリット Webフォントには、多くのメリットがあります。ブランドの個性を表現できるどのデバイスでも同じデザインで表示される読みやすいフォントで閲覧体験を向上できる特殊な言語や記号も美しく表示できるデザイン全体の統一感が出せる Webフォントを使うことで、ブランドの世界観を一貫して表現できます。また、ユーザーのデバイスに依存せず、デザイナーが意図した通りの見た目で表示できるので、ブランドイメージを正確に表現することができます。また、視認性や可読性に優れたフォントを選ぶことで、ユーザーの読みやすさを向上させて、内容を理解しやすく配慮することもできます。 Webフォントの種類主なWebフォントサービスには以下のようなものがあります。 Google Fonts（無料で利用できる多数のフォント） Adobe Fonts（有料のクリエイティブクラウド契約で利用可能）フォントプロバイダーの商用Webフォント（モリサワ、フォントワークスなど）自前でサーバーにフォントファイルを設置する方法日本語フォントの場合、漢字が多いため、フォントファイルのサイズが非常に大きくなりがちです。これが表示速度が遅くなってしまう大きな要因になっています。 Webフォントが表示速度に与える影響 Webフォントは見た目の美しさを追求できる反面、表示速度の低下に大きく影響します。表示速度低下の主な原因表示速度低下の主な原因として、次の点が考えられます。フォントファイルのサイズが大きい追加のHTTPリクエスト FOIT（Flash of Invisible Text） FOUT（Flash of Unstyled Text）【フォントファイルのサイズが大きい】特に日本語フォントは、何千もの文字を含むため、ファイルサイズが1MB〜4MB以上になることもあります。これは中サイズの画像5〜20枚分に相当します。英語など、アルファベットだけのフォントと比べると、漢字・ひらがな・カタカナを含む日本語フォントは文字数が桁違いに多いため、ファイルサイズも必然的に大きくなります。【追加のHTTPリクエスト】 Webフォントは外部サーバーから読み込まれるため、追加の通信が必要になります。特に遅い通信環境では、この時間が無視できません。ホームページの表示プロセスで、HTML、CSS、JavaScriptに加えて、さらにフォントファイルのリクエストが発生するため、表示完了までの時間が長くなってしまいます。【FOIT（Flash of Invisible Text）】フォントが読み込まれるまで文字が表示されない現象です。ユーザーは白い画面を見続けることになります。この状態では、ユーザーはコンテンツを読むことができないばかりか、ページが正しく読み込まれているのかどうかも分かりません。ストレスを感じたユーザーが離脱する原因になります。【FOUT（Flash of Unstyled Text）】フォントが読み込まれる前に、一時的にデフォルトフォント（普通のフォント）で表示される現象です。読み込み完了時に文字のレイアウトが崩れることがあります。フォントの種類によって文字幅や高さが変わるため、レイアウトが突然変化すると、ユーザーが読んでいた位置を見失うことがあります。これも使いやすさを大きく損なう要因です。こういった問題はスマホユーザーにとって問題になります。電波の弱い場所では、Webフォントの読み込みに数秒から数十秒かかることもあります。その間、ユーザーはずっと待たされることになります。 Webフォントを最適化する5つの方法 Webフォントの表示速度への影響を最小限に抑えるには、いくつかの対策ができます。 1. 必要な文字だけを読み込む（サブセット化）日本語フォントには7,000文字以上の漢字が含まれていますが、実際にホームページで使用するのはその一部です。よく使われる300〜500文字程度に絞れば、フォントファイルのサイズを大幅に削減できます。【サブセット化のメリット】ファイルサイズが80〜95%削減できる読み込み時間が大幅に短縮される一般的な漢字のみを含めれば十分な場合が多いサブセット化する際は、ホームページ全体で使われている文字をすべて把握する必要があります。漏れがあると、その文字だけデフォルトフォント（普通のフォント）で表示されてしまいます。 2. フォントの種類・ウェイトを制限するデザイナーは様々なフォントやウェイト（太さ）を使いたがりますが、それぞれが別のファイルとして読み込まれることを忘れがちです。【フォント制限のポイント】ホームページ全体で使うフォントを1〜2種類に限定する太さ（ウェイト）も必要最低限に絞る（例：Regular、Boldのみ）特殊なスタイル（斜体など）も必要なければ省くフォントの種類や重さを制限することは、単に表示速度の向上だけでなくデザイン的な洗練さにも繋がります。フォントを1〜2種類に絞り、必要なウェイトだけを使用することで、視覚的な一貫性が生まれ、ユーザーの読みやすさも向上します。また、過剰なフォントバリエーションは情報の階層構造を曖昧にし、かえってデザインの焦点がぼやけてしまうことがあります。 3. フォント表示方法を最適化する CSSのfont-displayプロパティを活用して、フォント読み込み中の表示方法を制御できます。【主なfont-displayの値】 swap：フォント読み込み中はシステムフォントで表示し、読み込み完了後に切り替える（FOUTは発生するが、テキストがすぐ表示される） optional：通信環境が良い場合だけWebフォントを使用し、悪い場合はシステムフォントを使用 fallback：短時間だけ不可視状態を許容し、それ以上かかる場合はシステムフォントに切り替えるスマホユーザーが多いホームページでは、テキストがすぐに表示されるswapが良いと思います。 @font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; } 「swap」設定を使えば、Webフォントの読み込み中でもすぐに代替フォントでコンテンツが表示されるので、ユーザーは待たされることな見られるようになります。Webフォントが読み込まれたときに見た目は切り替わりますが、使いやすさが損なわれることはほとんどありません。 4. フォントファイル形式を最適化する Webフォントには様々なファイル形式があり、最新の形式を選ぶことで容量を削減できます。【主なフォントファイル形式】 WOFF2：最も圧縮率が高く、最新のブラウザはほぼ対応 WOFF：圧縮率が高く、広いブラウザで対応 TTF/OTF：圧縮率は低いが、互換性が高い EOT：古いInternet Explorer向け最新のWOFF2形式は、従来のTTF形式と比べて30〜50%ほどファイルサイズを削減できます。ただし、古いブラウザでは表示されない可能性があるため、複数の形式を用意しておくとよいでしょう。 5. フォントのプリロードを活用する重要なWebフォントは、HTMLの<head>タグ内でプリロード指定することで、優先的に読み込むことができます。 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> これは、特に重要なフォント（ホームページ名やメインタイトルに使うフォントなど）に対して効果的です。ただし、プリロードしすぎると他のリソースの読み込みが遅れるため、本当に必要なものだけに限定しましょう。代替方法：システムフォントの効果的な利用 Webフォントにこだわらなくても、システムフォント（閲覧者のデバイスに既にインストールされているフォント）を効果的に使う方法もあります。フォントスタックの活用複数のフォントを優先順位をつけて指定して、利用可能なものを表示する方法です。 body { font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } これは上から順に「このフォントがあれば使って、なければ次のフォントを」と指示するものです。最新のシステムフォントは十分にキレイで、読みやすいものも多いです。 AppleやGoogleでは優れたシステムフォントを提供しているので、賢く組み合わせれば、Webフォントを使わなくても美しいデザインを表現できます。制作会社に依頼する際のポイントホームページの制作やリニューアルを外部に依頼する際は、Webフォントについてもきちんと伝えて依頼することが大切です。【制作会社への依頼ポイント】 Webフォントの表示速度への影響を理解しているかを確認するサブセット化の実施を明確に依頼するフォントの種類・ウェイトを必要最小限に抑えるよう指示する font-displayプロパティの設定を依頼する代替案としてシステムフォントの活用も検討するよう伝える残念ながら、表示速度に全く配慮しない制作会社も多く存在します。最適化の方法を知らないので「デザイン重視」と言って、重いWebフォントをそのまま使うケースがほとんどです。契約前に必ず確認しておきましょう。 Webフォントの利用判断チェックリスト以下のチェックリストを参考に、Webフォントを使うべきかどうか判断してみてください。ブランディング上、特定のフォントが必須か？ターゲットユーザーはどんな環境でホームページを閲覧するか？コンテンツのテキスト量はどれくらいか？ページ表示速度でユーザーに我慢させないか？すべての質問に肯定的な答えが出ない場合は、システムフォントの活用も検討する価値があります。ユーザーファーストでフォントを選ぶ Webフォントの選択は、単なるデザインの問題ではなく、これも「ユーザーへの配慮」の問題です。インターネットを使うすべての人が、高速回線や最新デバイスを持っているわけではないということ。通勤電車の中や地方の電波の弱い場所、データ通信制限がかかっている状況など、様々な環境でホームページは閲覧されます。「デザインの美しさ」と「使いやすさ」は対立するものではありません。むしろ、本当に優れたデザインとは、見た目の美しさと機能性を両立させたものです。フォントも同じで「見た目の個性」と「素早く読める」ことの両方が大切です。あなたのホームページを訪れたユーザーが、ストレスなく情報を得られるよう、フォントの選択と最適化には是非こだわってください。美しさと速さを両立するフォントの最適化 Webフォントは、ホームページに個性や洗練さを加える素晴らしい機能です。しかし、何も考えずに使うと、表示速度がすごく遅くなり、ユーザーに使いにくさを強制させることになってしまいます。重要なことは、デザイン性と表示速度のバランスを取ることです。サブセット化、フォント種類の制限、font-displayプロパティの活用など、様々な最適化手法を組み合わせて、「見た目の魅力」と「使いやすさ」を両立させましょう。また、すべてのケースでWebフォントが必須というわけではありません。システムフォントを効果的に活用することで、読み込み時間を短縮しながらも、十分に美しいデザインを実現できます。ホームページはどんなに美しいフォントを使っていても、読み込みが遅すぎて離脱されてしまっては、その美しさを伝えることすらできません。ユーザーの環境や使いやすさを第一に考えて、最適なフォント戦略を選びましょう。当社ブログでユーザーに優しい親切なWebサイトにするための取り組みについて書いていますので、是非あわせてご覧いただければと思います。表示速度に配慮したホームページを制作したい、表示速度を改善したいとお考えの方は、当社のWebコンサルティングで、ホームページ改善および集客をご検討ください。ユーザーに優しく、かつ魅力的なウェブサイト作りをお手伝いいたします。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
27May
- 【ページの表示速度改善】過剰なモーションの見直し（JavaScript最適化）
  Webコンサルタントの松崎です。ここまでページ表示スピードの改善について、画像を最適化する具体的なやり方を、「画像の軽量化のやり方」や「次世代画像形式で画像軽量化」で見てきました。今回は、画像以外に表示速度を大きく低下させる原因の一つの「過剰すぎるモーション（動き）の改善」について、具体的な対処法としてJavaScript最適化の方法を説明します。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次見た目優先でユーザーの使いやすさが犠牲になっている動きと速度のバランスを考える必要な動きと不要な動きの見分け方 JavaScriptを最適化する具体的な方法 1. 現状を把握する 2. 不要なJavaScriptを特定する 3. 必要なJavaScriptを最適化する 4. CSSアニメーションへの移行を検討する 5. 制作会社に依頼する際のポイント 6. 効果を測定し、調整する JavaScript最適化時の注意点ブラウザの互換性に注意段階的に変更を加える機能と見た目のバランスを保つ不要なモーション見直しのまとめユーザーファーストのホームページ作りを表示速度と見た目のバランスを取る見た目と使いやすさのバランスをどう取るべきか、見ていきます。見た目優先でユーザーの使いやすさが犠牲になっている最近のホームページ制作は、「見た目の美しさ」や「派手さ」が優先され、「ユーザーの使いやすさ」が二の次になっています。スクロールするとフワッと浮かび上がる要素、ゆっくり回転するアイコン、マウスを動かすと追従する背景...など、ユーザーが望んでもいない動きが過剰に取り入れられています。多くのホームページ制作会社が「見栄えがキレイ」「モダンなデザイン」を過度に重視し、「ページの表示速度」や「操作のしやすさ」などのユーザーの使いやすさに配慮していない現状です。制作会社の実績ページに掲載される事例は見た目が派手なものが多く、それだけが「良いホームページ」の基準になっているように感じます。でも、実際のユーザーは華やかなアニメーションよりも「欲しい情報にスムーズにアクセスできる」「ストレスなくサクサク見ていける」ホームページを無意識に選んでいます。過剰なモーションは、以下のような様々な問題を引き起こします。ページの読み込み時間が長くなるスクロールがスムーズに動かないユーザーが使いにくい古いデバイスでは正常に動作しないスマホバッテリーの消費が激しくなるデータ通信量が増えるこうした状況は、ユーザーに「我慢」させています。そして、我慢できないユーザーは「戻る」ボタンを押して、競合他社のホームページへと行ってしまいます。動きと速度のバランスを考える「でも、動きがないとつまらないホームページになってしまう...」そう思われるかもしれません。確かに、適切な動きはユーザーの使いやすさを向上させるケースもあります。ボタンをクリックした時の反応メニューの開閉時のスムーズな動き画像ギャラリーのスライド機能フォームの入力エラーの表示これらは使いやすさの面から考えると必要な動きと言えます。問題なのは「必要な動き」と「不要な動き」の区別がついていないケースです。必要な動きと不要な動きの見分け方では、どのようにして必要な動きと不要な動きを見分ければよいのか。いくつかのチェックポイントを紹介します。【必要な動き】ユーザーの操作をサポートしている情報の理解を助けている控えめで目的がはっきりしている繰り返し見ても邪魔に感じない【不要な動き】単に華美に見せるためだけのものコンテンツの理解を妨げる過剰で派手すぎる繰り返し見るとうんざりするスクロール速度に追いつかない例えば、ページを開いた瞬間に大きく動くヒーローイメージは印象的で良いです。でも、そのために5秒も待たされるなら、ユーザーにとっても、集客でもマイナスと言えます。 JavaScriptを最適化する具体的な方法具体的にどのようにしてJavaScriptを最適化し、不要なモーションを見直せばよいのか。 1. 現状を把握するまずは現在のホームページがどれだけのJavaScriptを使用しているか、どんなモーションが使われているかを確認しましょう。【簡単なチェック方法】 Google Chrome のデベロッパーツール（F12キーで開きます） PageSpeed Insights（https://pagespeed.web.dev/）こういったツールを使うと、ホームページが読み込んでいるJavaScriptファイルの数やサイズ、実行にかかる時間などが確認できます。特にチェックしたいポイントは「レンダリングをブロックするリソース」や「未使用のJavaScript」といった項目です。これは表示速度に大きく影響します。 2. 不要なJavaScriptを特定する次に、本当に必要なJavaScriptと不要なものを見分けます。使っていないプラグインやライブラリ複数のアニメーションライブラリ（JQueryとGSAPを併用）すべてのページで使っていない機能のためのコード画面に表示されない部分の過剰なアニメーション古いバージョンのjQuery 古いバージョンのjQueryは要注意です。 jQueryは2006年に登場したライブラリで、当時は革新的でしたが、現在では多くの機能がモダンJavaScriptで直接サポートされています。古いjQueryを使い続けると、様々なリスクが出てきます。セキュリティ上の脆弱性新しいブラウザでの互換性の問題不必要に大きなファイルサイズ他のライブラリとの競合によるエラーまた、かつては定番だったSNSシェアボタンも、今や不要なケースが増えています。現代のスマートフォンには標準で共有機能が搭載されており、特にシェアボタン用のプラグインがなくても、ユーザーは簡単にコンテンツを共有できます。それなのに、わざわざ読み込みをすごく遅くするSNSボタンプラグインを読み込んでいるホームページが多いのはとても残念です。 3. 必要なJavaScriptを最適化する完全に不要なJavaScriptを削除した後は、必要なJavaScriptも最適化しましょう。【JavaScriptの最適化方法】コードの軽量化（ミニファイ）複数のJavaScriptファイルの統合遅延読み込み（Lazy Loading）の導入非同期読み込み（async/defer属性の活用）特に効果的な最適化は「遅延読み込み」です。これは、ページの初期表示に必要ないJavaScriptを後回しにして、まず重要なコンテンツを表示する方法です。例えば、ページの下部にあるアニメーションは、ユーザーがスクロールしてその部分が見えるようになってから読み込むようにします。 4. CSSアニメーションへの移行を検討するモーションの中には、重いJavaScriptを使わなくても、CSSだけで実現できるものがあります。 CSSアニメーションはJavaScriptアニメーションに比べて軽量で、パフォーマンスへの影響が少ないことが多いです。【CSSで代替可能な一般的なアニメーション】フェードイン/フェードアウトスライドイン色の変化拡大/縮小回転例えば、マウスホバー時のボタンの色変化や、シンプルなスライドインなどは、JavaScriptを使わずにCSSだけで実装できます。 5. 制作会社に依頼する際のポイントホームページ制作会社に依頼する場合、以下のポイントを明確に伝えることが大切です。プロと言っても、正しく最適化してくれるとは限りません。表示速度を重視することを最初に伝える「見た目よりも使いやすさを優先してほしい」と明確に指示する PageSpeed Insightsで80点以上を目指すよう依頼する不要なアニメーションは避けるよう指示する完成後に表示速度の検証を行うことを約束してもらう見栄えの良さだけを売りにしている制作会社は、ユーザーの使いやすさより派手なデザイン、流行りの見せ方を優先します。契約前にこれまでの制作実績のページ表示速度をチェックするのも良い方法です。 6. 効果を測定し、調整する最適化を行った後は、必ず効果を測定しましょう。 PageSpeed Insights（https://pagespeed.web.dev/）などのツールを使って、改善前と改善後のスコアやロード時間を比較します。また、実際のユーザーの反応も確認することが大切です。表示速度が速くなって使いやすくなったという良い反応があれば成功ですが、「あの動きがなくなって残念」といった声があれば、その部分は復活させることも検討します。最適化はユーザー満足度を上げるためのものですから、バランスが重要です。 JavaScript最適化時の注意点 JavaScriptの最適化を行う際には、いくつか注意ポイントがあります。ブラウザの互換性に注意 JavaScriptを変更する際は、様々なブラウザで正常に動作するか確認しましょう。特に、IE（Internet Explorer）のような古いブラウザを使っているユーザーがまだ多い業種・業界の場合は特に注意が必要です。スマホでの確認を忘れずに最適化した効果はスマホ環境で顕著にあらわれます。なので、PC環境だけでなく、必ずスマートフォンでもテストを行いましょう。段階的に変更を加える一度にすべてのJavaScriptを変更するのではなく、影響の少ない部分から段階的に変更していくようにしましょう。そうすることで、問題が発生した場合に原因を特定しやすくなります。機能と見た目のバランスを保つ最適化のために機能や見た目を犠牲にしすぎないよう注意しましょう。例えば、ブランドイメージを強く印象づけるキービジュアルのアニメーションは残し、あまり目立たない部分のアニメーションを削減するといった判断が必要です。不要なモーション見直しのまとめ JavaScriptと不要なモーションの見直しについて、ポイントをまとめます。現状を把握し、問題点を明確にする必要な動きと不要な動きを見分ける不要なJavaScriptを削除する必要なJavaScriptは最適化する可能な限りCSSアニメーションに移行する効果を測定し、継続的に改善するこうした取り組みにより、見た目の訴求力を損なうことなく、表示速度とユーザーの使いやすさを大幅に改善することができます。当社が提供しているホームページの改善でJavaScript最適化も行うWebコンサルティングでは、見た目の美しさと使いやすさの両立にこだわったホームページ制作と改善を行なっています。ユーザーファーストのホームページ作りを表示速度の改善やJavaScriptの最適化は、テクニカルな取り組みのように感じるかもしれませんが、本当の目的は「ユーザーのことを考える」ことです。派手な動きや流行りの演出は確かに魅力的ですが、それがユーザーを待たせたり、操作をしづらくしたりするなら、本末転倒です。初めて訪れるユーザーにとって、表示速度は「このサイトを使い続けるかどうか」がを判断する重要な要素になります。ホームページでのユーザーへの親切と優しさがSEOの本質であることは以前にもお伝えしました。不要なモーションの見直しも、そうした「親切」の一つとして捉えてください。「かっこいいデザイン」よりも「使いやすさ」をユーザーのことを考えて優先する。そうすることで、ユーザーの信頼を得て、長期的な成果につながっていくはずです。表示速度と見た目のバランスを取る JavaScriptの最適化と不要なモーションの見直しは、ホームページの表示速度を向上させるとても効果的な方法です。適切な動きは残しつつ、過剰な演出を削除することで、見た目の魅力と使いやすさのバランスを取ることができます。重要なポイントは「本当にユーザーにとって必要な動きはどれか」を見極めることです。単なる装飾のための動きだったら、思い切って削減することを検討しましょう。また、JavaScriptで実装している動きの中には、より軽量なCSSに置き換えられるものも多くあります。制作会社にCSSでの実装を依頼しましょう。表示速度の改善は、直接的にユーザーの使いやすさの向上をSEOでの評価向上につながります。「見た目重視」から「ユーザー重視」へと発想を転換し、本当の意味で価値あるホームページに改善していきましょう。ホームページの表示速度が遅くてお悩みの方は、ぜひお気軽にご相談ください。「速くて見やすい」ユーザーファーストのホームページづくりを進めていきましょう。初回相談は無料です。いつでもお気軽にご相談ください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
26May
- 【ページの表示速度改善】次世代画像形式WebP・AVIFのメリットと変換方法
  Webコンサルタントの松崎です。前回の記事「画像の軽量化でホームページの表示速度アップ！」では、TinyPNGなどのツールを使った画像圧縮の方法についてご紹介しました。今回は、さらに一歩進んで「次世代画像形式」と呼ばれるWebPやAVIFについて詳しく見ていきます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次次世代画像形式とは何か？ WebPとは AVIFとは次世代画像形式を使うメリット大幅なファイルサイズの削減ページ表示速度の向上モバイルユーザーへの配慮 SEO対策としての効果次世代画像形式導入の注意点ブラウザ対応状況に注意フォールバック対策の必要性画像生成の手間どのタイミングで導入すべきか導入を検討すべきケース段階的な導入アプローチ次世代画像形式導入のまとめユーザーを第一に考えた技術選択を技術と親切で表示速度を最適化する！これらの新しい画像形式を活用すれば、ホームページの表示速度をさらに向上させることができます。そして、ユーザーにより快適な閲覧環境を提供できるようになりますよ。次世代画像形式とは何か？皆さんがよく知っている画像形式といえば、JPEG（またはJPG）、PNG、GIFなどがありますよね。これらは長年使われてきた標準的な画像ファイル形式ですが、実はインターネットに関連する様々な仕様が進化して、より効率的な新しい画像形式が開発されました。それが「次世代画像形式」と呼ばれるWebPやAVIFです。 WebPとは WebP（ウェッピー）は、Googleが2010年に開発した画像形式です。 JPEGと同等の画質を保ちながら、ファイルサイズを25～35％も削減できるのが特徴です。 WebPの魅力は、JPEGのような「写真」とPNGのような「透明度を持つ画像」の両方の良いところを兼ね備えている点です。つまり、一つの形式で幅広い種類の画像に対応できます。さらに、WebPはアニメーション表示にも対応しており、従来のGIF形式よりも大幅に軽量化できます。動くバナーやアイコンなども、より小さなファイルサイズで表現できます。 AVIFとは AVIF（エイブイアイエフ）は、さらに新しい画像形式で、2019年頃から注目されるようになりました。AV1という動画圧縮技術をベースにしており、WebPよりもさらに高い圧縮率（軽くなる）を実現しています。具体的には、同じ画質でJPEGと比較すると50％以上、WebPと比較しても20％程度ファイルサイズを削減できるとされています。色の表現力も高く、より鮮やかで自然な画像を小さなサイズで表現できます。次世代画像形式は「同じ見た目なのに、より軽い素材で作られた家具」のようなものです。見た目や使い勝手はそのままに、持ち運びや設置が格段に楽になるイメージです。次世代画像形式を使うメリット次世代画像形式を導入することで、様々なメリットが出てきます。主なメリットを見ていきます。大幅なファイルサイズの削減次世代画像形式の最大のメリットは、従来形式と比べて大幅にファイルサイズを削減できる（軽くできる）点です。 JPEG（従来形式）の100KBの画像が、WebPでは約65～75KB程度に PNGの250KBのロゴ画像が、WebPでは100KB前後に JPEGの100KBの画像が、AVIFでは約45～55KB程度にファイルサイズが小さくなるということだけを見ると「それほど変わらないのでは？」と思うかもしれません。しかし、ホームページ全体で10枚、20枚、それ以上に画像を使っていると、その差は大きく膨らみます。特に画像を多く使うECサイトやポートフォリオサイトでは、トータルで数メガバイトもの差になることも珍しくありません。ページ表示速度の向上ファイルサイズが小さくなれば、その分だけダウンロード時間が短縮され、ページ全体の表示が速くなります。例えば、3G回線などの遅い通信環境では、従来形式で2MB分の画像を読み込む場合、約5～7秒かかっていたものが、WebPなら約3～5秒、AVIFなら約2～4秒程度まで短縮できる可能性があります。こうした差は、ユーザーの体感速度に大きく影響します。前回の記事でも触れましたが、表示に3秒以上かかるとユーザーの40%が離脱するとされています。次世代形式の導入は、この「3秒の壁」を突破するための強力な武器になります。モバイルユーザーへの配慮スマホでの閲覧が主流となっている今、スマホ環境での表示速度はとても重要です。通信制限がかかっているユーザーや、電波の弱い場所にいるユーザーにとって、画像サイズの削減はとても大きいです。データ通信量の節約にもなりますし、バッテリー消費も抑えられます。私も出先のカフェなどでスマホを使いますが、画像が最適化されたサイトと、そうでないサイトでは体感速度に大きな差を感じます。ユーザーに「このホームページは、サクサク見られて使いやすい！」と思ってもらえるかどうかは、こうした細部への配慮にかかっています。 SEO対策としての効果 Googleは表示速度を検索ランキングの重要な要素として位置づけています。特に2021年から導入された「Core Web Vitals」という指標では、表示速度に関する評価がより厳密になっています。次世代画像形式を導入して表示速度が向上すれば、これらの指標も改善され、SEO効果が期待できます。特にモバイル検索でのランキング向上に貢献できるでしょう。次世代画像形式導入の注意点次世代画像形式は魅力的ですが、いくつか注意すべきポイントもあります。ブラウザ対応状況に注意 WebPやAVIFは比較的新しい形式のため、古いブラウザでは表示できない場合があります。現在のブラウザ対応状況を見てみます。【WebPの対応状況】 Chrome、Edge、Firefox、Safariの最新版はすべて対応 Internet Explorer 11は非対応 2023年時点で、世界のブラウザの約95％以上が対応【AVIFの対応状況】 Chrome、Firefox（バージョン93以降）、Edge（バージョン95以降）は対応 Safari（バージョン16以降）は部分的に対応 2023年時点で、世界のブラウザの約80％程度が対応このように、WebPはかなり普及していますが、AVIFはまだ対応が完全とは言えません。そのため、非対応ブラウザへのフォールバック（代替表示）対策が必要です。フォールバック対策の必要性非対応ブラウザでも正しく画像が表示されるよう、フォールバック対策をしておく必要があります。 HTML5の<picture>要素を使ったフォールバックの例を見てみましょう。 <picture> <source type="image/avif" srcset="image.avif"> <source type="image/webp" srcset="image.webp"> <img src="image.jpg" alt="画像の説明"> </picture> このようなコードを使うと、ブラウザが対応している最適な形式を自動的に選択してくれます。 AVIFに対応していればAVIFを、WebPに対応していればWebPを、どちらも対応していなければJPEGを表示するという仕組みです。画像生成の手間次世代形式の画像を生成するには、専用のツールやサービスを使わなければなりません。【代表的ツール】 WebP変換：Google提供の「WebP Converter」、Adobe Photoshopの最新版、オンラインツール「Squoosh」など AVIF変換：「avifenc」というコマンドラインツール、「Squoosh」などのオンラインツールこれらのツールを使って画像を変換する手間が発生するため、多数の画像を扱うホームページでは、しっかりと手順を考えて取り組む必要があります。また、WordPressなどのCMSを使っている場合は、「WebP Express」「EWWW Image Optimizer」などのプラグインを活用すると、自動的に次世代形式に変換してくれるので便利です。どのタイミングで導入すべきか次世代画像形式はすべてのホームページにすぐに導入すべきものではありません。状況に応じて判断する必要があります。導入を検討すべきケース画像を多用しているホームページ PageSpeed Insightsのスコアが低いホームページスマホユーザーが多いホームページ国際的なユーザーを対象としているホームページ画像が数枚しかないシンプルなホームページでは、導入効果があまり感じられないこともあります。その場合は、前回の記事で絵紹介したような従来の形式での最適化（サイズ調整や圧縮）を先に行うほうが良いでしょう。段階的な導入アプローチまずはWebPから導入する重要な画像から優先的に変換する効果を測定しながら拡大する余裕があればAVIFも検討する 1. まずはWebPから導入する対応ブラウザが多いWebPを先に導入し、効果と運用の手間を確認します。 WebPはブラウザサポートが広く、実用的な圧縮率を持つため、最初の一歩として最適です。運用手順の確立や技術的な課題の洗い出しも、比較的リスクの少ないWebPから始めるのが安心です。 2. 重要な画像から優先的に変換するトップページのメインビジュアルや商品画像など、表示速度への影響が大きい画像から変換していきましょう。特にファイルサイズの大きな画像やコアウェブバイタルの「Largest Contentful Paint」の対象となるような重要な視覚要素を優先すると、効果を実感しやすくなります。 3. 効果を測定しながら拡大する PageSpeed Insightsなどのツールで効果を測定しながら、対象画像を増やしていきましょう。数値の改善が見られれば、より多くの画像へと変換対象を広げていくことができます。また、実際のユーザー行動データも確認し、直帰率や滞在時間にどう影響しているかも分析すると良いでしょう。 4. 余裕があればAVIFも検討する WebPでの運用に慣れたら、さらなる圧縮率を求めてAVIFの導入も検討してみましょう。 AVIFはより高い圧縮率を持ちますが、ブラウザ対応が限られるため、WebPでの基盤ができた後に段階的に導入するのが効果的です。特に画像が多く、さらなる表示速度向上を目指すサイトに適しています。こうした段階的なアプローチを取ることで、急激な変更によるリスクを抑えつつ、取り組んでいくことができます。次世代画像形式導入のまとめ目的を明確にブラウザ対応を確認運用フローを考える効果測定の計画段階的なアプローチ目的を明確に「表示速度の向上」「ユーザー体験の改善」「SEO対策」など、次世代画像形式を導入する目的を明確にすることが重要です。目的が明確であれば、どの画像から優先的に変換すべきか、どのくらいの効果を期待するかが見えてきます。ブラウザ対応を確認自社サイトの利用者がどのブラウザを使っているか分析し、対応状況に応じたフォールバック対策を考えましょう。特にAVIFの場合は、まだ一部のブラウザでは対応していないため、必ず代替画像を用意する必要があります。運用フローを考える画像変換の作業がボトルネックにならないよう、効率的な運用方法を検討しましょう。多数の画像を扱う場合は、自動変換ツールやバッチ処理の仕組みを整えることで、継続的な運用が可能になります。効果測定の計画導入前後で比較できるよう、表示速度やユーザー行動の測定指標を事前に決めておきましょう。PageSpeed Insightsのスコア、LCPの値、直帰率、滞在時間などを記録し、改善効果を可視化することが大切です。段階的なアプローチリスクを抑えるため、トップページや主要ページの重要な画像から段階的に導入するのがおすすめです。一気にすべての画像を変換するのではなく、効果を確認しながら少しずつ範囲を広げていくことで、安全に導入できます。次世代画像形式は確かに効果的ですが、ホームページ全体の最適化戦略の一部として位置づけるべきものです。他の最適化施策（コードの軽量化、ブラウザキャッシュの活用など）と組み合わせることで、より大きな効果を発揮します。当社のWebコンサルティングサービスでは、こうした次世代技術も含めた総合的な表示速度改善の提案と実装をサポートしています。単なる技術導入ではなく、ビジネス成果につながる最適な方法をご提案しています。ユーザーを第一に考えた技術選択を次世代画像形式の導入は、単なる技術的なトレンドへの追随ではなく、「ユーザーにより使いやすい環境を提供したい」という思いから取り組まれるべきです。私はよく「技術はユーザーの体験を向上させるための手段であって、目的ではない」と考えています。いくら新しい技術を導入しても、それがユーザーの体験向上につながらなければ意味がありません。 WebPやAVIFを導入する際も、「これによってユーザーに何が提供できるのか」を常に考えるべきです。待ち時間の短縮、ストレスの軽減、心地よい閲覧体験...これらがユーザーにとっての真の価値です。以前の記事でも、SEOの本質は「ユーザーへの親切と優しさ」にあるとお伝えしました。次世代画像形式も、そうした「親切」の一つとして考えるべきです。技術と親切で表示速度を最適化する！ WebPやAVIFといった次世代画像形式は、ホームページの表示速度を向上させる強力なツールです。従来形式と比べて大幅なファイルサイズの削減ができて、ユーザー体験の向上やSEO効果も期待できます。ただ、ブラウザ対応状況や運用の手間など考慮すべき点もあるため、状況に応じた導入判断と段階的なアプローチがおすすめです。一番大切なのことは、次世代画像導入の目的を「ユーザーへの配慮」と考えることです。「待たせない」「ストレスを与えない」というユーザーへの心遣いが、結果的に成果の向上につながっていきます。この取り組みは、一見地味かもしれませんが、長期的にも効果が見込めて、ホームページの価値を高める重要な要素です。ユーザーのことを第一に考えた最適化を心がけて、「見た目の美しさ」と「使いやすさ」を両立させたホームページづくりを目指しましょう。キレイなだけでユーザーに不親切なホームページはもうやめにしましょう。ホームページの表示速度や画像最適化でお悩みの方は、ぜひお気軽にご相談ください。一緒に「速くて見やすい」ホームページづくりを進めていきましょう。初回相談は無料です。いつでもお気軽にご相談ください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
23May
- 【ページの表示速度改善】画像の軽量化のやり方
  Webコンサルタントの松崎です。前回の記事「表示速度の改善はユーザーへの配慮で一番大事です」は、ホームページの表示速度は今のホームページで当たり前に必要で、それがなぜSEOにも影響するのかについて説明しました。今回は、表示速度改善の中でも特に効果が高い「画像の軽量化」について、具体的な改良化の方法を説明します。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次画像を軽量化する意味画像軽量化の6つのメリット画像軽量化の6つのメリットページの表示速度向上ユーザー離脱率の低下サーバー負荷の軽減モバイルユーザーへの配慮 SEO評価の向上コンバージョン率の向上画像を軽量化する3つの方法 1. 適切なサイズに調整する 2. 圧縮ツールを使用する 3. 適切なファイル形式を選択する TinyPNGで簡単に画像を軽量化する方法 TinyPNGでできること TinyPNGの使い方 TinyPNGの効果その他の画像軽量化方法画像編集ソフトでの書き出し設定の最適化画像管理プラグインの活用画像軽量化のまとめ軽量化のポイントユーザーへの配慮としての画像軽量化画像が重たいとホームページの表示が遅くなり、ユーザーを待たせてしまいます。そうならないための対策を一緒に見ていきましょう。画像を軽量化する意味「画像の軽量化」とは、画質を維持しながら、ファイルサイズを小さくすることです。では、なぜそれが必要なのか考えてみます。ホームページを表示する際、テキストデータはとても軽いですが、画像はすごく「重い」コンテンツです。文章1000文字分のデータ量は約2KB程度ですが、スマホで撮影した1枚の写真は3MB～8MB、つまり文章の1500倍～4000倍もの容量があります。何の最適化も行なっていない重い画像をそのままホームページに使うと、画像やテキストなどを含むページの読み込みに時間がかかり、ページの表示がすごく遅くなり、ユーザーをイライラさせてしまうことになります。そして、多くの人がそのページを見ることなく、検索結果ページに戻る、見るのを止めるといった行動をとります。通勤電車でスマホを使っているとき、なかなか表示されないページと出会うと、私はすぐ見るのをやめます。皆さんも同じ経験がありますよね？画像軽量化の6つのメリット画像を軽量化すると、様々なメリットが出てきます。画像軽量化の6つのメリットページの表示速度向上ユーザー離脱率の低下サーバー負荷の軽減モバイルユーザーへの配慮 SEO評価の向上コンバージョン率の向上ページの表示速度向上画像の軽量化によって得られる最も大きな効果です。画像ファイルのサイズが小さくなれば、その分だけダウンロード時間が短縮され、ページ全体の表示が速くなります。特に複数の画像を使用しているページでは、その効果は大きく表れます。ユーザー離脱率の低下 Googleの調査によると、表示に3秒以上かかるとユーザーの40%が離脱するとされています。表示速度が速くなれば、それだけユーザーの離脱を防ぐことができ、より多くの方にコンテンツを見てもらえるようになります。初回訪問者もスムーズにアクセスできるようになります。サーバー負荷の軽減画像が軽量化されると、サーバーからの転送データ量が減り、サーバーの負担が軽減されます。これにより、アクセスが集中した時でもサーバーダウンのリスクが減少し、安定したサービス提供が可能になります。また、サーバー費用の節約にもつながることがあります。モバイルユーザーへの配慮通信環境が不安定なモバイルユーザーでもストレスなく閲覧できるようになります。電車の中や電波の弱い場所でも、軽量な画像であれば素早く表示され、ユーザーは待たされることなくページを見ることができます。データ通信量の節約にもなるため、ユーザーにとって親切な配慮になります。 SEO評価の向上 Googleは表示速度を検索ランキングの要素としていることを公式に認めています。画像の軽量化によってページ全体の表示速度が向上すれば、検索エンジンからの評価も高まり、検索結果での表示順位が上がる可能性があります。コンバージョン率の向上表示速度が0.1秒改善されるだけでも、コンバージョン率が8%向上するというデータもあります。問い合わせや購入などのアクションにつながりやすくなるため、ビジネス成果に直結します。特にECサイトでは、表示速度の改善が売上向上に大きく影響することが多くの事例で証明されています。画像を軽量化する3つの方法では、具体的にどのように画像を軽量化すればよいのかをご紹介します。 1. 適切なサイズに調整するまず最も基本的なのが、画像の表示サイズに合わせてピクセル数を調整することです。ホームページで400×300ピクセルで表示する予定の画像なのに、スマホで撮影した3000×2000ピクセルの画像をそのまま使用すると、不必要にデータ量が多くなってしまいます。画像編集ソフト（Photoshop、GIMP、Windowsならペイント・フォトでも可能）で、実際に表示するサイズに合わせてリサイズすることが大切です。これだけでもファイルサイズは大幅に削減できます。 2. 圧縮ツールを使用する画像のサイズを調整した後でも、さらにファイルサイズを削減できる方法があります。それが「圧縮ツール」の利用です。圧縮ツールは、目に見える画質をほとんど劣化させずに、不要なデータを削除してファイルサイズを小さくしてくれます。中でも特に使いやすく効果的なのが「TinyPNG」というオンラインツールです（次の段落で詳しく説明します）。 3. 適切なファイル形式を選択する用途に応じて最適なファイル形式を選ぶことも重要です。 JPEG写真など、色の変化が滑らかな画像に適しています。圧縮率が高く、自然な写真では最もバランスが良い形式です。 PNG：ロゴや図表など、シャープな線や透明背景が必要な画像に適しています。JPEGより圧縮率は低いですが、画質の劣化がない点が特徴です。 GIF：単純なアニメーションや、色数の少ない画像に適しています。色数が256色に制限されるため、写真には向きません。画像の内容と目的に応じて、最適な形式を選ぶことで、ファイルサイズを効率的に削減できます。 TinyPNGで簡単に画像を軽量化する方法 TinyPNG（タイニーピング）は、最も人気のある画像圧縮ツールの一つです。無料で使える上に、操作も非常に簡単なので、今すぐ使い始められます。 TinyPNGでできること JPEG・PNG画像の高効率圧縮一度に最大20枚まで処理可能（無料版）画質をほとんど劣化させずに60-80%のファイルサイズ削減ドラッグ＆ドロップで簡単操作圧縮された画像の一括ダウンロードこのツールの優れているところは「スマート圧縮」と呼ばれる技術を使用していることです。この技術で、人間の目では違いがわからないレベルで色情報を最適化し、大幅なサイズ削減を実現しています。 TinyPNGの使い方 TinyPNGの使い方は驚くほど簡単です。 TinyPNG公式サイト（https://tinypng.com/）にアクセスする圧縮したい画像をドラッグ＆ドロップするか、「Upload Images」をクリックして選択する自動的に圧縮処理が始まる（画面上にパンダのアニメーションが表示されます）処理が完了したら、個別に「Download」をクリックするか、「Download All」で一括ダウンロードするこれだけです。英語のサイトなので、難しそうに思いますが、すごく簡単に使えます。 TinyPNGの効果 TinyPNGを使うと、画質をほとんど落とさずに画像を50%～70%も軽量化できます。前述しましたが「スマート圧縮」の技術により、人間の目では違いがわからないレベルでファイルサイズだけを小さくできます。この技術はJPEGやPNGなどの画像ファイルの不要なメタデータを取り除くと同時に、色情報を最適化します。一般的な画像処理では、単純に画質を下げて圧縮するため見た目が悪くなりがちですが、TinyPNGは人間の目の特性を考慮し、知覚できない部分のみを圧縮する仕組みになっています。そのため、圧縮率が高くても画質の劣化が最小限に抑えられます。ホームページ全体の画像を最適化できれば、PageSpeed Insights（https://pagespeed.web.dev/）のスコアが向上するなど、目に見える効果が現れます。画像が多いホームページでは特に効果が大きくて、時には数十点もスコアが改善することもあります。表示速度の向上は、ユーザーの満足度を高め、結果としてホームページの滞在時間増加やコンバージョン率の改善にもつながります。特に通信環境が不安定なモバイル環境では、その差がより顕著に表れます。その他の画像軽量化方法 TinyPNG以外にも、画像を軽量化するための様々な方法があります。画像編集ソフトでの書き出し設定の最適化 PhotoshopやGIMPなどの画像編集ソフトを使っている場合、「web用に保存」や「書き出し」機能を使うことで、最適な設定で画像を書き出すことができます。例えば、Photoshopの「Web用に保存」機能では、画質と容量のバランスを見ながら最適な設定を選ぶことができます。JPEGの場合、品質を60-70%程度に設定するだけでも、目立った劣化なくファイルサイズを大幅に削減できます。画像管理プラグインの活用 WordPressなどのCMSを使用している場合、画像を自動的に最適化してくれるプラグインがあります。例えば、「Smush」「EWWW Image Optimizer」「ShortPixel」などが人気です。これらのプラグインを導入すると、画像をアップロードした時点で自動的に最適化してくれるので、手間を省くことができます。また、既存の画像も一括で最適化できる機能を持っていることが多いです。画像軽量化のまとめ画像の軽量化は、ホームページの表示速度を改善するために最も効果的な方法の一つです。軽量化のポイント目標ファイルサイズを設定する（100KB～300KB程度）表示サイズに合わせてリサイズする適切な形式を選ぶ（写真はJPEG、ロゴや図表はPNGなど） TinyPNGなどの圧縮ツールを活用する定期的にチェックする（新しい画像を追加する際も最適化）こういった取り組みは少し手間がかかるかもしれませんが、ユーザー満足度の向上、サイト滞在時間の延長、コンバージョン率の改善といった大きなメリットが見込めます。めんどくさがらず、必ずきちんと軽量化作業を行いましょう！当社が提供しているWebコンサルティングサービスでは、こうした画像の最適化を含めた表示速度改善の施策を特に力を入れて行っています。「見た目の美しさ」と「速さ（使いやすさ）」の両立にこだわったホームページ制作と改善を行なっています。ユーザーへの配慮としての画像軽量化ホームページの画像軽量化は、単なるテクニカルSEOの作業ではなく「ユーザーを待たせない」という思いやりや配慮の表れです。適切に軽量化された画像なら、見た目の美しさを保ちながらも、サクサクとした快適な閲覧環境をすべてのユーザーに提供できます。それが結果として、より多くのユーザーの使いやすさにつながり、コンテンツの理解を深める機会を増やし、ビジネスの成功につながっていきます。以前の記事「ユーザーに優しい親切なWebサイトにするために」でもお伝えしたように、ユーザーへの配慮がSEOの本質です。画像の軽量化はその中でも最も重要な取り組みです。ホームページの表示速度や画像最適化でお悩みの方は、ぜひお気軽にご相談ください。使いやすいホームページに改善するお手伝いができますよ。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
22May
- 表示速度の改善はユーザーへの配慮で一番大事です
  Webコンサルタントの松崎です。これまで「SEOはユーザーへの親切と優しさ」というテーマで、いくつかの記事を公開してきました。今回は、その中でも今のホームページで絶対に対応しておかないといけない当たり前の取り組み「表示速度の改善」について、特に詳しく見ていきます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次なぜ表示速度の改善が最優先なのか表示速度が遅いことのデメリット Googleも重視する表示速度の影響力なぜGoogleはそこまで表示速度を重視するのか表示速度を改善するための主なポイント画像の最適化不要なコードの削除サーバーの応答時間改善ブラウザキャッシュの活用スマホ表示の最適化最適化されたホームページと最適化されていないホームページの違いユーザーの使いやすさの違い具体的な数字で見る効果制作会社に依頼する際の注意点表示速度をチェックする方法 Google PageSpeed Insights 表示速度対策は「ユーザーを待たせない」をいう配慮これまでの記事で説明してきましたが、表示速度は単なる技術的な話ではなく、ユーザーへの最も大事な「おもてなし」です。表示速度が遅いホームページはユーザーをイライラさせ、離脱や直帰させてしまい、仕事につながる機会を失ってしまいます。反対に、スムーズに表示されるホームページは、ユーザーの満足度を高め、検索エンジンの評価も向上させる効果があります。なぜ表示速度の改善が最優先なのか「ホームページを作った」「リニューアルした」と言っても、ユーザーに見てもらえなければ意味がありません。どうすれば多くの方に見てもらえるでしょうか？答えは簡単です。まず「表示される」ことです。「えっ、当たり前じゃない？」と思われるかもしれませんが、意外とそうでもないのです。 GoogleやYahoo!の調査によると、表示に3秒以上かかるページからは、約40%のユーザーが「戻る」ボタンを押して離脱するとされています。10人中4人が、内容を見る前に、何だったらページを読み込んでいる途中に去ってしまいます。表示速度が遅いことのデメリットユーザーの離脱率増加（特に初回訪問者）コンバージョン率（問い合わせ・購入率）の低下ページ閲覧数の減少ブランドイメージの低下検索エンジンからの評価が下がるお店で例えるなら、入口にお客様が来たのに、ドアが重くて開けられず、諦めて別のお店に行ってしまう状況です。どんなに良い商品やサービスでも、入口が開かなければ、見てもらうこともできません。 Googleも重視する表示速度の影響力表示速度がSEOに影響することは、Google自身が公式に認めています。2010年に検索ランキングの要素として導入され、今から7年前に2018年7月にはスマホページの表示速度がさらに重要な要素になりました。なぜGoogleはそこまで表示速度を重視するのかそれは「ユーザー満足度」に直結するからです。 Googleの目標は「ユーザーに最適な検索体験を提供すること」です。表示が遅いホームページを上位表示させてユーザーに紹介すれば、ユーザーはGoogleという検索エンジン自体に不満を感じてしまいます。だからこそ、Googleは表示速度の速いホームページを上位表示するようアルゴリズム（検索順位を決める計算方式）も導入しているのです。また、スマホでの閲覧が主流となった今、通信環境が不安定な場所でも快適に閲覧できることも重要になっています。電車の中、外出先、電波の弱い場所でも、ストレスなく情報が得られるホームページが求められています。表示速度を改善するための主なポイント「表示速度を改善したい」と思っても、どこから手をつければいいのか分からない方も多いでしょう。ここでは主な改善ポイントを紹介します。画像の最適化ホームページの表示速度が遅い原因のひとつに、最適化されていない大きな画像があります。デジタルカメラやスマホで撮影した写真は、そのままではファイルサイズが大きすぎます。最近のスマホで撮影した写真は1枚あたり3MB〜8MB程度ありますが、ホームページに掲載するなら100KB〜300KB程度まで圧縮するのが理想的です。元のサイズの1/10以下にする必要があります。【画像の最適化のポイント】適切なサイズに縮小する（表示サイズに合わせる）画像圧縮ツールを使って品質を保ちながらサイズを減らす最新の画像フォーマット（WebPなど）を活用する画像の数そのものを必要最小限にする「うちのホームページは画像がたくさんあるけど、大丈夫？」と思った方は、後述する表示速度チェックツールで確認してみてください。画像が原因で遅くなっているかもしれませんよ。不要なコードの削除ホームページを作成する際、様々なプログラムやテンプレートが使われますが、その過程で不要なコードが残ることが少なくありません。特にJavaScriptやCSSは、使っていない部分があると、不要な部分も読み込む時間を取られるので表示速度が遅くなります。テンプレートでホームページを作成した場合、それが制作会社に依頼して作った場合でも、実際には使用していない機能のコードがそのまま残り、読み込んでいることがあります。これは図書館で本を一冊読むのに、関連書籍を全部持ち出すようなもの。必要なものだけを使うことが大切です。サーバーの応答時間改善「サーバー応答時間」とは、ブラウザがリクエストを送ってから最初のレスポンスが返ってくるまでの時間です。この時間が長いと、ユーザーは真っ白な画面を見続けることになります。【サーバー応答時間の改善】より高速なWebホスティングプランへの変更 CDN（コンテンツ配信ネットワーク）の利用データベースの最適化サーバーのキャッシュ設定お店で言えば「呼び出しベルを押してからスタッフが来るまでの時間」のようなものです。いくら品揃えが良くても、スタッフの対応が遅いお店には行きたくないですよね。ブラウザキャッシュの活用「ブラウザキャッシュ」とは、一度訪れたホームページの情報をユーザーのパソコンやスマホに一時的に保存する仕組みです。これにより、2回目以降の訪問でページの表示が速くなります。これはよく行くお店の場所を覚えておくようなものです。2回目以降は道を調べる必要がなく、スムーズに訪問できるとの同じです。スマホ表示の最適化スマートフォンでの閲覧が主流になった現在、スマホ環境での表示速度がとても重要です。【スマホ向けの最適化のポイント】「モバイルファースト」の設計レスポンシブデザインの実装タップターゲット（ボタンなど）を適切なサイズにビューポートの設定を正しく行う最適化されたホームページと最適化されていないホームページの違い「表示速度って本当にそんなに大事？」と思われる方のために、最適化されたホームページとそうでないホームページの違いを具体的に説明しましょう。ユーザーの使いやすさの違い【最適化されたホームページ】ページが1〜2秒で表示されるスムーズにスクロールできるボタンやリンクがタップするとすぐ反応する画像がサクサク表示される【最適化されていないホームページ】ページが表示されるまで5秒以上かかるスクロールがカクカクするボタンを押してから反応までに時間がかかる画像が徐々に表示される（遅延読み込み）この違いは、高速道路と渋滞した一般道を走るような感覚の差です。あなたはどちらが良いですか？具体的な数字で見る効果実際のデータでも、表示速度の改善効果が明らかになっています。表示速度が0.1秒改善されると、コンバージョン率が8%上昇するというデータがあります表示速度が1秒から5秒に遅くなると、直帰率は90%増加するとされていますスマホでの表示速度が1秒改善されると、コンバージョン率が27%向上するという調査結果もこれらの数字から、表示速度が集客や売上に直結していることがわかってもらえると思います。「見た目のキレイさ」だけでなく「使いやすさ」も重視したホームページづくりが、Web集客では当たり前に必要になっています。しかし現状は、検索順位に影響があると言われてから7年経った今もただ作っただけのホームページ制作が横行しています。制作会社に依頼する際の注意点「専門家に任せればOK」と思って制作会社に丸投げすると、思わぬ落とし穴があることもあります。制作会社によっては、表示速度へ最適化ができないところが実は多く存在しています。実際に私が相談を受けたケースでは、リニューアル後に見た目は良くなったものの、表示速度が遅くなり、検索順位やアクセス数が落ちてしまったというトラブルがありました。原因は、ずっと以前のテンプレートを使い回し、不要なコードがたくさん残っていたり、高解像度の画像をそのまま使用したり、ふわっと浮き出る重いアニメーション効果を多用したりしていたからでした。【制作会社に依頼する際のポイント】表示速度も重視していることを伝える画像の軽量化を依頼する Webpなどの画像形式の導入を依頼する不必要なモーシンは導入しないように伝えるモバイルファーストの設計を依頼する完成後に表示速度のチェックを行うことを約束してもらう必要に応じて、速度改善のための修正を依頼するこれらの要望を伝えても対応してくれない（できないのを隠している）ケースも多いので、ちゃんと自分でもチェックするようにしましょう。何もしてもらってないのに、費用をとられるといったバカなことにならないように気をつけてください。表示速度をチェックする方法自分のホームページの表示速度が気になる方のために、チェック方法をご紹介します。 Google PageSpeed Insights 最も一般的なツールが「Google PageSpeed Insights」です。使い方はとても簡単です。 Google PageSpeed Insights (https://pagespeed.web.dev/) にアクセスする検査したいホームページのURLを入力して「分析」ボタンをクリックする数秒待つと、PC版とスマホ版それぞれの速度評価が表示される結果は0〜100点のスコアで表示されて、90点以上なら「速い」、50〜89点なら「普通（改善の余地あり）」、50点未満なら「遅い」という結果で表示されます。また、具体的な改善ポイントも表示されるので、何を修正すれば良いかがわかるようになっています。例えば「この画像を最適化する」「使用していないJavaScriptを削除する」などの提案が表示されます。表示速度対策は「ユーザーを待たせない」をいう配慮表示速度の改善は「お客様を待たせない」という基本的なおもてなしの心です。レストランで例えるなら、いくら料理が美味しくても、注文してから提供まで30分も待たされたら、お客様は不満を感じますよね。「次はもう来ないかも」と思われてしまうでしょう。ホームページも同じです。どんなに有益な情報や魅力的な商品があっても、そこに辿り着くまでに時間がかかりすぎると、ユーザーは別のホームページに行ってしまいます。特に初めて訪れるユーザーは忍耐強くありません。一瞬の躊躇がビジネスチャンスの損失につながります。表示速度への配慮は「顔が見えないからこそ必要な気配り」なのです。目の前にいないユーザーがストレスなく情報を得られるよう、しっかりと準備しておくことが大切です。当社では表示速度の最適化をはじめとするユーザー配慮を重視したWebコンサルティングを提供しています。見た目だけでなく、使いやすさや表示速度も含めた総合的な観点からアドバイスと改善作業をさせていただいています。 ##表示速度改善でユーザー満足度とSEO効果を高めるホームページの表示速度は、ユーザーの使いやすさとSEOの評価の両方に大きく影響します。遅いページはユーザーを待たせるだけでなく、検索エンジンの評価も下げてしまいます。ホームページの制作やリニューアルを依頼する際は、デザイン性だけでなく表示速度も重視するよう伝えましょう。また、Google PageSpeed Insightsなどのツールを使ってあなた自身でもチェックし、必要に応じて改善を依頼するようにしましょう。「ユーザーに親切なホームページ」とは、見た目の美しさだけでなく、素早く表示され、スムーズに操作できるホームページのことです。表示速度への配慮は、インターネットの世界で当たり前に必要で最も基本的な「おもてなし」です。表示速度の改善は当社ブログで公開している「ユーザーに優しい親切なWebサイトにするために」でご紹介した「親切なWebサイト」の要素の一つです。ぜひそちらもあわせてご覧ください。ホームページの表示速度でお悩みの方は、ぜひご相談ください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
21May
- 「SEOはユーザーへの親切と優しさ」まとめ
  Webコンサルタントの松崎です。これまで「SEOはユーザーへの親切な配慮から」の記事を最初に、様々な角度から、SEOがユーザーへの配慮につながることを見てきました。親切なホームページにするための考え方ユーザーがスムーズに操作できるホームページ検索結果ページでわかりやすい配慮をウェブアクセシビリティで誰もに優しいホームページ内部リンクの最適化は親切な接客と同じ安全で安心なホームページのための取り組みリッチリザルトでもっと訴求するこれらの記事を通じてお伝えしたいのは、SEOは単なる検索上位表示のためのテクニックではなく、ユーザーへの親切と優しさを提供するための設定であるということです。今回は、これまでの内容を振り返り、テクニカルSEOがいかにユーザーへの親切な配慮であるかについて、改めて見ていきたいと思います。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次本当のSEOとはテクニカルSEOはユーザーへの配慮のカタチ 1. 表示速度の最適化 2. モバイルフレンドリー 3. 内部リンク構造 4. 構造化データとリッチリザルト 5. ウェブアクセシビリティ 6. 安全性と信頼性ユーザーに親切なコンテンツ設計 1. 適切なキーワード選定 2. わかりやすい文章構成 3. 画像や図表の活用 SEOツールもユーザー視点で活用する 1. Googleサーチコンソール 2. Googleアナリティクス 3. ページ表示速度チェックツール SEOとユーザーの使いやすさユーザーファーストのSEOチェックリスト 1. コンテンツ 2. ナビゲーション 3. デザイン 4. 表示速度 5. 安全性 6. アクセシビリティ 7. 検索結果での表示 SEOの本質を忘れない SEOはユーザーへの親切のカタチ本当のSEOとは SEO（検索エンジン最適化）というと、多くの方は「検索エンジンの上位に表示させるためのテクニック」と考えがちです。確かにそれは間違いではありませんが、本質を見失っている部分があります。なぜなら、検索エンジン、特にGoogleの目的は「ユーザーに最適な検索体験を提供すること」だからです。また、Googleのアルゴリズムは、常時SSL、ページ表示スピード、コアウェブバイタル、スマホ対応、Contents is Kingなど、ユーザーにとって価値のあるコンテンツを持つホームページを高く評価するようになっています。SEOの本質はユーザーに価値のあるホームページを作ることなのです。ユーザーにとって価値があるとは、具体的にどういうことでしょうか。それは、情報が見つけやすく、理解しやすく、操作しやすく、安全で、信頼できる—つまり「ユーザーに親切で優しい」ホームページであることを意味していると私は考えます。テクニカルSEOはユーザーへの配慮のカタチテクニカルSEOと呼ばれる施策の多くは、実はユーザー体験の向上と密接に関連しています。その主な要素がどのようにユーザーへの配慮になっているのかを見ていきます。 1. 表示速度の最適化ホームページの表示速度は、SEOの重要な要素の一つです。Googleは公式に「ページ速度」をランキング要因として挙げています。なぜ、Googleはランキング要因として取り入れているのでしょうか？それは単純に、誰も遅いホームページを待ちたくないからです。調査によると、3秒以上の読み込みで40%以上のユーザーが離脱するとされています。スマホ環境では、この傾向がさらに顕著に現れます。【表示速度を改善するための対策】画像の最適化（適切なサイズと圧縮）ブラウザキャッシュの活用不要なJavaScriptの削除サーバーの応答時間の改善コンテンツ配信ネットワーク（CDN）の利用これらの対策は「SEOのため」と言われがちですが、本質的には「ユーザーを待たせない」という配慮なのです。実店舗で例えるなら、お客様をすぐに案内できるよう十分なスタッフを配置し、スムーズな接客を心がけるようなものです。 2. モバイルフレンドリー現在、インターネットアクセスの半分以上はモバイル端末から行われています。そのため、Googleはモバイルファーストインデックスを採用し、モバイル版のホームページを優先的に評価するようになりました。【モバイルフレンドリーのポイント】レスポンシブデザインの採用タップしやすいボタンサイズ（最低44×44ピクセル）読みやすいフォントサイズ（16px以上推奨）横スクロールが必要ないレイアウトモバイルでの視認性と操作性の確保これらはすべて、スマートフォンユーザーに対する思いやりの表現です。小さな画面でもストレスなく情報を得られるよう、細やかな配慮をすることが重要なのです。 3. 内部リンク構造ホームページ内のページ同士をつなぐ内部リンクは、検索エンジンのクローラーが効率よくページを巡回するために重要とされています。しかし、それだけではありません。【適切な内部リンク構造の役割】ユーザーが関連情報をスムーズに見つけられるホームページ内での回遊性が高まる階層構造を通じて情報の重要度が視覚的に理解できる目的のコンテンツにたどり着くまでのクリック数を減らせる実店舗で例えるなら、商品の関連陳列や、「他にこんな商品はいかがですか？」という店員の提案に相当します。ユーザーの情報探索をサポートする親切な案内役なのです。 4. 構造化データとリッチリザルト構造化データを用いたリッチリザルト（リッチスニペット）は、検索結果ページに追加情報を表示させる技術です。商品の価格やレビュー、レシピの調理時間など、様々な情報を検索結果に直接表示できます。【リッチリザルトの効果】検索結果でより多くの情報をユーザーに提供できる視覚的にアピールすることでクリック率を向上させるユーザーが欲しい情報を検索結果の段階で得られる専門性や信頼性をアピールできるユーザーに検索結果ページから「一目でわかる情報提供」をするという配慮です。実店舗で例えるなら、入店前から見えるようにショーウィンドウで商品の特徴や価格をわかりやすく表示するようなものです。 5. ウェブアクセシビリティウェブアクセシビリティとは、障害のある方や高齢者を含む、すべての人がホームページを利用できるようにする取り組みです。SEOとの関連性は間接的かもしれませんが、Googleはアクセシビリティを考慮したホームページを評価しているように感じます。【アクセシビリティ向上のポイント】画像に適切な代替テキスト（alt属性）を設定する色だけでなく形や文字でも情報を伝えるキーボードだけでも操作できるようにする見出し構造を論理的に設定するフォントサイズや行間を読みやすく設定する「誰一人取り残さない」という社会的配慮であると同時に、多様なユーザーにアプローチできるビジネス上のメリットでもあります。 6. 安全性と信頼性ホームページのセキュリティや信頼性もSEOに影響します。HTTPS化（SSL証明書の導入）は、Googleが公式に検索ランキング要因として認めている要素です。【安全性と信頼性を高めるポイント】 HTTPS化による通信の暗号化プライバシーポリシーの明示会社情報・運営者情報の明記特定商取引法に基づく表記（EC事業者の場合）定期的なセキュリティチェックとアップデートこういった取り組みや設定は「ユーザーを守る」という最も基本的な配慮です。実店舗で例えるなら、安全な店内環境の整備や、商品の品質保証などにあたります。ユーザーに親切なコンテンツ設計テクニカルSEOだけでなく、コンテンツ自体もユーザーに親切であることが大切です。 1. 適切なキーワード選定 SEOでは「キーワード選定」が重要視されますが、本質的にはユーザーの「検索意図」を理解することが大切です。ユーザーがどのような意図でその言葉を検索したのかを考え、それに応える内容を提供することがポイントです。例えば、「リンゴ値段」と検索するユーザーは、リンゴの平均価格や相場を知りたいと考えられます。そのような検索意図に対して「リンゴの栽培方法」を提示しても、ユーザーの役には立ちません。キーワード選定と検索意図の理解は、ユーザーが求める情報を的確に提供するための第一歩です。 2. わかりやすい文章構成 SEOについての情報サイトでは「見出し（h1～h6）の適切な使用」がよく言及されますが、これはユーザーが情報を理解しやすくするための工夫です。【わかりやすい文章構成のポイント】論理的な見出し構造を作る重要な情報を前半に配置する段落を適切に分割する箇条書きや表を活用して情報を整理する専門用語には説明を加える読者が情報を探しやすく、理解しやすくするための配慮です。検索エンジンもページの内容が理解しやすくなるのでSEOの効果も見込めますが、それよりも「読者に親切であること」を配慮した取り組みです。 3. 画像や図表の活用適切な画像や図表の活用も、ユーザーへの親切な配慮の一つです。複雑な情報や手順は、テキストだけでなく視覚的に情報を示すことで、ユーザーはよりわかりやすくなります。【画像活用のポイント】内容を補完する適切な画像を選ぶ alt属性を活用して画像の内容を説明する画像サイズを最適化して表示速度を確保する図表を使って複雑なデータをわかりやすく示すこれは、説明に図解を添えるような「伝わりやすさへの配慮」です。また、前述のウェブアクセシビリティの配慮も含まれていますので、きちんと取り組みたい箇所です。 SEOツールもユーザー視点で活用する SEO対策のためのツールも、「検索エンジンのために」ではなく「ユーザーのために」活用することが大切です。 1. Googleサーチコンソールサーチコンソールでは、検索クエリデータやクリック率、インデックス状況などを確認できます。そして、様々な情報を得ることができます。ユーザーがどのような言葉で検索しているかどの検索キーワードでクリック率が低いかエラーが発生していてユーザーが見られないページはないかこういった情報は「ユーザーがどんな情報を求めているか」「何が伝わっていないか」を把握するのに役立ちます。 2. Googleアナリティクスアナリティクスでは、ユーザーの行動データを確認できます。どのページが人気で、どのページでユーザーが離脱しているかユーザーがどのような導線でホームページを閲覧しているかどのデバイスからアクセスが多いかユーザーの属性（年齢層、地域など）この情報は「ユーザーがどのように情報を探しているか」「どこでつまずいているか」「ユーザー像」を確認するのに役立ちます。 3. ページ表示速度チェックツール Google PageSpeed InsightsやLighthouseなどのツールは、ページ速度だけでなくユーザーの使いやすさに関わるいくつかの要素もチェックできます。表示速度（First Contentful Paint、Speed Indexなど）インタラクティブ性（Time to Interactive）ページの安定性（Cumulative Layout Shift）アクセシビリティの問題このデータは「ユーザーがストレスなくページを利用できるか」「どこが問題箇所なのか」を評価・確認するのに役立ちます。 SEOとユーザーの使いやすさここまで見てきたように、SEOとユーザーの使いやすさ験は相互に関連しています。【良いユーザー体験】滞在時間の延長、回遊率の向上、再訪問の増加良好なユーザー行動シグナルとしてGoogleに評価される検索順位の向上さらに多くのユーザーが訪問するさらに良いユーザー体験の提供を目指すという好循環が考えられます。ユーザーファーストのSEOチェックリスト最後に、ユーザーファーストの視点でSEOを考えるためのチェックリストを紹介します。 1. コンテンツ -[　]ユーザーの検索意図に応える内容になっているか -[　]専門知識がなくても理解できる説明になっているか -[　]情報が整理され、見出しや箇条書きで読みやすくなっているか -[　]必要に応じて画像や図表で補足しているか -[　]内部リンクで関連情報に誘導しているか 2. ナビゲーション -[　]メニュー構造がわかりやすく整理されているか -[　]重要なページに少ないクリック数でたどり着けるか -[　]現在位置がわかるようパンくずリストを設置しているか -[　]検索機能が使いやすく設置されているか -[　]404ページが親切に設計されているか 3. デザイン -[　]文字サイズや行間が読みやすく設定されているか -[　]色のコントラストが十分確保されているか -[　]スマートフォンでも操作しやすいデザインになっているか -[　]広告や装飾がコンテンツの邪魔をしていないか -[　]余白が適切に取られ、視覚的な余裕があるか 4. 表示速度 -[　]3秒以内に主要コンテンツが表示されるか -[　]画像サイズが最適化されているか -[　]不要なスクリプトやスタイルシートが削除されているか -[　]ブラウザキャッシュが活用されているか -[　]モバイル環境でも速く表示されるか 5. 安全性 -[　]HTTPS化されており通信が暗号化されているか -[　]プライバシーポリシーが明示されているか -[　]運営者情報が明確に提示されているか -[　]定期的にセキュリティチェックを行っているか -[　]個人情報の取り扱いに配慮しているか 6. アクセシビリティ -[　]画像にalt属性が適切に設定されているか -[　]キーボードだけでも操作可能か -[　]色だけでなく形や文字でも情報を伝えているか -[　]フォントサイズを変更しても表示が崩れないか -[　]スクリーンリーダーでも内容が理解できるか 7. 検索結果での表示 -[　]タイトルタグが内容を適切に表現しているか -[　]メタディスクリプションが魅力的に内容を要約しているか -[　]構造化データを活用してリッチリザルトを表示しているか -[　]URLが内容を反映し、読みやすい構造になっているか -[　]検索結果で他サイトと差別化できているか SEOの本質を忘れない SEO対策を行っていくと「検索エンジンのために」という視点に偏りがちです。キーワードの配置や密度を気にしすぎたり、被リンク数だけを追い求めたり、テクニカルな要素だけに注目して取り組んでしまいがちです。常に意識すべきは「訪問するユーザーのため」という視点です。ユーザーが知りたい情報は何かユーザーがストレスなく情報を得られるかユーザーが安心して利用できるかユーザーが迷わず目的を達成できるかこういったポイントをチェックして適切に設定できれば、ユーザーへの親切と優しさをカタチにすることができます。それが、本当のSEOだと私は考えています。 SEOはユーザーへの親切のカタチテクニカルSEOの様々な取り組みは「ユーザーへの親切な配慮」のカタチなのです。表示速度の改善は「お待たせしません」という配慮内部リンクの最適化は「ご案内します」という配慮構造化データの活用は「一目でわかるようにします」という配慮アクセシビリティの向上は「誰でも使えます」という配慮安全性の確保は「安心してください」という配慮どれも、実店舗でいえば当たり前の「おもてなし」です。オンライン上でも、そうした「人としての優しさ」を形にすることが、結果的に検索エンジンからの評価につながっていきます。 SEOの様々なテクニックやツールも、「ユーザーへの親切」という視点から活用すれば、その真価を発揮します。逆に、ユーザーを置き去りにした小手先のテクニックはすごく短期的な効果しか見込めません。 Googleのアルゴリズムは常に進化しており「ユーザーにとって価値あるコンテンツ」をより正確に評価できるようになってきているからです。アルゴリズムの更新のたびに順位が大きく変動するホームページは、「ユーザーのため」ではなく「検索エンジンのため」に最適化しようとした結果かもしれません。テクニカルSEOをはじめとする様々な対策について、より詳しく知りたい方は「Webサイトの集客力を左右するテクニカルSEO」もぜひご覧ください。最後に、SEOを通じてユーザーへの親切と優しさを形にすることは、単なるマーケティング戦略ではなく、インターネットをより良い場所にするための取り組みでもあります。一つひとつのホームページが「ユーザーファースト」の考え方で作られることで、インターネット全体がより便利で、安全で、誰もが使いやすい場所になっていきます。「ユーザーファースト」のSEO設計でお悩みの方は、いつでもご相談ください。当社は、まず最初にSEOで親切を強化するWebマーケティングプランで集客を支援しています。初回相談は無料です。お気軽にご相談ください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
20May
- リッチリザルトでもっと訴求する！
  Webコンサルタントの松崎です。これまで「SEOはユーザーへの親切な配慮から」の記事を中心に、テクニカルSEOがユーザーへの親切を実施する方法であることを見てきました。今回は「検索結果ページでわかりやすい配慮を」でタイトルやメタディスクリプションの重要性についてご紹介しましたが、さらに検索結果ページでもっとわかりやすくユーザーに訴求できる「リッチリザルト」について見ていきます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次リッチリザルトとは何か？リッチリザルトの種類 1. パンくずリスト 2. レビュー・評価 3. 商品情報 4. レシピ 5. イベント情報 6. FAQ リッチリザルトのメリット 1. クリック率の向上 2. 質の高いトラフィックの獲得 3. ブランドイメージの向上 4. 間接的なSEO効果リッチリザルトの設定方法 2. WordPressプラグインを使用する 3. テーマの機能を利用するリッチリザルトチェックツール 1. Googleのリッチリザルトテスト 2. Schema.orgのバリデータリッチリザルト設定時の注意点 1. 表示を保証するものではない 2. ガイドラインの遵守 3. モバイル表示の確認 4. 定期的な更新実際の導入事例 ECサイトの商品ページレストランや店舗のホームページブログやメディアサイトリッチリザルトはユーザーと検索エンジンに訴求できる検索結果ページでより強く訴求でき、クリック率を高めるこの仕組みを活用すれば、ホームページの集客力アップが期待できますよ。リッチリザルトとは何か？リッチリザルトとは、検索結果ページに表示される通常の情報（タイトル、URL、説明文）に加えて、画像やレビュー評価、価格情報などの追加情報が表示される仕組みのことです。通常、Googleで検索を行うと、ホームページのタイトルと2行程度の説明文がずらりと表示されますが、「リッチリザルト」が認識され、検索エンジンから適切だと判断されれば、画像や商品の価格、イベントのスケジュールなど、様々なコンテンツを掲載することができます。リッチリザルトの種類リッチリザルトには多くの種類があります。代表的なものをいくつかご紹介します。 1. パンくずリストホームページ内の階層構造を示すパンくずリストを検索結果に表示できます。ユーザーはクリック前にサイト構造を把握でき、目的のページに直接アクセスすることもができます。 2. レビュー・評価商品やサービスの評価を★（星）の数で表示できます。高評価の商品は一目で分かるため、ユーザーの注目を集めやすくなります。 3. 商品情報価格や在庫状況などの商品情報を表示できます。ユーザーは検索結果の段階で商品の概要を把握できるため、購買意欲の高いユーザーだけがクリックするようになります。 4. レシピ料理のレシピでは、調理時間やカロリー、画像などが表示できます。視覚的にアピールできるため、クリック率のアップが期待できます。 5. イベント情報イベントの開催日時や場所などの情報を表示できます。ユーザーはクリックする前に基本情報を確認できるため、興味のあるイベントだけをチェックすることができます。 6. FAQ よくある質問とその回答の一部を検索結果に表示できます。ユーザーの疑問に素早く答えることができ、専門性のアピールにも役立ちます。リッチリザルトのメリットリッチリザルトを設定することで、様々なメリットがあります。 1. クリック率の向上リッチリザルトの主な効果は、検索結果の画面においてページのタイトルを目立つようにすることでクリック率をあげることにあります。文字情報のみが並ぶ通常の検索画面では画像やその他の情報が表示jされると、ユーザーの目を引くことができます。通常の検索結果よりも情報量が多く、視覚的にも目立つため、ユーザーの目に留まりやすくなります。特に画像が表示されるリッチリザルトは、文字だけの検索結果の中で大きな存在感を示します。 2. 質の高いトラフィックの獲得商品の価格や評価などの詳細情報が事前に分かるため、本当に興味のあるユーザーだけがクリックするようになります。結果として、直帰率の低下やコンバージョン率の向上が期待できるようになります。 3. ブランドイメージの向上リッチリザルトを表示しているホームページを見ると、ユーザーは専門性や信頼性が高いという印象を受けます。特に評価やレビューが表示されるリッチリザルトは、サービスの質の高さをアピールできます。 4. 間接的なSEO効果リッチリザルト自体が検索順位を直接的に向上させるわけではありませんが、クリック率や滞在時間などのユーザー行動シグナルを通じて、間接的に検索順位の向上に貢献する可能性があります。リッチリザルトの設定方法リッチリザルトを導入するには、「構造化データ」と呼ばれる特殊なマークアップをホームページに追加する必要があります。 ### 1. 手動でマークアップを追加する HTML内に直接、構造化データのマークアップを追加する方法です。Schema.orgで定義されている形式に従って、JSON-LD、Microdata、RDFaのいずれかの形式でマークアップします。【Google推奨のJSON-LDの例（レビューのリッチリザルト）】 <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Review", "itemReviewed": { "@type": "Restaurant", "name": "グルメレストラン東京" }, "reviewRating": { "@type": "Rating", "ratingValue": "4.5", "bestRating": "5" }, "author": { "@type": "Person", "name": "山田太郎" }, "reviewBody": "とても美味しい料理と丁寧なサービスで大満足でした。" } </script> このコードをHTMLの<head>セクション内に追加することで、レビューのリッチリザルトが表示される可能性が高まります。ただし、設定していれば必ず表示されるわけではありません。 2. WordPressプラグインを使用する WordPressサイトを運営している方は、プラグインを使用することで簡単にリッチスニペットを設定できます。WordPress公式ディレクトリには構造化データやリッチスニペット関連のプラグインが多数あります。【リッチスニペット対応のプラグインの機能】様々なタイプのリッチスニペット（レビュー、FAQ、商品情報など）に対応 WordPressの管理画面から視覚的に設定可能コーディング知識不要で直感的に操作できるコンテンツタイプに合わせた構造化データの自動適用プレビュー機能で設定結果を確認できる【プラグインを選ぶポイント】定期的にアップデートされているか利用者からの評価が高いかサポート体制は整っているかお使いのWordPressバージョンと互換性があるか必要な機能が揃っているかなお、プラグインはセキュリティリスクを伴う場合もありますので、信頼性の高いものを選び、常に最新版に更新しておくことが大切です。SEO全般に対応した総合プラグインを使用すれば、リッチスニペット対応だけでなく、様々なSEO施策を一元管理できる利点もあります。 3. テーマの機能を利用する一部のWordPressテーマでは、リッチリザルトの設定機能が標準で組み込まれています。テーマ設定画面から簡単に構造化データを追加できるため、プラグインをインストールしなくてもリッチリザルトを実現できます。テーマディレクトリで「schema」などのキーワードで検索すると、構造化データに対応したテーマを見つけることができると思います。リッチリザルトチェックツール設定したリッチリザルトが正しく動作しているかを確認するには、ツールを活用するのが便利です。 1. Googleのリッチリザルトテストページに構造化データを実装して Google 検索結果の特別な機能を有効にすると、リッチリザルトのテストを行うことができます。リッチリザルトテスト（https://search.google.com/test/rich-results?hl=ja）では、URLを入力するか、HTMLコードを直接貼り付けてテストできます。リッチリザルトがどのように表示されるかをプレビューで確認でき、エラーや警告も表示されます。使い方は簡単です。 URLを入力して「URLをテスト」をクリックするだけです。未公開ページの場合は「コード」に切り替え、HTMLをコピー＆ペーストしてください。このツールを使えば、実際の検索結果でどのように表示されるかを事前に確認できます。 2. Schema.orgのバリデータ Schema.org Validator（https://validator.schema.org/）は、構造化データが正確に記述されているかを検証するためのツールです。Schema.orgの公式ツールなので、構造化データの基本的な形式が正しいかを確認するのに役立ちます。リッチリザルト設定時の注意点リッチリザルトを設定する際には、以下の点に注意しましょう。 1. 表示を保証するものではないリッチリザルトを設定したとしても、100%表示されるわけではありません。設定したリッチリザルトと検索キーワードの関連性が低い場合は、表示されないことが多いです。構造化データを正しく設定しても、Googleの判断によって表示されない場合があります。特にページの内容の質が低いと判断された場合や、検索キーワードとの関連性が低い場合は表示されにくくなります。 2. ガイドラインの遵守 Googleが定めたリッチリザルトのガイドラインに従う必要があります。不適切な使用と判断されると、検索結果ページに出にくくなる可能性もあります【注意するポイント】実際のコンテンツと一致しない情報を設定しないスパム行為と見なされるような過剰な設定をしないユーザーにとって役立つ情報を提供する 3. モバイル表示の確認スマートフォンでの表示も忘れずにチェックしましょう。モバイル検索結果ではリッチリザルトの表示方法が異なる場合があります。 4. 定期的な更新リッチリザルトの仕様やガイドラインは時々変更されます。定期的に最新情報をチェックし、必要に応じて更新することが大切です。実際の導入事例リッチリザルトを効果的に活用している実例をいくつかご紹介します。 ECサイトの商品ページ商品の価格、在庫状況、レビュー評価などを表示するリッチリザルトを設定することで、購買意欲の高いユーザーを集客できます。特にレビュー評価が高い商品は、星の数によって視覚的にアピールできるため、競合サイトよりも目立つことができます。レストランや店舗のホームページ営業時間、住所、予約状況、メニュー、評価などを表示するリッチリザルトを設定することで、店舗情報を素早く伝えることができます。ユーザーは検索結果だけで必要な情報を得られるため、興味のある店舗だけをクリックするようになります。ブログやメディアサイト FAQやHowtoのリッチリザルトを設定することで、質問に対する回答や手順の概要を検索結果に表示できます。情報を探しているユーザーに対して、「このホームページに答えがある」とアピールできるため、クリック率の向上が期待できます。リッチリザルトはユーザーと検索エンジンに訴求できるリッチリザルトは、検索結果ページでユーザーの目を引き、クリック率を高める効果的な方法です。適切に設定することで、様々なメリットが期待できます。視覚的に目立つため、クリック率の向上が期待できる具体的な情報が表示されるため、質の高いトラフィックを獲得できる専門性や信頼性をアピールできる間接的にSEO効果が期待できる WordPressが導入されているホームページであれば、プラグインを使って比較的簡単に設定できるため、導入にチャレンジしてみてください。集客増に結びつけれらると思いますよ。テクニカルSEOや検索結果ページでの訴求方法について、より詳しく知りたい方は「Webサイトの集客力を左右するテクニカルSEO」もぜひあわせてご覧ください。SEOに必須の取り組みが把握できるようになります。リッチリザルトの設定で集客強化をお考えの方、テクニカルSEOの力を入れたい方は、初期段階でしっかりテクニカルSEOに取り組む当社のWebコンサルティングサービスをおご検討ください。初回相談は無料です。いつでもお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
19May
- 安全で安心なホームページのための取り組み
  Webコンサルタントの松崎です。これまで、いくつかの記事でSEOがホームページを訪れるユーザーへの親切を行うための仕様であることを見てきました。「SEOはユーザーへの親切な配慮から」、「親切なホームページにするための考え方」、「ユーザーがスムーズに操作できるホームページ」、「検索結果ページでわかりやすい配慮を」、「ウェブアクセシビリティで誰もに優しいホームページ」、そして「内部リンクの最適化は親切な接客と同じ」などの記事で、ユーザー目線でのホームページ設計の重要性をお伝えしてきました。今回は、ユーザーにとって重要な「安全性」と「信頼性」について見ていきます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次なぜ安全・安心な環境が重要なのか安全で安心な環境のメリット信頼性を高める取り組み 1. 会社概要・運営者情報の明記 2. プライバシーポリシーの明確化 3. 特定商取引法に基づく表記 4. SSL証明書の導入（HTTPS化）さらに信頼性を高める施策 1. 実績や事例の紹介 2. FAQの充実 3. 明確な利用規約安全・安心を感じさせるデザインの工夫 1. 清潔感のあるデザイン 2. フッターの充実問い合わせ対応で信頼を築く 1. 複数の問い合わせ手段を準備 2. 問い合わせへの迅速な対応定期的なチェック 1. ソフトウェアの更新 2. セキュリティスキャンの実施 3. バックアップの確保変化するセキュリティ環境への対応 1. 二要素認証の導入 2. 個人情報保護法への対応 3. CookieポリシーとGDPR対応安全・安心はホームページの基盤ユーザーに安心感を与える環境づくりをどんなに見た目が美しく、使いやすいホームページでも、安心して利用できないと感じればユーザーは離れていってしまいます。ユーザーが安全に、そして安心してホームページを利用できるための配慮について考えてみましょう。なぜ安全・安心な環境が重要なのかあなたは実店舗を訪れるとき「この店は大丈夫だろうか」と不安に思うことはありませんか？例えば、店内が暗くて何が売られているのかわからない、スタッフの対応が不審、値札が見当たらないなど、こうした状況では多くの人が「ここで買い物をするのはやめておこう」と感じるでしょう。ホームページも同じです。ユーザーは常に「このサイトは安全か」「個人情報を入力しても大丈夫か」「トラブルがあったときに対応してもらえるか」といった不安を抱えています。こうした不安を取り除き、ユーザーに安心感を与えることが、ホームページの信頼性を高めるのにとても重要です。安全で安心な環境のメリット 1. コンバージョン率の向上ユーザーが安心して行動できるため、問い合わせや購入などの成約率が高まります。 2. リピーターの増加一度信頼したホームページには、ユーザーは何度も訪れる傾向があります。 3. 口コミ効果安心して利用できたユーザーは、周囲にもそのホームページを紹介してくれる可能性が高まります。 4. ブランドイメージの向上安全性への配慮は、企業全体の信頼性やブランド価値の向上にもつながります。信頼性を高める取り組み具体的にどのような取り組みを行えば、ユーザーからの信頼を得られるのかを見ていきます。 1. 会社概要・運営者情報の明記ユーザーがそのホームページで紹介されているサービスや商品に表みを持った時、最初に知りたいのは「このホームページを運営しているのは誰か」という点です。会社概要や運営者情報をわかりやすく表示することで、「顔の見える運営」という安心感を持ち、その後もスムーズに各ページを読み進めていってくれます。【記載すべき情報】法人名または運営者名（個人の場合）所在地（住所）連絡先（電話番号、メールアドレス）代表者名設立年月日（法人の場合）事業内容ホームページの運営責任者名これらの情報は、ホームページのフッターからリンクされる「会社概要」または「運営者情報」ページにまとめて記載するのが一般的です。特に電話番号は、トラブル発生時にすぐに連絡できる手段として重要です。 2. プライバシーポリシーの明確化個人情報保護への意識が高まる中、プライバシーポリシーの明示はもはや必須といえます。これは「ユーザーから預かった個人情報をどのように扱うか」を明確に示す方針文書です。【プライバシーポリシーに含める内容】収集する個人情報の種類個人情報の利用目的個人情報の第三者提供の有無とその条件個人情報の管理方法個人情報に関するユーザーの権利（開示請求など）クッキー（Cookie）やアクセス解析ツールの使用状況問い合わせ窓口プライバシーポリシーは専門的な文章になりがちですが、できるだけわかりやすい言葉で記述することが大切です。難解な法律用語ばかりのプライバシーポリシーは、かえって不信感を招いてしまいます。「収集した個人情報は、お問い合わせへの回答や商品発送のためだけに使用し、ご本人の同意なく第三者に提供することはありません」といったシンプルでわかりやすい表現でユーザーに正しく理解してもらえることを心がけましょう。 3. 特定商取引法に基づく表記オンラインショップなど、インターネットを通じて商品やサービスを販売する場合は、特定商取引法（特商法）に基づく表記が法律で義務付けられています。これはユーザーが安心して購入できるよう、取引条件を明確にするための情報です。【特商法に基づく表記に含める情報】販売事業者名代表者名または責任者名所在地連絡先（電話番号、メールアドレス）商品・サービスの価格（税込表示が基本）送料など付帯費用の詳細支払方法と支払時期商品の引渡し時期返品・交換・キャンセルの条件表現および商品に関する注意書きこういった情報を明記することで「後から追加料金を請求される心配はないか」「商品が届かなかったらどうすればいいのか」といったユーザーの不安を解消できます。特商法に基づく表記は、単なる法的義務ではなく、ユーザーとの信頼関係を築くための重要な手段です。こちらもきちんと漏れなく、わかりやすく記述しましょう、 4. SSL証明書の導入（HTTPS化） SSL（Secure Sockets Layer）証明書を導入してホームページをHTTPS化することは、現在のウェブサイト運営において必須のセキュリティ対策の一つです。【SSL導入のメリット】ユーザーとホームページ間の通信が暗号化され、情報漏洩リスクが低減ブラウザのアドレスバーに鍵マークが表示され、安全なサイトであることが視覚的にわかる Google等の検索エンジンがHTTPSサイトを優先的に評価するため、SEO効果もあるフォームからの情報送信時に警告メッセージが表示されない現在はホームページの全ページを常時SSL化することが最低限の設定となっています。SSL証明書を無料で発行できるサービス（Let's Encrypt等）もあるため、導入のハードルは低くなっていると言えます。ユーザーは「鍵マーク」を見るだけで安心感を得られることがわかっています。HTTPS化されていないホームページは、ユーザーから「古いまま」「危ないかも」という印象を持たれる傾向があります。さらに信頼性を高める施策基本的な取り組みに加えて、以下のような施策も信頼性向上に効果的と言えます 1. 実績や事例の紹介「このホームページの運営者は本当にプロなのか」という疑問に答えるため、実績や事例を具体的に紹介しましょう。【効果的な実績紹介】導入事例（ビフォーアフターがあるとなお良い）顧客の声や推薦文受賞歴や認定資格メディア掲載実績数字で示せる成果（「○○件の実績」「満足度○○％」など）抽象的な自画自賛よりも、具体的な事実の方が説得力があります。可能であれば、実名や企業名での推薦文などがあると信頼性はさらに高まります。 2. FAQの充実ユーザーが持ちそうな疑問や不安に事前に答えておくことで、安心感を与えることができます。【効果的なFAQ】実際に多く寄せられる質問を優先的に掲載質問は具体的に、回答は簡潔にカテゴリー分けして探しやすく定期的に更新して最新の情報を反映可能であれば検索機能も設置 FAQは単なる質問と回答の羅列ではなく、ユーザーの不安を解消するために必須のコンテンツと考えましょう。特に料金や納期、アフターサポートなど、ユーザーが気にする点は必ず含めて、きちんと説明してください。 3. 明確な利用規約ホームページの利用規約を明確に定め、公開することも信頼性向上に寄与します。【利用規約に含めるべき内容】ホームページの利用条件禁止事項著作権や知的財産権に関する事項免責事項利用規約の変更に関する事項これらは法的な保護の意味もありますが、「きちんとルールを定めている」という印象をユーザーに与える効果もあります。安全・安心を感じさせるデザインの工夫情報開示と同時に、デザイン面での工夫も重要です。 1. 清潔感のあるデザインゴチャゴチャとした雑然としたデザインは、ユーザーに不安感を与えます。シンプルで整理された清潔感のあるデザインを心がけましょう。【清潔感のあるデザインの配慮】適切な余白を確保する情報を適切に整理・分類する一貫性のあるカラースキームとフォントを使用する読みやすいフォントサイズと行間を確保するこれは実店舗で例えると、店内が整理整頓されていて清潔感があると安心して買い物ができるのと同じ原理です。 2. フッターの充実ホームページのフッター部分は、信頼性に関わる情報を集約するのに使われます。【フッターに含める情報】会社名・運営者名所在地連絡先各種ポリシーへのリンク（プライバシーポリシー、利用規約など）特商法に基づく表記へのリンク（該当する場合）コピーライト表示これらの情報をフッターにまとめることで、どのページを見ていても必要な情報にアクセスできるようになります。問い合わせ対応で信頼を築く情報開示やデザインと同じくらい重要なのが、ユーザーからの問い合わせへの対応です。 1. 複数の問い合わせ手段を準備ユーザーによって好みの連絡方法は異なります。可能な限り複数の問い合わせ手段を用意しましょう。問い合わせフォームメールアドレス電話番号 SNSのダイレクトメッセージチャットボット電話番号の記載は、「実在する組織・個人が運営している」という強い信頼感につながります。 2. 問い合わせへの迅速な対応問い合わせに対して迅速に返答することは、ユーザーとの信頼関係構築の第一歩です。自動返信メールで「問い合わせを受け付けました」と伝える 24時間以内（できれば当日中）に初回返答をする対応可能時間や返答までの目安を明示する「3営業日以内に返信します」といった具体的な目安を示すことで、ユーザーは「いつまで待てばいいのか」が分かり、安心できます。定期的なチェック安全なホームページを維持するためには、定期的なチェックが欠かせません。 1. ソフトウェアの更新ホームページを構築するCMSやプラグインは、定期的に更新することが重要です。更新を怠ると、既知の脆弱性を突かれてハッキングされるリスクが高まります。 2. セキュリティスキャンの実施定期的にセキュリティスキャンを実施して、脆弱性がないかチェックしましょう。無料のセキュリティスキャンツールもあるので、活用してください。 3. バックアップの確保定期的なバックアップを取ることで、万が一の事態に備えます。特に重要な更新の前には必ずバックアップを取りましょう。変化するセキュリティ環境への対応セキュリティを取り巻く環境は日々変化しています。最近の検討すべきポイントを紹介します。 1. 二要素認証の導入管理画面へのログインには、可能であれば二要素認証を導入しましょう。パスワードだけでなく、スマートフォンなどの別デバイスでの認証を組み合わせることで、セキュリティが大幅に向上します。 2. 個人情報保護法への対応 2022年の個人情報保護法改正など、法規制は随時更新されます。最新の法令に対応したプライバシーポリシーになっているか、定期的に見直しましょう。 3. CookieポリシーとGDPR対応 EU圏のユーザーがアクセスする可能性がある場合は、GDPRへの対応も検討する必要があります。Cookie利用に関する同意取得の仕組みなどを整えましょう。安全・安心はホームページの基盤ここまで見てきたように、安全性と信頼性はホームページの基盤となる要素です。どんなに見た目が美しく、使いやすいホームページでも、ユーザーが安心して利用できないと感じれば価値は半減してしまいます。安全・安心への配慮は、単なる「あれば良い」オプションではなく、ホームページ運営で絶対に必要と言える仕様です。それは実店舗での「清潔な店内」「丁寧な接客」「明確な価格表示」と同じくらい当たり前のものと言えるでしょう。テクニカルSEOや安全・安心なホームページ運営について、より詳しく知りたい方は「Webサイトの集客力を左右するテクニカルSEO」もぜひご覧ください。ユーザーに安心感を与える環境づくりをホームページの安全性と信頼性を高めるためには、基本的な情報開示とセキュリティ対策、安心感あるイメージ、接客対応がそれぞれ最適化されれていなければなりません。基本情報の明記: 会社概要・運営者情報を明確に表示する各種ポリシーの整備: プライバシーポリシー、利用規約などを整備して公開する法令遵守: 特商法に基づく表記など、法的に必要な情報を適切に表示するセキュリティ対策: SSL証明書の導入、定期的なセキュリティチェックなどを実施する安心感のあるデザイン: 清潔感のあるデザイン、フッターの充実などで安心感を演出する問い合わせ対応: 複数の連絡手段を用意し、迅速・丁寧に対応するこの対応も一度実施して終わるのではなく、定期的に見直し・改善していかなければなりません。日々の誠実な対応を積み重ねて、ユーザーの信頼を獲得していきましょう。あなたのホームページは、ユーザーに安全で安心な環境を提供できていますか？「安全ではありません」と表示されていたり、正しい情報が掲載されていなかったり、不審がられるポイントはありませんか？安全で安心なホームページ運営でお悩みの方は、お気軽にご相談ください。初回相談は無料です。いつでもお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
16May
- 内部リンクの最適化は親切な接客と同じ
  Webコンサルタントの松崎です。ホームページでユーザーが使いやすいように配慮をすることは検索エンジンの評価を向上させることを、いくつの記事で見てきました。「SEOはユーザーへの親切な配慮から」、「親切なホームページにするための考え方」、「ユーザーがスムーズに操作できるホームページ」、「検索結果ページでわかりやすい配慮を」、そして「ウェブアクセシビリティで誰もに優しいホームページ」です。 SEOのテクニカルな基本はユーザーへの親切な配慮にあると言えます。今回は、「内部リンク」という観点からホームページの親切設計について見てみます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次内部リンクの重要性 1. ユーザーの回遊性を高める 2. 重要なページを強調できる 3. ページの権威を分配する 4. 検索エンジンのクロール効率を向上させる効果的な内部リンク設計の7つのポイント 1. 階層構造を明確にする 2. 自然なアンカーテキストを使う 3. 関連コンテンツへの誘導を工夫する 4. 新旧コンテンツをつなぐ 5. 孤立ページをなくす 6. リンク数のバランスを考える 7. スマホでの使いやすさに配慮する内部リンク分析と改善のステップ 1. 現状の内部リンク構造を把握する 2. 重要ページを特定する 3. 改善計画を立てる 4. 実施と効果測定内部リンクの注意点 SEOテクニックに走りすぎない古いリンクのメンテナンスを忘れないグローバルナビゲーションとのバランス内部リンクはホームページの「親切な接客」親切な内部リンクが集客を左右する内部リンクとは、同じホームページ内のページ同士をつなぐリンクのことです。これは実店舗でいえば、お客様を案内する親切なスタッフのような役割を果たします。内部リンクの重要性内部リンクは、ユーザーにとっても検索エンジンにとっても重要な道しるべとなります。適切に設計された内部リンクには、以下のようなメリットがあります。 1. ユーザーの回遊性を高めるあなたは書店で目的の本を見つけた後どうしますか？多くの人は、その棚の周辺を見て回ったり、関連する本も探したりするでしょう。ホームページも同じです。あるページを読んでいるユーザーが「もっと詳しく知りたい」と思ったとき、関連ページへのリンクがあれば、自然にクリックしてその先のページを見ていくでしょう。こうなることで、ユーザーの滞在時間が長くなり、より多くの情報を提供できる機会が増えます。 2. 重要なページを強調できる内部リンクは、ホームページ内のどのページが重要かを示す指標にもなります。多くのページからリンクされているページは、それだけ重要なページと見なされます。例えば、主力商品やサービスのページには、ホームページ内の多くのページからリンクを張ることで、その重要性を強調することができます。これはユーザーにとっても、「このページは重要なんだな」という目印になりますし、検索エンジンにとっても同様に伝えることができます。 3. ページの権威を分配するホームページ全体の評価（ドメインパワーとも呼ばれたりするかな）は、内部リンクによって各ページに伝えられます。特に外部からの被リンク（バックリンク）を多く獲得しているページからの内部リンクは、リンク先のページにその評価を分け与えると考えられています。これは川の流れに例えることができます。メインの大きな川（高評価のページ）から小さな支流（他のページ）へと水（評価）を分配することで、ホームページ全体に潤いを与えるのです。 4. 検索エンジンのクロール効率を向上させる検索エンジンのクローラー（情報収集ロボット）は、リンクをたどってホームページ内のページを発見します。適切な内部リンク構造があれば、クローラーは効率よくページを巡回できます。これは迷路と標識の関係に似ています。内部リンクという標識がなければ、クローラーは迷路の中で迷ってしまい、重要なページを見逃す可能性があります。効果的な内部リンク設計の7つのポイントでは、具体的にどのような内部リンク設計が効果的なのか。見てみましょう。 1. 階層構造を明確にするホームページの階層構造は、本の目次のようなものです。トップページから各カテゴリーページ、そして個別ページへと、論理的に階層化された階層を作りましょう。一般的には、「ホーム > カテゴリー > サブカテゴリー > 個別ページ」のような階層構造が理想的です。この構造を視覚的に示すパンくずリストも、ユーザーが現在位置を把握できる配慮となります。 2. 自然なアンカーテキストを使うアンカーテキスト（リンクをクリックする文字部分）は、リンク先のページの内容を適切に表現するものを設定します。「こちら」「詳細はこちら」のような曖昧なアンカーテキストではなく、「初心者向けSEO対策の基本」「商品Aの使用方法」のように具体的な内容を示すアンカーテキストの方が、ユーザーにとっても検索エンジンにとっても、わかりやすさが向上します。ただし、全く同じアンカーテキストを大量に使うと、不自然に見えるので注意が必要です。文脈に応じて自然な表現を心がけましょう。 3. 関連コンテンツへの誘導を工夫する記事の終わりに「関連記事」セクションを設けるのは効果的ですが、それだけでなく、本文中にも自然な形で関連ページへのリンクを入れると良いでしょう。例えば、「SEO対策」について書いた記事の中で「キーワード選定」について触れた場合、その部分から「キーワード選定の詳細ガイド」へのリンクを張るというように。これは本の脚注や参考文献のようなもので、「もっと知りたい」というユーザーの知的好奇心に応える役割を果たします。 4. 新旧コンテンツをつなぐ新しいコンテンツを公開したら、関連する過去のコンテンツからリンクを張りましょう。逆に、新しいコンテンツからは、関連する過去のコンテンツへのリンクも入れると良いでしょう。このように新旧のコンテンツをつなぐことで、古いコンテンツにも新たな価値が生まれ、検索エンジンからの評価も維持できます。 5. 孤立ページをなくす「孤立ページ」とは、他のページからリンクされておらず、辿り着けないページのことです。すべてのページが少なくとも1つの内部リンクで他のページとつながっているようにします。特にホームページのリニューアルやコンテンツの追加後には、孤立ページができていないか確認することが重要です。 Google Search Consoleの「カバレッジ」レポートを使って、孤立ページを見つけることができます。 6. リンク数のバランスを考える 1つのページに設置するリンクの数は、多すぎても少なすぎても問題です。一般的には、1ページあたり100リンク未満に抑えることが良いとされています。重要なポイントは、ページの目的に合わせたリンク設計です。商品詳細ページなら「購入ボタン」「関連商品」へのリンクを目立たせるべきですし、情報記事なら「関連記事」へのリンクを重視すべきでしょう。リンクが多すぎると「リンクジュース」と呼ばれるページの評価が分散し、各リンク先への評価の分配量が減少すると考えられています。重要なページへのリンクは優先的に配置しましょう。 7. スマホでの使いやすさに配慮するスマホでの閲覧を考慮したリンク設計も重要です。小さな画面でもタップしやすいリンクサイズと間隔を確保しましょう。一般的には、タップ対象は少なくとも40×40ピクセル以上のサイズが推奨されています。また、リンクが密集していると誤タップの原因になるため、適切な間隔（余白）も大切です。「次の記事」「前の記事」などのナビゲーションリンクは、スマートフォンでは画面下部に配置すると親指で操作しやすくなります。内部リンク分析と改善のステップ自社ホームページの内部リンク構造を分析し、改善するための取り組み方法を紹介します。 1. 現状の内部リンク構造を把握するまずは現状を把握することが大切です。 Google Search Consoleを活用した内部リンク分析 Google Search Consoleの「リンク」レポートは、内部リンクの状況を簡単に確認できる無料ツールです。左側のメニューから「リンク」を選択すると、内部リンク、外部リンク、トップリンクページなどの情報が表示されます。特に「トップリンクされているページ」セクションでは、サイト内で最もリンクされているページが表示されます。これを確認することで、現在どのページが内部リンク構造の中で重視されているかがわかります。また、「内部リンクが最も多いページ」セクションでは、他のページへ最も多くリンクを送っているページがわかります。分析結果からわかること重要なページに十分な内部リンクが向いているか新しく追加したページが適切にリンクされているか内部リンク構造に偏りがないか特定のページに内部リンクが集中していないかこうした分析を定期的に行うことで、リンクが多すぎるページ、少なすぎるページ、そして内部リンクが全くない「孤立ページ」などを特定できます。特に孤立ページは、ユーザーにも検索エンジンにも見つけにくいので、すぐに改善するようにしましょう。 Google Search Consoleでの分析は、専門的な知識がなくても簡単に行えるのが大きなメリットです。定期的なチェックを習慣化することで、内部リンク構造の問題を早期に発見できます。 2. 重要ページを特定するコンバージョンに直結するページ、アクセス数の多いページ、SEO的に重要なキーワードをターゲットにしているページなど、ビジネス上重要なページをリストアップします。これらのページが適切に内部リンクで強化されているか確認しましょう。 3. 改善計画を立てる分析結果に基づいて、具体的な改善計画を立てます。孤立ページへのリンク追加重要ページへのリンク強化関連コンテンツ同士のリンク追加アンカーテキストの最適化など、優先順位をつけて計画的に取り組みましょう。 4. 実施と効果測定改善策を実施したら、その効果を定期的に測定します。以下の指標が参考になります。ページごとのアクセス数の変化平均ページ滞在時間の変化サイト内ページの回遊率の変化検索順位の変化数値だけでなく、実際のユーザー行動も観察しましょう。ヒートマップツールなどを使うと、ユーザーがどのリンクをクリックしているかが視覚的に分かります。内部リンクの注意点最後に、内部リンク設計で注意すべきポイントをいくつか紹介します。 SEOテクニックに走りすぎない過度なSEO対策を目的とした不自然な内部リンクは、ユーザー体験を損なう可能性があります。常にユーザーにとって価値のあるリンクかどうかを考えましょう。例えば、文脈と関係ないキーワードにリンクを設置したり、同じページに同じアンカーテキストで何度もリンクを張ったりするのは避けるべきです。古いリンクのメンテナンスを忘れない時間が経つにつれて、リンク先のページが移動したり削除されたりすることがあります。定期的に内部リンクをチェックし、リンク切れがないか確認しましょう。特にリニューアルを行った場合は、古いURLから新しいURLへの301リダイレクトを設定するなど、適切な対応が必要です。グローバルナビゲーションとのバランスヘッダーやフッターなどのグローバルナビゲーションは、すべてのページから重要なページにアクセスできる便利な機能です。しかし、これだけに頼らず、本文中の文脈に応じた内部リンクも充実させましょう。グローバルナビゲーションはホームページの「骨格」、本文中のリンクは「筋肉」と考えると良いでしょう。両方がバランスよく機能することで、使いやすいホームページになります。内部リンクはホームページの「親切な接客」内部リンクの最適化は、単なるSEO対策ではなく、訪問者への「親切な接客」の心と言えます。ユーザーが「次に何を見たいか」を想像し、適切な案内をすることで、満足度の高いホームページになります。親切な案内スタッフのように、訪問者が迷わず目的の情報にたどり着けるような内部リンク設計を心がけましょう。それが結果として、回遊率の向上、滞在時間の増加、そして検索順位の上昇につながります。テクニカルSEOや内部リンクの重要性について、さらに詳しく知りたい方は「Webサイトの集客力を左右するテクニカルSEO」もあわせてご覧ください。親切な内部リンクが集客を左右する内部リンクは、ホームページにおける「親切な案内スタッフの接客」の役割を果たします。【適切に設計された内部リンクの効果】ユーザーの回遊性を高め、満足度を向上させる重要なページを強調し、コンバージョン率を高めるページの評価を適切に分配し、検索エンジンからの評価を向上させるクローラーの巡回効率を高め、インデックス状況を改善するこのように、内部リンクの最適化はユーザーにとっても検索エンジンにとっても価値のある施策です。一度に完璧を目指すのではなく、少しずつ改善を重ねていくことが大切です。あなたのホームページの内部リンクは、訪問者を適切に案内できていますか？今日からでも、ユーザー目線での内部リンク見直しを始めてみませんか？内部リンクの最適化を含むテクニカルSEOに取り組みたい方、当社ではテクニカルSEOを主軸に改善を行って進めるWebコンサルティングでWeb集客をサポートしています。いつでもお気軽にご相談ください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
15May
- ウェブアクセシビリティで誰もに優しいホームページ
  Webコンサルタントの松崎です。ここまでSEOがユーザーに親切な配慮だといくつかの記事で見てきました。 SEOはユーザーへの親切な配慮から親切なホームページにするための考え方ユーザーがスムーズに操作できるホームページ検索結果ページでわかりやすい配慮をこれらの記事を読んでもらうと、テクニカルSEOについての説明のように思えますが、これらの設定は全てユーザが使いやすくなるために行うもので、まわり回って考えると、やはりユーザが使いやすくなるために配慮をしておく取り組みだといえます。今回は、「ウェブアクセシビリティ」について見てみます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次ウェブアクセシビリティの重要性ウェブアクセシビリティの基本的な対応 1. 画像には代替テキスト（alt属性）を設定する 2. 色だけに頼らない情報伝達 3. キーボードだけで操作できるようにする 4. 見出し構造を適切に設定する 5. フォームの使いやすさを確保する 6. テキストは読みやすく設定する画像検索からの集客 1. 画像のファイル名を適切に設定する 2. alt属性に適切なキーワードを含める 3. 画像の周囲のテキストも関連性を持たせる 4. 画像の最適化ウェブアクセシビリティは少しずつ改善しましょうアクセシビリティはやさしさ誰もに優しいホームページウェブアクセシビリティとは、「誰もがホームページを使えるようにする取り組み」です。視覚や聴覚に障害のある方、高齢の方、一時的に不自由を抱えている方など、様々なユーザーが利用しやすくできるようにすることです。さらに、集客の幅も広がります。ウェブアクセシビリティの重要性「うちのホームページは一般の人向けだから、アクセシビリティは関係ない」と思っている方もいらっしゃるかもしれません。しかし、実はそうではありません。日本には約1,160万人の障害者の方がいます（内閣府「令和5年版障害者白書（全体版）」）し、高齢者も増加しています。また、一時的な怪我や病気、環境的な制約（まぶしい屋外でスマホを見る、騒がしい場所で動画を視聴するなど）により、誰もが「一時的な障害」を経験することがありますよね。私自身、老眼がすごくキツくなってきていまして、文字の小さいホームページはとても読みづらいです。こういった状況は誰にもあることで、アクセスしやすいなホームページにしておくとたくさんの利用者にメリットがあるだけでなく、ホームページの運営者にもメリットがあります。 1. より多くの人に情報を届けられる潜在的なユーザー層が広がり、ビジネスチャンスも増えます。 2. SEO効果が向上する Googleは公式にアクセシビリティをランキング要因の一つとして考慮していると発表しています。 3. ブランドイメージの向上誰もが使えるホームページを提供することで、企業の社会的責任（CSR）にもつながります。 4. 法的リスクの回避日本では2024年4月よりウェブアクセシビリティの合理的配慮が法律で義務化されました。ウェブアクセシビリティの基本的な対応では、具体的にどのような対応が必要なのか。まずは基本的な項目から見ていきましょう。 1. 画像には代替テキスト（alt属性）を設定する視覚に障害のある方は、スクリーンリーダーというソフトウェアを使ってホームページを「読み上げ」てもらいます。スクリーンリーダーは画像を読み取ることができないため、代替テキスト（alt属性）を設定することで、画像の内容を伝えることができます。【代替テキストの書き方】情報を伝える画像には、その内容を簡潔に記述する。例：「当社の新製品Aの使用イメージ」「東京オフィスの外観写真」装飾目的の画像には空のalt属性（alt=""）を設定する。これにより、スクリーンリーダーはその画像をスキップします。リンク画像には、リンク先の内容を記述する。例：「お問い合わせページへ」「PDFカタログをダウンロード」適切な代替テキストを設定することで、視覚に障害のある方だけでなく、画像の表示に時間がかかる環境や、画像表示をオフにしているユーザーにも情報が伝わります。また、検索エンジンも代替テキストを参考にして画像の内容を理解するため、SEO効果も期待できます。 2. 色だけに頼らない情報伝達「赤字の項目は必須です」「緑のボタンをクリックしてください」というように、色だけで情報を伝えると、色覚特性のある方（色を見分けにくい方）には伝わりません。色覚特性は男性の約5%、女性の約0.2%に見られます。これは決して少ない数字ではありません。【色で情報を伝える時のポイント】色に加えて、形や記号、テキストでも区別する。例：「赤い＊マークの項目は必須です」「緑の「送信」ボタンをクリックしてください」コントラスト比を十分に確保する。テキストと背景のコントラスト比は4.5:1以上が望ましいとされています。カラーユニバーサルデザインを意識する。赤と緑の組み合わせなど、区別しづらい色の組み合わせを避けます。デザインの段階からカラーユニバーサルデザインを意識することで、より多くの人に情報を正確に伝えることができます。 3. キーボードだけで操作できるようにするマウスやタッチスクリーンを使えない方（視覚障害のある方や上肢に障害のある方など）は、キーボードだけでホームページを操作します。全ての機能がキーボードだけで利用できるように設計することが重要です。【キーボード操作対応のポイント】全てのリンクやボタンにフォーカスが当たるようにする。フォーカスが視覚的にもわかるようにデザインしましょう。タブキーによる移動順序を論理的にする。ページの左上から右下への自然な流れになるよう設計します。ドロップダウンメニューなどの複雑なUIもキーボードで操作できるようにする。マウスオーバーだけで動作するメニューはキーボードユーザーには使えません。キーボード操作の対応は、実は多くのホームページで不十分なです。あなたのホームページで、タブキーだけで全ての機能が使えるか試してみてください。操作できない部分が意外と多くあるかもしれません。 4. 見出し構造を適切に設定する見出しタグ（h1～h6）は、ページ構造を理解する上で重要な役割を果たします。特にスクリーンリーダーのユーザーは、見出しを手がかりにしてページ内を移動することが多いです。【見出し構造の基本】 h1タグはページごとに1つだけ使用する。通常はページのメインタイトルに使います。見出しの階層を適切に設定する。 h1の次はh2、その下の階層はh3というように、順序よく使いましょう。見出しタグをデザイン目的だけで使わない。見出しタグは文書構造を表すものであり、単に文字を大きくするためだけに使うべきではありません。適切な見出し構造は、スクリーンリーダーユーザーの利便性を高めるだけでなく、SEOの観点からも重要です。Googleは見出し構造を参考にしてページの内容を理解しようとしています。 5. フォームの使いやすさを確保する問い合わせフォームやお申し込みフォームは、ユーザーとの大切な最初の接点です。全てのユーザーが簡単に入力できるよう、配慮しましょう。【使いやすいフォームにする最適化】全ての入力項目にラベルを関連付ける。 <label>タグを使って入力欄と説明文を関連付けましょう。エラーメッセージを明確に表示する。「入力に誤りがあります」ではなく、「メールアドレスの形式が正しくありません」など具体的に。必須項目をわかりやすく示す。色だけでなく、「必須」という文字や記号も併用しましょう。入力例や説明を提供する。特に電話番号や日付など、形式が重要な項目には入力例があると親切です。 6. テキストは読みやすく設定する文字サイズやフォント、行間などは、読みやすさに大きく影響します。【配慮するポイント】文字サイズは16px以上を基本とする。特に小さな文字は、高齢者や視力の弱い方には読みづらいです。行間は十分に確保する。行間が詰まっていると、文章が読みづらくなります。1.5倍程度の行間が理想的です。文字と背景のコントラストを確保する。薄い色の文字や、背景との区別がつきにくい配色は避けましょう。ユーザーが文字サイズを変更できるようにする。フォントサイズを固定値（pxなど）ではなく、相対値（em、remなど）で指定すると、ブラウザの設定で文字サイズを変更できます。画像検索からの集客アクセシビリティの観点だけでなく、SEOの観点からも画像の適切な設定は重要です。正しく最適化できると画像検索からの集客は見込めるようになります。 1. 画像のファイル名を適切に設定する「IMG_1234.jpg」のような意味のないファイル名ではなく、内容を表す名前にしましょう。例えば「organic-vegetable-basket.jpg」のように、キーワードを含めた名前にします。 2. alt属性に適切なキーワードを含める前述の代替テキストは、アクセシビリティだけでなく、画像検索のランキング要因にもなります。ただし、キーワードを不自然に詰め込むのではなく、画像の内容を正確に表現することが大切です。 3. 画像の周囲のテキストも関連性を持たせる画像の前後のテキストや、画像のキャプションなども、その内容と画像がきちんと一致するものにしましょう。 4. 画像の最適化ファイルサイズが大きすぎると表示速度が遅くなり、ユーザーが使いにくくなってしまいます。適切なサイズと圧縮で、表示速度も最適化しましょう。画像の最適化については、「ユーザーがスムーズに操作できるホームページ」https://ameblo.jp/mamaru14/entry-12896790688.htmlの記事でも触れていますので、ぜひ参考にしてください。ウェブアクセシビリティは少しずつ改善しましょうウェブアクセシビリティの対応は、一度に全てを完全に最適化する必要はありません。少しずつでも改善していくことが大切です。まずは代替テキストの設定から始める次に見出し構造を適切に整えるフォームのラベル設定やエラーメッセージの改善キーボード操作の対応こういった取り組みのいくつかだけ対応できれば、これまでよりもずっと多く人が利用しやすい親切で使いやすいホームページとなり、アクセス数が増え、検索エンジンからの評価向上も見込まれ、集客増がきたいできるようになります。アクセシビリティはやさしさウェブアクセシビリティの対応は、特別なことではありません。家や店舗に手すりやスロープを設けるのと同じように、デジタルの世界にもバリアフリーが必要なのです。すべての人に情報を届けるという姿勢は、結果的にあなたのホームページの利用者を増やすことにつながります。検索エンジンからの評価も高まり、SEO効果も期待できます。あなたのホームページでも、できるところからひとつづつ「優しい配慮」を取り組んでいきましょう。また、あなたが検索する時に、ウェブアクセスビリティの配慮がされているかどうかがわかると、その会社が見えないところまで配慮してくれる会社だとわかりますよね。そういう会社のサービス・商品を選びたいですよね。アクセシビリティを含むテクニカルSEOについて、より詳しく知りたい方は「Webサイトの集客力を左右するテクニカルSEO」もあわせてご覧ください。誰もに優しいホームページウェブアクセシビリティの対応は、特定の人のためだけのものではありません。誰もが使いやすいホームページは、結果的に全てのユーザーにとって価値があります。【最適化ポイント】画像には適切な代替テキストを設定する色だけでなく、形や文字でも情報を伝えるキーボードだけでも操作できるようにする見出し構造を適切に設定するフォームは全ての人が使いやすいように配慮するテキストは十分な大きさと読みやすさを確保するアクセシビリティの向上は、より多くのユーザーへのリーチ、SEO効果の向上、そしてブランドイメージの向上につながります。一度に完璧を目指すのではなく、できることから少しずつ改善していきましょう。あなたのホームページは、誰もが使いやすいものになっていますか？ウェブアクセシビリティの最適化に取り組みたい方は、お気軽にご相談ください。初回相談は無料です。いつでもお気軽にお問い合わせください。
14May
- 検索結果ページでわかりやすい配慮を
  Webコンサルタントの松崎です。これまで「SEOはユーザーへの親切な配慮から」や「ユーザーがスムーズに操作できるホームページ」の記事でお伝えしてきたように、SEOの基本はユーザーへの親切な配慮と言えます。今回は、その配慮の一環として「検索結果ページでのわかりやすさ」について特に見ていきます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次検索結果ページでの印象ページタイトルの重要性効果的なページタイトルの書き方ページタイトルのNG例メタディスクリプションの効果的な活用法メタディスクリプションの書き方メタディスクリプションのNG例ページタイトルとメタディスクリプションの最適化手順 1. 現状を把握する 2. ユーザーの検索意図を理解する 3. 差別化ポイントを明確に 4. A/Bテストを行うタイトルとディスクリプションの関係性 SNSシェア時の表示も考える簡単にチェックする方法スマホ表示もチェックユーザーと検索エンジンに最適化する検索結果での印象は集客の鍵これは「ページタイトル」と「メタディスクリプション」を検索ユーザーにわかりやすく表示する配慮です。検索結果ページでの印象検索エンジンの結果ページ（SERP）で表示される情報は限られています。ページタイトル（青色のリンクテキスト） URL（緑色のテキスト）ディスクリプション（黒色の説明文）これらは、ユーザーがどのページに自分が探している情報が載っているのかを考える重要な要素です。例えて言うと、お店の看板や店頭ポップのようなものです。魅力的でわかりやすければユーザーは興味を持ちクリックしますし、わかりにくければスルーされてしまいます。検索ユーザーは何か調べものをするとき、検索結果の上から順にタイトルを見て「これは自分の求める情報がありそうだな」と思ったものをクリックします。タイトルだけでは判断できない場合は、ディスクリプション（黒文字の2行程度の説明文）を読んで判断することも多いです。ページタイトルの重要性ページタイトルは、HTMLの<title>タグで指定する部分で、検索結果で最も目立つ青いリンクテキストとして表示されます。このタイトルは、SEOにおいても検索エンジンがページの内容を把握するための手がかりしていて、非常に重要な役割を果たしています。効果的なページタイトルの書き方 1. キーワードを含める検索されやすいキーワードを含めることは基本です。ただし、不自然に詰め込むのはスパムとなり、逆効果です。 2. 簡潔で具体的にできれば、30文字程度に収めましょう。長すぎると途中で切れてしまいます。 3. ユーザーの検索意図に応える「〇〇とは？」という検索には「〇〇とは何か？わかりやすく解説」のようなタイトルが効果的です。 4. 数字や年号を入れる「7つの方法」「2025年最新版」など具体性のある数字は検索ユーザーの目を引きます。 5. ブランド名はあとに重要なキーワードを先に、会社名や商品名は後ろに配置するのが効果的です。例えば、「SEO対策｜株式会社〇〇」ではなく、「初心者でもわかるSEO対策の始め方｜株式会社〇〇」のように、具体的な内容を前に持ってくると良いです。ページタイトルのNG例キーワードの詰め込み例「SEO対策 SEO SEOリンク SEO集客東京大阪全国対応」このようなタイトルは、キーワード詰め込みスパム（キーワードスタッフィング）とみなされ、かえって評価を下げてしまいます。意味不明な省略例「HRS-02 マーケ資料 PDF」社内でなら通じる略語や商品コードでも、一般ユーザーには何のことかさっぱりわかりません。内容と不一致例「無料ダウンロード」（実際には有料）クリック率は上がるかもしれませんが、内容が合ってないことがわかるとすぐに離脱され、むしろ信頼を失います。メタディスクリプションの効果的な活用法メタディスクリプションは、HTMLの<meta name="description" content="〇〇">で指定する部分で、検索結果のタイトル下に2行程度で表示される説明文です。メタディスクリプションの書き方 1. 適切な長さ 120文字程度に収めましょう。長すぎると途中で「...」と切れてしまいます。 2. キーワードを自然に含める検索キーワードと一致する部分は太字で表示されるため、目に留まりやすくなります。 3. 魅力や特徴を具体的に「なぜこのページを見るべきか」を伝えましょう。 4. 行動を促す言葉を入れる「今すぐチェック」「詳しく見る」など、クリックを促す言葉を入れるのも効果的です。 5. ページごとに固有の内容に同じディスクリプションを複数ページに使い回すのはやめましょう。例えば「当社の商品についてご紹介しています」ではなく、「有機栽培の安心素材だけを使った赤ちゃん用離乳食。アレルギー対応7種類の豊富なラインナップを全国配送でお届けします。初回限定20%オフ」のように、具体的なメリットを伝えると良いですよ。メタディスクリプションのNG例内容がない例「ようこそ、〇〇株式会社のホームページへ」何のホームページなのか、どんな情報があるのか全くわかりません。文字化け例「■□■□■□■□■□■□■」文字コードの設定ミスで文字化けしたディスクリプションを見かけることがあります。ほぼクリックされません。ページ内容のコピペ例「ページ内容をそのままコピーしただけの文章...」内容は伝わるかもしれませんが、魅力的な要約になっておらず、クリックを促せません。ページタイトルとメタディスクリプションの最適化手順では、具体的にどうやって最適化していけばいいのか、見ていきましょう。 1. 現状を把握するまずは、Google Search Consoleなどのツールで、現在のクリック率データを確認しましょう。特にクリック率の低いページから改善していくのがおすすめです。Google Search Consoleにアクセス。 2. ユーザーの検索意図を理解するそのページにアクセスしてほしいユーザーは、どんなキーワードで検索し、どんな情報を求めているのかを考えましょう。例えば「子犬しつけ」で検索するユーザーは、子犬のしつけ方法についての具体的なノウハウを求めています。「子犬のしつけならお任せください」より「初めての子犬の飼い主さん向け｜3日でできる基本のしつけ方法」のほうが検索意図に合っています。 3. 差別化ポイントを明確に検索結果ページには、あなたのサイト以外にもたくさんのホームページが検索結果として表示されます。なぜあなたのページを選ぶべきなのか、その理由を考えましょう。最新の情報が載っている具体的な手順や方法が書かれている *専門家の意見が含まれている *実際の体験談や事例があるなどは差別化ポイントになりますよ。1ページづつしっかりをチェックしてみてください。 4. A/Bテストを行う同じページに対して複数のタイトルやディスクリプションのパターンを用意し、どれが最もクリック率が高いかを検証するのも効果的です。ただし、頻繁に変更すると検索エンジンが混乱する可能性もあるので、テスト期間は1〜2週間程度の間隔でデータを収集して実施しましょう。タイトルとディスクリプションの関係性タイトルとディスクリプションは別々に考えるのではなく、セットで考えるのが効果的です。例えば、タイトルが「初心者向け自転車選びの5つのポイント」なら、ディスクリプションでは「どんなポイントが解説されているのか」「なぜそのポイントが重要なのか」「読むとどんなメリットがあるのか」といった情報を補完すると良いでしょう。タイトルで興味を引き、ディスクリプションで具体的な価値を伝えるといったように流れをもたすと、クリックにつながりやすくなります。 SNSシェア時の表示も考えるページタイトルとメタディスクリプションは、検索結果だけでなく、SNSでシェアされたときのプレビュー表示にも使われます。 FaceBookやTwitterでシェアされた際の表示は、OGP（Open Graph Protocol）タグで別途設定することも可能ですが、設定していない場合はそれぞれの文字列が使用されます。 SNSでのシェアを意識して記述することで、検索からだけでなくSNSからの流入も増やせる可能性が出てきます。簡単にチェックする方法今すぐ簡単にできるチェック方法は、自分のサイトの代表的なページについて、実際にGoogle検索をしてみる表示されるタイトルとディスクリプションが魅力的か、クリックしたくなるかを考える競合サイトの検索結果と比較して、どちらが魅力的に見えるかを分析するです。これだけでも、改善点が見えてくるはずですよ。スマホ表示もチェック現在、検索の多くはスマートフォンで行われています。スマホ画面では表示スペースが限られるため、より簡潔で魅力的な表現が求められます。特にタイトルは、PCよりも短く表示される傾向があるので、重要なキーワードは必ず前に持ってくる！ことがより重要になります。実際のモバイル表示を確認して、途中で切れていないか、意図した内容が伝わる表示になっているかを自分のスマホでチェックしましょう。ユーザーと検索エンジンに最適化するページタイトルとメタディスクリプションの最適化は、小さな変更かもしれませんが、検索からの流入を大きく左右します。上位表示を獲得するために多大な労力を費やした後に、この部分を適当になっているのは凄くもったいないです。検索エンジンのアルゴリズムを考えた最適化というよりは、実際にそれを見るユーザーの気持ちになって、わかりやすく魅力的な表現をする最適化です。「この先にどんな情報があるのか」「なぜそれが自分にとって価値があるのか」をユーザーに明確に伝えることが大切です。「検索結果はアピール合戦の場です。」と相談者さんにアドバイスしています。文字だけで表示される小さなスペース（※リッチスニペットで画像やリンクなども表示されますが..）で、いかに掲載されている内容を伝えてクリックにつなげられるか。アクセスするかどうか判断される大きな分かれ目なので、ユーザーへの配慮とともにちゃんとPRするようにしましょう。テクニカルSEOがユーザーへの配慮となることについて、もっと詳しく知りたい方は「Webサイトの集客力を左右するテクニカルSEO」もあわせて見てもらうと、全体の取り組みがわかりやすいと思います。ぜひご覧くださいね。検索結果での印象は集客の鍵ページタイトルとメタディスクリプションは、検索エンジンとユーザーとホームページをつなぐ重要な場所です。どんなに素晴らしいコンテンツを用意しても、検索結果で魅力を伝えられなければ、そのページに来てもらえません。【重要ポイント】ページタイトルは30文字程度で、キーワードを含めつつ具体的にメタディスクリプションは120文字程度で、ページの価値を明確にユーザーの検索意図に応え、ほかの検索結果との差別化を図る定期的に実際の検索結果を確認し、改善する今回ご紹介した内容をもとに、あなたのホームページのタイトルとディスクリプションを是非見直してみてください。検索順位を上げる対策も大切ですが、すでに獲得している検索表示から、さらに多くのクリックを得ることも、同じくらい大事な取り組みです。あなたのホームページは、検索結果で十分にその魅力を伝えられていますか？テクニカルSEOでユーザーに配慮したホームページに改善したい方はまず現状をお聞かせください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
13May
- ユーザーがスムーズに操作できるホームページ
  Webコンサルタントの松崎です。これまで「SEOはユーザーへの親切な配慮から」や「ホームページを親切設計するための考え方」の記事で見てきたように、SEOの本質はユーザーへの親切な配慮です。今日は、ホームページで最適化しておきたい配慮の中で、すべてに影響する「スムーズに操作できる」ことについて、その具体的なメリットと、それをするための方法について見ていきます。SEOにも大きな影響がありますので、しっかり取り組みたい箇所です。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次スムーズな操作性がもたらす5つのメリット 1. 直帰率 2. 滞在時間 3. 問い合わせ・購入 4. リピーター 5. 自然なリンク獲得とSNS拡散スムーズな操作性を実現する6つのポイント 1. 直感的なナビゲーション設計 2. スムーズな表示速度 3. スマホ対応 4. わかりやすいコンテンツ構成 5. フォーム設計 6. 一貫性のあるデザインとUI SEOとユーザーの使いやすさの関係ユーザーの使いやすさは小さな改善の積み重ね「使いやすさ」はすべてのユーザーのためホームページの「使いやすさ」はとても大切ですスムーズな操作性でホームページが活きるスムーズな操作性がもたらす5つのメリットユーザーがストレスなくホームページを操作できることのメリットについて見てみましょう。 1. 直帰率「直帰率」とは、ホームページに訪れたユーザーがほかのページを見ることなく離脱してしまう割合のことです。スムーズに操作できるホームページでは、ユーザーは目的のコンテンツを見つけやすく、さらにページからページへ移動するしやすくなり、回遊性が高まります。レストランのホームページに訪れたお客さんが「メニュー一覧」から「季節限定メニュー」へ、そして「予約方法」へとスムーズに移動できれば、直帰率は低下します。逆に、メニューが見つからなかったり、リンクされてなかったりすると、ユーザーはイライラして「もういいや」と離れてしまいます。直帰率が低くく、回遊率の高いホームページは、Google等の検索エンジンから「ユーザーに役立っている」と評価され、SEOへの影響もあると考えられています。 2. 滞在時間使いやすいホームページでは、ユーザーがストレスなく情報を探せるので、自然と滞在時間が長くなります。これは図書館で考えるとわかりやすいでしょう。本の配置が論理的で、案内表示も適切な図書館では、利用者は長時間滞在して様々な本を手に取ります。一方、配置が分かりにくく、案内も乏しい図書館では、目的の本を見つけられないので、諦めて帰ってしまうでしょう。検索エンジンは、ユーザーの滞在時間が長いホームページは「役立つ情報を提供している」と判断し、コンテンツとその操作性も評価し、検索順位を決定する要因にも好影響を及ぼすと言われています。 3. 問い合わせ・購入「コンバージョン」とは、ホームページの目的となる行動（問い合わせ、資料請求、購入など）がユーザーによって行われることです。スムーズに操作できるホームページでは、ユーザーが持っているニーズにしっかりと応えることができるので、目的のアクションを取りやすくなり、問い合わせや購入が増えます。ネットショップでスムーズに商品を探せて、簡単に購入手続きができれば「決済の手続きが多すぎて面倒で買わずに離脱」といった機会損失を減らせます。これは、お店のレジに長い行列ができていると購入をやめてしまうのと同じ心理です。問い合わせフォームの入力項目を20項目から7項目に減らすことで、問い合わせが増えたケースもあります。ユーザーにとっての「手間」を減らすことが、実際の問い合わせや売上にも大きく影響します。 4. リピーター使いやすいホームページは、ユーザーに「また来たい」と思ってもらえます。つまり、リピーターが増えます。行きつけのカフェに通い続けるのは、そこの雰囲気や接客、メニューなどが自分に合っているからですよね。同じように、ホームページも「使いやすい」「快適」「役に立つ」と感じてもらえれば、再訪問してもらえる確率が高くなります。リピーターが増えると、指名検索や検索エンジンを経由しない直接アクセス、ブックマークからのアクセスが増えます。これはキーワードの組み合わせでの検索を想定したSEOでの集客に頼らない、安定した集客の土台を作ることになります。 5. 自然なリンク獲得とSNS拡散使いやすく役立つホームページは、ユーザーが自然に他の人に共有したくなります。ブログやSNSでの言及、紹介リンクなどが増えることで、バックリンク（外部サイトからのリンク）が自然に増加します。美味しいレストランを友人に教えたくなるのと同じで、「この情報は役立つ！」と思えるホームページは、自然と広まっていきます。バックリンクの増加は、SEOにおいてすっと昔から非常に重要な評価要素とされています。Google検索で上位表示されているホームページの多くは、質の高いバックリンクを多数持っています。スムーズな操作性を実現する6つのポイントでは、具体的にどうすればユーザーがスムーズに操作できるホームページを実現できるのか。主要なポイントを6つご紹介します。 1. 直感的なナビゲーション設計ナビゲーションは、ユーザーがホームページ内を移動するための道案内です。わかりやすいナビゲーションを設計するには、次のような点に注意しましょう。メニュー項目は7つ以下に抑える（人間の短期記憶の限界を考慮）専門用語ではなく、一般ユーザーにもわかる言葉を使う現在地がわかるよう、パンくずリストや現在のメニュー項目をハイライトするドロップダウンメニューを使う場合は操作しやすい設計にするよく目にする失敗例として、社内の部署名や専門用語をそのままメニュー項目にしているケースがあります。例えば「ソリューション事業部」という項目を見て、一般ユーザーはその中に何があるのかイメージできません。「お客様の課題解決」のような、目的や内容がわかる表現にすることが大切です。詳しいナビゲーション設計のコツについては「ホームページを親切設計するための考え方」の記事もご覧いただくと、わかりやすいと思います。 2. スムーズな表示速度ページの表示速度は、ユーザーの使いやすさに直結する重要な要素です。調査によると、表示に3秒以上かかるページからは40%以上のユーザーが離脱するとされています。【表示速度改善のポイント】画像の最適化（適切なサイズと圧縮）不要なJavaScriptの削除ブラウザキャッシュの活用 CDN（コンテンツ配信ネットワーク）の利用サーバー応答時間の改善表示速度の改善は「ページの表示速度は十分に速い？｜自分でできるSEOチェック」の記事でも詳しく解説しているテクニカルSEOの重要な部分です。検索エンジンもページの表示速度を検索順位を決定する要因としていると公言しているので、SEOとしても優先度の高い施策といえます。 3. スマホ対応現在、インターネットトラフィックの半分以上はスマホからのアクセスです。スマホでの操作性を最優先で考えたホームページ設計はもはや絶対条件になっています。【スマホ対応の設計ポイント】レスポンシブデザインの採用タップしやすいボタンサイズ（最低44×44ピクセル）フォームの入力のしやすさへの配慮視認性の高いフォントサイズ（最低16px）不要な横スクロールの排除 PCで見ると美しいホームページが、スマホでは操作しづらいといったケースはちょくちょく見られます。テンプレートに流し込んで簡単に作られてホームページで起こりがちな現象です。完成して公開する前に、自分自身のスマホで全ページを確認して、必要な箇所を調整してもらってから公開するようにしましょう。流し込みホームページ制作の場合はご注意を。 4. わかりやすいコンテンツ構成ユーザーは情報を探すためにホームページを訪れます。その情報を見つけやすくするには、コンテンツの構成が重要です。見出し（h1〜h6）を論理的に使用する重要な情報ほど上部に配置する（逆ピラミッド構造）段落を適切に分割し、一段落あたりの文字数を抑えるリスト形式や表を活用して情報を整理する重要なポイントは視覚的に強調する本を読むときを、目次がわかりやすく、章や節が適切に区切られていれば、必要な情報をすぐに見つけられますよね。ホームページも同じです。人が見てわかりやすい構造化された情報は、理解しやすくなるだけでなく、検索エンジンにもページの内容や重要度を伝える役割を果たしてくれます。 5. フォーム設計問い合わせフォームやお申し込みフォームは、ユーザーとの大切な接点です。ここが使いにくくなっていると、せっかく興味を持ってもらっても成約につながりません。【フォーム設計のポイント】必須項目を最小限に抑えるフィールドにラベルと入力例を明示するエラーメッセージを具体的でわかりやすく表示する入力途中のデータを保持する入力完了後の次のステップを明確に示す私の体験ですが、あるセミナーの申し込みフォームで、入力途中でブラウザバックしたら全情報が消えてしまい、最初からすべて入力し直しになったことがあります。そのときの「もういいか」で申し込みをやめました（笑）。こうしたストレスは、ユーザーをホームページから離れさせてしまいます。 6. 一貫性のあるデザインとUI ホームページ内で一貫したデザインやユーザーインターフェース（UI）を提供することで、ユーザーは迷わず操作できるようになります。カラースキームやフォントの統一ボタンやリンクのスタイル統一操作方法の一貫性（例：リンクには常に下線を付ける）ページ間でレイアウトの急激な変化を避けるアイコンや記号の意味を一貫させるこれはよく行くお店での買い物と似ているかもしれません。商品の配置や店内の案内が毎回変わると戸惑いますが、いつもだいたい同じなら迷わず欲しいものを手に取れますよね。ホームページも同じで、操作方法が直感的に予測できることで、ユーザーは安心してコンテンツに集中できるのです。 SEOとユーザーの使いやすさの関係スムーズな操作性はユーザーの使いやすさ（UX）を向上させ、その結果としてSEOにもプラスの影響があります。これは、さらに良い流れを生み出します。操作性の向上 → ユーザーの満足度アップユーザーの満足度アップ → 滞在時間の延長・ページビューの増加滞在時間・ページビューの増加 → SEO評価の向上 SEO評価の向上 → 検索順位の上昇検索順位の上昇 → アクセス数の増加アクセス数の増加 → 問い合わせや購入の増加「ユーザーファースト」の考え方に基づいたホームページ運営が、最終的に売上アップにもつながることを表しています。逆に言えば、SEOだけを目的とした対策では、このような流れは生まれません。 SEOはテクニックばかりに目が行きがちですが、そうではなく、まずはユーザーが本当に求めていること考えて、取り組み始めることが大切です。その取り組み方がホームページの価値を高めることにつながり、結果として検索エンジンからも評価され、検索順位も上昇することが期待できるようになります。ユーザーの使いやすさは小さな改善の積み重ね「スムーズな操作性」と聞くと、大規模なリニューアルが必要だと思われるかもしれません。しかし、改善は小さな一歩から始められます。ナビゲーションメニューの見直し問い合わせフォームの簡素化画像の最適化による表示速度の改善見出し構造の整理スマホ表示のチェックと修正こうした小さな改善の積み重ねが、ユーザーの使いやすさを大きく向上させます。一度に全面リニューアルするのもありですが、データに基づいて一つずつ改善を重ねることで、着実に成果を上げていくことができます。「使いやすさ」は、決して主観的なものではありません。 Googleアナリティクスなどのツールを使って、ユーザーの行動データを分析することで、客観的に問題点を特定し、改善することができます。例えば、特定のページでの離脱率が高い場合、そのページのナビゲーションや内容に問題がある可能性があります。「使いやすさ」はすべてのユーザーのためスムーズな操作性を考える上で忘れてはならないのが、多様なユーザーへの配慮です。視覚や聴覚に障害のある方、高齢者、色覚特性のある方など、様々な人がホームページを利用します。アクセシビリティへの配慮は、こうした多様なユーザーにもスムーズに操作できる環境を提供するものです。例えば、次のような対応が考えられます。画像には適切なalt属性を設定する色だけでなく形や文字でも情報を伝えるキーボードだけでも操作可能にする文字サイズの変更に対応するスクリーンリーダーでも理解できる構造にする「誰もが使えるホームページ」を目指すことは、単なる思いやりだけでなく、より多くのユーザーにリーチできるというメリットもあります。また、GoogleもWebアクセシビリティをSEO評価の一要素として考慮していることが知られています。以前に投稿した「画像にalt属性（代替テキスト）の最適化｜自分でできるSEOチェック」にも確認方法や設定について書いていますので、あわせてご覧いただくとわかりやすいと思います。ホームページの「使いやすさ」はとても大切ですホームページはデザインの美しさや動き、システマチックな機能の豊富さに目を奪われがちです。しかし、検索してやってくるユーザーはそんなことを求めているでしょうか？私は違うと思います。どんなに美しいデザインも、使いにくければユーザーはすぐに去っていきます。反対に、デザインが今の流行りでなくてもシンプルでも見やすく使いやすいホームページは、ユーザーがスムーズにその目的を果たすことができるので、問い合わせや購入につながりやすいでしょう。あなたのホームページは、ユーザーに使いやすさを我慢してもらって、美しさやカッコ良さを見せたいのでしょうか？それとも、スムーズにユーザーの要望に応えて問い合わせや購入に繋げたいのでしょうか？使いやすさは、見た目のキレイさやカッコ良さではない性能部分を、予め最適化しておく必要があります。最適化するためには、テクニカルなSEOに取り組みユーザーへの配慮をしておかなければなりません。テクニカルSEOについては「Webサイトの集客力を左右するテクニカルSEO」も一緒にご覧いただくと必要な取り組み内容がよくわかると思います。スムーズな操作性でホームページが活きるホームページの「スムーズな操作性」は、単なる技術的な問題ではなく、集客や売上に直結する大切な要素です。「SEOと使いやすさは別物」と考えている方も多いかもしれませんが、実はこの二つは表裏一体の関係にあります。Googleが目指しているのは、「ユーザーに最も役立つ情報を提供すること」だからです。ホームページを作る際、改善する際、リニューアルする際には、まずユーザーの立場で「どうすれば目的を達成しやすくなるか」を考えることが大切です。その思いやりの積み重ねがSEO評価を高め、ホームページの集客力を高めていきます。あなたのホームページは、ユーザーがスムーズに操作できるようになっていますか？キレイだけをチェックしただけで、制作会社に丸投げ状態ではないですか？リニューアルしたのにアクセス数が減った、ページの表示がすごく遅いなどでお困りでしょたら、まずはその状況をお聞かせください。御社にあった改善方法をご提案できます。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
12May
- 親切なホームページにするための考え方
  Webコンサルタントの松崎です。インターネットでは、毎日数え切れないほどの新しいホームページが生まれています。その中で、ユーザーに「また来たい」と思ってもらえるホームページにするにはどうすれば良いのでしょうか。前回の記事でお伝えした通り、SEOの本質は「ユーザーへの親切な配慮」です。（noteの記事はこちらから）今回は、その考え方を具体的にホームページ設計に活かす方法について見てみます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次ユーザーがホームページに来る理由トップページで伝える3つの要素ナビゲーションは迷わないために親切なナビゲーションの4つのポイント読みやすいコンテンツ設計読みやすさを高める6つのテクニックスマホの使いやすさを最優先するスマホファーストで考える目に見えない配慮もちゃんとするみんなが使えるホームページに信頼を作るために情報開示で信頼性を高める問い合わせのハードルを下げる工夫問い合わせしやすくする5つのポイントページの表示速度は使いやすさの要表示速度を改善する方法ホームページの親切設計がSEOと集客を向上させる理由やさしい思いやりがホームページの価値を高める見た目だけでなく、ユーザーへの思いやりが詰まったホームページこそが、結果的にSEO評価を高め、集客力を向上させます。ユーザーがホームページに来る理由ホームページを訪れるユーザーは、何らかの目的を持っています。商品を探している人、サービスの詳細を知りたい人、お問い合わせをしたい人など、目的は様々です。良いホームページは、ユーザーが「ここに何があるのか」「自分の求めるものがあるのか」をすぐに理解できるようになっています。これは実店舗でいえば、入口から商品が見やすくわかりやすく配置されているような感じです。トップページで伝える3つの要素トップページは、ユーザーが最初に接する場所です。ここでユーザーに伝えなけえればならない重要な情報があります。 1. 何をしている会社・個人なのか業種や提供しているサービス、商品の概要がわかりやすく示されているか。 2. どんな価値を提供できるのかユーザーにとっての具体的なメリットや解決できる悩みが明確になっているか。 3. 次に何をすれば良いのか商品紹介ページへの誘導や問い合わせフォームへのリンクなどがわかりやすいか。パン屋さんのホームページなら「毎朝焼き立ての天然酵母パンを提供」「無添加で健康志向の方にも安心」「オンラインでの予約も可能」といった情報がすぐにわかるようになっているといいですよね。ユーザーに寄り添ったなホームページは、トップページの最初に「あなたはこんなお悩みをお持ちではありませんか？」と問いかけ、ユーザーの悩みに共感する内容から始まります。思わず「そうそう、それが知りたかったんだ！」と心の中でうなずいてしまうような。こういったユーザーの気持ちに寄り添うアプローチは、親切設計の基本な考え方です。ナビゲーションは迷わないためにホームページ内のナビゲーションは、ユーザーをわかりやすく目的の場所へ導いてくれる案内板です。わかりやすいナビゲーションは、ユーザーのストレスを減らし、快適度を高めてくれます。親切なナビゲーションの4つのポイント 1. シンプルで一貫性のあるメニュー構造どのページにいても同じ位置に同じメニューがあると安心。 2. 適切なカテゴリー分けユーザーの視点に立った分類になっていますか？専門用語ではなく、一般の方にもわかる言葉を使いましょう。 3. 現在位置の表示パンくずリストなどで今どこにいるのかがわあかるようになっていると便利。 4. サイト内検索の設置情報量の多いホームページでは必須の機能です思っている以上に使われますので、正しく検索できるかのチェックも行っておきましょう。大学のホームページでは「入学希望の方」「在学生の方」「卒業生の方」「企業・研究者の方」といったように、ユーザーのタイプ別に求めているページが違っています。なので、ナビゲーションを適切にわかりやすく設計することはすべてのユーザーに親切な設計です。読みやすいコンテンツ設計どんなに優れた内容でも、読みにくければその価値が半減してしまいます。読みやすさは親切設計の基本と言えます。読みやすさを高める6つのテクニック 1. 適切な文字サイズと行間小さすぎる文字や詰まった行間は目の疲れの原因になります。 2. コントラストの確保背景と文字色のコントラストが低いと読みづらくなります。 3. 段落や見出しの活用長い文章は適切に分割し、見出しで内容を予告すると読みやすくなります。 4. リストやテーブルの活用箇条書きや表を使うと情報が整理されて理解しやすくなります。 5. 強調表現の適切な使用太字やカラーで重要なポイントを強調すると要点がつかみやすくなります。 6. 画像や図表による補足複雑な内容は視覚的な要素で補足すると理解が深まります。「このホームページ、読みやすいなあ」と感じるときは、こういった工夫が細かく丁寧に設定されています。見る人への配慮ができていますよね。スマホの使いやすさを最優先する多くの人がスマホでホームページを見るようになっています。PCでは問題なく表示されても、スマホで見づらかったり、操作しづらかったりすると、多くのユーザーがどこかへ行ってしまいます。スマホファーストで考える 1. レスポンシブデザインの採用画面サイズに応じて最適な表示に自動調整される設計を取り入れる。 2. タップしやすいボタンサイズ指で操作することを考えた大きさのボタンやリンクでレイアウトする。 3. スクロールの最適化重要な情報を上部に配置し、横スクロールが発生しないように設計する。演出でユーザーが意図せず勝手にスクロールするようにしない。 4. 読み込み速度の向上 4G回線、電波が弱いところでの表示速度も考えてコンテンツの軽量化に配慮する。私は、通勤中にスマホでホームページを見ることが多いのですが、ページがなかなか表示されなかったり、スムーズにスクロールできないページはすぐに離脱します。待ちません（笑）少し不便ではありますが積み重なっていくと、ユーザーの使いやすさは大きく損なわれて、ほとんどの方がアクセスしたくないホームページになってしまします。目に見えない配慮もちゃんとするホームページは様々な人が訪れます。視覚や聴覚に障害のある方、高齢者、色覚に特性のある方など、多様なユーザーに配慮することも大切な「親切」です。みんなが使えるホームページに 1. 適切なコントラスト比文字と背景の色のコントラストを十分に確保する。 2. 画像のalt属性画像に適切な代替テキストを設定し、スクリーンリーダーでも内容が伝わるようにする。 3. キーボード操作の対応マウスを使わなくてもすべての機能が利用できるようにする。 4. 色だけに頼らない情報伝達色覚特性のある方にも情報が伝わるよう、色以外の手がかりも用意する。アクセシビリティへの配慮は単なる思いやりだけでなく、より多くの人にホームページを利用してもらえるようになるメリットもあります。また、Googleなどの検索エンジンもアクセシビリティをチェックしるので、SEOの観点からも好影響が期待できます。信頼を作るためにユーザーがホームページに求めるものの一つに「信頼性」があります。運営者情報や問い合わせ方法などを明確に表示することで、ユーザーが安心して利用できるようになります。情報開示で信頼性を高める 1. 会社概要・運営者情報法人名、所在地、連絡先など基本情報の明記する。 2. プライバシーポリシー個人情報の取り扱いに関する方針を1ページで作る。 3. 特商法に基づく表記ネットショップなど通信販売を行う場合は法律でも必須なので、きちんと作る。 4. SSL証明書の導入 https化による暗号化を行って、安心して利用できる安全な環境を作る。「このホームページ、何か怪しい...変...」と思われたら、どんなに良いサービスや商品であったとしてもユーザーに信用してもらえません。信頼してもらうことはとても重要です。問い合わせのハードルを下げる工夫ホームページの目的の多くは、最終的にユーザーと接点を作ることです。問い合わせフォームや予約システムなどは、ユーザーから接点を作ってくれる入り口になります。なので、使いやすさ、面倒くさくないかをチェックしましょう。問い合わせしやすくする5つのポイント 1. シンプルなフォーム設計必要最低限の入力項目に絞る。 2. 入力例の提示記入欄の横に入力例を示すとわかりやすくて親切です。 3. エラー表示の工夫入力ミスがあった場合、何が間違っているのかわかりやすくエラーメッセージを表示する。 4. 複数の連絡手段フォーム以外にも電話番号やメールアドレスなど選択肢を用意しておく。 5. 返信までの目安を明示「3営業日以内に返信します」など対応の目安を表示しておくと安心できます。以前、ホームページ無料診断にこられた方のホームページは、問い合わせフォームに20項目以上の入力欄があり、しかも細部化されている上に、必須項目と任意項目が混じっていました。これではフォームを見ただけで問い合わせする気が無くなってしまいます。まるで、問い合わせを拒否しているかのような状態でした。ユーザーの負担を考えると、最初に必要な情報だけを聞くべきです。ページの表示速度は使いやすさの要どんなに内容が充実していても、表示に時間がかかるホームページは誰も見ません。表示速度はユーザーのストレスに直結するとても重要な要素です。表示速度を改善する方法 1. 画像の最適化適切なサイズと圧縮で軽量化する。 2. 不要なプラグインは使用しない WordPressなどCMSを使用する場合は気をつけましょう、プラグイン頼りの制作はセキュリティでの不安も出てきます。 3. キャッシュの活用一度読み込んだデータを利用してスピードアップを図る設定です。 4. コードの最適化各種コードの配置場所を最適化し、不要なコードの削除や圧縮を行って、正しいコードでページを作りましょう。ただキレイに見えれば良いというものではありません。「このページ、表示が遅いなあ...」と思われる前に離脱されてしまうことがほとんどです。現在のホームページでは当たり前に配慮しておきたい絶対必須の設定です。ホームページの親切設計がSEOと集客を向上させる理由ここまで見てきたような「親切設計」のホームページは、ユーザーの満足度を高めます。そして、この満足度こそがSEOと集客の成功につながっていきます。そうなると言える理由は、Googleなどの検索エンジンが「ユーザーに価値ある情報を提供すること」を最大の目的としているからです。ユーザーが使いやすいと感じるホームページ、必要な情報がすぐに見つかるホームページ、ストレスなく閲覧できるホームページは、検索エンジンからも高く評価されて、検索結果ページでの露出が増えるからです。ホームページを作るときやリニューアルする時、「ユーザーが使いやすくて、役立つと思ってもらえるホームページ」を目指すことが、最良のSEOになります。やさしい思いやりがホームページの価値を高めるホームページの設計において大切なのは、ユーザーの立場に立って考えることです。「この情報は必要だろうか？」「このデザインはわかりやすいだろうか？」「この操作は簡単だろうか？」と考えながら作り上げていくことで、ユーザーに最適化した価値あるホームページが出来上がります。「制作会社はプロだから..」と自分自身が面倒くさいことを隠して、丸投げしていると、見た目は今風のキレイな使いにくいおっそいホームページになってしまいますよ。制作会社の半分以上はただ作るだけで何の配慮もしないですから。気をつけましょう。テクニカルSEOも重要ですが、なぜテクニカルな設定をしなければならないかと考えると、そこにあるのは「ユーザーへの親切な配慮」をするためだとわかるはずです。詳しい技術的な取り組みについては、Webサイトの集客力を左右するテクニカルSEOをご覧いただくとわかりやすいと思います。ホームページを作る時、改善する時、リニューアルする時には、見た目の美しさだけでなく、ユーザーへの思いやりを最優先で設計することを忘れないでください。その親切な配慮が、SEOの評価を高め、集客力を向上させ、ビジネスの成功につながっていきます。あなたのホームページは、ユーザーに「また来たい」と思ってもらえるような親切設計になっていますか？スムーズにストレスなく操作できますか？ぜひ一度、ユーザーの目線で見直してみてください。ユーザーにやさしいホームページに改善したいと考えている方はお気軽にご相談ください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
09May
- SEOはユーザーへの親切な配慮から
  Webコンサルタントの松崎です。皆さんは「SEO」と聞くと、何を思い浮かべますか？「検索順位を上げるためのテクニック」「キーワードを詰め込む作業」などを想像される方も多いかもしれません。このブログでも、ここまで様々なSEOやWeb集客に関する記事を紹介してきました。やり方やチェック方法、取り組み方など。そういった面からすると、作業やテクニックがSEOと思われてしまうかもしれません。でも実は、SEOは人にやさしい配慮をするのことなんです。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次コンテンツはユーザーへの一番の親切良いコンテンツの条件ユーザーの「使いやすさ」がSEOを支えるスマートフォン対応は今や当たり前ページの表示速度はユーザーのストレス軽減適切な見出し構造で情報を探しやすくわかりやすい内部リンクでスムーズに誘導入力しやすい問い合わせフォームテクニカルSEOもユーザーへの配慮常時SSL対応（HTTPS化）でセキュリティ強化適切なページタイトルは第一印象を決めるメタディスクリプションはクリックを促す小さな案内板アクセシビリティへの配慮ユーザーに寄り添う配慮が最良のSEO戦略 SEOは思いやり実は、最近始めたnoteに「SEOは親切な配慮のこと」という記事を書きまして、我ながら良いこと書けたなと思い、こちらにも記事として投稿しました。今日は、SEOは「ユーザーへの親切な配慮」だということについて見ていきます。コンテンツはユーザーへの一番の親切「Content is King（コンテンツは王様）」という言葉をご存じですか。 SEOの世界では広く知られている考え方です。どれだけ技術的な対策をしても、コンテンツがしっかりしていなければ意味がないということです。Googleもコレを提唱し、コンテンツを最も重要な要素として評価しています。ユーザーは検索するとき、必ず知りたいことや解決したい問題を持っています。その問題を解決できる情報を提供すること、ニーズに応えることが最も重要な「親切」ですよね。例えば、お子さんの熱が急に上がったときの対処法を探しているお母さんに、具体的なアドバイスもなく「当院にご相談ください」と言うだけでは役に立ちません。同じように、ホームページでも訪問者が求める情報をきちんとわかいやすく提供することが大切です。良いコンテンツの条件ユーザーが本当に知りたい情報がしっかり書かれている専門的で正確な情報がわかりやすく説明されている他では見られない独自の視点や価値が含まれている読みやすい文章構造になっている必要に応じて画像や図表、動画などを使って理解を助けているこういった充実したコンテンツは、ユーザーが困ったを解決できて満足することができます。そして、検索エンジンも同じ視点で内容を確認するので評価の向上が期待できます。質が高いと言われるコンテンツは別のメリットも生み出します。他のサイトから自然とリンクされるようになり（バックリンク）、さまざまな関連キーワードでの検索にも表示されるようになります。一石二鳥、いや三鳥くらいの効果が見込めます。ユーザーの「使いやすさ」がSEOを支えるホームページの使いやすさは、訪問者の使いやすさ・操作性を良くするだけでなく、SEOにも良い影響を与えます。使いやすさは、来店するお客様に対して「おもてなしの心」のようなものです。スマートフォン対応は今や当たり前現在、多くの人がスマートフォンでホームページを見ています。なので、スマホで見やすいサイトにすることは、もはや選択肢ではなく必須条件であり、ホームページの基本仕様だと言えます。読みやすい文字サイズ、指で押しやすいボタン、横にスクロールする必要のないレイアウト。これらはスマホユーザーに対して予め準備していくべき基本的な配慮といえます。Googleも「モバイルフレンドリー」なサイトを評価すると公言しているので、SEOの観点から見ても重要です。スマホで見づらいサイトは、まるで小さな文字の説明書のようなもの。誰も読みたくないですよね。関連ページ：スマートフォンでの表示は最適化できてるか｜自分でできるSEOチェックページの表示速度はユーザーのストレス軽減ウェブページの表示速度は、ユーザーの直帰率・離脱率に大きく影響します。日々溢れかえる情報の中で、スマホという機器を使って、情報と独特の接し方をしています。およそ1〜2秒の間に次々と新たな情報が提供され、瞬時に判断して情報を選んでいます。こういった情報との接し方に慣れている多くの人とって、なかなか表示されないページはとてもストレスを感じる嫌なもので、少しだけでも待つなんてことはありえません。すぐに元のページに戻ってしまいます。ページがスムーズに表示されることは、ユーザーにストレスを与えない配慮です。特にSNSやネットでの情報の接し方に慣れている人にとっては、必要不可欠と言えるでしょう。検索エンジンも表示速度をランキング要因に取り入れていると公言しています。画像の最適化や過度な動きをやめてコードの整理など、できることから始めましょう。関連ページ：ページの表示速度は十分に速い？｜自分でできるSEOチェック適切な見出し構造で情報を探しやすくウェブページ内の見出し（h1〜h6タグ）を適切に使うことは、コンテンツの構造をわかりやすくしますし、ユーザーが情報を見つけやすくするための配慮です。長い文章を前にしたとき、私たちはスマホを、パッ、パッと、下から上にスクールしながら、まず見出しに目を通して、自分が読むべき部分、気になる箇所を探します。これはスマホ独特の動きのように思いますが、新聞や雑誌でも同じです。正しく付けられた見出しは、ユーザーを迷わせないようにサポートするだけでなく、検索エンジンにもページの構造を理解させる手がかりになります。見出しは本の目次のようなもので、読者を迷子にさせないために大切な配慮です。関連ページ：見出し構造（h1〜h6）は適切か｜自分でできるSEOチェックわかりやすい内部リンクでスムーズに誘導内部リンクは、ユーザーがサイト内の関連情報をスムーズに見つけられるようにする配慮です。ダイエットについての記事で「有酸素運動」につい書いたのなら、サイト内の別記事「効果的な有酸素運動の方法」という記事へのリンクを張っておく。こうすることで、さらに詳しい情報を求めるユーザーを自然に誘導できます。適切なアンカーテキスト（リンクをクリックする文字部分）を使った内部リンクは、ユーザーのサイト滞在時間を延ばし、SEOの評価向上にも影響を与えると言われています。内部リンクは、興味を持ったユーザーを丁寧に案内する係のようなものですね。関連ページ：内部リンクは適切に設定されているか｜自分でできるSEOチェック入力しやすい問い合わせフォーム問い合わせフォームは、ユーザーが初めて連絡を取ろうと行動してくれる大切な窓口です。ここで面倒な思いやストレスがかかる作業をさせてしまうと、せっかく興味を持ってくれたユーザーは離れていってしまいます。入力項目を必要最小限に抑え、スマホでも入力しやすいデザインにすることで、ユーザーの負担を大きく減すことができます。これは親切な心遣いであり、同時に問い合わせ率の向上にもつながります。「住所は本当に3行にわける必要がある？」「電話番号は任意でいいのでは？」「名前を苗字と名前で分ける必要性は？」「最初の問い合わせでフリガナはいるの？」と、自分自身がユーザーの立場になって考えることが大切です。関連ページ：お問い合わせフォームの最適化｜自分でできるSEOチェックテクニカルSEOもユーザーへの配慮目に見えにくい技術的なSEO対策も、実はユーザーへの配慮と深く関わっています。常時SSL対応（HTTPS化）でセキュリティ強化ホームページ全体をSSL化し、「https://」で始まるURLにすることは、ユーザーとホームページ間の通信を暗号化し、情報を安全に守るための配慮です。現在はどんなホームページでも安全性と信頼性を高めるために、もはや必須の設定になっています。鍵のかかった家の方が安心できるのと同じですね。検索エンジンもHTTPSサイトを評価すると公言しているので、SEOの観点からも必要な設定と言えます。関連記事：常時SSLの対応｜自分でできるSEOチェック適切なページタイトルは第一印象を決めるページタイトルは、検索結果に表示される最も目立つ要素です。ユーザーがクリックするかどうかを判断する時にとても大きな影響を与えます。検索結果ページでわかりやすさを高める配慮と言えるでしょう。「〇〇｜△△｜□□株式会社」のような意味のないキーワードの羅列ではなく、ページの内容を正確かつ魅力的に伝えるタイトルをつけるようにしてください。どんな商品を取り扱っているかがわかりにくい店には入らないのと同じで、タイトルがわかりにくいページもクリックされません。関連ページ：ページタイトルの最適化｜自分でできるSEOチェックメタディスクリプションはクリックを促す小さな案内板メタディスクリプションもタイトルと同じく検索結果ページで表示される重要な部分です。ページタイトルの下に表示される2行程度説明文がそれです。ユーザーがページの内容を理解し、クリックするかどうかを判断する手助けができるので、タイトル同様にわかりやすさあげる配慮と言えます。実店舗で言うと、お店の前にあるメニュー看板のようなものですね。中に何があるのか、どんな特徴があるのかを簡潔に伝えることで、お客さんの取り扱い商品やメニューを入店前に伝えることができます。ユーザーが検索する意図にぴったりあったわかりやすいメタディスクリプションを作ることは、ユーザーへの情報提供という親切な配慮となり、さらにクリック率アップにもつながります。ただ、検索エンジンは常にメタディスクリプションを表示するわけではなく、ページ内容に応じて自動生成することもあります。それでも、適切なメタディスクリプションを用意しておくことは絶対必要です。アクセシビリティへの配慮画像のalt属性（代替テキスト）の最適化は、視覚障害のある方や通常の方法でページが見られない時、スクリーンリーダーを通して画像の内容を理解できるようにしてえおくために必要な配慮です。「すべての人に情報を届ける」という考え方はインターネットでとても大切です。車いす用のスロープを設けるのと同じように、音で信号の変わり目を知らせるように、インターネットの世界でも様々なバリアを取り除く努力が必要です。また、検索エンジンもalt属性を画像の内容理解の手がかりとするため、画像検索での集客にSEOにも貢献できます。関連ページ：画像にalt属性（代替テキスト）の最適化｜自分でできるSEOチェックユーザーに寄り添う配慮が最良のSEO戦略 SEOの様々な施策は、すべてユーザーの便利さや安心、満足につながっています。 SEOは決して検索エンジンを騙すための小手先のテクニックではなく、ユーザーをお迎えするために事前に行っておくべき配慮なのです。「上位表示のためには〇〇が必要」「〇〇をすれば上位表示する」という情報に振り回されることがあるかもしれません。でも、その時少し考えてみてください。その施策は本当にユーザーのためになっているかどうかを。検索エンジンは「ユーザーが求める最適な情報を提供すること」です。だからこそ、ユーザーにとって価値あるサイトを作ることが、結果的に検索エンジンからの評価も高めて上位表示されて、ユーザーとの接点も増えていきます。 SEOは思いやり SEOとは、ユーザーの検索意図を深く理解し、質の高いコンテンツを提供し、使いやすく、安全で、信頼できるホームページを作ることです。それは、お店でいえばお客様目線での品揃えやレイアウト、接客に通じるものがあります。ユーザーへの思いやりを忘れずにホームページ運営することが、検索エンジンからの評価を高め、最終的にはビジネスの成果につながっていきます。 SEOは、技術でも、トリックでもなく、「ユーザーへの親切な配慮」です。業者が自らの事業のために、セミナー集客のために使うまことしやかな甘いキャッチフレーズに騙されないでください。 noteにも「SEOは親切な配慮のこと」という簡単な記事を公開しています。また、本格的なテクニカルSEO については当社ブログ「Webサイトの集客力を左右するテクニカルSEO」良かったらあわせてご覧ください。ユーザーにやさしいホームページにしたい方、SEOにも取り組みたい方は、ぜひご相談ください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
08May
- テクニカルSEO まとめ
  Webコンサルタントの松崎です。これまで5回にわたって、テクニカルSEOの基本から実践方法、効果、注意点、チェックリストまで詳しくみてきました。今回は、これまでの内容を総括するとともに、「本当に押さえておくべきテクニカルSEO」をまとめたいと思います。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次テクニカルSEOの過去記事テクニカルSEOの本質：3つのポイント 1. ユーザーの使いやすさの向上 2. 検索エンジンの理解向上 3. 信頼性と安全性の確保テクニカルSEOの優先順位優先して取り組むべき3つの項目次に取り組むべき項目長期的に取り組むべき項目自分でできる！テクニカルSEO改善の5つのステップステップ1：現状を把握するステップ2：画像を最適化するステップ3：不要な要素を削除・最適化するステップ4：基本的なHTMLの見直しステップ5：定期的なメンテナンスを習慣にするテクニカルSEOに関するよくある質問 Q1: テクニカルSEOの効果はどのくらいで現れますか？ Q2: WordPressでテクニカルSEOを改善するには？ Q3: テクニカルSEOと内容の充実、どちらを優先すべき？ Q4: 専門家に依頼すべきか、自分でやるべきか？テクニカルSEOのまとめテクニカルSEOの全体を把握し、自社のホームページ改善に役立ててください。テクニカルSEOの過去記事まずはこれまでの記事を簡振り返ります。 1. テクニカルSEO｜ホームページの性能をあげる配慮テクニカルSEOとは何か、なぜ重要なのか、主な要素について解説しました。 2. テクニカルSEOの改善方法｜実践的な取り組み方具体的な改善方法やツールの使い方、優先順位について説明しました。 3. テクニカルSEOのメリット｜7つの集客効果テクニカルSEOがもたらす具体的な効果や、投資対効果について解説しました。 4. テクニカルSEOの落とし穴｜注意すべき8つのポイント失敗しがちなポイントや、見落としやすい注意点について詳しく説明しました。 5. テクニカルSEOをチェックできる25項目実践的なチェックリストとその活用方法について解説しました。これまで投稿していきたテクニカルSEOの記事で絵全体が理解していただけるのではないかと思います。今回は、これらの記事から重要なポイントをピックアップして、より実践的な形でまとめていきます。テクニカルSEOの本質：3つのポイントテクニカルSEOは一見すると技術的で難しく感じるかもしれませんが、その本質は「ユーザーにとって価値あるホームページを作ること」です。その中で特に重要な3つのポイントがあります。 1. ユーザーの使いやすさの向上テクニカルSEOの目標は、ユーザーがストレスなくホームページを利用できるようにすることです。表示速度の最適化：ユーザーを待たせないモバイルフレンドリー：どのデバイスでも快適に閲覧できるわかりやすい構造：目的のコンテンツに簡単にたどり着ける視覚的安定性：読み込み中にレイアウトが崩れない実店舗でお客さんと接客するときと同じように、快適に過ごしていただくための環境づくりがテクニカルSEOの基本なのです。 2. 検索エンジンの理解向上検索エンジンは人間のように「見た目」でコンテンツを理解することができません。なので、検索エンジンが内容を正しく理解できるように配慮した作るにしておくことが大事です。適切なHTML構造：正しい見出しタグの使用、意味のあるマークアップ構造化データ：コンテンツの種類や関係性を明示的に伝える内部リンク構造：重要なページの関係性を明確にするサイトマップ：サイト全体の構造を示すこれは、お店の商品に適切な値札や説明書きをつけるようなものです。見た目だけでなく、情報が整理されていることで、ユーザーがその内容を理解しやすくなります。 3. 信頼性と安全性の確保ユーザーが安心して利用できる環境を整えることも、テクニカルSEOの重要なポイントです。セキュリティの確保：HTTPS化、脆弱性対策プライバシー保護：適切なデータ処理コンテンツの信頼性：正確な情報提供、適切な更新アクセシビリティ：様々なユーザーが利用できる環境これはお店の安全対策や衛生管理になります。お客様が安心して訪れ、過ごせる環境を整えることが、長期的な信頼関係の構築につながります。テクニカルSEOの優先順位「テクニカルSEOに取り組みたいけど、どこから手をつければいいのかわからない」という方も多いと思います。限られた時間や予算の中で、最大の効果を得るためには、優先順位を考えて効率的に取り組んでいくことが大切です。優先して取り組むべき3つの項目 1. セキュリティ対策（HTTPS化）未だにHTTP（非暗号化）のサイトは、ブラウザで警告が表示され、ユーザーの信頼を失います。まずはHTTPS化を必ず完了させましょう。ほとんどのレンタルサーバーでは、無料のSSL証明書が提供されています。 2. モバイルフレンドリー対応現在、ほとんどのユーザーはスマートフォンでホームページを閲覧しています。スマホで見やすく、操作しやすいレイアウトは最低限の要件です。 3. ページ表示速度の改善特に画像の最適化は、比較的簡単に取り組める割に効果が大きいです。画像圧縮ツールを使って、まずは画像ファイルサイズを削減してみましょう。これら3つの対策だけでも、ユーザーの使いやすさと検索順位に大きな影響を与えられます。次に取り組むべき項目上記の3つが改善できたら、次の項目に取り組みましょう： 4. HTML構造の最適化（見出しタグ、alt属性など） 5. ナビゲーション・内部リンクの改善 6. 404エラーやリダイレクトの整理 7. 構造化データの実装これらの項目は、より専門的な知識が必要になる場合もありますが、WordPressを使用している場合は、SEOプラグインを活用することで比較的簡単に対応できるものもあります。長期的に取り組むべき項目テクニカルSEOは長期的に取り組みを続けることが大切です。定期的なサイト監査と問題点の改善 PageSpeed Insightsなどでの定期的なチェック Google Search Consoleでのエラー監視新しい技術標準やベストプラクティスへの対応これらは「ホームページのメンテナンス」と考えて、定期的に取り組む習慣をつけましょう。自分でできる！テクニカルSEO改善の5つのステップテクニカルSEOは専門家に依頼するだけでなく、ある程度は自分でも改善することができます。ステップ1：現状を把握するまずは自分のホームページの現状を正確に把握しましょう。 Google Search Consoleに登録し、インデックス状況や問題点を確認 PageSpeed Insightsでページ速度や使いやすさをチェック実際にスマートフォンで閲覧して、使いやすさを確認前回紹介したチェックリストを使って総合的に確認ホームページのパフォーマンスを数値で把握することで、改善の方向性と効果測定がしやすくなります。ステップ2：画像を最適化する画像は多くのホームページで表示速度を遅くする原因のひとつになっています。画像圧縮ツール（TinyPNG、ImageOptimなど）で既存画像を圧縮表示サイズに合わせた適切な画像サイズを使用可能であればWebPなどの次世代フォーマットを採用画像の遅延読み込み（Lazy Loading）を実装画像の取り組みは専門的な知識がそれほど必要なく取り組めるポイントです。ステップ3：不要な要素を削除・最適化するホームページに不必要なところがないか見直しましょう。使っていないプラグインの削除（WordPressの場合）必要のないJavaScriptやCSSファイルの削除重い広告やウィジェットの見直し自動再生する動画の削除または最適化「あったら便利かも」と思って追加した機能が、実はホームページ全体のパフォーマンスを下げている可能性があります。本当に必要な機能だけを取り入れるようにしましょう。ステップ4：基本的なHTMLの見直しホームページの基本構造を確認し、必要に応じて修正していきます。各ページに適切なタイトルタグとメタディスクリプションを設定 H1タグが各ページに1つだけあることを確認見出しタグ（H1〜H6）が階層的に使用されているか確認画像にalt属性を追加内部リンクを整理・強化 WordPressを使用している場合は、Yoast SEOやRank Mathなどのプラグインを使うと比較的簡単に行えます。ステップ5：定期的なメンテナンスを習慣にするテクニカルSEOは継続して取り組んでいくことが大切です。月に1回はGoogle Search Consoleをチェックしてエラーがないか確認四半期に1回は主要ページのPageSpeed Insightsスコアをチェック新しいコンテンツを追加する際は、基本的なSEO設定を忘れずに行う WordPressなどのCMSは定期的に更新する定期的なメンテナンスを習慣にすることで、小さな問題が大きくなる前に対処できるようになります。テクニカルSEOに関するよくある質問テクニカルSEOについてのよくある質問についてみていきましょう。 Q1: テクニカルSEOの効果はどのくらいで現れますか？ A: 効果が現れる時期は対策内容によって異なります。短期間（数日〜2週間）で効果が見られるもの：ページ速度の改善、CLS（視覚的安定性）の改善など中期的（1〜3ヶ月）に効果が現れるもの：検索順位の向上、クロールの改善など長期的（3ヶ月以上）に効果が現れるもの：ドメインの評価向上、ブランド信頼性の向上などテクニカルSEOは即効性のある対策と、じわじわと効果が出る対策の両方があると考えておいてください。 Q2: WordPressでテクニカルSEOを改善するには？ A: WordPressは適切に設定すれば、比較的簡単にテクニカルSEOを改善できます。おすすめのプラグイン：Yoast SEO、Rank Math（基本的なSEO設定）、WP Rocket（キャッシュと高速化）、Smush（画像最適化）テーマ選び：軽量で高速なテーマを選ぶ（GeneratePress、Astra、Cocoonなど）プラグイン管理：必要最小限のプラグインだけを使用し、定期的に更新する定期的な更新：WordPress本体、テーマ、プラグインを常に最新版に保つただ、プラグインに頼りすぎると逆に表示速度が遅くなることもあるので、必要最小限にすることが大切です。 Q3: テクニカルSEOと内容の充実、どちらを優先すべき？ A: 両方が重要ですが、段階的に考えるなら以下のアプローチがおすすめです。最低限のテクニカルSEO対策：HTTPS化、モバイル対応、基本的な表示速度の改善質の高いコンテンツの作成：ユーザーの疑問や課題に答える内容さらなるテクニカルSEO対策：詳細な最適化、構造化データなど継続的なコンテンツの充実と技術的な改善車に例えるなら、テクニカルSEOはエンジンやタイヤといった基本性能、コンテンツは目的地に向かう燃料のようなものです。どちらも重要ですが、まずは車の基本性能を整えてから、良質な燃料を継続的に供給していくイメージです。 Q4: 専門家に依頼すべきか、自分でやるべきか？ A: これは以下の要素によって変わります。ホームページの規模と複雑さ：小規模なサイトなら自分でもある程度対応可能自社の技術リソース：知識や時間がある場合は自社対応も可能予算：専門家に依頼するコストと効果のバランス課題の深刻さ：技術的な問題が深刻な場合は専門家の力が必要基本的には、画像最適化などの簡単部分は自分で対応し、それ以外のHTMLの編集やサーバー設定、より複雑な技術的課題は専門家に相談するという方法が効率的で良いと思います。テクニカルSEOのまとめこれまで5回にわたってテクニカルSEOについて詳しくみてきました。最後にテクニカルSEOの本質をまとめます。テクニカルSEOは、目に見えない「性能」の最適化です。しかし、その効果はホームページの集客力や成約率に大きく影響します。まるで店舗であれば、照明の明るさや空調の快適さ、レジの処理速度、接客といった「お店では当たり前の対応」を整えることにあたります。ユーザーは、それが適切に機能している時には気づきませんが、問題があるとすぐにストレスを感じて、すぐにホームページを離れてしまいます。テクニカルSEOは、ユーザーがストレスなくホームページを閲覧できる環境を整えることが取り組みなのです。私は「テクニカルSEOはホームページのおもてなし」と取引先の担当者さんにお伝えしています。訪れた人が快適に過ごせるよう、細やかな配慮や親切を積み重ねることが、結果として検索エンジンからの評価も高め、より多くの人にあなたの情報を届けられることにつながっていきます。テクニカルSEOについて、さらに詳しい内容は当社ブログの記事「Webサイトの集客力を左右するテクニカルSEO」にも掲載していますので、是非あわせてご覧ください。専門的な内容も含めて解説しています。自社のホームページがユーザーに正しく配慮できているか、テクニカルSEOが最適化できているか気になる方は、当社でSEOを主軸としたWeb集客をサポートするWebコンサルティングもやっていますので、いつでもお気軽にご相談ください。初回相談は無料です。いつでもお気軽にお問い合わせください。
07May
- テクニカルSEOをチェックできる25項目
  Webコンサルタントの松崎です。前回は「テクニカルSEOの落とし穴｜注意すべき8つのポイント」として、テクニカルSEO実施時によくある失敗や注意点をご紹介しました。今回は、より実践的な内容として「テクニカルSEOチェックシート」をご紹介します。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次テクニカルSEOチェックシートセキュリティ関連モバイル対応ページ表示速度サイト構造 HTML構造チェックリストの活用方法定期的なチェックの習慣化優先順位をつけた改善改善結果の測定テクニカルSEOチェックリストまとめこのチェックシートを使えば、ホームページが技術的にどれだけ最適化されているかを確認できます！また、各チェック項目についても説明していますので、なぜ重要なのか、どう改善すればよいのかもわかります。テクニカルSEOチェックシートテクニカルSEOの対応状況を簡単にチェックできるリストです。定期的に確認して、問題がないか点検してみてください。セキュリティ関連 [　] すべてのページがHTTPS化されている [　] HTTP版から適切にリダイレクトされている [　] 混在コンテンツの警告がない [　] WordPressなどのCMSは最新版に更新されている [　] バックアップが定期的に取得されている【チェックポイント】 HTTPS化の確認ブラウザのアドレスバーに「https://」と表示され、鍵マークが付いているかを確認します。すべてのページで確認するのが理想的ですが、まずはトップページと重要なページ（問い合わせフォームなど）から確認しましょう。リダイレクト設定「http://」で始まるURLにアクセスして、自動的に「https://」に転送されるか確認します。転送されない場合は、サーバーの設定で301リダイレクトを設定する必要があります。混在コンテンツのチェック Chrome等のブラウザでページを開き、F12キーを押して開発者ツールを表示し、「Console」タブでエラーメッセージを確認します。「Mixed Content」というエラーがあれば、HTTPSページ内にHTTPのコンテンツが含まれている証拠です。 CMS更新状況 WordPressなどのCMSを使用している場合、管理画面でバージョン情報を確認し、最新版になっているかチェックします。プラグインやテーマも同様に更新状況を確認しましょう。バックアップ確認万が一の不具合やハッキングに備え、定期的なバックアップが取得されているか確認します。できればデータベースとファイルの両方をバックアップし、別の場所に保存しておくことをおすすめします。モバイル対応 [　] すべてのページがモバイルフレンドリーとなっている [　] スマホで文字が読みやすいサイズになっている（16px以上推奨） [　] タップ要素が十分な大きさと間隔を持っている（44px×44px以上推奨） [　] 横スクロールが発生しない [　] メニューがスマホで使いやすく最適化されている【チェックポイント】モバイルフレンドリー Google Search Consoleの「モバイルユーザビリティ」レポートでモバイル対応の問題をチェックできます。また、実際にスマートフォンで表示して確認するか、Chromeの開発者ツールでモバイル表示して確認しましょう。文字サイズの確認実際にスマートフォンでホームページを開き、文字が小さすぎないか、読みにくくないかをチェックします。特に高齢者や視力の弱い方も考慮し、16px以上のサイズを推奨します。タップ要素の確認リンクやボタンの大きさと間隔をチェックします。小さすぎたり、隣接し過ぎていると、誤タップの原因になります。Google推奨のサイズは44px×44px以上です。横スクロールのチェックスマートフォンで表示した際に、横スクロールが発生していないか確認します。特に表やグラフ、画像が画面からはみ出していないかチェックしましょう。メニューの使いやすさスマホでメニューが使いやすいか確認します。タップしやすいボタンサイズ、わかりやすい開閉方法、階層構造が明確かなどをチェックしましょう。ページ表示速度 [　] LCPが2.5秒以内 [　] INPが200ミリ秒以内 [　] CLSが0.1以下 [　] 画像が適切に最適化されている [　] JavaScriptの読み込みが最適化されている【チェックポイント】コアウェブバイタルの測定 PageSpeed Insightshttps://pagespeed.web.dev/でURLを入力し、LCP（Largest Contentful Paint）、INP（Interaction to Next Paint）、CLS（Cumulative Layout Shift）の値を確認します。それぞれの目標値は、LCPが2.5秒以内、INPが200ミリ秒以内、CLSが0.1以下です。画像の最適化確認 PageSpeed Insightsの結果で「画像のサイズを適切に設定する」「次世代フォーマットで画像を提供する」などの項目がないかチェックします。また、大きな画像ファイルがないか、表示サイズに対して過剰に大きな画像を使用していないかもチェックしましょう。 JavaScript最適化の確認「使用していないJavaScriptを削除する」「JavaScript実行時間の短縮」などの警告がないかチェックします。また、JavaScriptファイルが多すぎないか、必要なものだけを使用しているかも確認しましょう。サイト構造 [　] すべての重要ページが3クリック以内でアクセスできる [　] 適切なパンくずリストがある [　] サイトマップが最新 [　] 404エラーがない [　] URLが簡潔で理解しやすい【チェックポイント】クリック階層のチェックトップページから主要なページ（商品・サービス紹介、お問い合わせなど）へのクリック数を数えます。3クリック以内にアクセスできることが理想です。パンくずリストの確認下層ページにパンくずリスト（現在のページの階層を示すナビゲーション）が表示されているか、そのリストは正確か確認します。サイトマップのチェック XMLサイトマップがあるか、最新の内容になっているかを確認します。Google Search Consoleで「サイトマップ」セクションを見れば、送信状況や問題点がわかります。 404エラーの確認 Google Search Consoleの「カバレッジ」レポートでエラーがないか確認します。 URL構造の確認 URLが簡潔で、内容を表すものになっているか確認します。複雑な文字列や不要なパラメータがあると、ユーザーにもGoogleにも理解しづらくなります。 HTML構造 [　] 各ページにユニークなタイトルタグとメタディスクリプションがある [　] H1タグは各ページに1つだけ使用されている [　] 見出し（H1〜H6）が階層的に使用されている [　] すべての画像に適切なalt属性がある [　] 内部リンクが適切に設定されている【チェックポイント】タイトルとメタディスクリプションのチェック各ページのソースコードを表示して、<title>タグと<meta name="description">タグの内容を確認します。これらは検索結果に表示される重要な要素で、ページごとに固有の内容にする必要があります。 H1タグのチェックページのソースコードで`<h1>`タグを検索し、1ページに1つだけ使用されているか確認します。複数あると検索エンジンが重要なコンテンツを特定しづらくなります。見出し構造のチェック見出しタグ（H1〜H6）が階層的に使用されているか確認します。H1の後にH3がいきなり来たり、H2が飛ばされているような構造は避けるべきです。 alt属性のチェック画像に適切な代替テキスト（alt属性）が設定されているか確認します。これは視覚障害のあるユーザーや、画像が表示されない環境での情報提供に重要です。内部リンクのチェック関連するコンテンツ同士が適切にリンクされているか確認します。特に重要なページへの内部リンクが十分あるか、リンクテキストは内容を適切に表しているかをチェックしましょう。チェックリストの活用方法このチェックリスト活用方法をご紹介します。定期的なチェックの習慣化テクニカルSEOは一度対応して終わりではありません。定期的なチェックが重要です。以下のようなスケジュールを参考にしてみてください。毎月1回：ページ速度のチェック、404エラーの確認四半期に1回：サイト全体のチェックリストを使った確認半年に1回：より詳細な分析ツールを使った総合的なチェックサイト更新時：更新したページの再チェック優先順位をつけた改善チェックの結果、問題が見つかった場合は、すべてを一度に改善しようとせず、優先順位をつけて取り組むことが大切です。前回の記事「テクニカルSEOの落とし穴｜注意すべき8つのポイント」でも触れましたが、一般的な優先順位は以下の通りです。セキュリティ関連（HTTPS化など）クロール・インデックス関連（404エラー修正など）モバイル対応の深刻な問題ページ速度の改善その他の最適化特にユーザーの使いやすさに直接影響する項目から取り組むと効果的です。改善結果の測定改善を行った後は、必ずその効果を測定しましょう。検索順位の変化：主要キーワードの順位が上昇したかクリック率の変化：Google Search Consoleでの表示回数あたりのクリック率訪問者の行動変化：直帰率、滞在時間、ページ閲覧数の変化コンバージョン率の変化：問い合わせや購入などの成果につながる割合これらの指標を改善前後で比較することで、テクニカルSEO対策の効果を可視化できます。テクニカルSEOチェックリストまとめ今回は、テクニカルSEOの対応状況を簡単にチェックできるリストをご紹介しました。このチェックリストを活用して、定期的にあなたのホームページの健康状態を確認してみてください。テクニカルSEOは、目に見えない部分の最適化ですが、ホームページの集客力を左右する重要な要素です。これまで投稿していきたテクニカルSEOについての記事を参考にして、このチェックリストを活用すれば、技術的な問題点を発見し、効果的に改善していくことができます。大切なことは、継続してチェックする習慣を身につけることです。Webの技術や検索エンジンのアルゴリズムは常に進化しています。定期的な点検と改善を繰り返すことで、常に最適な状態を保つことができます。より詳しい内容は当社のブログにアップしているWebサイトの集客力を左右するテクニカルSEOの記事にも書かれています。是非あわあせてご覧ください。テクニカルSEOに取り組みたい、ホームページの集客で悩んでいる方はぜひお気軽にご相談ください。当社では、10ヶ月でテクニカルSEOからコンテンツマーケティング、Web広告まで取り組むWebコンサルティングも提供しています。本格的な取り組みをお考えでしたら、まずは課題・問題点をお聞かせください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
03May
- 【プレスリリース】新しいBASEデザインテーマ「コンテンツパック」販売開始
  当社で少し前から取り組んでいるBASEのデザインテーマ販売。新たに「コンテンツパック」というテーマを販売開始しましたので、プレスリリースを掲載させていただきます。ーーーーー有限会社流楽（本社：大阪市西区/代表松崎匡浩）は、BASE DESIGN MARKETにて、4つ目となる新しいBASEデザインテーマ「コンテンツパック (Contents Pack)」の販売を開始いたしました。BASE DESIGN MARKETコンテンツパック ( Contents Pack )https://design.thebase.com/detail/128【サービス開始の背景】当社は20年以上にわたり、Webコンサルティングとホームページ制作を通じて、多くの中小企業やスタートアップの成長を支援してまいりました。経済産業省の最新データによると、2023年の国内EC市場規模は24.8兆円で前年比9.2%成長、物販系分野のEC化率は9.38%に達しています。世界平均（19.4%）と比較するとまだ低く、日本におけるEC市場の成長ポテンシャルは非常に大きいといえます。現在もネット販売へのニーズが高まる一方ですが、中小企業や起業したばかりの事業者にとって、高騰する初期費用の負担はとても大きな参入障壁となっています。2024年度のIT導入補助金からECサイト制作は対象外となり、小規模事業者持続化補助金も大幅に縮小されたことで、限られた予算の中でネット販売に挑戦する事業者にとって非常に厳しい状況になっており、デザインクオリティと機能性を両立した手軽なソリューションが求められています。このような背景を踏まえ、当社はこれまでのWebマーケティングとECサイト制作で培ったノウハウを活かし、低コストでありながらデザイン性が高く、すぐにネット販売を始められるBASEデザインテーマを開発・販売しています。なお、BASEはネットショップ開設実績7年連続No.1のプラットフォームであり、150万店舗以上の事業者に利用されています。これまで、3タイプのBASEデザインテーマを販売してきています。余白を大きく写真が映え初心者向けテーマ「スターターパック (Starter Pack)」ショップに必要な基本的なパーツをトップページに集約できるテーマ「ベーシックパック (Basic Pack)」ビジュアルでの訴求を重視したショップにおすすめのテーマ「フォトパック (Photo Pack)」ただ単にキレイ・カワイイだけでじはなく、3タイプそれぞれにECサイト運営者の要望を聞いて、その状況にあわせたテーマを選べるように、目的・用途別でテーマを作成してリリースしてきました。提供した3テーマは累計150店舗以上に導入され、多くのユーザーから「デザイン性と機能性の両立」「手軽な導入しやすさ」について高い評価をいただいています。そして、この度、コンテンツでの訴求を重視した新しいテーマ「コンテンツパック (Contents Pack)」をリリースいたしました。このデザインテーマを通じて、通常のECサイト構築費用と比較して大幅なコスト削減を実現しながら、自社の強みやこだわりをしっかりと伝えたい中小企業やスタートアップのネット販売への挑戦を強力に後押しいたします。特にコンテンツマーケティングを重視する業種においては、商品説明やブランドストーリーを効果的に伝えられる見せ方が必要で、このテーマはそういったニーズにお応えできるでしょう。【コンテンツパック ( Contents Pack )について】このBASEテーマは、オススメ商品や商品紹介記・やお役立ち記事といったコンテンツの訴求を重視したいショップにおすすめのテーマです。アパレル、小物、フードなど、さまざまなジャンルでご利用いただけます。これまでの当社のBASEテーマの基本機能である背景色の変更やヘッダーフッター・ボタンカラーの組み合わせも導入されていますので、管理画面での設定で、ショップのイメージを自由に表現することができます。[ トップページの主な機能 ]- POINT1 -タイトルを自由に変更可能なコンテンツ掲載エリア：「特集」「新商品」「ピックアップ」項目は、タイトルを自分で設定できます。例えば、「特集」のタイトルを「Column」にしてコラム一覧を表示するなど、ショップのコンテンツに合わせて柔軟に活用できます。- POINT2 -必要なものだけ表示できるON/OFF機能：各項目は表示/非表示を切り替え可能です。ショップに必要な情報だけを表示することで、シンプルでわかりやすいページ構成を実現できます。⚪︎ショップのイメージに合わせたカスタマイズ「背景色」「ヘッダーフッターの色」「ボタンの色」「画像に重なる文字の色・背景色」などを管理画面から簡単に変更できます。⚪︎ 豊富な表示コンテンツ・メインイメージ：スライド表示（2～4枚）、スマートフォン用/パソコン用画像の必須設定、飾り文字、見出し、文章、リンク設定が可能。表示OFFも可能です。・ショップについて：見出し画像、キャッチ文章、長文、リンク設定が可能。表示OFFも可能です。・特集（～6個）：タイトル変更可能、「Features」から変更可能、画像、見出し上文字、見出し、文章、リンク設定が可能。表示OFFも可能です。最初の1・2個目が大きく表示されます。・新商品（～15商品）：タイトル変更可能、「New Arrivals」から変更可能、表示させたいカテゴリーIDの設定。表示OFFも可能です。登録可能なカテゴリーは1個です。・ピックアップ：スマートフォン用/パソコン用画像の必須設定、タイトル必須、文章、リンク設定が可能。表示OFFも可能です。登録可能な個数は1個です。・INFORMATION（1～3個）：日付必須、文章必須、リンク設定が可能。表示OFFも可能です。・ブログ新着記事表示：表示OFF可能。固定記事、新着記事の順番で6記事を表示します。・バナー（～2個）：HOMEバナーと商品ページバナーの表示ON/OFF設定、画像必須、リンク設定が可能。⚪︎ ABOUTページ画像表示ON/OFF、画像設定、フリーエリア1～5、Googleマップ共有地図の埋め込み。⚪︎ 表示順の変更トップページの各項目の表示順を1～8の間で設定可能。⚪︎ 見出しなどのフォント変更見出しなどをセリフ体/明朝体に設定可能（説明文章や小さい文字はゴシック体のまま）。⚪︎ 濃い背景色への対応黒などの濃い背景色の時に、見え難くなる文字を白くするなど、配色を全体的に変更する設定。⚪︎ 文字リンク色変更商品一覧の商品名、ブログ一覧の記事タイトルなど、一部のリンクの文字カラーを変更可能。⚪︎ ボタンの色の変更ボタン背景色とボタン内の文字・マークの色を変更可能。⚪︎ ヘッダーフッターの色の変更ヘッダーフッター背景色の変更、ヘッダーフッターの文字・アイコンを白にする設定。ヘッダーフッターを濃い色にしてBASEロゴ・カートアイコン・Xアイコンが見え難くなった場合に利用できます。⚪︎ 画像に重なる文字の色の変更背景色と文字色をそれぞれ変更可能。[ 対応BASE Apps ]「コンテンツパック (Contents Pack)」は、下記のBASE Appsに対応しています。・送料詳細設定・カテゴリ管理・デジタルコンテンツ販売・英語・外貨対応・メールマガジン・年齢制限・Blog・ラベル・BASEロゴ非表示・商品検索・定期便・レビュー・セール・メッセージ・販売期間設定・予約販売・抽選販売・商品説明カスタム・商品オプション・コミュニティ・テイクアウト・再入荷自動通知・お知らせバナー・メンバーシップその他、テーマに影響されないApps（送料無料設定、HTML編集など）も利用可能です。[ 非対応Apps ]・ページ追加・海外販売代行※「オフィシャルテーマのみ利用可能」といった注意書きが記載されているAppsは利用できません。[ おすすめのショップ ]アパレル、小物、フードなど、さまざまなジャンルで利用いただけます。 BASEの基本機能である背景色の変更と、「コンテンツパック (Contents Pack)」のヘッダーフッター・ボタンカラーの組み合わせで、多様なイメージのショップを作成可能です。[ 価格 ]19,800円（税込）【ご購入の流れ】 BASE DESIGN MARKET コンテンツパック ( Contents Pack ) 詳細ページへアクセス「購入する」ボタンをクリック決済情報を入力して「購入する」ボタンをクリック購入完了【テーマ設定】1. BASE管理画面にログイン2. 「デザイン」メニューをクリック3. 選択中のテーマの「変更する」をクリック4. 購入済みのタブをクリック5. 「プレビューを見る」をクリック6. プレビュー画面右上の「このテーマに変更する」をクリックテーマ設定完了当社のBASEデザインテーマ「コンテンツパック (Contents Pack)」を活用いただくことで、導入コストを大幅に抑え、専門知識がなくても、コンテンツを効果的に活用した魅力的なネットショップを簡単に開設・運営いただけます。中小企業やスタートアップのネット販売への挑戦を、デザインと機能で強力にサポートいたします。【コンテンツパック (Contents Pack)の情報】BASE DESIGN MARKET コンテンツパック ( Contents Pack )https://design.thebase.com/detail/128デモショップhttps://contentspack.base.shop/説明ページhttps://www.ryu-raku.co.jp/basetheme/contents/【会社情報】会社名：有限会社流楽所在地：大阪市西区江之子島1-7-3-607事業内容：Webコンサルティング・ホームページ制作URL：https://www.ryu-raku.co.jp/【プレスリリースに関するお問い合わせ】担当：松崎匡浩（まつざきまさひろ）お問い合わせはこちらからーーーーー当社サイト掲載の公式プレスリリース以外に、すでに、いくつかの情報サイトに掲載いただいています。【当社サイト】新しいBASEデザインテーマ「コンテンツパック (Contents Pack)」販売開始 PressWalker様掲載プレスリリース PRでっせ様掲載プレスリリース valuepress様掲載プレスリリース PR-FREE様掲載プレスリリース PRERELE様掲載プレスリリース TSUNAGUGU様掲載プレスリリース
02May
- テクニカルSEOの落とし穴｜注意すべき8つのポイント
  Webコンサルタントの松崎です。ここまで「テクニカルSEOとは何か」「改善方法」「得られる効果・メリット」についてみてきました。テクニカルSEO｜ホームページの性能をあげる配慮テクニカルSEOの改善方法｜実践的な取り組み方テクニカルSEOのメリット｜7つの集客効果今回は実際に取り組みを始める前に知っておきたい「テクニカルSEOで気をつけたい8つのポイント」についてみてみます。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次テクニカルSEOで陥りがちな8つの落とし穴 1. リニューアル時のURL変更と301リダイレクト 2. モバイルとデスクトップの表示の違い 3. 過剰な画像・動画の使用 4. JavaScriptの不適切な実装 5. 複雑すぎるサイト構造 6. 過度なプラグインの利用 7. コアウェブバイタルの無視 8. セキュリティ対策の不足テクニカルSEOの検証 Google Search Console PageSpeed Insights テクニカルSEOを改善する順番テクニカルSEOは継続的な取り組みが大切テクニカルSEOの注意点まとめテクニカルSEOは、適切に行えばホームページの集客力を大きく高める効果がありますが、間違った方法を行うと、かえって逆効果になることもすごくあります。また、重要なのに見落とされがちなポイントもあります。私が多くのホームページを診断・改善してきた経験から、特に注意すべきポイントをまとめてみました。テクニカルSEOに取り組む前に、ぜひチェックしてみてください！テクニカルSEOで陥りがちな8つの落とし穴テクニカルSEOを進める上で、特に注意すべき8つのポイントです。リニューアル時のURL変更と301リダイレクトモバイルとデスクトップの表示の違い過剰な画像・動画の使用 JavaScriptの不適切な実装複雑すぎるサイト構造過度なプラグインの利用コアウェブバイタルの無視セキュリティ対策の不足それぞれ詳しく見ていきます。 1. リニューアル時のURL変更と301リダイレクトホームページをリニューアルする際に最も多い失敗が、URLの変更と適切なリダイレクト設定の間違いです。例えば、これまで「https://example.com/service.html」というURLだったページが、リニューアル後に「https://example.com/services/」に変わったとします。この時、古いURLから新しいURLへの転送（リダイレクト）設定をしないと、いくつかの問題が出てきます。検索エンジンでの評価（順位）が一からやり直しになる外部サイトからのリンクが切れる（リンク切れになる）ブックマークしていたユーザーがアクセスできなくなる特に検索順位には大きな影響があります。長い時間をかけて上位表示していたページが、安易なリニューアルで検索結果から消えてしまい、アクセスを大きく落としてしまうことがとても多く起こっています。【対策】リニューアル前に全ページのURLリストを作成する新旧URLの対応表を作成する古いURLから新しいURLへ「301リダイレクト」を設定するリダイレクト後も検索順位や流入を慎重に監視するホームページリニューアルで、リダイレクト設定は絶対必須です。しかし、多くの制作会社ではホームページに関するプロであるにも関わらず、リダイレクトが必須設定であることを知らず、見た目だけ変更する「着せ替えリニューアル」を行っています。そのため、リニューアルでアクセス数を大きく落とす事例が後を立ちません。事実、公的支援機関で私に相談に来られる方のリニューアルに関する相談も半分以上がこれです。ホームページのリニューアル時には、発注前に候補先の制作会社にリダイレクト設定のことをきちんと伝えて、そのことをきちんと理解していること、正しく設定できるかどうかをチェックした上で、発注するようにしてください。 2. モバイルとデスクトップの表示の違いほとんどのホームページはレスポンシブデザイン（端末の画面サイズに応じて自動的にレイアウトを調整する設計）を採用しています。しかし、実際にはモバイルとデスクトップで表示が大きく違って、使いにくさが出ていることがあります。【よくある問題】スマホで文字が小さすぎて読みにくいタップするべきボタンやリンクが小さくて押しづらいデスクトップでは問題なく表示される要素がスマホでは崩れるメニューがスマホで使いづらいモバイル版では重要なコンテンツが見つけづらい Googleはモバイルファーストインデックス（スマホで表示されるコンテンツ / 使いやすさ / スピード...を優先評価するルール）を採用しているため、スマホでの表示状態を優先的に評価します。つまり、PCでは問題なくてもスマホで使いづらいホームページは、検索順位の低下につながる可能性があります。【対策】自分のスマホで自社ホームページを定期的にチェックする文字サイズは少なくとも16px以上を基準とするタップ要素（ボタン・リンク）は44px×44px以上の十分な大きさにするスマホでの表示を優先的にデザインし、そこからデスクトップ版を調整する Google Search Consoleの「モバイルユーザビリティ」レポートを定期的に確認する「デスクトップで見栄えが良い」だけでは不十分です。むしろ、スマホでの使い勝手を優先して考えるべきでしょう。いくつかのスマートフォン機種で実際にテストしてみることをおすすめします。制作会社の中には、既成のテンプレートに文字や画像を流し込むだけの制作を行っているところがあり、その場合は配置したコンテンツの量や順番、レイアウト調整によって、スマホでの表示が非常に見にくく、使いにくくなるケースがよく起こっています。こちらの場合も、発注する前に候補となる制作会社へ、テンプレートを使った制作なのか、オリジナルのデザインできちんと調整してくれる制作なのかを確認した上で、発注するようにしましょう。ホームページ制作会社だからちゃんと知っていると思うのは、大きな間違いです。 3. 過剰な画像・動画の使用キレイな画像や動画は、ホームページの訴求力を高める重要なポイントです。でも、正しく最適化せずに大量の高解像度画像や重い動画を使用すると、ページの表示速度が大幅に低下してしまいます。【使い方の注意ポイント】無圧縮の高解像度画像（3MB以上など）を多用する画面に表示されるエリアよりもはるかに大きな画像を使用する自動再生する重い動画をトップページに設置するスライダーに多数の大きな画像を使用するこうした問題は、特にモバイル回線でアクセスするユーザーに大きな影響を与えます。3Gや遅い4G回線では、ページの読み込みに30秒以上かかることもあり、多くのユーザーはその前に離脱してしまうでしょう。【対策】画像は適切なサイズに縮小し、圧縮ツールで最適化する WebPやAVIFなどの次世代画像形式を利用する画像の遅延読み込み（Lazy Loading）を実装する自動再生動画は控えめにするか、軽量な代替手段（アニメーションGIFなど）を検討する必要最小限の画像だけを使用し、装飾的な画像はCSSで代替できないか検討する適切に画像を最適化するだけで、ページの表示速度がとても速くなります。また、次世代の画像形式のwebPやAVIFを適切に設定すれば、さらに表示スピードを上げることができます。ただし、アクセスしてくるユーザのブラウザが次世代画像に対応してないケースも考えられますので、正しい知識がある制作会社さんと共に検討するようにしましょう。動画コンテンツは非常に重要なコンテンツです。ただ、ホームページでの正しい動画の読み込み方や使い方がわかっていない制作会社も増えていますので、ユーザが使いやすく、動画が表示される方法をきちんと対応してくれる制作会社さんにホームページのリニューアルを発注するようにしましょう。 4. JavaScriptの不適切な実装 JavaScriptは、ホームページに動きや使いやすさをあげるのに役立つプログラミング言語ですが、間違った導入をするとページの表示速度に大きな悪影響を与えます。【要注意な導入方法】大量のJavaScriptライブラリやフレームワークを読み込む外部の多数のJavaScriptファイルを同期的に読み込むページの表示に直接関係ないJavaScriptをページ上部で読み込む古いブラウザ向けの互換性コードを含む過剰なJavaScript こうした間違った使い方により、ページの表示が著しく遅れたり、場合によってはブラウザがフリーズしたりすることもあります。表示速度の低下だけでなく、JavaScriptエラーによって機能が正しく動作しないこともあります。【対策】本当に必要なJavaScriptだけを使用する JavaScriptを圧縮する重要ではないJavaScriptは非同期（async）または遅延（defer）で読み込むページの主要コンテンツの表示を妨げないよう、JavaScriptの配置を最適化する WordPressの場合、不要なプラグインを削除してJavaScriptを減らす制作会社の中にはどのJavaScriptをどう使えば何が動くのかを把握せずに制作をしているところもあります。この場合は、非常に危険で、前述の動きがどうとか、速さがどうとかではなく、導入しているJavaScriptのサポート切れでハッキングのリスクが高まってしまうことも考えられます。このことも、ホームページを依頼する際には、確認しておきたいポイントです。 5. 複雑すぎるサイト構造ホームページの構造が複雑すぎると、ユーザーは目的のページを見つけづらくなりますし、検索エンジンもコンテンツを適切に評価できなくなります。【よくある構造の問題】深すぎる階層構造（4階層以上深いページがある）わかりづらいナビゲーション（メニュー項目が多すぎる、カテゴリ分けが不適切）関連コンテンツ同士のリンクが不足している同じ内容が複数のURLで表示される（重複コンテンツ）パンくずリストがない、または間違っている複雑な構造は、ユーザーの混乱を招くだけでなく、Googleがページの重要度を判断しにくくなります。重要なページが適切に評価されず、検索順位が下がる原因になることも考えられます。【対策】シンプルで浅い階層構造を心がける（主要ページはホームから2〜3クリック以内）明確なナビゲーションメニューを設置する適切なパンくずリストを実装する関連コンテンツ同士を内部リンクで結ぶ XMLサイトマップを作成し、定期的に更新するホームページをリニューアルする際に、制作会社の方からコンテンツをきちんとディレクトリに分けて表示する設計図であるサイトマップを提案してもらうようにしましょう。その上で打ち合わせを行い、ユーザ目線で目的のコンテンツにたどりやすくするためにどうすれば良いかを検討し、ページ構成を作り上げていきましょう。指示待ちしているだけの制作会社との制作は非常に大変なので、ここポイントも発注前にチェックして、「サイトをマップを作ってページ構成を提案してください。」と伝えるようにしましょう。 6. 過度なプラグインの利用 WordPressなどのCMSでホームページを運用している場合、便利な機能を簡単に追加できるプラグインは魅力的です。しかし、過剰なプラグインの利用は様々な問題を起こします。ページの表示速度の低下セキュリティリスクの増加プラグイン同士の競合によるエラーバージョンアップに伴う互換性の問題「便利だから」「あったら良いかも」という理由だけでプラグインを追加していくと、気づかぬうちにページの表示速度が大幅に低下し、管理も複雑になってしまいます。【対策】本当に必要なプラグインだけを使用する同様の機能を持つプラグインは統合できないか検討する利用していないプラグインは完全に削除する（無効化だけでは不十分）プラグインは評判が良く、定期的に更新されているものを選ぶプラグインの数は15個以下を目安にする WordPressサイトでは、使用していない・重複している機能のプラグインを整理することで、ページの読み込み時間を圧縮して、表示スピードを向上させることも可能です。不要なプラグイン、なんとなくで入れたプラグインは削除して身軽になりましょう。プラグインに頼りきった制作だけを行う会社が多くあります。多い場合は20〜30個のプラグインを導入されてしまいます。そもそも制作するべきコンテンツでさえもプラグインを使うという。これらは、前述の通り、様々なリスクを起こすことが考えられますので、このポイントについてもプラグインはなるべく使わずにリニューアルしてもらうように、きちんと事前に伝えるようにしましょう。 7. コアウェブバイタルの無視 Googleが2020年に発表し、2021年から検索ランキング要素となった「コアウェブバイタル」。これはユーザー体験を測定する重要な指標ですが、多くのホームページではまだ十分に対応できていません。【3つの指標】 LCP（Largest Contentful Paint）メインコンテンツの読み込み速度 INP（Interaction to Next Paint）ユーザーの操作に対する応答速度 CLS（Cumulative Layout Shift）視覚的な安定性これらの指標が悪いと、ユーザーの使いにくさが高く、ストレスを感じるだけでなく、Googleからの評価も下がります。【対策】 Google Search Consoleで自社サイトのコアウェブバイタルをチェックする PageSpeed Insightsで詳細な問題点を確認する LCPの改善：画像の最適化、サーバーレスポンスの改善、重要なコンテンツの優先読み込み INPの改善：不要なJavaScriptの削除、メインスレッドの負荷軽減 CLSの改善：画像・広告・埋め込み要素のサイズ指定、適切なフォント読み込みユーザの使いやすさと検索順位に直結する重要なポイントであるにもかかわらず、多くの制作会社では、このコアウェブバイタルを全く理解していないところが多いです。4年も前に導入され、検索順位への影響があることを公に発表されているのに、取り組まない、知らない、できない制作会社が多い。ひどい話です。いくら見た目がキレイでも、使いにくくていちいち表示を待たされるホームページでは、ほとんどのユーザーはイライラして、すぐに離脱してしまいます。わざわざそんなところ問い合わせや買い物をしませんよね。 8. セキュリティ対策の不足ホームページのセキュリティ対策はテクニカルSEOの重要なポイントですが、見落とされがちな部分でもあります。不十分なセキュリティ対策は、いくつかの問題が起こります。ブラウザでの警告表示（「保護されていない通信」など）ユーザーの信頼低下検索エンジンからの評価低下マルウェア感染リスク個人情報漏洩のリスク特にHTTPS（SSL）の導入は今や必須ですが、適切に設定されていないケースもまだ多く見られます。また、WordPressなどのCMSでは、セキュリティアップデートの遅れが脆弱性を生み出す原因になります。【対策】 SSL証明書を導入し、すべてのページをHTTPS化する HTTP→HTTPSへの恒久的なリダイレクトを設定する混在コンテンツ（HTTPS内のHTTPコンテンツ）を修正する CMSやプラグインを最新バージョンに保つ強力なパスワードを使用し、定期的に変更するセキュリティプラグイン（WordPressの場合）を導入する定期的なバックアップを取るセキュリティ対策の効果は数値化しづらいですが、Googleも公式に検索順位を決定する要因であることを発表しています。これはユーザーが安心して個人情報や決済情報を入力できるようになったためと考えられます。今では、ほとんど見られなくなりましたが、HTTPSの設定が間違っているホームページもまだまだ少なくありません。これがまだ起こっているのは、制作会社の設定ミス、もしくは知識不足・技術不足があります。リニューアルを発注する際は、このポイントにも注意しましょう。テクニカルSEOの検証テクニカルSEOの問題を発見し、修正効果を確認するためには、正しいツールを使うことが大切です。 Google Search Console Google Search Consoleは、Googleがあなたのホームページをどのように認識しているかを確認できる無料ツールです。【確認できる主な項目】インデックス状況（GoogleにWebページが登録されているか）モバイルユーザビリティの問題コアウェブバイタルの状況手動対策の有無（ペナルティ）セキュリティの問題特にチェックしておきたい「カバレッジ」レポートは、Googleがクロール（巡回）できていないページや問題があるページを見つけるのに役立ちます。また「モバイルユーザビリティ」では、スマホ対応の問題点を具体的に確認できます。 PageSpeed Insights PageSpeed Insightsは、Webページのパフォーマンスとユーザーの使いやすさをチェックするGoogleの無料ツールです。【確認できる主な項目】ページ速度のスコア（モバイル・デスクトップ別）コアウェブバイタルの各指標の値実験室データと実際のユーザーデータ具体的な改善提案使い方はシンプルで、分析したいページのURLを入力するだけです。結果には具体的な改善ポイントも表示されるので、優先して対応すべき項目が明確になります。テクニカルSEOを改善する順番問題が見つかった場合、どの順番で改善していくのが良いか。参考となる順番をご紹介します。セキュリティ対策（HTTPS化、混在コンテンツの修正）クローラビリティの問題（インデックスできないページの修正）モバイルフレンドリーの深刻な問題ページ速度の改善（特にLCPの最適化） URL構造と301リダイレクトの最適化 CLS（視覚的安定性）の改善 HTML構造の最適化（見出し、内部リンクなど）構造化データの実装その他の細かな改善点この順番を参考にして、状況や状態を考慮してその順番を入れ替えながら、進めていきましょう。ユーザーに直接影響する重要な問題は何かを考えて順に解決していくようにしましょう。テクニカルSEOは継続的な取り組みが大切テクニカルSEOは継続して取り組んでいくことが大事です。検索エンジンのアルゴリズムは常に進化し、新しい技術標準やその対処方法も日々変わっていっています。定期的なチェックと最新情報を取り入れて、ユーザーがつかやすいホームページに維持していくことが大切です。また、大きなホームページの変更（リニューアルなど）を行う際には、テクニカルSEOの観点から検証を行い、きちんち準備してから取り組みましょう。制作会社に丸投げはとても危険です。 SEOはキーワードの最適化が主流でしたが、現在はユーザーの使いやすさを重視したテクニカルSEOが重要になってきています。ネットが現在の生活で当たり前に存在するインフラとなっているので、使いやすい、わかりやすいことは当たり前ですよね。実店舗と同じように、ユーザーに対して親切な配慮と正しい接客ができることが必要になっています。検索エンジンからの評価向上とか、順位がどうとかでなく、まずはユーザーを親切に迎えるための配慮として、見た目だけ取り繕った接客ではなく、正しい配慮と接客をテクニカルSEOで対応するようにしましょう。テクニカルSEOの注意点まとめテクニカルSEOで気をつけたい8つのポイントを見てきました。リニューアル時のURL変更と301リダイレクト、モバイルとデスクトップの表示の違い、過剰な画像・動画の使用、JavaScriptの不適切な実装、複雑すぎるサイト構造、過度なプラグインの利用、コアウェブバイタルの無視、セキュリティ対策の不足。こういった箇所は、多くのホームページがハマってしまう注意したいポイントです。これらのポイントを避け、適切にテクニカルSEOを実施することで、ホームページの集客力と成約率を着実に高めていくことができます。より詳しい内容は、Webサイトの集客力を左右するテクニカルSEOの記事もぜひご覧ください。専門的な内容も含めて解説しています。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
01May
- テクニカルSEOのメリット｜7つの集客効果
  Webコンサルタントの松崎です。前回までは「テクニカルSEOとは何か」「テクニカルSEOの改善方法」について見てみました。今回は「テクニカルSEOで得られる具体的な効果・メリット」について詳しく見ていきましょう。「テクニカルSEOって本当に効果があるの？」「実際にどんなメリットがあるの？」という疑問をお持ちの方は多いと思います。取り組む時間と費用にあった効果があるのか気になりますよね。テクニカルSEOは取り組みに時間がかかり、外部に依頼する場合も相当の費用がかかりますが、ホームページの集客力を高める上でとても重要な役割を果たします。それはどんな役割なのか、どんな効果があるのかを具体的に見ていきましょう。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次テクニカルSEOの7つの効果 1. 検索順位の向上 2. ユーザーの使いやすさの改善 3. ホームページ内での滞在時間の延長 4. 直帰率の低下 5. コンバージョン率（成約率）の向上 6. ページの表示速度の改善 7. ブランド信頼性の向上テクニカルSEOと他の対策との相乗効果テクニカルSEOの費用対効果テクニカルSEOはホームページの基礎体力をアップテクニカルSEOは「見えない品質」の最適化テクニカルSEOの7つの効果テクニカルSEOの改善によって見込むことのできる効果・メリットは7つ考えられます。検索順位の向上ユーザー体験の改善サイト内での滞在時間の延長直帰率の低下コンバージョン率（成約率）の向上ページの表示速度の改善ブランド信頼性の向上それぞれの効果について、具体的に見ていきます。 1. 検索順位の向上テクニカルSEOを正しく行うと、検索エンジンはあなたのホームページを高く評価してくれるようになり、検索結果での表示順位が上がるようになります。検索エンジンは、技術的に最適化されたホームページをアルゴリズムという計算方式でチェックして高く評価します。これは「お店のディスプレイと接客」に似ています。いくら良い商品があっても、店内が暗くて商品が見つけにくかったり、レイアウトがわかりにくかったりすると、お客様（検索エンジン）は商品を見つけにくく、その価値も正しく把握できません。テクニカルSEOは、明るく清潔な店内で、商品を見やすく陳列し、スムーズに買い物できる環境を整える。こういった実店舗での取り組みに似ています。 2. ユーザーの使いやすさの改善テクニカルSEOは、ユーザー（訪問者）がホームページをストレスなく閲覧できるようにする取り組みです。この取り組みが正しく行われると、ユーザーの満足度が高まります。表示速度が速いホームページは、ユーザーをイライラさせることなく、目的のコンテンツまでスムーズに誘導することができます。ユーザーの使いやすさを数値化する指標として、Googleが提唱する「コアウェブバイタル」があります。これはページの読み込み速度や視覚的安定性、操作への応答性をチェックするもので、ユーザーがどれだけ快適にページを利用できるかを示す指標です。私は「ホームページは実店舗」だと考えています。テクニカルSEOは、店内の照明を明るくしたり、レジの待ち時間を短くしたり、商品の陳列を見やすく整理するような改善です。これらは直接的に商品の質とは関係ありませんが、お客様の満足度を左右しますよね。 3. ホームページ内での滞在時間の延長ユーザーは使いやすさが向上すると、ホームページ内でより長く滞在するようになります。テクニカルSEOによって、ページの表示が速くなり、ナビゲーションが使いやすくなると、ユーザーはストレスなく複数のページを閲覧するようになります。その結果、滞在時間が延びます。滞在時間が長くなるということは、それだけ多くの情報をユーザーに届けられるということです。商品やサービスの特徴、会社の強み、お客様の声など、様々な情報を見てもらえる機会が増えます。 4. 直帰率の低下「直帰率」とは、1ページだけ見てすぐにホームページを離れてしまうユーザーの割合を表す指標です。テクニカルSEOの改善によって、この直帰率を下げることができるようになります。ページの表示速度が遅いと、多くのユーザーは読み込みが完了する前に離脱してしまいます。実際に、Googleのデータによると、ページの表示に3秒以上かかると、約40%のユーザーが離脱すると言われています。テクニカルSEOによってページの表示速度を改善すれば、ユーザーとの機会損失を防ぐことができるようになります。また、スマホ表示に最適化していることも直帰率に大きく影響します。スマホで見づらいページは、ユーザーがすぐに「スワイプ」して検索結果ページ戻ってしまいます。そうならないようにスマホでの表示が見やすく最適化できていれば、より多くの情報をユーザーに見てもらうことができます。 5. コンバージョン率（成約率）の向上「コンバージョン率」とは、ホームページに訪れた人のうち、実際に問い合わせや購入などの望ましい行動（コンバージョン）を起こした人の割合を指します。テクニカルSEOはこのコンバージョン率も高める効果があります。ユーザーがストレスなく快適にホームページを閲覧できると、その分だけ情報収集や検討がスムーズに進み、最終的な決断（問い合わせや購入）に至りやすくなります。ここで特に重要なポイントは、フォームの使いやすさです。問い合わせフォームの読み込みが遅かったり、スマホで入力しづらかったり、入力項目が多すぎたりすると、途中で入力を諦めるユーザーがたたくさん出てしまいます。テクニカルSEOでこれらを改善することで、フォーム完了率を高めることができます。 6. ページの表示速度の改善テクニカルSEOの中で最も重要なポイントが、ページ表示速度の改善です。こじの取り組みだけでも効果がありますが、他の多くの取り組みでも効果を発揮します。ページの表示速度が1秒改善されるだけで、コンバージョン率は7%向上するというデータもあります。これは非常に大きな数字ですよね。月間100万円の売上のあるECサイトであれば、年間84万円の売上増加に相当します。また、Googleは2021年以降、ページの使いやすさをランキング要素として正式に採用していて、表検索順位への直接的な影響もあります。実際に改善を対応させていただいたホームページでは、画像の最適化、JavaScriptの遅延読み込み、キャッシュの設定などの最適化を行った結果、ページの表示速度が20点から72点まで大幅に改善しました。（※点数はPageSpeed Insightsで計測した数値）この改善はユーザー数の増加だけでなく、お問い合わせ数の増加にもつながりました。 7. ブランド信頼性の向上テクニカルSEOで最適化されたホームページは、ユーザー信頼も高めることができます。セキュリティ対策（HTTPS / SSL）がされていないホームページは、ブラウザで「保護されていない通信」という警告が表示されます。これを見たユーザーは不安を感じ、個人情報をフォームなどに入力するのを躊躇してしまうかもしれません。また、ページの表示が遅かったり、スマホで見づらかったりするホームページは、「時代遅れ」「不親切」という印象を与えかねません。逆に、スムーズに表示され、どのデバイスでも快適に見ることができるホームページは「この会社は細部まで気を配っている」「最新の技術に対応している」という良い印象につながるでしょう。テクニカルSEOと他の対策との相乗効果テクニカルSEOを最適化するには、コンテンツSEOや内部・外部リンク対策など、他のSEO施策と組み合わせることが重要です。質の高いコンテンツがあっても、ページの表示が遅ければ、ユーザーに読んでもらえません。逆に、表示は速くても、コンテンツの質が低ければ、訪問者の満足度は上がりません。最も効果的な取り組み方は、まずテクニカルSEOでホームページの性能を高めて、その後で継続的にコンテンツの充実を図るのが良いでしょう。この順で取り組むことで、検索エンジンとユーザーの両方に評価してえもらえるホームページに改善できます。テクニカルSEOの費用対効果テクニカルSEOにかかるコストは回収できるの？その費用対効果は非常に高いと言えます。なぜなら、一度改善すれば、その効果は長期間持続するからです。例えば、ページ速度の最適化や構造の改善は、一度行えば、大きなホームページの変更がない限り効果が続きます。もちろん、業種や現状のホームページの状態によって効果は異なりますが、ほとんどのケースでテクニカルSEOの取り組みに対する費用対効果は十分高いと言えるでしょう。さらに、テクニカルSEOのいくつかは自社で対応できる部分も多く、外部に依頼するコストを抑えることも可能です。画像の最適化やコンテンツの構造化などは、基本的な知識があれば自分で十分対応することができるでしょう。テクニカルSEOはホームページの基礎体力をアップテクニカルSEOは、ホームページの「基礎体力」を高めるようなものです。基礎体力が高まれば、どんな活動（集客施策）も効果的に行えるようになります。同じ広告費をかけるなら、テクニカルSEOがしっかりしているホームページの方が、より多くの成果を得られます。なぜなら、広告で訪れたユーザーが快適に閲覧でき、離脱せずに情報を得られるからです。 SNSでの発信やメルマガ配信などの効果も、テクニカルSEOによって高まります。どんなに魅力的な情報を発信しても、リンク先のホームページが使いにくければ、その価値は半減してしまいますから。テクニカルSEOは「見えない品質」の最適化テクニカルSEOは、ユーザーには直接見えない部分への取り組みですが、その効果は検索順位の向上、ユーザーの使いやすさの改善、滞在時間の延長、直帰率の低下、コンバージョン率の向上、ページ表示速度の改善、ブランド信頼性の向上など、たくさんの箇所に好影響があります。さらに、こういった効果が互いに連動し、相乗効果を生み出すことができます。テクニカルSEOの改善は、小さな変化の積み重ねかもしれませんが、最終的には大きな成果につながります。また、一度改善すれば、その効果は長期間持続するため、費用対効果も非常に高いと言えます。ホームページを通じた集客やブランディングを重視するなら、テクニカルSEOの取り組むは欠かせません。「見えない品質」を高め、ホームページの本当の価値を引き出しましょう。より詳しい内容は当社ブログのWebサイトの集客力を左右するテクニカルSEOの記事に掲載しています。是非あわせてご覧ください。 Web集客に取り組もうと思っている方、取り組んでいるが効果が見込めなくてこなっている方はそのお悩みや問題箇所をお聞かせください。初回相談は無料です。いつでもお気軽にお問い合わせください。ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp