HTMLやCSSについて「よく耳にするけれど、正直よく理解していない」というWEB広告担当者はいないでしょうか。WEBサイトの運営では、HTMLやCSSのコーディングはコーダーが担当するので、WEB広告担当者にこれらの知識は必要ないと考えているかもしれません。
ただ、基本を押さえておけば、効果的なサイト分析や広告運用に役立てられるでしょう。この記事では、HTMLやCSSとは何かを紹介し、知識が必要な理由などを解説します。
目次
HTMLやCSSとは
HTMLやCSSとは、WEBページをつくるための言語です。ただ、コンピューターのプログラムをつくるプログラミング言語には分類されていません。HTMLは「マークアップ言語」というWEBページの文字にタグをつけるための言語で、CSSは「スタイルシート言語」というWEBサイトの見た目にスタイルづけするための言語です。
ここでは、HTMLやCSSはそれぞれWEBサイトでどのような役割があるのかを解説します。
1.HTML
HTMLは、WEBサイトのテキストを構造化する言語です。「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」の略語で、代表的なマークアップ言語の一つです。WEBサイトをつくるうえでのマークアップとは「目印をつけること」で、コンピューターが読み取れるように、テキストなどにタグを使って情報や意味を与えます。コンピューターはタグを認識することで、各テキストを見出しや表、段落などと判断しWEBサイトを構造化するのです。
2.HTML構造
HTMLは「DOCTYPE宣言」「html要素」「head要素」「body要素」からなる構造で、この順番どおりに書いていく必要があります。まず、一番上に書くのが「DOCTYPE宣言」です。これは、ブラウザに何の言語で書いてあるテキストなのかを認識させるために必要な宣言です。先頭に宣言を入れることで、ブラウザにHTMLのバージョンや種類を把握してもらえます。次に「html要素」は、テキスト全体を示す要素です。テキストの始まりから終わりまでをhtml要素内に入れる必要があるので、head要素とbody要素も、すべてのタグはhtml要素内に書くことになります。
html要素は「<html>？</html>」と書くもので、この「？」部分にすべてのテキストを入れるのが基本です。続いて、上から「head要素」と「body要素」の順に入れます。後章で詳しく解説しますが「head要素」はWEBサイトに訪れたユーザーには見えない部分のヘッダ情報を書くためのタグ。「body要素」はWEBサイトに訪れたユーザーに見える部分の情報を書くためのタグです。このように、HTMLは基本的に4つの要素で構造されています。
3.CSS
CSSは、HTMLで構造したテキストのデザインを指定するための言語で「Cascading Style Sheets（カスケーディング スタイル シート）」の略語です。HTMLとCSSを組み合わせれば、思い通りの装飾や見栄えのWEBサイトをつくれます。例えば、WEBサイトの背景色の指定、フォントの種類やサイズの指定、コンテンツの配置の制御などです。HTMLだけでもWEBページはできますが、単調で見栄えの悪いWEBサイトになってしまいます。また、HTMLでデザインを調整できますが、コードが長くなり修正や編集などの管理が容易ではありません。
CSSでWEBサイトにおけるHTMLとの役割を分担すれば、より多くのデザインができるようになり、管理もしやすくなります。そのため、CSSはHTMLと一緒に覚えておくと便利な言語です。
4.CSSセレクタ
CSSセレクタとは、HTMLのどの部分のスタイルを変更するのかを指定するものです。CSSは「セレクタ」と「プロパティ」と「値」で構成します。セレクタで指定したHTMLの要素に、何をするのか命令するのが「プロパティ」で、どのようにするのかを命令するのが「値」です。セレクタで指定した部分の命令は「 { ？ } 」の？内に追加します。例えば「h2 { font-size:20px; } 」ならセレクタで指定したのはh2見出し、プロパティはfont-sizeなので文字の大きさを命令、値として文字の大きさを20pxとしている命令です。このように、セレクタで指定すればさまざまなHTML要素のスタイルを変更することができます。
なぜHTMLとCSSの知識が必要か？
どうしてWEB広告担当者に、HTMLとCSSの知識が必要といえるのでしょうか。WEB広告担当者は、WEBサイトの広告が効果的かを分析し、改善につなげることが求められます。HTMLとCSSの知識がなければ、分析も改善にもつなげられません。そのためには、タグを正しく設置することやマネジメントツールを設定する知識が必要です。
ここでは、広告タグの設置についての知識やGTMのトリガー設定について、それぞれの概要と重要性などを解説します。
広告タグの設置に必要な知識
WEB広告担当者にHTMLやCSSの知識があれば、広告タグの設置などに役立ちます。WEBサイトに使用する広告タグは、HTMLタグをコードに埋め込むのが一般的です。広告タグを埋め込むことで、広告の効果を測定し分析したり、機能を追加して広告を効果的なものにしたりできます。例えば、WEBサイトに訪問したユーザー情報の取得や、指定した数値などの取得が可能です。広告タグには「コンバージョン測定タグ」や「リターゲティングタグ（リタゲタグ）」などさまざまな種類があります。
「コンバージョン測定タグ」は、コンバージョンを測定するために設置するタグです。コンバージョンとは、ユーザーが商品やサービス、資料請求、会員登録など、WEBサイトの目的につながるアクションを起こすことを指します。例えば、コンバージョン率はWEBサイトに訪れたユーザーのなかから、コンバージョンにつながった割合。コンバージョン数なら、コンバージョンにつながった数を指します。また、どの広告からコンバージョンにつながったかも記録可能です。運営するWEBサイトのコンバージョンの確認は、担当者にとって重要な業務です。数字から費用対効果を分析することで、改善点も洗い出しやすくなります。
「リターゲティングタグ」は、リターゲティング広告を配信するためのタグです。リターゲティング広告とは、自サイトに再訪問したユーザーに、広告を配信することを指します。リターゲティングタグを設置することで、サイトに訪問したユーザーをマーキング可能です。マーキングにはCookieという、WEBサイトに訪れたユーザーの利用環境を記録し、再訪問時の利便性を高めるための仕組みが使用されます。記録された情報により、WEBサイトに再訪問したユーザーへ、効果的な広告を配信できます。ただ、タグを正しく設置できなければ、誤作動するケースもあります。
この場合、HTMLなどの知識がなければ、どこが間違えているかも判断できません。そのため、WEB広告担当者にはHTMLやCSSの知識が必要です。
GTMのトリガー設定に必要な知識
GTMのトリガー設定にも、HTMLやCSSの知識が必要になります。GTMとは「Googleタグマネージャー」のことで、さまざまなタグをまとめて管理できるツールです。GTMのトリガーは、それぞれのタグを配信させる条件を設定できます。例えば「特定のページだけにリターゲティングタグを配信したい」「申し込み完了ページでコンバージョンタグを配信したい」などの設定ができます。基本的にHTMLやCSSを触ることなく、URL指定だけで設定可能です。ただ、例えば「申し込みフォーム」「入力内容確認ページ」「申し込み完了ページ」のURLが同じ場合、URL指定ではすべての段階で同じタグが配信されてしまいます。
これを防ぐためには、該当するページの「HTMLのID」や「CSSセレクタ」を取得し設定しなければなりません。知識がなければ該当するIDやセレクタを探すことも難しいので、WEB広告担当者にはHTMLやCSSの知識が必要です。
押さえておくべき重要なタグ・属性
WEB広告担当者は、どのようなタグや属性を押さえておくべきなのでしょうか。タグとはテキストに意味を与えるもので、さまざまな種類があります。特に重要で押さえておくべきは「headやbodyタグ」「aタグ」などです。属性とはタグに動きや見栄えなどの補足情報を与えるもので、WEB広告担当者には「class属性」や「id属性」が重要になります。
ここでは、それぞれのタグや属性について解説しましょう。
1.head・bodyタグ
「headタグ」は、WEBサイトに訪れたユーザーには見えない部分のヘッダ情報を書くためのタグです。「<head>？</head>」と書くもので「？」部分に情報を入れていきます。ヘッダ情報とは、そのファイルがどのような意味があり言語は何なのかなど、テキストの情報をブラウザやコンピューターに認識させるものです。実際にWEBページに表示されるものではないので、head要素を入れなくてもWEBページは表示されます。しかし、ブラウザだけでなく、検索エンジンにも情報を与える重要な要素なので含めるのが一般的です。特に、文字コードを指定するメタ要素やスタイルシートを指定するリンク要素、タイトル要素などは入れておくべきでしょう。
「bodyタグ」は、WEBサイトに訪れたユーザーに見える部分の情報を書くためのタグです。「<body>？</body>」と書くもので「？」部分に情報を入れていきます。このタグに入力した見出しやテキスト、画像などが実際のWEBサイトに反映されます。例えば「<header>～</header>」でサイトロゴなどを表示、「<h2>～</h2>」で見出しを表示、「<p>～</p>」でテキスト内に段落、「<img>」で画像を入れるなどです。このように、headとbodyタグの役割を押さえておけば、HTMLでつくられたWEBサイトの構造を理解しやすくなります。
2.aタグ
aタグとは、指定した部分をハイパーリンクにするためのタグです。aタグの「a」はアンカーという意味で、aタグでリンクづけされたテキストは「アンカーテキスト」と呼ばれています。aタグを設置することで、ハイパーリンクの出発点と到達点の指定が可能です。出発点は、aタグを設置した自サイトのテキストやボタンなどで、到達点とは自サイトの他ページや別のサイトのページなどを指します。一般的に使われているaタグのhref属性では「<a href=””到達点のURL””>リンクにするテキスト</a>」で、ハイパーリンクをつくることが可能です。
例えば「<a href=””https://www.◯△◯△.jp/””>サービスの詳細はこちら</a>」とすれば、「サービスの詳細はこちら」というテキストがリンクになり、クリックすることで「https://www.◯△◯△.jp/」が開きます。
3.class属性
class属性は、複数のHTML要素をまとめて同じスタイルにできる属性です。同じスタイルにしたい要素にグループ名を命名して、そのグループすべての要素にCSSでスタイル設定できるので、複数の部分をまとめて同じスタイルにできます。例えば、ページ内の特定のテキスト「テスト」だけフォントサイズを変更するとしましょう。HTML内のすべてのテストというテキストを「<p class=”test”>テスト</p>」にします。これで、複数のテストというテキストが「test」という名のclass（グループ）になりました。
次にCSSに「.test { font-size:20px; } 」と書き込むことで、HTML内でclassを割り当てられていた複数のテストというテキストが、20pxで表示されます。このように、class属性は複数の要素をまとめて同じスタイルにできます。また、class属性は一つのページで同じCSSの内容を何度でも使用できます。例えば「.test , .sample {font-size:20px;}」として.sampleを加えれば、HTMLで.sampleに割り当てられたテキストも20pxで表示が可能です。
4.id属性
id属性はclass属性同様に、HTML要素にスタイルを与えます。ただ、class属性と異なるのは、ページ内で一つの要素にしか使えないことです。例えば、ページ内で強調したい「テスト」というテキストにid属性をもたせる場合は、HTML内の強調したいテストを「<p id=”test”>テスト</p>」、CSSに「#test { font-size:20px; } 」と書き込めば、20pxで表示されます。一つしか使えないので、同じページにない唯一の強調したい要素に使うのもポイントです。
タグやトリガーの設定例
WEB広告担当者はWEBサイトのさまざまな情報を収集し、分析することで広告をより効率的なものにすることが求められます。そのためには、情報を集めるためのツールを理解し使いこなせなければなりません。GoogleアナリティクスやFacebookPixel、Googleタグマネージャーなどのツールでは、情報集めやトリガーを使う設定が必要です。
ここでは、それぞれのツールにおける、WEB広告担当者におすすめの設定例を紹介します。
Googleアナリティクス
Googleアナリティクスは、Googleが提供するWEBサイトのアクセスなどを解析できるツールです。解析データから、集客しているページやコンバージョンにつながっているページなどを把握できるので、改善や効果的な施策を打つための参考にできます。2020年10月にリリースされた新バージョン「GA4」では、WEBサイト運営に役立つ機械学習による予測機能が実装されています。おすすめの設定は、コンバージョン設定です。設定はGA4のホーム画面からおこないます。ログイン後、左メニュー「設定」を選び「イベント」を選択、右上の「イベントを作成」をクリック。イベント作成画面の「カスタムイベント」が開くので「作成」を選択すると、設定画面が開きます。
設定画面では、任意のイベント名とデータを集計する対象の条件「パラメーター」「演算子」「値」を入れます。パラメーターは「event_name」演算子は「次と等しい」と、すでに表示されているので、値に「page_view」と入れ「条件を追加」をクリック。ここで計測したい条件を追加すれば、イベントページからデータを確認できます。
※関連記事： 【初心者向け】Googleアナリティクス（GA4）で見るべきポイントと確認方法を解説！
FacebookPixel
FacebookPixelは、Meta広告（Facebook広告）配信の最適化や広告効果の計測をするためのツールです。FacebookPixelのコードをWEBサイトに設置すれば、Meta広告（Facebook広告）経由でのコンバージョン計測やリターケティングなどが可能になります。設定は、FacebookPixelのタグを生成しWEBサイトに埋め込むだけです。ログインしたらイベントマネージャを開きます。「Facebookピクセル：ウェブサイトアクティビティをトラッキング」から「スタート」を選択。入力画面に移動するので、任意のピクセル名と設置するWEBサイトのURLを入力し「次へ」をクリックします。「ピクセルコードのインストール方法を選択」のページに移るので選択。ここでは「手動でピクセルコードをウェブサイトに追加」で進めます。タグが表示されるので、WEBサイトのHTML内「</head>タグ」の直前に設置して完了です。
Googleタグマネージャーのトリガー設定
前章で紹介したように、Googleタグマネージャーではトリガーという条件によってタグを配信させることができます。例えば、再訪問したユーザーが特定のページで一定のスクロール操作をしたときに、リターゲティングタグを配信することも可能です。ホーム画面の左メニューから「トリガー」を選択し、トリガーの新規登録画面に移動します。「トリガーのタイプを選択」で、ユーザーエンゲージメントの「スクロール距離」を選択。トリガー設定の画面が開くので「縦方向スクロール」にチェックを入れましょう。
その下にある「割合」を選び、任意のスクロール数値を入れます。例えば「50」と入力すれば、50％のスクロールがタグ配信の条件です。次に配信したいページを選びます。同じ画面から「すべてのページ」「一部のページ」を選択できます。一部のページを選んで、その下に配信条件やURLを入れて、右上の「保存」をクリックすれば特定ページでのタグ配信が可能です。他にもさまざまな条件で設定できるので、自社がWEBサイトを運営する目的に合わせて活用しましょう。
HTMLとCSSを理解して、より高度な広告運用にトライしてみよう
WEB広告担当者がHTMLやCSSの基本を押さえておけば、より効果的な広告運用ができる可能性があります。WEBサイトにおける広告の効果を確認したり、効果的な広告を配信したり、ページ内でユーザーへコンバージョンにつながる行動を促したりするには、HTMLやCSSの知識が必要です。
WEBサイトの成果を上げるためにも、HTMLやCSSの基本知識を身につけましょう。
