[{"data":1,"prerenderedAt":416},["ShallowReactive",2],{"content-/svg-quality-check-35-items":3,"all-pages-for-dir":414,"og-image-/svg-quality-check-35-items":415},{"id":4,"title":5,"body":6,"category":395,"description":396,"extension":397,"meta":398,"navigation":399,"ogImage":400,"path":401,"project_name":402,"published":403,"publishedAt":404,"seo":405,"stem":406,"tags":407,"todo":412,"unpublished":403,"updatedAt":400,"__hash__":413},"pages/2026-04/2026-04-11/svg-quality-check-35-items.md","SVGイラスト全35件の品質確認 -- 一括チェックHTMLとMillerViewerで表示を検証した",{"type":7,"value":8,"toc":380},"minimark",[9,13,17,20,24,27,29,33,38,41,45,48,190,193,195,198,201,205,208,212,215,219,222,224,228,231,234,262,265,267,270,365,367,370,373,376],[10,11,5],"h1",{"id":12},"svgイラスト全35件の品質確認-一括チェックhtmlとmillerviewerで表示を検証した",[14,15,16],"p",{},"SVGイラスト35件を一覧表示するHTMLを組み、Chrome DevToolsのスクリーンショットで1件ずつテキストの重なりやNG/Good対比を目視した。最初に作ったHTMLでは画像が画面を突き抜けて確認にならず、4件ずつのグリッドに組み直してようやくセクションごとに撮影できた。結果は全件問題なし。",[18,19],"hr",{},[21,22,23],"h2",{"id":23},"なぜ一括チェックが必要だったか",[14,25,26],{},"eurekapu-nuxt4のExcelコース教材には、readable系・donts系・naming系の3カテゴリに分かれたSVGイラストが計35件ある。個別にブラウザで開いて確認するのは現実的ではないし、MillerViewerのフォーカスモードでの実寸表示も確認したかった。そこで一括表示用のHTMLページを作り、Chrome DevTools MCPでスクリーンショットを撮る方式をとった。",[18,28],{},[21,30,32],{"id":31},"一括チェックhtmlの試行錯誤","一括チェックHTMLの試行錯誤",[34,35,37],"h3",{"id":36},"最初のhtml-画像が大きすぎて画面を突き抜けた","最初のHTML: 画像が大きすぎて画面を突き抜けた",[14,39,40],{},"最初に作ったHTMLは、SVGをそのまま並べただけのシンプルなページだった。ところがChrome DevToolsでスクリーンショットを撮ると、SVGの原寸が大きすぎて1件で画面が埋まり、全体を俯瞰できなかった。スクロールしてもどこを見ているのかわからなくなる。",[34,42,44],{"id":43},"グリッド表示への改良-4件ずつ並べる","グリッド表示への改良: 4件ずつ並べる",[14,46,47],{},"CSSグリッドで1行4列のレイアウトに変更した。各SVGにはカテゴリ名とファイル名のキャプションを付け、どのイラストかが一目でわかるようにした。",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-html shiki shiki-themes vitesse-light vitesse-light","\u003C!-- 核心部分のみ -->\n\u003Cdiv style=\"display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;\">\n  \u003Cdiv class=\"svg-card\">\n    \u003Cimg src=\"readable-proximity.svg\" />\n    \u003Cp>readable-proximity\u003C/p>\n  \u003C/div>\n  \u003C!-- ... -->\n\u003C/div>\n","html","",[56,57,58,67,98,120,144,165,175,181],"code",{"__ignoreMap":54},[59,60,63],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sxvE3","\u003C!-- 核心部分のみ -->\n",[59,68,70,74,78,82,85,89,93,95],{"class":61,"line":69},2,[59,71,73],{"class":72},"shFtX","\u003C",[59,75,77],{"class":76},"sHkkW","div",[59,79,81],{"class":80},"s4oTP"," style",[59,83,84],{"class":72},"=",[59,86,88],{"class":87},"sMJiu","\"",[59,90,92],{"class":91},"sdGka","display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;",[59,94,88],{"class":87},[59,96,97],{"class":72},">\n",[59,99,101,104,106,109,111,113,116,118],{"class":61,"line":100},3,[59,102,103],{"class":72},"  \u003C",[59,105,77],{"class":76},[59,107,108],{"class":80}," class",[59,110,84],{"class":72},[59,112,88],{"class":87},[59,114,115],{"class":91},"svg-card",[59,117,88],{"class":87},[59,119,97],{"class":72},[59,121,123,126,129,132,134,136,139,141],{"class":61,"line":122},4,[59,124,125],{"class":72},"    \u003C",[59,127,128],{"class":76},"img",[59,130,131],{"class":80}," src",[59,133,84],{"class":72},[59,135,88],{"class":87},[59,137,138],{"class":91},"readable-proximity.svg",[59,140,88],{"class":87},[59,142,143],{"class":72}," />\n",[59,145,147,149,151,154,158,161,163],{"class":61,"line":146},5,[59,148,125],{"class":72},[59,150,14],{"class":76},[59,152,153],{"class":72},">",[59,155,157],{"class":156},"sG7-3","readable-proximity",[59,159,160],{"class":72},"\u003C/",[59,162,14],{"class":76},[59,164,97],{"class":72},[59,166,168,171,173],{"class":61,"line":167},6,[59,169,170],{"class":72},"  \u003C/",[59,172,77],{"class":76},[59,174,97],{"class":72},[59,176,178],{"class":61,"line":177},7,[59,179,180],{"class":65},"  \u003C!-- ... -->\n",[59,182,184,186,188],{"class":61,"line":183},8,[59,185,160],{"class":72},[59,187,77],{"class":76},[59,189,97],{"class":72},[14,191,192],{},"これでセクションごとに4件ずつ収まり、スクリーンショット1枚に複数件が入るようになった。",[18,194],{},[21,196,197],{"id":197},"セクションごとのスクリーンショット確認",[14,199,200],{},"Chrome DevTools MCPでページを開き、セクションごとにスクリーンショットを撮影した。",[34,202,204],{"id":203},"readable系16件","readable系（16件）",[14,206,207],{},"readable-proximity、readable-alignment、readable-contrast などセル書式の読みやすさに関するイラスト群。NG例とGood例の対比が各SVGに含まれており、テキストの重なりや切れがないかを確認した。16件すべて問題なし。",[34,209,211],{"id":210},"donts系16件","donts系（16件）",[14,213,214],{},"donts-hardcoding、donts-no-multiply-paste、donts-merged-cells など、Excelでやってはいけない操作のイラスト群。こちらもNG/Good対比の構成。16件すべて問題なし。",[34,216,218],{"id":217},"naming系3件","naming系（3件）",[14,220,221],{},"naming-title-format、naming-sheet-tab、naming-file-naming の3件。ファイル命名規則やシート名の付け方を図示している。3件すべて問題なし。",[18,223],{},[21,225,227],{"id":226},"millerviewerでの実寸確認","MillerViewerでの実寸確認",[14,229,230],{},"グリッド表示での一覧確認に加えて、MillerViewer（3カラム表示・フォーカスモード）で代表的なSVGを実寸表示した。",[14,232,233],{},"確認した4件:",[235,236,237,244,250,256],"ul",{},[238,239,240,243],"li",{},[241,242,157],"strong",{},": セルの近接ルールを示すイラスト。テキストとセルの間隔が詰まりすぎていないか実寸で確認",[238,245,246,249],{},[241,247,248],{},"donts-hardcoding",": 数値直打ちの危険性を示すイラスト。NG例の赤枠とGood例の緑枠が鮮明に分離していた",[238,251,252,255],{},[241,253,254],{},"donts-no-multiply-paste",": 同じ値のコピペを繰り返す悪例。矢印とテキストが重ならずに配置されていた",[238,257,258,261],{},[241,259,260],{},"naming-title-format",": タイトル行の書式ルール。フォーカスモードで拡大しても文字のアンチエイリアスが崩れず、SVGならではの解像度非依存が効いていた",[14,263,264],{},"いずれも実寸表示で問題なし。",[18,266],{},[21,268,269],{"id":269},"確認結果のまとめ",[271,272,273,295],"table",{},[274,275,276],"thead",{},[277,278,279,283,286,289,292],"tr",{},[280,281,282],"th",{},"カテゴリ",[280,284,285],{},"件数",[280,287,288],{},"テキスト重なり",[280,290,291],{},"NG/Good対比",[280,293,294],{},"判定",[296,297,298,316,329,343],"tbody",{},[277,299,300,304,307,310,313],{},[301,302,303],"td",{},"readable",[301,305,306],{},"16",[301,308,309],{},"なし",[301,311,312],{},"鮮明",[301,314,315],{},"OK",[277,317,318,321,323,325,327],{},[301,319,320],{},"donts",[301,322,306],{},[301,324,309],{},[301,326,312],{},[301,328,315],{},[277,330,331,334,337,339,341],{},[301,332,333],{},"naming",[301,335,336],{},"3",[301,338,309],{},[301,340,312],{},[301,342,315],{},[277,344,345,350,355,358,360],{},[301,346,347],{},[241,348,349],{},"合計",[301,351,352],{},[241,353,354],{},"35",[301,356,357],{},"-",[301,359,357],{},[301,361,362],{},[241,363,364],{},"全件OK",[18,366],{},[21,368,369],{"id":369},"振り返り",[14,371,372],{},"一括チェック用HTMLを最初に作ったとき、SVGが画面を食い尽くしてスクロールバーだけが延々と伸びた。「全部並べれば一目瞭然だろう」という甘い想定が2分で崩れた。グリッドに切り替えてからはセクションごとにスクリーンショットが撮れるようになり、35件を15分ほどで確認し終えた。",[14,374,375],{},"Chrome DevTools MCPとMillerViewerの組み合わせは、SVGの品質確認ワークフローとして手に馴染んできた。一覧はグリッドHTMLで、細部はフォーカスモードで、という使い分けが定着しつつある。",[377,378,379],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":54,"searchDepth":69,"depth":69,"links":381},[382,383,387,392,393,394],{"id":23,"depth":69,"text":23},{"id":31,"depth":69,"text":32,"children":384},[385,386],{"id":36,"depth":100,"text":37},{"id":43,"depth":100,"text":44},{"id":197,"depth":69,"text":197,"children":388},[389,390,391],{"id":203,"depth":100,"text":204},{"id":210,"depth":100,"text":211},{"id":217,"depth":100,"text":218},{"id":226,"depth":69,"text":227},{"id":269,"depth":69,"text":269},{"id":369,"depth":69,"text":369},"dev","eurekapu-nuxt4プロジェクトのSVGイラスト全35件をChrome DevToolsで品質確認。一括表示HTMLの改良過程とMillerViewerでの実寸確認結果をまとめた","md",{},true,null,"/svg-quality-check-35-items","eurekapu-nuxt4",false,"2026-04-11T00:00:00.000Z",{"title":5,"description":396},"2026-04/2026-04-11/svg-quality-check-35-items",[408,409,410,411,402],"SVG","品質確認","Chrome DevTools","MillerViewer","memo","lO6Z47Cv_ndQMB6KYSn3V5ehpms2c4dZWSPWdv6ZCqw",[],"https://log.eurekapu.com/og/blog/svg-quality-check-35-items.png?v=2026-04-11T00%3A00%3A00.000Z&title=SVG%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%85%A835%E4%BB%B6%E3%81%AE%E5%93%81%E8%B3%AA%E7%A2%BA%E8%AA%8D%20--%20%E4%B8%80%E6%8B%AC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AFHTML%E3%81%A8MillerViewer%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%82%92%E6%A4%9C%E8%A8%BC%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=f7b80ba365eda6ac",1782528825620]