2026.09.23

広告の横断ダッシュボードを自作する｜HTML1枚で完結させる設計

複数の広告アカウントを見ていると、管理画面を行き来するだけで時間が溶けます。私は毎朝集めたデータから、HTMLを1枚だけ書き出して、そこを見るようにしました。

BI（データを可視化するツール）は使っていません。標準の機能だけで作った、外部に依存しないファイルです。この記事では、その構成と、朝に見る順番を決めるための工夫を紹介します。

HTML1枚にする理由

ダッシュボードは、1つのHTMLファイルとして書き出しています。外部のライブラリも、サーバーも使いません。

1ファイルにすると、扱いが軽くなります。手元で開けて、そのまま渡せて、日付をつけて残せます。ツールの仕様が変わって表示が崩れることもありません。

画像も同じ考え方です。データURIとは、画像そのものを文字列にしてHTMLへ埋め込む形式のこと。クリエイティブ（広告に使う画像や動画）のサムネイルは、この形で入れています。画像フォルダを一緒に配らなくても、ファイル1つで完結する作りです。

広告名とファイル名を突き合わせる

ダッシュボードに画像を出すには、数字と画像をつなぐ必要があります。私は、クラウドの保管庫に置いたファイル名と、広告名を突き合わせる形にしました。

ここで1つ、つまずきがありました。macOSの日本語のファイル名は、見た目が同じでも内部の表現が違うことがあります。そのままだと、同じ名前なのに一致しません。

対策は2つです。突合のキーをNFC正規化（文字の表現のゆれをそろえる処理）してから比べることと、前後の空白を落とすことです。ファイル名の末尾にスペースが混ざっていても、これで拾えます。

「要対応バッジ」で、見るべき行を先に出す

横断の一覧で大事なのは、全部を読ませないことです。私はクライアントごとの行に、要対応のバッジを出しています。

バッジの中身は、詳細ページの判定を軽く流用したものです。

・止めるべき候補が何件あるか

・品質スコア（Google広告が広告の品質を1〜10で評価する指標）の改善余地がいくらあるか

・除外キーワードの候補が何語あるか

同じ行には、データの期間（最初の日と最後の日）と、媒体ごとの消化金額も並べました。バッジが付いていない行は、その日は飛ばせます。

朝の点検では、まずダッシュボードの生成日時を見ます。データが更新されていない日は、そこで気づけるからです。次にバッジの付いた行だけを開き、詳細に入ります。

載せる項目は、行動が変わるものだけにする

載せる指標の基準は、「その数字を見て今日の作業が変わるか」の1つだけです。変わらない指標は、ダッシュボードには置かず、月次のレポートへ回します。

判断の材料になる数字と、記録として残す数字は別物です。分けておくと、朝に見る時間が短くなります。

毎朝のデータ収集そのものの作り方は、Google広告・Meta広告のデータを毎朝自動収集する仕組みにまとめています。点検から通知までを含めた全体像は、広告運用のAI自動化で作った5つの層で整理しました。

まとめ

・ダッシュボードはHTML1枚に書き出す。画像はデータURIで埋め込み、1ファイルで完結させる

・画像と数字の突合は、文字の正規化と空白の除去をしてから

・横断の一覧には要対応バッジを出し、開く行を絞る

・載せる指標は「見て今日の作業が変わるもの」だけにする

まず、毎朝いちばん最初に開く画面を1つ決めてください。その画面に、今日やることが決まる数字だけを載せていきます。

この記事を監修した人

執筆：Claude Code スキル「ライティング君」

監修：岸本成（合同会社1nd）

広告運用を起点に、SNS、ホームページ、店舗や施設での集客まで、全体の設計と実践を手がけています。

・2020年：広告運用者として活動を開始。SNSやGoogleマップの運用にも知見があり、広告以外の集客の相談にも数多く応えてきました

・2025年：AI導入支援事業を開始

・2026年6月：FDM（Forward Deployed Marketer。顧客の現場に入り、AIとマーケティングで集客の仕組みを作る専門家）として、集客支援の請負を開始。現在11のクライアント様で実施中

目的に合わせて、次のページもご覧ください。

・プロフィール

・集客支援をお探しの方へ

・AIを仕事にしたい方へ

【無料】そのまま使えるClaude Codeスキル集をプレゼント中

この記事で紹介したような、広告運用の実務で毎日使っているClaude Codeスキルを、公式LINEで無料プレゼントしています。

このサイトを運営する1ndでは、Claude Codeで広告運用の作業をほぼ自動化しています。その現場で実際に使っているWeb広告スキルを、そのまま使える形で配布しているものです。

プレゼントで得られるスキルの一例：

・Meta広告の審査チェック＋言い回し変換（訴求をできるだけ残した版と、アカウント保護を優先した安全寄りの版の2案出し）

・Google広告の審査チェック（アカウントBANリスクの検出に特化）

・検索語句レポートから除外キーワード候補を自動抽出

・RSA（レスポンシブ検索広告）の広告文作成

・Google広告の品質スコア改善監査

・広告CSVの自動集計とレポート下地を作るスキルの作り方ガイド

・成果データから「次に試すべき訴求軸」を洗い出すコピー案出し

・画像生成AIでバナーを作るためのプロンプト設計

・動画広告の台本作成（複数の「型」テンプレート内蔵）

・LP改善の分析（広告データ×アクセス解析の突合）

受け取り方は簡単です。

・公式LINEを友だち追加する

・トーク画面で「スキル」とメッセージを送る

これだけで、現在使用しているWeb広告スキル一式をお受け取りいただけます。

BLOG LIST