第4回：web 担当吉村のWEBブランディング

こんにちは
web担当の吉村です。

新型コロナウイルスの影響が波紋を広げていますね。
みなさんは、いかがお過ごしでしょうか…。

私はというと、この情勢もさることながら、
楽しみにしていた映画が軒並み公開延期になり
前回触れた、映画館の会員カードの出番が余計になくなってしまいました。

…とはいえ、仕方ないですね。
今は手洗いうがいを徹底するしかありません…！

そんなわけで、今回のテーマはこちら。

モバイルフレンドリーなサイトを制作するには？

（前回の続きになりますので、もしよろしければ改めてご確認いただけたら嬉しいです。）
「SEO対策にも◎モバイルフレンドリーなサイトにしよう」

1. モバイルフレンドリーの条件をおさらい！
2. 方法その1 スマートフォン専用のサイトをつくり、アクセス元媒体を判別して振り分ける方法
 3. 方法その2 レスポンシブウェブデザインに作り変える方法

1. モバイルフレンドリーの条件をおさらい！

前回の記事まで読めないよ〜という方に、さらっとおさらいです！
Googleの提唱する、モバイルフレンドリーの条件を確認しましょう！

＜Googleが提唱するモバイルフレンドリーの条件＞
・Googlebot(Googleの検索AI)によってクロール(サイト内を巡回)される状態になっているか。複雑すぎるサイト構造(ページの改装が深い、リンク遷移が紛らわしいなど）になっていないか。
・モバイルでは一般的ではないFlashなどのコンテンツを利用していないか。
・モバイル画面でズームしなくても読むことができるフォントサイズになっているか。
・ユーザーが横スクロールやズームしたりする必要がないように、コンテンツのサイズと画面サイズが一致しているか。
・リンクの誤タップをしないように、それぞれのリンク部分が離れて配置されているか。

上記条件に基づいて、以下のURLでもかんたんに診断できます。
参照：モバイルフレンドリーテスト – Google Search Console

つぎは、実際にWEBサイトをモバイルフレンドリーにする方法に触れていきましょう。
弊社でご案内しているのは主に以下の2つです。

2. 方法その1
スマートフォン専用のサイトをつくり、アクセス元媒体を判別して振り分ける方法

アクセスしてきた媒体(PCなのか、スマートフォンなのか）を判別して、そのURL内で読み込んで表示する情報やデザインを振り分ける方法です。
スマートフォンの中でも、AndroidなのかiPhoneなのかなど、細かい設定も可能に。
媒体毎に大きなデザイン変更、情報整理が可能で、情報系メディアサイトが採用していることが多い方法です。

【イメージ画像】

【導入のメリット】
・媒体別にページの内容を含め大幅な差異を表現できるので、提供したいターゲットに合わせたデザイン施策が可能に。
・違う媒体の必要ない内容がページ内に含まれていないのでページデータが軽くなり、表示が比較的早くなる。
・ページを構成するデータが別なので、独立した運用管理ができる。（スマートフォンページにだけキャンペーンを掲載する！など。）

【導入のデメリット】
・html化（WEBサイトの構築作業）の際に、読み込み用の設定が必要となる。
・構築時の規格にあわせてページを作りきってしまうため、最新機種や最新規格の表示には、万全な対策がしづらい。
・ページを構成するデータが完全に独立した別物なので、更新するときは両方とも更新しなければならない。（1ページ分の作業も、実質2ページ分）

3. 方法その2
レスポンシブウェブデザインに作り変える方法

画面の幅の基準値（ブレイクポイント）を決め、それ以上であればパソコン用デザインを表示、それ以下はスマートフォン用デザインを表示することができる方法です。*1
端末情報に縛られないため、タブレットや大画面PCなどブレイクポイントを複数設定することも可能です。

【イメージ画像】

【導入のメリット】
・Googleが推奨している方法なので、Googleの検索アルゴリズムに強い
・基準が画面幅のため、機種に囚われず、新しい規格サイズの新機種が発売されても表示エラーは起きにくい。（*2）
・HTML（ページを構成するコード）が同じなので、1度ですべてのデザインが更新される。運用時に複数ページを変更する手間が省ける。

【導入のデメリット】
・ブレイクポイント毎の微調整が必要。
・使用するコンテンツは同じものなので、デザインを大幅に変えることが難しい。
・１ページにパソコン版・スマートフォン版などすべての情報を含まれるため、ページ内データ量が多くなり、表示に時間がかかる場合がある。

*1：パソコン上でも、ウィンドウサイズを狭めることでスマートフォン用のデザインを表示することができます。
*2：Flashなど過去には主流だったが、提供終了するサービスなどが内包されている場合は、表示されなくなる可能性があります。

いかがでしょうか。
どちらの方法も一長一短ではありますが、PC版のみのサイトの方はご検討されるといいでしょう。

次回更新は、すこし時間があきますが、4月14日(月)です。

2020年3月10日　|　スタッフ：WEBブランディング, 吉村

第3回：web 担当吉村のWEBブランディング

こんにちは
web担当の吉村です。

今日はアカデミー賞の発表ですね。
最近、映画館に通うのを趣味にしようと意気込んで劇場の会員カードをつくりましたが、３・４回みてから足が遠のいてます（笑）
いつも形から入ってしまって、それで満足してしまうんですよね。
今度は継続していきたいです。

さて、近年、弊社でWEB制作するときには合わせてご提案させていただいている、スマートフォン用にも見えやすい、モバイルフレンドリーとはなにか。という話題です。

SEO対策にも◎
モバイルフレンドリーなサイトにしよう

1. モバイルフレンドリーとは？
2. 検索エンジンに影響する？！Googleの施策とは？
3. モバイルフレンドリーなサイト条件を確認しよう

1. モバイルフレンドリーとは？

検索エンジンの最大手のGoogleは、モバイル端末で来訪したユーザーがサイトを問題なく閲覧できるサイトを、モバイルフレンドリーと評価します。

インターネットを使用する環境は発展が著しく、パソコンよりも、スマートフォンでインターネットが使われることが多くなりました。
（このブログも、もしかしたらスマートフォンでご覧頂いている方も多いのではないでしょうか…？）

パソコンは利用できる環境が主に屋内（ないし、屋内に近い環境に整える必要がある）なのに対し、スマートフォンはいつでもどこでも利用できます。
実際、国内においては、総務省が毎年発表している「通信利用動向調査」の結果（令和元年版。2019年月発表時）、世帯におけるスマートフォンの保有割合が約8割になった。と示されています。パソコンよりも、スマートフォンを持っている人、使用している人が多いんですね。

参考：統計調査データ：通信利用動向調査：報道発表資料

2. 検索エンジンに影響する？！
Googleの施策とは？

2015年にGoogleはモバイルフレンドリーアルゴリズム(スマートフォンに最適化どうかを判断するAI)を導入し、モバイルフレンドリー化されたサイトが検索結果ランキングで優遇されるようになりました。
2018年3月27日には、更にモバイルファーストインデックスの開始が発表され、これにより、PCでの閲覧に重きを置いていたり、特設ページなど一部分だけその場しのぎで中途半端にスマホ対応をしているホームページでは、評価低迷による検索順位の下落影響が懸念されています。

なぜGoogleはスマートフォン重視のインデックスにしたのか？

背景には、スマートフォンからのGoogle検索利用回数が近年爆発的に増えていることが挙げられます2015年にGoogleはモバイル検索の割合が過半数を突破したと発表されました。

すでにスマートフォンから検索している人の方が多い状態で、従来のようにパソコンサイトのデータをもとに作成した検索結果を表示し続けていては、検索ユーザーのニーズと検索結果にギャップが生じ、Google自体の顧客満足度を損ねてしまいます。このような状況を踏まえ、Googleはモバイルサイトを検索結果作成の基準に据えることになったと考えられます。

参考：
Google ウェブマスター向け公式ブログ [JA] : モバイルフレンドリーアップデートを開始します
 Google ウェブマスター向け公式ブログ [JA] : モバイルファーストインデックスを開始します

3. モバイルフレンドリーなサイトか、確認しよう

ユーザーに対していくら親切な内容にしていても、Googleの検索アルゴリズムが感知できない状態では意味がありませんよね。

ここで、Googleが公式ブログで発表した以下の基準を確認しましょう。

＜Googleが提唱するモバイルフレンドリーの条件＞
・Googlebot(Googleの検索AI)によってクロール(サイト内を巡回)される状態になっているか。複雑すぎるサイト構造(ページの改装が深い、リンク遷移が紛らわしいなど）になっていないか。
・モバイルでは一般的ではないFlashなどのコンテンツを利用していないか。 *1
・モバイル画面でズームしなくても読むことができるフォントサイズになっているか。
・ユーザーが横スクロールやズームしたりする必要がないように、コンテンツのサイズと画面サイズが一致しているか。*2
・リンクの誤タップをしないように、それぞれのリンク部分が離れて配置されているか。

近年では、パソコンサイトはパソコン用のデザイン、スマートフォンサイトはスマートフォン用のデザインと、区別するのではなく、どちらでも見やすい（強いて言えばスマートフォン寄りな）デザインも増えてきています。

*1：FlashはAdobe社からサポートの終了も発表され、普及率の高いモダンブラウザ（Google Chrome、Firefox、Safariなど）も標準表示を終了しています。サポートの終了=今後セキュリティ的に危険な状態になってもアップロードがされない状態なので、 Flashコンテンツをページに残しておくことは非常に危険です。Flashで行っていた、動きのある表現は代替できるものがほとんどです。
*2：スマートフォンサイトは主に片手で使うユーザーが多いことから、横スクロールは非推奨とされています。比較表など、やむを得なず横長の表現になるデザインは、ページ全体を横スクロールさせるのではなく、一部分にインラインフレーム(ページ内の小窓）などを用いて、その中でのみ横スクロールをさせる方法などが求められます。

＜モバイルフレンドリーテストをしてみよう＞
実際にサイトがモバイルフレンドリーか否かの判断をしてみたい！という場合は、Googleのモバイルフレンドリーテストをお試しください。
下記のURLの入力欄に、サイトのURLを入れてみましょう。

参照：モバイルフレンドリーテスト – Google Search Console

分析の結果、モバイルフレンドリーができていない場合は、
該当箇所に指摘がはいるので、わかりやすいです。

ちなみに、弊社のこのサイトは、このとおり問題なく…。
web担当としてホッとしてます（笑）

いかがでしょうか。
次回更新は3月10日(月)。

「モバイルフレンドリーなサイトを制作するには？」です。

もし、モバイルフレンドリーテストで指摘が入った場合、どうしたらいいのか？を具体的にお話します！

2020年2月10日　|　スタッフ：WEBブランディング, 吉村

第2回：web 担当吉村のWEBブランディング

あけましておめでとうございます。
web担当の吉村です。

休暇明けのデスクは、各スタッフの帰省のお土産が並ぶので、
とても華やかになります。
ご褒美タイムの誘惑と戦う一日でした。

さて、今回は私もまだまだ勉強中。
そしてWEB制作でもご質問いただくことの多い、SEO対策についてです。

検索ランキングをあげたい！
SEO対策の今昔。

1. SEO対策ってそもそも何のこと？
2. 余計なことは書かない！NGなブラックハットSEO対策とは？
3. ユーザー視点で考える！ホワイトハットSEO対策をしよう

1. SEO対策ってそもそも何のこと？

SEO対策とは、検索エンジン最適化（Search Engine Optimizationの略）のことで、自身のWebサイトを上位表示させたり、より多く露出することでサイトの閲覧数をあげ、広報ツールとしての効果を向上させるための対策のことです。

YahooやBing、MSNなど、様々な検索ツールがありますが、基本的には世界で最もシェア率の高いGoogleの検索エンジンに対して有効な処置を行うことを指します。

Googleは200以上の要素からなる、独自の検索アルゴリズム（AI）を展開しており、定期的にアップデートもされる仕様に沿った方法で対策をしていくことが必要になります。

2. 余計なことは書かない！NGなブラックハットSEO対策とは？

過去に有効と言われ、隆盛していたSEO対策のなかで
「ページに関係ないけど、今話題の単語を仕込んだり、話題として組み込む」
「関連性はないけど、いろんなサイトにリンクを貼ってもらう」
「ページを増やすために自動でダミーページを作り続けるツールを導入する」
などの方法があります。

このような方法は「ブラックハットSEO」と呼ばれ、現在では有効性が見られないどころか、Googleも対抗処置のアップデートを繰り返したため、アルゴリズムがWebサイトの評価を下げ、最悪の場合そのWebサイトの検索順位が大幅に下落したり、ペナルティが課せらるようになりましたので注意が必要です。

参考：
ウェブマスター向けガイドライン（品質に関するガイドライン） – Search Console ヘルプ

3. ユーザー視点で考える！ホワイトハットSEO対策をしよう

では、どうしたら良いのでしょうか？

ユーザーの利便性を最優先にし、見やすくわかりやすく、正しいページを作ること。
更新頻度をたかめて、古い情報で止まっていないこと。

当たり前ですが、それが今のSEO対策において最も重要となります。
（ブラックハットSEOに対して、「ホワイトハットSEO」と呼ばれています。）

具体的な対策の方法は色々ありますが、簡単に数点ご紹介します。

＜ページの内容がアルゴリズムに対してわかりやすいか。＞

ユーザーに対していくら親切にしても、Googleの検索アルゴリズムが感知できない状態では意味がありません。

・ページのタイトルや、ディスクリプション文が導入されているか。
検索結果画面をみていただくと、青い大きめの文字でページ名が書いてありますよね。
ページに適切なタイトルをつけてあげることで、AIが何のためのページなのかを理解できるため、タイトルタグはとても大切です。タイトルは長すぎると省略されてしまいますので、簡潔にします。

ディスクリプション文というのはタイトルを補完する概要文のことで、Googleの検索結果画面でいうと、少し小さめな灰色の文字の部分を指します。
日本語の場合は、100字前後が適切といわれています。（2019年時点）

・文字はテキストになっているか。
画像の中に文字が入ってしまっていると、アルゴリズムが文字を認識できないず、キーワードとして拾ってもらえません。
極力は文字情報はテキストとしてページのがベストでしょう。
また、ユーザー視点においても、テキストの状態だとページ内での検索や、文章コピーがしやすいので嬉しいですよね。

複雑な形状や、デザインの観点からやむを得ず画像にする場合は、隠しテキストとして画像内の文字列をコード内に入れることもできます。

・見出しや本文に重要なキーワードを出現させる。
単調な文字列だけでは、ユーザーとしても見づらいですね。
見出しを示すタグや、太字にするタグなどを使うことで、アルゴリズムにもそれを教えます。
もちろん、むやみに見出しタグをつかうと逆効果ですので気をつけましょう。

参考：
Google ウェブマスター向け公式ブログ [JA]: 良質なサイトをより高く評価するために
 検索エンジン最適化（SEO）スターターガイド – Search Console ヘルプ

いかがでしたでしょうか。
SEO対策はゴールのないマラソンのようなものですが、真面目に続けていくことで効果がでる、まさにブランディングといえると思います。

次回更新は2月10日(月)。
「SEO対策にも◎モバイルフレンドリーなサイトにしよう」です。

2020年1月7日　|　スタッフ：WEBブランディング, 吉村

< 古い記事 |

pagetop

スタッフ

アーカイブ