まずは今回D3.jsを用いて独自構築した5つのカスタムグラフのこだわりっぷりをご覧ください。Lookerのダッシュボード上で、これらがリアルタイムに動きます。

• 震える「圧力計（Pressure Gauge）」
  圧力計のような見た目で、単一の値を示すグラフです。値に応じてメモリが変わり、表示している値を指した針がブルブルと震えます。
  
• 重厚感と蒸気で魅せる「棒グラフ（Bar Chart）」
  真鍮のグラデーションに「経年劣化のザラザラとしたノイズ」を付与し、金属の管が並んでいるさまを表現しました。最大値の煙突からは蒸気が吹き出します。
  
• 背景の歯車と連動する「円グラフ（Pie Chart）」
  裏で複数の大きさの違う歯車がガッチリ噛み合って連動回転します。さらに中央の黒鉄カバーには穴が空いており、歯車が回る様子が見える精巧な設計です。
  中央の針は円グラフのデータの内、最大値を指し示します。
  
• 真空管が発光しエネルギーが脈打つ「折れ線グラフ（Line Chart）」
  単なる線ではなく、金属パイプの中を光るエネルギーラインが脈打って流れます。最大値（MAX）のポイントでは、真空管のフィラメントが発光します。
  
• レールの上を走る！「蒸気機関車グラフ（Train Line Chart）」
  データポイントを結ぶ線路（レール）の上を、蒸気機関車が走り抜けます。上り坂・下り坂に合わせて機関車の角度がリアルタイムで計算され、常に進行方向の「斜め後ろ」へモクモクと煙を吐き出しながら進む物理演算ロジックを搭載しています。
  

グラフの中身だけをスチームパンク風にしても、Looker標準の真っ白な背景のままでは世界観が台無しです。そこで、Looker標準の「テーマ機能」を活用し、ダッシュボードのUI自体も独自にカスタマイズしました。

管理画面から「steampunk_theme」というテーマを新規作成し、以下のように設定しています。

• 背景色：ただの黒ではなく、重厚感を演出する漆黒（#120c08）
• タイルの背景色：煤けたような焦げ茶色（#251810）
• タイトルの色 / テキストの色：真鍮の輝きを思わせるゴールド系のカラー（#cca243 / #e8d0a9）
• フォントファミリー：標準のゴシック体から ‘Palatino Linotype’, Georgia, serif などのセリフ体に変更し、クラシカルな印象に統一

このテーマ設定を適用することで、ダッシュボードを開いた瞬間に、重厚な機械仕掛けの世界に100%没入できるようになります。
さらに、これらは「ただの絵」ではありません。銘板風のデザインの専用ツールチップを採用し、クリックすればLooker標準の詳細ドリルダウンメニューが開きます。Explore画面からも「X軸・Y軸の表示切替」や「圧力計の最大値の変更」などがポチポチと設定できるように組み込んでおり、非エンジニアにも使いやすいBIとしての実用性をしっかり持たせています。

「ここまで動かせるなら自分もやってみたい！でも、どうやって開発を進めたの？」と気になったエンジニアの方も多いはずです。
今回は生成AI（Gemini）とペアプログラミングを行い、以下の3STEPのサイクルで進めました。

一気に5つのグラフを作らせるのではなく、共通の土台を作ってから「まずは棒グラフ、次に折れ線グラフ」と、順番に機能を拡張していったのが、破綻せずに作り切れた成功の鍵でした。

作成したJavaScriptのグラフを実際にLookerのダッシュボードで使えるようにするには、プロジェクトの manifest.lkml に可視化の設定（定義）を追加する必要があります。

具体的には、LookML上にJSファイル（例：steampunk_bar.js）を配置し、以下のように manifest.lkml に各グラフの情報を記述します。

project_name: "lookml_tast"



# スチームパンク 棒グラフ

visualization: {

  id: "steampunk_bar_chart"

  label: "Steampunk Bar Chart"

  file: "steampunk_bar.js"

}



# スチームパンク 折れ線グラフ

visualization: {

  id: "steampunk_line_chart"

  label: "Steampunk Line Chart"

  file: "steampunk_line.js"

}

このように記述するだけで、Exploreのビジュアライゼーション選択欄に「Steampunk Bar Chart」などのラベルが表示され、標準のグラフと全く同じように選択・設定できるようになります。

さらに詳細な導入方法や、カスタムビジュアライゼーションの基礎についてしっかり知りたい方は、以下のブログ記事で徹底解説されていますので、ぜひご参照ください！

複数のグラフをAIと一緒に作っていくと、ファイルごとに色のトーンや動きの質感が微妙にバラバラになってしまう「スタイルのブレ」や、D3.jsのようなライブラリを使う際に起きやすい「グローバル変数の衝突」といった課題に直面しがちです。

この破綻を防ぐため、最初の構成段階でGeminiにあるルールを徹底させました。
それは、「LookerのJSファイル内で、冒頭の設定変数としてCSSやユーティリティ関数を、完全に分離・カプセル化する」ということです。

実際のコードの一部がこちらです。

const utils = {

  // スチームパンク風の共通CSS定義

  THEME_CSS: `.chart-bg { fill: #1c110a; } .rivet { fill: #4a2a18; }`,

  applyTheme: function() { ... },

  initTooltip: function() { ... },

  

  // ★共通の歯車描画関数を定義して使い回す

  drawGears: function(g, x, y, r, teethCount, type, uid, duration, ...) {

    // 歯車のSVGパス生成と回転アニメーションのロジック

  }

};

このように utils という一つのオブジェクトの中に、テーマカラーの定義や「歯車を描画する共通関数」などを全てまとめました。

これにより、AI自身が次に別のグラフ（円グラフなど）を作る際も、「あ、今回もあの共通関数とCSSクラスを呼び出せばいいんだな」と文脈を正確に理解し、複数のグラフ間で全くブレのないデザインを出力できるようになったのです。

Webフロントエンドの技術（JS/CSS/SVG）がそのまま使えるLookerの表現力は、間違いなく世界トップクラスです。

今回は「スチームパンク」という極端なテーマに挑戦しましたが、この手法を応用すれば、自社のコーポレートブランドに完璧にマッチした美しいグラフや、製造業向けのリアルなインジケーターなど、標準機能では不可能な唯一無二のダッシュボードを作ることも十分可能です。

今後の展望として、今回はWebブラウザ上のGeminiを使ってコピー＆ペーストを繰り返しながら開発しましたが、実際の現場では「Gemini CLI」を導入すべきだと考えています。CLIを使えば、ローカル環境で直接JSファイルを編集してテストしてくれるため、コピペの手間やミスがなくなり、開発速度はさらに爆速になるはずです。

「Lookerは堅い」「Tableauの方がデザインの自由度が高い」という固定観念を捨てて、皆さんもぜひ、AIとLookerを掛け合わせた新しいダッシュボード開発の可能性に挑戦してみてください！