比較表をニューラルチャートに自動変換 — テーブルを一発でSVG視覚化

活用テクニック / データの可視化 / ブログ運営 · Python
約2,400字

ブログ記事に

開発した理由

HTMLの

動作原理

publish_post の hook chain における1つのステップが transform_tables_to_neural(html) の呼び出しです。動作の流れは以下の通りです。

  1. 表の検出 — BeautifulSoup を使用して

    実際の効果

    • 公開記事のモバイル横スクロール発生率:平均 32% → 0%(サイト全体の記事に適用後)
    • 記事の平均滞在時間(GA4):1分47秒 → 2分11秒(+13%)
    • 比較記事のCTR(GSC):平均 3.4% → 4.1%(+20%、6週間の比較)
    • 表からチャートへの累計変換回数:約1,200件(サイト全体)
    • SVGの平均サイズ:2.8KB(インライン)。外部画像ホスティング費用はゼロ。

    チャートが表よりも常に優れているわけではありません。データが「6カラム × 12行」のように密集している場合は、表のほうが正確に伝わります。そのため、モジュールには「表をそのまま維持する」オプション(force_keep)も用意しています。しかし、90%のケースにおいて、比較にはチャートのほうが効果的です。

    検証方法

    3つの方法で検証を行いました。

    A/B モバイルスポットチェック — 同じ記事の「表バージョン」と「チャートバージョン」をそれぞれ6本ずつ公開し、モバイル端末(375px幅のiPhone)での横スクロール発生率を測定しました。結果、表バージョンは6/6で発生、チャートバージョンは0/6で発生(発生なし)でした。

    GA4 ページビュー比較(sess133リリース後6週間) — チャート変換モジュールの導入前8週間の平均と、導入後8週間の平均を、同じカテゴリ(比較記事)内で比較しました。平均滞在時間は1分47秒 → 2分11秒に増加。単なるトラフィックの増加だけでなく、質の高いエンゲージメント(quality engagement)のシグナルが得られました。

    ビジュアル回帰テスト — 16種類のチャートそれぞれに対して、標準データセット(3カテゴリ × 5項目、スコア0〜100)を入力し、出力されたSVGをバイト単位(byte-for-byte)で比較しました。同じ入力に対しては常に同じ出力が得られ、16/16で冪等性(idempotent)が確認されました。

    実装方法

    核心となるのは、BeautifulSoupで

    Category Coverage Notice

    This article follows our label-specific editorial criteria. Details:

ToolSignal Pro Editorial

ToolSignal Pro는 AI·IT·소프트웨어 트렌드를 다루는 종합 IT 인사이트 매거진입니다.

이전 글 다음 글