静岡のHP屋コラム

2020年3月5日（現地時刻）、Googleは「2020年9月までに、全サイトのデフォルト動作がモバイルファーストとなる」と発表しました。

モバイルファースト化とは：
要約すると、Google検索において主としてモバイルサイトが優先されること。

今まではデスクトップ（PC）サイトを中心にPC検索時はブラウザ検索、モバイル検索時はモバイルフレンドリー補正でSEOの順位が変動されていましたが、これからはデスクトップ検索時でもモバイル検索基準の順位で表示されることになります。Googleのモバイルファースト化は以前から騒がれていましたが、本当にホームページ（以下、HP）のモバイル対応が迫られてきました。まだモバイル対応されていないHPは、検索順位が下がる可能性が今まで以上に大きくなりそうです。

モバイル対応をする場合、デスクトップ版とモバイル版で異なるURLを用いたサイトもまだ多いですが、Googleはこの方法は使用しないように推奨している点も見逃せません。これからHPを制作する場合、またはHPのリニューアルを検討されている方は「レスポンシブウェブデザイン」をお勧めします！

Wikipediaより：
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。

なお、下記URLよりHPがモバイルフレンドリーに適応しているか調べることができます。お試ししてみては如何でしょうか。

https://search.google.com/test/mobile-friendly?hl=ja

現在は「～をしたい」と思った時、手元にあるスマートフォンですぐに調べる人がほとんどでしょう。

数年前までは、ネットで何か調べようと思いついても、パソコンのある場所に行き、電源をつけ、YahooやGoogleなどの検索エンジンを開いて目的のワードで検索する、といった何段階かの行動が必要でした。

さらに遡れば、何か知りたいことがあれば詳しい人に聞き、行きたい旅行先があれば雑誌や旅行代理店に来店し、欲しい家電があれば量販店を回って情報収集や比較をしていた時代もありました。

こうした行動の変化は、購買プロセスに大きな影響を与えています。
Googleはこの新しい変化に対して「マイクロモーメント」という概念を提唱しています。

「マイクロモーメント」とは、人が「～をしたい」と思い付いた瞬間のことを意味します。

私たちが日々生活している中で、調べたい、欲しい、行きたいと感じる場面がたくさんあります。

数年前と違い、「まずスマホで検索」が当たり前になった現在、通勤時間や待ち時間などのスキマ時間を使って、すぐに行動を起こすことができるようになりました。検索して、比較して、検討する、といったステップが、今やスマートフォン一台あればすぐに済んでしまいます。

「何かを欲しい」と思ってから実際に購入するまでの時間が短くなった今、この「～したい」を逃さず、検索している人が何を求めているのかを見極め、的確な情報をお届けすることが、ホームページ活用で重要なポイントとなります。

Googleはマイクロモーメントの中でも、特に重要だと考える瞬間を4つ、挙げています。

１．Do（やりたい）

検索したユーザーには何かやりたいあって、それを実現するための手段・方法を探す瞬間です。

例えば「ダイエット　ストレッチ」で検索した場合。

このワードで検索する人は、何を求めているでしょうか。
この言葉の組み合わせで検索する人は、こんな人が当てはまりそうですね。

　・痩せたい！ストレッチがいいって聞いた！
・テレビで痩せるストレッチ特集を見た！気になる！

「ダイエット特化のストレッチ専門店がオープンした噂を聞いた！」なんていう人は、「ダイエット　ストレッチ　（地域名）」で検索する可能性が高い、といった推測もできそうです。

また、この「やりたい」のモーメントでは、検索ユーザーが「情報を受け入れやすい状態」と考えられるため、何かアクションをしてもらうには絶好のチャンスになるともいえるでしょう。

ちなみに、実際にGoogle検索した結果には、通常の検索結果（すべて）の次のタブに「動画」タブが表示されています。多くの検索ユーザーの「やりたい」を解決するには、文字で書き綴るよりも、動画や画像の方が一般的には伝わりやすい、ということなのかもしれません。

２．Know（知りたい）

検索ユーザーが、目的のために何らかの情報を調べる、知識を得ようとする瞬間です。

例えば「ヒラメ　カレイ　違い」で検索した場合。
こういった検索ワードは、ほとんどが単純に答えを知りたい、という意図であると推測できます。

実際にこのワードで検索した結果には、検索結果の一番上に明確な答えであろうコンテンツが抽出して表示されます。画像付きで解説している内容を表示してくれている場合も多いので、わかりやすいですね。

コンサルタントや士業の方など、何かを教えたり、専門的な作業を代行したりするサービスのホームページであれば、この「知りたい」がビジネスに直結する可能性は大きいと考えられます。

３．Go（行きたい）

検索ユーザーが、「行きたい場所」を探している瞬間です。
この瞬間は例えば下記のようなワードで検索した場合に該当します。

・お店の名前等の固有名詞
・「近くのラーメン屋」
・「沼津　居酒屋」
・「伊豆　観光」

実際にGoogle検索した結果には、通常の検索結果（すべて）の次のタブに「地図」タブが表示されています。

特に近年増えてきたのが、「近くの〇〇」。
位置情報を使って手軽に周辺の店舗や施設を探せるようになったのは大きな変化といえるでしょう。

４．Buy（買いたい）

検索ユーザーが、「何かを買おうとしている」瞬間です。
仮に買いたいものが家電であった場合、どのメーカーのものを買うか、どういった機能が付いたものを買うか、と比較検討している段階にあたります。

・「冷蔵庫　通販」
・「電子レンジ　値段」
・「炊飯器　おすすめ」

また、最近はスマホやタブレット等を使って、店頭で価格や製品情報を確認する人が増え、中にはその場でオンライン注文を行う人も出てきました。簡単な説明は以下の記事からご覧ください。

実際にGoogle検索した結果には、通常の検索結果（すべて）の次のタブに「ショッピング」タブが表示されています。こういったワードで検索するユーザーには商品レビューや口コミといった、第３者からの評価を重要視する傾向にあるといわれています。

日本でのスマートフォン普及率の高さを考えると、このマイクロモーメントという観点からマーケティングを考えることは、今後必須となることが予想されます。

マイクロモーメントをビジネスに活かすには、検索している人が「どういった意図で」検索しているのかを見極め、それに対して適切なアクションを起こす必要があります。

スマホ時代の今、マイクロモーメントが発生するタイミングを確実に捉え、ホームページを見ている人にとって"ハマるコンテンツ"づくりを目指しましょう！

ホームページ（以下、HP）を持たれている企業の割合はすでに90%を越え、またインターネットを使用する企業の割合は、ほぼ100%に近くなっているそうです。数十年前までは想像もしていませんでしたが…、今この瞬間もWEBの進歩が止まりません。
WEBを使って広告を出稿したり、WEB通販で商品を販売したりと展開方法は多岐にわたります。
そのような環境の中で、現在注目されているのが…HPの状況を把握し、運用をし、売上をアップさせるための『WEB解析』です。

WEB解析の話にはいる前に、そもそも「HPは本当に必要なのだろうか？」と考えたことをある人も多くいらっしゃるのではないでしょうか。チラシを出している・CMを流している・DMを発送している…等、多くの広告を出しているのに、なぜHPが必要なのか。現在の消費者（エンドユーザー）は、自分の知りたい情報を自分から能動的に調べて得るからなのです。
それは広告を見た際も同じで、直接来店をする前に、HPを能動的に見に・調べに行くのです。また企業側もそのような人たちに対して、信頼感を得る場所として、また自社の宣伝や広告ツールとして情報発信のできる場所として重要性が高いのです。

WEB解析で分かることは多々あるのですが、その中でも重要性が高いのは「ユーザー情報（性別・年齢・地域・関心）」「HPのどのページが見られているか」「どこのサイトから訪問したか」「最後に見たページ」「CV（コンバージョン）の数値　※最終的な結果」が挙げられます。
このような情報を活用すれば、例えば「静岡県の20代女性」が「どこのサイトから来たか」などクロスで解析することができます。また「問い合せ件数」をCVにした際に、静岡県の20代女性が訪問数に対してどれだけの割合がいるかなどの詳しい解析も可能なのです。
このように想像ではなく、実際の数値で客観的にデータを集め、WEBサイトの修正・改善、広告展開の指標としても活用できるのです。またPCで見ているか・スマホで見ているかの数値は今後のHP修正・リニューアルに必須の情報になってきますね。

HPの解析を行うためには、解析サービスを使う必要がります。
サービスやソフトは多々ありますが、主力とされているのは、グーグルアナリティクスです。
このサービスの良い点は…
①無料！②高性能！③メジャーの三拍子そろっているところです。
特にメジャーであることは非常に重要で、関連書籍はもちろん、使い方セミナーなども多数行われている、さらには外部に解析を委ねる場合も多くはGoogle analyticsのデータを元にして解析を行っていることです。
HPを作った際にサービスでついてくる解析サービスは簡単に利用・簡単に把握できるものも多いですが、さらに一歩前進するときに使えるグーグルアナリティクスは導入することをオススメします！

サイトをコーディングしていく際、z方向に何層か重なっていて見え方の順序とクリックの順序を変えたい場合ってありませんか？要素Aと要素Bが重なっていているときに見え方としては上からA→Bの順だけど、クリックした場合はB要素をクリックさせたい、というよう場合です。

具体的には下記のようなデザインの時ですね。見え方としてはボタニカル柄が前面にあるけど、クリックした場合は後ろのスライダーをクリックさせたいような場合です。

※下記例ではスライダー画像にはページトップへのリンクが付いており、前面に配置されているボタニカル柄の画像にはリンクが設定されていません。

そんな時はこのCSSでお手軽に実現できます。

このCSSプロパティを前面の要素(上記の例でいえばボタニカル柄の要素)に使うことでその要素のクリック・タッチを無効にして後ろの要素をクリック・タッチさせることが可能となります。

このCSSプロパティを知らなかったときは、後ろの要素をクリックさせるためだけにjsを組んだりとややこしいことをしていましたのでこのCSSプロパティを知ったときは目からうろこでした。

IE10以下は未対応のため、古いブラウザをサポートしなければならない場合は使うことができませんがそうでない場合は非常に役に立つCSSプロパティです。

以下の2つは両方とも画像の上に文章が重なっており、文章にはそれぞれリンクが設定してあります。1つ目は「pointer-events: none;」が設定してあり、2つ目は設定していません。

実際に文章にカーソルを合わせると違いが分かりやすいと思います。

このCSSプロパティは要素が重なったとき以外にも、

• 右クリックによる画像保存を防ぐこと
• PC版の電話番号のリンクを無効化すること

などに応用することができます。

特にレスポンシブWEBデザインを使用している場合、電話のリンクをPC版だけ無効にするのはユーザーエクスペリエンスの観点からもおすすめですのでぜひ試してみてください。

実際にやる場合はcssに以下を記載すれば実現できます。
※メディアクエリのブレイクポイントはサイトに応じて適宜変更してください。

注意点としてクリックやタッチは無効になりますが、キー操作は無効になりません。

具体的な例を挙げるとTabキーでフォーカス合わせてEnterキーを押下するとリンクなどが動作してしまいます。最初のスライダーの例などでは関係ありませんが、使う場合はこちらも頭に入れておいたほうがよいでしょう。

また、単純にその要素を触らせたくない場合は
「tabindex="-1"」
「-webkit-touch-callout: none;」
「user-select: none;」(実際に使う場合はベンダープレフィックスが必要)
などと併用するといいのかもしれません。

話はそれましたが、要素が重なっているときのクリックを制御したい場合には「pointer-events: none;」がおすすめですので是非使ってみてください。

最近、既存のお客様、新規のお客様問わず、リクルートページ（採用ページ）を作りたいと言った依頼が多いです。人材不足がどの企業も課題になっていて、求人広告を出してもなかなか応募がないなんて声も聴くことがあります。

ホームページにリクルートページ（採用ページ）を作っていれば、応募が欲しいときに表示、応募がないときは非表示なんてこともできますし、会社の事を知ってもらうためにも非常に有効な手段となりますね。

では、リクルートページ（採用ページ）はどんなところ気をつけて行けばよいでしょうか。

１　情報への明確な誘導

自分のほしい情報がどれだけ早く手に入るか。閲覧者はみんなせっかちです。トップぺージからリクルート（採用）の内容が想像しやすいようにバナー画像を用いたり、どのページからでも重要なページへ一回の画面遷移で移動できたりすることで、”ほしい情報を探し回る”というストレスを開放できます。ストレスのない導線で情報へと導く親切なサイト設計が採用サイトにはとても重要です

２　企業のメッセージを体感させるシナリオ

企業のメッセージを伝えること。印象的なキャッチコピーや社内の風景を見せるサイトデザインなどで印象作りをすることも大切ですが、企業の個性をきちんと伝え、体感させることが重要です。

仕事を通じて世間の役に立ちたいと言う思いは、応募者にも少なからずある意識です。自分たちの仕事がどのように世の中に役にたっているか目に見えるとよりモチベーションも高まります。

３　”自分ごと”にさせるコンテンツ

最も重要なポイントは身近でイメージしやすいコンテンツをつくることです。採用サイトは応募者にとって自分の将来を決める重要な判断材料なので、いかに具体的に自分の将来を描けるかということを重要視しています。採用のフローが丁寧に示されていたり、入社後の仕事内容（タイムスケジュール）がや先輩社員の声が掲示されていたり、入社後にどんなメリットがあるかが提示されていたりすると、そのコンテンツはただの採用情報ではなく、入社後のイメージがしやすく“自分ごと”になってきます。

４　社長や従業員（先輩）の顔を出す

リクルートページ（採用ページ）には社長や従業員（先輩）社員の”顔”すなわち写真を出していきましょう。応募者から見ると、入社したら社長や従業員（先輩）社員と長く付き合っていくことになります。何も掲載されてないとか、写真素材（このブログに使ってるようなやつ（笑）。たまには外国人モデルさんを使ってるなんてことも）だとかだと、どんな人が働いているのか不安を感じることでしょう。

先輩社員の声や座談会などの従業員の皆様にも協力してもらうコンテンツを設け、会社の温かい雰囲気、堅実な仕事ぶり、人間関係の良さなど企業の良いところを、写真を交えながら伝えていきましょう。会社全体で新入社員を受け入れやすい環境を作りましょう。

焼津市にある地域密着型の家電量販店のコスモスベリーズ焼津店さん。SNSの活用とホームページの連動で、お客様が増えていると嬉しいご報告がありました。

コスモスベリーズグループ内でも、焼津店さんの活躍が目に留まり、9月12日に県内外から多くの方が視察にいらっしゃいました。弊社も報告会で少々お時間を頂き、皆様の前で焼津店さんのホームページリニューアルのポイントと運用方法についてお話しさせていただきました。

お客様の成功事例は、弊社としてもとてもうれしく、このような場にご一緒させていただけるという貴重な体験をさせていただきました。大倉様ありがとうございます。

１　家電量販店なのに商品を載せていない

家電量販店なので、本来ならば商品を掲載したいところですが、いざネットの世界になると比較サイトやショッピングサイトなど、安く商品を販売しているところもあります。価格勝負では勝てない部分もありますので、地域密着店だから出来ること。これらをホームページに掲載することにしました。

エアコンの設置、家電の修理などコスモスベリーズ焼津店さんの強みを紹介することで、お客様がコスモスベリーズ焼津店さんで購入した後の体験を想像できます。

２　従業員の顔が見えるサイトへ

地域密着店という事で、お客様との距離感はより密になります。そこで従業員様の個人の紹介ページを作成し、ホームページの随所で従業員様に登場していただきました。人の顔が見えるホームページは、見えないホームページより親近感も湧きますし、お問い合わせや仕事のご依頼など頼みやすい環境を作り出すことができます。

３　スマートフォン対応

やはり今の時代スマホ対応は必須です。家電を購入する層を考えた場合、検索はほぼスマートフォンで行います。スマートフォンでもきちんと検索され、ストレスなく閲覧出きる環境を整備しました。コスモスベリーズ焼津店さんはLINEやFacebookなどのSNSでの情報発信にも力を入れています。その情報をキャッチした後に、どんな店舗なのかをそのままスマートフォンでホームページを見たり、電話で問い合わせをしたりとスマートフォン対応した効果が現れています。

検索エンジンからの集客が出来るようになっている。

約7割が検索エンジンからで、滞在時間も長い結果が出ています。「焼津市　洗濯機修理」「エアコン　和室　取付け」「焼津　エアコン取付」「アンテナ工事　焼津市」「静岡　家電量販店」などロングテールのワードで検索エンジンで1位を獲得しており、「コスモスベリーズ焼津店」を知らない具体的にお困りごとがあって解決したいと言ったお客様からのアクセスを獲得出来ています。

SNSをフル活用

LINE@やFacebook、ブログなど今の時流に合ったSNSを上手に活用されています。Facebookでは動画の配信などを頻繁に行っており、楽しいお店の雰囲気が閲覧者に伝わっています。また、実際にお店で売っている商品を使った料理教室などのイベントを開催しており、地域の主婦の方に体験してもらっています。その集客もSNSから行っております。商品を見るだけでなく、実際に使って体験できると、お客様はより購入がしやすくなります。

こまめに情報を発信する仕組み

大倉様はじめコスモスベリーズ焼津店の社員さんがチームにとなって、情報を発信する姿勢が大変素晴らしいと思っています。情報を発信する人が限られていますが、現場でお客様に褒められたことなど従業員の皆様がブログのネタを提供してくれるそうです。

そしてなにより、SNSをはじめ新しいことにチャレンジし、楽しんで取り組んでいる様子が「コスモスベリーズ焼津店に行ってみないなー、楽しそうだなー」とお客様に伝わっていると思います。