はじめまして！suです。
仕事では Looker のダッシュボードを作っています。

ただ、これまで使ってきたのは Looker にデフォルトで入っているグラフだけでした。
棒グラフや折れ線グラフを並べれば、ダッシュボードとしては一応形になります。
それでも、「もっと凝ったデザインのダッシュボードを、Looker で作ってみたい」という気持ちがありました。

とはいえ、自分にはデザインの経験がありません。
そこで、デザインは Claude Design に、実装は Claude Code に任せてみました。
Claude Design は単体で使ったことがありますが、連携は今回が初めてです。

先に結論です。
Claude Design で作ったデザインは、思っていたよりずっと簡単に Looker へ持ってこられました。

理由は大きく2つです。

• Claude Design が実装仕様書（Looker Spec）まで作ってくれた
• 書き出した HTML に描画ロジックがそのまま入っていた

実機で動かして初めて分かった差分もありましたが、修正は小さなもので済みました（後述）。
なお、今回は Claude Design からエクスポートしたファイルを、Claude Code に読ませる方法で試しています。

題材には、架空の EC サイト「NORTHFIELD MARKET」の売上ダッシュボードを選びました。
扱う商品は T シャツやマフラー、トートバッグなどの8種類です。
次の内容を、1画面で見られるようにします。

• KPI：売上高・注文件数・平均注文単価・CVR（セッション数に対する注文数の割合）
• 商品別売上ランキング
• 月次の売上推移（直近12ヶ月）
• 商品×月の季節性：冬物のマフラーは11〜1月、夏物のトートバッグは6〜7月に売れる、といった傾向

絞り込み条件は、地域（関東／関西／中部）、チャネル（自社サイト／モール出店）、期間の3つです。

データは、BigQuery にダミーデータを入れました。
Looker から参照できるように、準備しておきました。

依頼文を書いて、案を選ぶ

まずは Claude Design に、作りたいものを伝えます。
依頼文には次の内容を書きました。

• 背景：「Looker の Custom Visualization として実装する想定」であること
• 表示したい指標
• 商品の種類と季節性
• 絞り込み条件

依頼すると、デザイン案が複数出てきます。
その中から気に入った案を選び、次の3つの方法で調整していきました。

• チャットで頼む
• 画面上にインラインコメントを付ける
• 直接編集する

最終的に 1c 案を採用しました。

採用案を決めると「次に何を詰める？」と聞いてくれる

採用案を決めると、Claude Design が質問フォームを出してきました。
聞かれたのは次の2つです。

• 他の案（1a・1b）から取り込みたい要素はあるか
• 次に何を詰めたいか

「次に詰めたいこと」の選択肢は、次の5つでした。

• Looker実装を想定した構成整理（タイル分割・データ項目）
• 空データ・読み込み中の状態
• 文言・単位表記の統一
• ライトモード版
• 各画面のスクリーンショットの同梱

今回のゴールは Looker で動かすことです。
そのため、迷わず 「Looker実装を想定した構成整理（タイル分割・データ項目）」 を選びました。

デザインツールなのに、Looker用の実装仕様書まで作ってくれた

すると Claude Design は、デザインとは別に Looker Spec（実装仕様書）を作ってくれました。
まとめられていたのは次の内容です。

• ダッシュボードを T1〜T4 の4タイル に分ける構成（T1: KPI、T2: 月次推移、T3: ランキング、T4: ヒートマップ）
• タイルごとのクエリ（どの dimension・measure・pivot を使うか）と、Viz 側でやる処理
• 必要なデータ項目（LookML のフィールド定義）
• デザインと Looker の差分。たとえば、デザイン上のフィルタバーは Looker 標準のダッシュボードフィルタに置き換えます。
  タイルタイトルは非表示にして、見出しは Viz の中で描く、などです。

デザインツールなのに、「このタイルにはこのクエリが必要」というところまで整理してくれました。
これは、正直予想外でした。
この Spec が、ここから先の実装のベースです。

エクスポートして読ませるだけ

デザインが固まったら、Claude Code に渡します。
今回は Claude Design の「Export HTML → Project archive」で書き出しました。
書き出したのは、デザインと Looker Spec です。
そのフォルダを Claude Code に読ませただけです。

書き出されたのは、主に次の2つのファイルです。

• NORTHFIELD Sales Dashboard.dc.html：採用したデザイン本体。ブラウザで開くと、フィルタの切り替えやホバーも
  ちゃんと動きます
• NORTHFIELD Looker Spec.dc.html：さきほどの実装仕様書

書き出した HTML に、描画ロジックまで入っていた

中身を見て驚きました。
デザインの HTML に、見た目だけでなく描画ロジックまで JavaScript で入っていたのです。
含まれていたのは、滑らかな曲線を描く smooth() や、Y 軸の刻みを決める niceTop() などです。
¥145.6M や −12.4% といった、数値の書式関数もありました。

これらはほぼそのまま、Custom Visualization（以下 Custom Viz）に移植できました。
たとえば月次推移グラフの smooth() と niceTop() を並べてみます。

Claude Design が書き出した HTML（実際は1行に圧縮されていたので、読みやすいように改行を入れています）

function niceTop(max){
  const raw=max/4, mag=Math.pow(10,Math.floor(Math.log10(raw)));
  const step=[1,2,2.5,5,10].find(s=>s*mag>=raw)*mag;
  return {top:step*Math.ceil(max*1.04/step), step};
}
function smooth(pts){
  let d='M'+pts[0].x+' '+pts[0].y;
  for(let i=0;i<pts.length-1;i++){
    const p0=pts[i-1]||pts[i], p1=pts[i], p2=pts[i+1], p3=pts[i+2]||p2;
    d+=` C${p1.x+(p2.x-p0.x)/6} ${p1.y+(p2.y-p0.y)/6} ${p2.x-(p3.x-p1.x)/6} ${p2.y-(p3.y-p1.y)/6} ${p2.x} ${p2.y}`;
  }
  return d;
}

実装した Custom Viz（Claude Code、nf_trend_line.js）

// Y軸上限：max/4 を 1・2・2.5・5・10 × 10^n の最小値に丸めたステップで ceil(max×1.04/step)×step
function niceTop(max) {
  if (!(max > 0)) return { top: 1, step: 0.25 };
  var raw = max / 4, mag = Math.pow(10, Math.floor(Math.log10(raw)));
  var mult = [1, 2, 2.5, 5, 10].filter(function (s) { return s * mag >= raw; })[0];
  var step = mult * mag;
  return { top: step * Math.ceil(max * 1.04 / step), step: step };
}
// Catmull-Rom 由来の滑らかな曲線（テンション 1/6）
function smooth(pts) {
  if (!pts.length) return '';
  var d = 'M' + pts[0].x + ' ' + pts[0].y;
  for (var i = 0; i < pts.length - 1; i++) {
    var p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;
    d += ' C' + (p1.x + (p2.x - p0.x) / 6) + ' ' + (p1.y + (p2.y - p0.y) / 6) + ' ' +
      (p2.x - (p3.x - p1.x) / 6) + ' ' + (p2.y - (p3.y - p1.y) / 6) + ' ' + p2.x + ' ' + p2.y;
  }
  return d;
}

計算式はまったく同じです。
違うのは、書き方が少し古い JavaScript（const → var、アロー関数 → function）になったことです。
あとは、データが0件のときのガード（if (!pts.length) ...）が足されたくらいです。

主に書き換えが必要だったのは、データの取り出し方のほうでした。
デザイン側は、HTML の中で作ったダミーデータを使っています。
Custom Viz では、Looker のクエリ結果（data / queryResponse）から値を取り出す必要があります。
見た目を作るロジックはそのまま使えるので、「Looker からデータを受け取る部分だけ差し替える」
という感覚でした。

作ったもの

実装は Looker Spec どおりに、Claude Code に進めてもらいました。
作ったのは次の2つです。

• LookML：view と Explore。Spec にある measure（売上高・注文件数・平均注文単価・CVR）を定義しました。
  期間外の月をグレーにするための in_selected_period なども定義しました。
• Custom Viz 4本
  • T1 KPI（nf_kpi_strip）
  • T2 月次推移（nf_trend_line）
  • T3 ランキング（nf_ranking_bars）
  • T4 ヒートマップ（nf_season_heatmap）

チャートライブラリは使わず、素の JavaScript と SVG で書いています。
1 Viz = 1ファイルにしました。
そのため、Looker の IDE にファイルをアップロードして manifest に書くだけで登録できます。

また、Explore で列の並びを変えても、表示が崩れないようにしてもらいました。
フィールドは、列の順番ではなく名前で探す作りです。

今回やっていないこと

なお、前年比（PY・YoY）は今回はやっていません。
主題はデザインの持ち込みなので、前年比の集計まではやらなかった、という判断です。
Viz 側は前年の値が来れば表示できるように作ってあります。
LookML 側に前年同月の measure を作っていないので、今は「–」と表示されます。

Lookerではほぼデザインどおりに再現できた

完成したダッシュボードがこちらです（地域フィルタで「関東」を選んだ状態）。

色・フォント・余白・数値の書式、滑らかな曲線、ヒートマップの濃淡と、見た目はほぼデザインどおりに
再現できました。
期間フィルタで選んだ範囲の外の月をグレーで表示する動きも、デザインどおりに動いています。

月次推移グラフは、ホバーするとその月の内訳がツールチップで出ます。
これもデザインの HTML にあった挙動をそのまま持ってきたものです。

Custom Viz だけでは完成しない：ダッシュボード側もデザインに合わせた

ここまでデザインに近づいたのは、Custom Viz だけの力ではありません。
ダッシュボード側でも、デザインのカラーパレットに合わせて少し手を入れています。
ここは Claude Code ではなく、Looker の画面から手動で設定しました。

Looker のダッシュボードには、テーマ（配色の設定）を当てられます。
デザインで使われている色を、そのまま設定しました。

• 主な色：#C8F169
• テキスト：#E8EAED
• 背景：#0C0E12
• タイル背景：#13161C

あわせて、タイルの高さも、デザインのバランスに近づくよう手で調整しました。
Looker Spec にも「背景色はダッシュボード設定またはテーマで指定する」と書かれていました。
ここも Spec どおりの対応です。

Specで整理されていた差分は、そのとおりだった

Spec には「デザインと Looker 実装の差分」も、あらかじめ書かれていました。
内容は次のとおりです。

• デザインのフィルタバーは、Looker 標準のダッシュボードフィルタに置き換える
  （Viz の中からはクエリ条件を変えられないため）
• タイルタイトルは非表示にして、見出しは Viz の中で描く
• 期間外のグレー表示は、in_selected_period をクエリ結果に含めて判定する
  （Viz はダッシュボードフィルタの値を直接読めないため）

実装してみると、実際にそのとおりでした。
フィルタは標準 UI の見た目ですが、それ以外はデザインに近い見た目を保てています。
「どこがデザインどおりにならないか」を先に教えてもらえていました。
そのため、実機で動かしたときに戸惑わずに済みました。

実機で初めて分かった差分：枠が二重になった

一方で、Spec には書かれておらず、実機で初めて気づいた差分もありました。
テーマを当てたら、タイルの枠が二重になったのです。

原因は、デザインと Looker の前提のズレでした。

• デザインは「Viz が1枚のパネル」という前提で、Viz 側に角丸＋1px の枠線を描いていた
• Looker は「タイル自体が枠を持つ」前提

そのため、両方の枠が重なって見えていました。
Viz 側の外枠線と角丸を削除して解消しています。
修正自体は小さなものでしたが、こういう差分は実機で動かしてみないと分からないなと感じました。

もともとは、「Looker のデフォルトのグラフだけでなく、もっと凝ったデザインのダッシュボードを作ってみたい」
というところから始まりました。
デザイン経験のない自分でも、それなりに凝ったダッシュボードを作れました。
Claude Design と Claude Code の組み合わせで、Looker 上で動かすところまで来られました。

Claude Design が用意してくれたもの

特に助かったのは、Claude Design がデザインを作って終わりではなく、次の2つを用意してくれたことです。

• 実装を見据えた仕様書（Looker Spec）
• そのまま移植できる描画ロジック

デザインから実装へ受け渡すときに、一番手間がかかりそうなのは「この見た目をどう実装するか」の部分です。
そこを、かなり肩代わりしてもらえた感覚です。

それでも必要だったこと

一方で、Looker 側の知識が要らなくなるわけではありません。
LookML の定義や Custom Viz の登録、テーマの設定などは自分で理解しながら進める必要がありました。
二重枠のように、実機で動かして初めて分かる差分もあります。

おまけ：直接連携のこと

ちなみに、調べたところ Claude Design には「Hand off to Claude Code」という機能もあるようです。
Claude Code と直接連携できる機能です。
ただ、自分の環境では403エラーが出て使えませんでした。

とはいえ、今回やったことは HTML をエクスポートして Claude Code に読ませるだけです。
エクスポートする方法でも手間はほとんどかからなかったので、直接連携が使えなくても困ることはありませんでした。
使える環境の方は、ぜひ直接連携のほうも試してみてください。