開発eurekapu-nuxt4メモ

SVGイラスト全35件の品質確認 -- 一括チェックHTMLとMillerViewerで表示を検証した

SVGイラスト35件を一覧表示するHTMLを組み、Chrome DevToolsのスクリーンショットで1件ずつテキストの重なりやNG/Good対比を目視した。最初に作ったHTMLでは画像が画面を突き抜けて確認にならず、4件ずつのグリッドに組み直してようやくセクションごとに撮影できた。結果は全件問題なし。

なぜ一括チェックが必要だったか

eurekapu-nuxt4のExcelコース教材には、readable系・donts系・naming系の3カテゴリに分かれたSVGイラストが計35件ある。個別にブラウザで開いて確認するのは現実的ではないし、MillerViewerのフォーカスモードでの実寸表示も確認したかった。そこで一括表示用のHTMLページを作り、Chrome DevTools MCPでスクリーンショットを撮る方式をとった。

一括チェックHTMLの試行錯誤

最初のHTML: 画像が大きすぎて画面を突き抜けた

最初に作ったHTMLは、SVGをそのまま並べただけのシンプルなページだった。ところがChrome DevToolsでスクリーンショットを撮ると、SVGの原寸が大きすぎて1件で画面が埋まり、全体を俯瞰できなかった。スクロールしてもどこを見ているのかわからなくなる。

グリッド表示への改良: 4件ずつ並べる

CSSグリッドで1行4列のレイアウトに変更した。各SVGにはカテゴリ名とファイル名のキャプションを付け、どのイラストかが一目でわかるようにした。

<!-- 核心部分のみ -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;">
  <div class="svg-card">
    <img src="readable-proximity.svg" />
    <p>readable-proximity</p>
  </div>
  <!-- ... -->
</div>

これでセクションごとに4件ずつ収まり、スクリーンショット1枚に複数件が入るようになった。

セクションごとのスクリーンショット確認

Chrome DevTools MCPでページを開き、セクションごとにスクリーンショットを撮影した。

readable系（16件）

readable-proximity、readable-alignment、readable-contrast などセル書式の読みやすさに関するイラスト群。NG例とGood例の対比が各SVGに含まれており、テキストの重なりや切れがないかを確認した。16件すべて問題なし。

donts系（16件）

donts-hardcoding、donts-no-multiply-paste、donts-merged-cells など、Excelでやってはいけない操作のイラスト群。こちらもNG/Good対比の構成。16件すべて問題なし。

naming系（3件）

naming-title-format、naming-sheet-tab、naming-file-naming の3件。ファイル命名規則やシート名の付け方を図示している。3件すべて問題なし。

MillerViewerでの実寸確認

グリッド表示での一覧確認に加えて、MillerViewer（3カラム表示・フォーカスモード）で代表的なSVGを実寸表示した。

確認した4件:

  • readable-proximity: セルの近接ルールを示すイラスト。テキストとセルの間隔が詰まりすぎていないか実寸で確認
  • donts-hardcoding: 数値直打ちの危険性を示すイラスト。NG例の赤枠とGood例の緑枠が鮮明に分離していた
  • donts-no-multiply-paste: 同じ値のコピペを繰り返す悪例。矢印とテキストが重ならずに配置されていた
  • naming-title-format: タイトル行の書式ルール。フォーカスモードで拡大しても文字のアンチエイリアスが崩れず、SVGならではの解像度非依存が効いていた

いずれも実寸表示で問題なし。

確認結果のまとめ

カテゴリ件数テキスト重なりNG/Good対比判定
readable16なし鮮明OK
donts16なし鮮明OK
naming3なし鮮明OK
合計35--全件OK

振り返り

一括チェック用HTMLを最初に作ったとき、SVGが画面を食い尽くしてスクロールバーだけが延々と伸びた。「全部並べれば一目瞭然だろう」という甘い想定が2分で崩れた。グリッドに切り替えてからはセクションごとにスクリーンショットが撮れるようになり、35件を15分ほどで確認し終えた。

Chrome DevTools MCPとMillerViewerの組み合わせは、SVGの品質確認ワークフローとして手に馴染んできた。一覧はグリッドHTMLで、細部はフォーカスモードで、という使い分けが定着しつつある。