「君はHTMLもわからないのか？」と言われたマーケターへ｜共通言語を持たないリスクに気付くこと

「HTMLはエンジニアやコーダーが扱うもので、マーケターには関係ない」と思っていないでしょうか？

私はWebの仕事を始めた当初から、HTMLの基礎はマーケターにも必要だと考えてきました。前職で「GA（Googleアナリティクス）のタグはちゃんと埋まっているのに計測できない」と騒ぐディレクターを見たとき、それが確信に変わりました。ソースコードを開いてみると、GAのトラッキングコードが「<!– –>」でコメントアウト（エスケープ）されていただけ、だったからです。

上記が何を言っているのかわからない方は、本記事の内容を真剣に受け止めていただきたいです。

私はHTMLを、Webで仕事をする人の共通言語だと考えています。共通言語を持たないまま現場に立つと、計測タグがエスケープされていても気づけず、CTAボタンに計測しやすいid付与を依頼することもできず、AI（ChatGPTやGemini）が書いたコードを読めずにそのまま貼って「動かない…」と悩み続けることになります。

冒頭のディレクターのように、何日もかけて的外れな仮説で時間を溶かす羽目になるのです。

ただし「読める」状態に到達するには、暗記ではなく一度はコードを自分で書いて覚えるフェーズが必要です。字幕付きの映画を観るだけでは英語が身につかないのと同じで、HTMLも眺めているだけでは読めるようにはなりません。最初は、ある程度の苦労が伴います。逆に言うと、その壁さえ越えれば、その後のWebマーケ実務における「読めない」由来のストレスはほぼ消えます。

本記事では、HTMLがわからないことで起きる日常的なトラブルと、マーケターが学ぶべきHTMLのレベル感、学習方法について解説します。「君はHTMLもわからないのか？」と言われたことがあるマーケター、ディレクターの方は、ぜひヒントとしてご活用ください。

この記事を読むとわかること

• HTMLを読めないマーケターが現場で巻き込まれる3つの実務トラブル
• マーケターに必要なHTMLレベル：「書ける」ではなく「読める」
• 最低限おさえておきたい3つの観点（タグ構造／id・class・data属性／コメントアウト）
• HTMLを「読める」状態に到達するための学習ロードマップ

この記事の著者

ボーダーヘイズ・ジャパン代表
/ ウェブ解析士 / Udemy講師

上場企業のインハウスマーケターとして営業リード・採用獲得のWeb戦略に従事したのち独立。「Webマーケティングの民主化」をミッションに、中小企業への計測環境構築やAI活用支援を行う。Udemyでは受講生8,000名超、ベストセラーコース多数。

プロフィールを見る

マーケターがHTMLを読めないと起きる3つの実務トラブル

まずは、私が現場で見てきた「HTMLがわからないこと」に由来するトラブルを3つ紹介します。すべて「HTMLを読めれば防げた」事例です。

トラブル1：GAタグがエスケープされていても気づけない

冒頭でも触れた、前職での実話を少し詳しく書きます。

隣の席のディレクターが「GAのタグはちゃんと埋まっているのに計測できない」と数日にわたって騒いでいたので、私がソースコードを確認したところ、GAのタグ全体が「<!– –>」でコメントアウトされていました。HTMLにおいて「<!– –>」で囲まれた部分はブラウザに無視される、つまり「実行されない」状態になります。

参考：HTMLのコメント – MDN

HTMLをほんの少しでも齧っていれば、ソースを開いた瞬間に気づける話です。共通言語を持たないディレクターには「タグはあるのに動かない」という不可解な現象にしか見えず、「制作会社側の実装不備では？」「Googleアナリティクスの仕様変更では？」と的外れな仮説で時間を溶かしていました。

これは特殊な例ではありません。通常、Web制作会社にサイト制作を依頼した場合、Googleアナリティクスなどの計測タグはエスケープすることはよくあります。テスト環境における関係者のトラフィックをノイズとして記録しないためです。

前述の事例では、それを伝えてこなかった制作会社にも問題はありますが、HTMLを理解していれば受取側でも防げた話です。

トラブル2：CTAボタンに計測しやすいid属性を依頼できない

CTA（Call To Action：ユーザーに行動を促すボタンやリンク）のクリック数を計測したいとき、HTMLのid属性やdata属性が付いていると計測タグの設定が圧倒的に楽になります。逆に言うと、これらが付いていないと、CSSセレクタを駆使して回りくどい指定をすることになり、サイトの構造変更で簡単に壊れる脆い計測になりがちです。

HTMLを理解していないディレクターは「id属性をボタンに付けてください」という依頼自体を出せません。「id属性って何？」「class属性とは違うの？」というレベルで止まってしまう（というか発想自体が出てこない）のです。結果として、デザイナーやコーダーが命名規則を無視した適当なクラス名を付けてしまい、後から計測タグを設定する段階で苦労します。

以下の記事で解説しているようなGTM経由でのクリック計測では、HTMLを少し読めるだけで、後々の作業効率が変わります。

トラブル3：AIが書いたコードを読めずに「動かない」で止まる

近年、ChatGPTやGeminiにJavaScriptやHTMLを書かせる機会が増えました。私もよく使います。

AIは便利ですが、出力されたコードがそのまま動くとは限りません。微妙な変数名のずれ、属性の打ち間違い、想定と違う構造を仮定したコードなど、人間が確認すべき部分が必ず残ります。

HTMLを読めないマーケターは、ここで詰まってしまいます。AIに「動きません」と返しても、どこが問題なのかを伝えられないため、AIも的外れな修正を返してきます。コードを読める力は、AI時代だからこそ必要性が上がっていると言えます。

GTMのカスタムJavaScript変数のように、HTMLとJavaScriptの両方が絡む計測実装では、この差はもっと大きくなります。

マーケターに必要なHTMLレベルは「書ける」ではなく「読める」

前章で紹介した3つのトラブルに共通するのは、「HTMLを読めれば防げた」という点です。逆に言うと、コーダーレベルで自分で書ける必要はありません。ここでは、両極端な主張への違和感と、その間にある現実解について書いておきます。

「マーケターも自分でコーディングできるべき」への違和感

「マーケターもHTMLが書けるようになって、自分でタグを直せるようになるべき」という発信を見かけることがあります。一見すると合理的に聞こえますが、私はこの主張には賛同できません。

理由はシンプルで、コーダーやデザイナーには、それぞれの意図や設計思想があるからです。素人同然のマーケターが勝手にHTMLやCSSを書き換えれば、レイアウトが崩れたり、CSSの命名規則が壊れたり、レスポンシブ対応が崩壊したりします。プロからすれば「なぜ勝手に触るのか」と怒られても仕方がありません。

書き換える権限があるなら、書き換える責任も負う必要があります。マーケターが負える責任の範囲を超えた領域に踏み込むのは、組織の生産性を下げる選択です。

「HTMLはエンジニアの領域だから不要」への違和感

逆に「HTMLはエンジニアの領域だから、マーケターには不要」という割り切りも、私には違和感があります。

トラブル1で書いたように、HTMLを読めないと「なぜ計測できないのか」を切り分けることすらできません。問題の所在をエンジニアに伝えることもできず、「とにかく直してください」という曖昧な依頼を投げて、相手の時間と自分の時間の両方を浪費することになります。

Webマーケティングは、Webサイトという媒体の上で成立しています。Webサイトを構成しているのはHTMLです。「Webサイトの言葉を一切わからない人」が、Webマーケティングを設計するというのは、本来は不自然な状態なのです。

現実解：他人のコードを読んで意図を把握できるレベル

両極端の間にある現実的な答えは、「他人が書いたコードを読んで意図を把握できるレベル」です。具体的には、以下のことができればマーケター実務上は十分だと考えています。

コーダーになるための学習ではありません。とはいえゼロから到達するには、休日2〜3日の集中して勉強するくらいの投資が必要です。

HTMLを「読める」マーケターが最低限おさえておきたい4つの観点

「読める」と一言で言っても、何ができれば読めると言えるのか、もう少し具体化します。私が現場で「これだけはわかっておいてほしい」と感じる観点を3つに絞りました。範囲を広げすぎると挫折するので、まずはこの4つを最初の山として越える目標で取り組んでください。

観点1：タグの基本構造（開始タグ・終了タグ・属性）

HTMLは開始タグ・内容・終了タグの3要素でできています。たとえばリンクなら以下のような形です。

<a href="https://example.com">サンプルサイト</a>

<a> が開始タグ、</a> が終了タグ、間に挟まれている「サンプルサイト」が内容、開始タグ内の href="..." が属性です。属性は「タグに追加情報を持たせる仕組み」と理解しておけば十分です。

すべてのタグがこの構造になっています。慣れれば、見たことのないタグでも「開始と終了がある」「属性で情報を持っている」という型で読めます。

観点2：id属性とclass属性の使い分け

マーケター実務で最も使う属性がid属性とclass属性です。両方とも「要素を識別するためのラベル」ですが、性質が違います。

GTMでクリック計測をするときは、idの方が指定が楽で、サイト構造変更にも強いと覚えておけば実務上は困りません。CTAボタンの計測タグを設計する場面では、デザイナーやコーダーに「このボタンに cta-contact-top のようなidを付けてください」と依頼できる状態が理想です。

観点3：コメントアウトの書き方と「エスケープ」の概念

HTMLでは <!-- --> で囲んだ部分がコメントアウトになり、ブラウザは無視します。冒頭のトラブル1で出てきたエスケープの正体がこれです。

<!-- このタグは無視される
<script>...</script>
-->

CSSなら「/* */」、JavaScriptなら「// 1行コメント」や「/* 複数行コメント */」と、言語ごとに記法が違います。「コメントアウトされていると動かない」という常識を持っているだけで、トラブル1のような無駄な時間を防げます。

加えて、HTMLの中で「<」や「>」のような記号を文字として扱いたい場合は「&lt;」「&gt;」のようにHTMLエンティティとして書く必要がある、という概念も知っておくと、「なぜか文字が表示されない」「なぜかタグが表示される」といったトラブルを切り分けられます。

<button data-cta-click="cta-button-a">資料請求</button>

「読める」になるための学習ロードマップ

4つの観点を「読める」レベルにするための学習手順を、4ステップで整理します。冒頭で書いたとおり、読めるようになるためには一度自分の手でコードを書く苦労が避けられません。眺めているだけでは身につかないので、ステップ3の「実際に書いてみる」工程は飛ばさず腰を据えて取り組んでください。

ここまで、HTMLを読めるマーケターになるための観点と学習ロードマップを書いてきました。4ステップを通しで体験するには、一気にやろうとすると2〜3日は必要です。すぐに身につくとは言いません。腰を据えて手を動かす期間を、計画的に確保してください。私はちょうどコロナ禍で在宅勤務になった際、通勤時間が減った分でHTMLやJavaScriptのおさらいをしました。毎日30分、地道に1年ほど続けた学習の成果が、今の私の土台になっています。

よくある質問

HTMLの学習について、Web担当者の方からよく寄せられる質問をまとめました。学習を始める前の不安解消に使ってください。

まとめ：HTMLは「Webで仕事をする人の共通語」

ここまで、マーケターがHTMLを「読める」レベルにしておくべき理由と、その最短ルートを書いてきました。

HTMLが読めないマーケターは、Webという媒体の言葉を持たないまま、Webで仕事をしようとしている状態にあります。海外旅行で言葉が通じなければ、誰しも必死に身振り手振りでコミュニケーションを取ろうとするはずです。けれどもなぜかWebの世界では、共通言語であるHTMLを学ぼうとしないマーケターやディレクターが多いのが現実だと感じています。

「自分で書ける」を目指す必要はありません。目指すべきは「他人が書いたコードを読んで意図を把握できる」レベルです。そのために必要なのは、自分の手でコードを書く苦労を経験することです。眺めるだけで身につく類のスキルではありません。

その壁さえ越えれば、Webマーケ実務はだいぶ違って見えるはずです。まずはChromeでCtrl+UかCmd+Option+Uを押して、自社サイトのソースを開いてみてください。それが、共通言語を持つマーケターになるための最初の1歩です。