1年目デザイナーが学んだ 業務の中で活かせるWebマーケティング基礎知識
こんにちは、株式会社basicでデザイナーを始めてもうすぐ8ヶ月になる新卒社員のtsujiです。
様々なWebメディアを運営する弊社では、デザイナーであっても、マーケティング知識が求められる機会が度々あります。
そこで今回は、自分が業務を行う上で調べた、Webマーケティング基礎知識についてまとめてみました。
私と同じように、デザイナーとしてWebに関わりはじめたばかりだけれど、なにに気をつけたほうがいいか分からない方などの参考になれば幸いです。
この記事を読んでわかること
・2017年度のSEOに関する知識が分かる
・SEOに適したサイト製作の仕方がわかる
・数値改善の手立てがわかる
SEOについて知るなら、Google公式の最新情報を追うこと
SEO (検索エンジン最適化) は、言葉通りGoogle・Yahoo JAPAN!などの検索エンジンの検索結果で表示されるために欠かせません。
Googleの検索結果表示に関するアルゴリズムは日々アップデートされるため、Google公式の最新情報には常に目を配るようにしましょう。
二つ目のウェブマスター向け公式ブログでは、Google公式発表に関する報告や、SEOに関わる役立つ情報を追うことができるので、feedlyなどのRSSに登録しておくといいかもしれません。
ちなみになぜYahoo JAPAN!の検索結果にもGoogle検索アルゴリズムが関係するのかというと、Yahoo JAPAN!の検索に、Googleのアルゴリズムが使用されているためです。
Yahoo! JAPAN のより良い検索と広告サービスのために
今年話題となった、MFI・医療・健康に関する検索結果の改善についても紹介します。
▼MFI (モバイルファーストインデックス)
今までPC向けのコンテンツを読み込んで、ユーザーとの関係性を評価していたGoogleが、モバイル版で表示されるコンテンツを重視して評価するように検索アルゴリズムを変更しはじめました。この検索アルゴリズムの仕様変更をMFIと言います。
2016年からMFI自体は発表されていましたが、今年ごく一部のサイトに対して導入が開始されまるようになりました。今後もGoogleはモバイル ファースト インデックスに対応しているかどうかをサイトごとに評価し、準備が整ったサイトから移行していく予定だと発表しています。
モバイル ファースト インデックスに向けてサイトを準備するためのヒント
この仕様変更に伴って抑えておきたいことは以下です。
・モバイル版のサイトでも、コンテンツを減らさず、PC版と同様に高品質で重要なコンテンツを揃えるようにする。
・テキスト、画像（alt 属性を設定）、動画などを、通常のクロールやインデックス登録が可能な形式にする
・タイトル、メタ ディスクリプションなどは、モバイル版と PC 版の両方のサイトの全ページで同じ内容に揃える。( ただし、レスポンシブ ウェブ デザインを採用しているサイトや動的な配信を行っているサイトは関係ない )
▼医療・健康に関する検索結果の改善について
2017年12月6日 Googleが発表した、日本語検索におけるWebページの評価方法のアップデートです。
医療従事者や専門家、医療機関等から提供されるような、信頼性が高い情報が上位に表示されやすくなりました。
医療・健康だけに限らずこのような検索評価についてのアップデートは行われるとのことなので、扱うコンテンツの質についても注意したいところです。
また公式ブログでは、専門用語ばかりでなく普段ユーザーが使用するような言葉を使用することを推奨しています。コンテンツ内で使用する言葉についても、日頃どんな言葉で検索されているのか、goodkeywordなどで調べてみるなどするといいでしょう。
デザイナーにもできるSEO対策
デザイナーの業務領域は広がり、デザイナーがコーディングまで一貫して行うようなケースも増えてきました。Webサイトのソースコードも、SEOの評価に関わる要素の一つです。
Webサイトは、Googleの検索エンジンロボット(以下クローラー)がページを読み取って評価を行っていくため、クローラーにとっても読み取りやすいコードを書くことが求められます。
見た目を正確に再現するだけでなく、SEO的に評価されるマークアップにも気をつけたいところです。
▼HTML5を正しく使ってマークアップする
titleの指定
titelタグを設定しましょう。検索結果に表示される、タイトル部分を指定するために使用します。検索結果に正しく表示してもらうためにも、30~28文字以内に文字数を抑えるのが良いとされています。
descripitonの設定
ディスクリプションを設定し、説明文が表示されるようにしましょう。検索結果に表示される最大の文字数が124文字とされているため、説明文は、80文字~120文字ほどを目安にすると良いと言われています。
見出しタグを適切に使用する
見出しタグには、h1からh2,h3と順番に使用するルールがあります。h1の次に、h3を使用したり、h1が存在しないのにh2を使用することはできません。
詳しくはMDNのページを確認してみるのが良いでしょう。
HTML5タグの正しいセクショニングを設定する
セクショニングとは、文書構造を定義することを言います。
Webページのheaderに該当する部分には<header>を、mainコンテンツに該当する部分には<main>を、footerに該当する部分には<footer>と使い分けをしましょう。
正しくマークアップすることで、検索エンジンにも正しく文章構造を伝えることができます。
上記以外のnav, section, article, aside要素についてもMDNのページを一度確認しておくと良いでしょう。
▼重複コンテンツに気をつける
サイトの評価を正しく反映させるためにも、サイト内のコンテンツが重複しないように対策しておく必要があります。
例えば、下記URLは、全て同じURLを表示しますが、googleが正しくこれらを同じものだと認識できているかというと、完璧ではないようです。
http://www.helloworld.jp/
http://helloworld.jp/
http://www.helloworld.jp/index.html
それぞれが別のページと認識されてしまうと、行った変更が正しく反映されなかったり、サイトに対する被リンクが分散してしまう、といったことが懸念されます。
これを防ぐには3つの方法があります。
1. 301リダイレクト
リダイレクトの設定を行い、他のアドレスへ飛んでも、リダイレクト先に定めたページしか読み込ませないようにする方法です。詳しい設定方法はエンジニアに聞いてみましょう。
2. link rel=“canonical”の設定
head内にlink rel=“canonical”を設定することで、GoogleにこのURLで表示するページが基準であると伝えることができます。PCページとSPページでURLが分かれている場合などに使用します。
3. noindexの設定
クローラーに、該当ページをインデックスさせないようにする方法です。
noindexが指定されたページは、検索結果に表示されなくなります。
noindexの指定方法は以下の2通りです。
・robots.txt というクローラーの動きを制御するファイルを作り、その中で該当URLを指定する
User-Agent: *
Noindex: /hellowold.jp/
・<meta name=”robots” content=”noindex”>を用いて、該当ページのheadに指定してnoindexを設定する
A/Bテストなどで、同じコンテンツでも表示だけ変えたい場合は、Bにnoindexを指定するなど、重複コンテンツとみなされないようにするのが良いでしょう。
▼Webページの変更をGoogleに知らせる
上記のSEO対策を実行したら、その変更を正しくgoogleへ伝えます。
Googleが提供している無料のWebサービス、Google Search Console を使用すると、クローラーの自動インデックスを待つことなく、最新のWebページの状態をGoogleに伝えることができます。
また、リンク設定やWebサイトにエラーが残っていないかどうか、サイト全体のパフォーマンスについても確認するときにも役立ちます。登録がまだの場合は、早急に登録してしましょう。
Webページの変更をGoogleに伝える具体的な手順については以下の通りです。
1. google search consoleにログイン
登録しているサイトの中から、更新したいWebサイトを選択します。
2. fetch as googleを選ぶ
左カラムのクロールに隠れている、fetch as googleを選択し、fetch as googleの画面へ移動します。
3. Googleに送信したいURLを記入、取得をクリック
モバイル用の検索システムと、PC用の検索システムどちらかを選んで、取得をクリックします。
4. インデックスに送信をクリック
画面内に、指定したページのURLが表示されたら、ステータスにあるインデックスに送信をクリックします。その後出てくるモーダルついては、以下を参考にしてください。
・このURLのみをクロールする
選択したURLのみをリクエストします。月に500件までリクエストが可能です。
・このURLと直接リンクをクロールする
選択したURLからリンクされているページもクロールしてほしい場合はこちらを選びます。月に10件までリクエスト可能です。
サイトのパフォーマンスを測るならGoogle Analytics
最後に、数字的根拠をもとにデザインを行っていくために必要なGoogle Analyticsの利用方法について紹介します。
▼Google Analytics
Google Analyticsは Googleが提供する無料のアクセス解析ツールです。
Googleアカウントがあれば、Google Analyticsに登録し、トラッキングコードと呼ばれるスクリプトをコピーしてサイトのWebページに貼り付けるだけで利用することができます。
製作に関わったWebサイトやLPがどれだけビジネスに寄与できているか、できていないか、できていないのであれば、どこに問題があるか、Webページのパフォーマンスを測るのに非常に役立つツールです。
具体的な操作などはこちらの記事が参考になるのでここでは割愛します。
Googleアナリティクスの登録と設定方法
▼サイト改善に欠かせない指標一覧
Google Analyticsから把握できる数値の中で、サイト改善・効果測定する際に使われる&よく混同してしまいがちな数値をまとめてみました。
・PV数とセッション数
どちらも、Webサイトがどれぐらいの人に閲覧されているか測るための指標です。
PV(ページ・ビュー)数が、ウェブサイトに訪れたユーザーが見たページ数をカウントしていくのに対して、セッション数はユーザーがウェブサイトに訪れた回数をカウントしていきます。
PV数は、画面リロードやブラウザバックで戻った場合でもカウントが増えてしまいますが、セッションはある一定の間が空かない限りは、ページを移動してもカウントは変わりません。
どちらも、サイト訪問者数と比較することで、一人あたりのユーザーがどのくらいページを閲覧してくれているのか、何度利用してくれているのか、あたりをつけることができます。
また、サイト内のページ別PV数を追うことでユーザーに対して、どのページが人気があるのか、無いのか、把握する場合にも役立ちます。
・離脱率と直帰率
1ページ単位で、訪れたユーザーがどのくらい離脱したかの割合を示すのが離脱率で、他のページヘ移動すること無く、サイトへ入ってきてすぐに離脱してしまった割合が直帰率です。
直帰率が高い場合は、ユーザーが求めているコンテンツと実際に表示しているコンテンツに乖離がないか、見直してみることが検討されます。
逆に離脱率を見る場合は、調べるページがどんなページなのかも合わせて考える必要があります。例えば、お問い合わせページの中で２ページ目だけやけに離脱率が非常に高いとしたら、2ページ目の入力欄に改善する余地があるかもしれません。
・CV / CVR
特定の目標を達成した数がCVで、目標達成した割合を示す数値がCVRです。
母数に設定した数字を元に、行っている施策のパフォーマンスがどんな状態にあるのか知る目安になります。
▼リンククリックを測る パラメータの付与
記事コンテンツやLPの中で、同じ遷移先へのリンクが複数がある場合、なにを見て心が動いてユーザーが移動したのか、判別するのが難しい場合があります。そのような場合に、やっておきたい設定です。
・自力でパラメータを付与する
http://www.hogehoge というページへリンクする導線があったときに、?hoge=piyoを足して、http://www.hogehoge?hoge=piyo としても同じページを表示することができます。
Google Analitycs上では、別のURLとしてデータを確認することができるので、好きに自分のパラメータを付与して計測することができるというわけです。
パラメータ付与の記述ルールは以下です。
先頭は?でつなぐ
以降、パラメーターをいくつもつなぐときは&を使う（?は2つあってはいけない）
パラメーター自体に&や?が含まれるときは、エンコードしたものを後で置換する
注意点
URLにパラメータを付与すると、パラメータを振っていないURLと、振ったURLで重複コンテンツと見なされる可能性があります。
不用意にサイト評価を下げないよう、基準になるページにcanonicalの設定を行うようにしましょう。
・イベントトラッキングを利用する
イベントトラッキング機能を使用することで、計測を行うための準備をいっぺんに行うことも可能です。
イベントトラッキング機能とは、ページの閲覧以外のユーザーの行動を計測するための機能で、googleタグマネージャーから設定することもできます。
詳しい設定方法は下記を参考にしてみてください。
外部リンクへのクリックをGoogleタグマネージャーを利用してアナリティクスで計測する方法
参考：
沈黙のWebマーケティング −Webマーケッター ボーンの逆襲−
ありがとうございます！ twitterでもマイペースに活動中です。https://twitter.com/mmaki_algiz