# K2pbLab_08｜品質検証・比較評価

評価日：2026年11月5日（JST）。フェイズ00への報告／フェイズ09総括用。

## 1. 結論

**今回の現物では、DSM部品の構造維持と保存済み最終案への視覚的な近さは、Makeコード経由・DSM再実装版が優位。直接連携版はHTMLが簡潔で既存JSをそのまま使う一方、意図したCSSが効かない箇所、図版の画像化、最終案からの省略がある。** ただし実装方式一般の優劣を証明する実験ではない。Make版には追加のDSM再実装工程が入り、直接版は画像参照を含む実装で、投入情報・修正回数が揃っていない。

実務では、**確定Figmaを参照してDSMの構造・Sass・操作を優先する実装を標準工程とし、Makeコードは図版や数値の参照資料として使う**ことを推奨する。今回の後続作業の基盤を一つ選ぶなら、DSM再実装済みの `figma_k2pb` を条件付きで選ぶ。未確定リンク、フォント配信、アクセシビリティ、共通化を解決してから展開する。どちらもこの評価をもって本番公開可とは判定しない。

工数・費用の勝者は判定できない。根拠のない総合点・採用率・削減率は付けない。

## 2. 対象・方法・証拠の区分

|対象|実際に確認したもの|
|---|---|
|直接版|`dsm_for_design_codex/html/top.html`、読込CSS・JS、`sass`、実装記録|
|Make経由版|`figma_k2pb/index.html`、`sass/top.scss`、`sass/dsm`、`sass/_illustrations.scss`、共通JS・`menu.js`、既存検証記録|
|DSM基準|`dsm_for_design_figma/sass`、`html/common/js/tips.js`、HTMLの部品例・ヘッダー／フッター構造|
|フェイズ04|`prototypes/phase04-top-wireframe-v2` の検証記録・成果物構成。初回版との混同を避け、v2を基準にした|
|デザイン|`各種素材/K2pb Lab｜PCトップページ 最終修正案.jpg`。両版の1440px新規スクリーンショットと目視照合|

「独立確認」は今回読んだコード、文字列照合、ブラウザー再検証。「既存記録」は実装者の報告で、再現できた項目以外は自己申告扱い。「推論」は現物からの保守性等の判断。「未検証」は必要な証拠・試験がない項目。

Figmaノード `48:2` は制作ログで確認できるが、リポジトリ内にファイルキー付きURLを見つけられず、ライブノードを取得していない。保存JPGが現在のライブノードと同一であること、非表示レイヤー・変数・コンポーネント接続は未検証。したがって本書の視覚評価は**保存最終案に対する暫定評価**である。

新規試験は Edge 156.0.4314.58、headless、画面高900px、file URL。両版で外部HTTP(S)を遮断し、フォント読み込み完了を待った。外部フォント稼働時の再現性を測る試験ではない。検証スクリプトは [phase08-audit.cjs](phase08-audit.cjs)、生データは [audit.json](phase08-evidence/audit.json)。実装ファイルは変更せず、報告書と検証用成果物のみ追加した。

## 3. 同一基準による評価

|項目|直接版|Make経由・DSM再実装版|判断の限界|
|---|---|---|---|
|DSM準拠|共通Sass・JS、ヘッダー、記事カード、ニュースを実使用。支援カードの枠は独自実装|共通Sassとカード・ニュース・ナビの構造を使用。ページ側で寸法等を調整|完全準拠ではなく、採用部と上書き部を区別|
|視覚再現|大枠・セクション順は維持。英字の点の色、字形、カード幅・内容等に差|英字、カード構成・余白など保存案に近い。フォント、アイコン、リンク装飾に差|ライブFigmaとの画素一致率は未測定|
|コード品質|短く読みやすく `.phase07` に限定。効かないCSSと画像化図版が課題|図版Sassを分離。DOMと指定値が多く、上書きと `!important` に依存|簡潔さだけで品質を決めない|
|アクセシビリティ|基本構造と今回のキーボード試験は成立。関係図に説明的alt|同じ操作試験は成立。図中の文字はHTML。操作できない「詳細を見る」が残る|WCAG適合宣言は不可|
|実装効率|実装者申告2〜3分、資料照合等を除外|追加再実装の実装者申告約4分、前回工程を除外|計測範囲が異なり比較不可|
|拡張性|共通基盤あり。ID依存・ページ固有上書きの整理が必要|共通部品を維持するが図版DOM・ページCSSの整理が必要|複数ページの実装・回帰試験なし|

## 4. DSMの実採用とCSSの実効性

採用の判断は「HTMLの部品構造＋該当Sassの読込＋適用規則／計算済みスタイル」で行った。ファイルの存在やクラス名のみでは採用としない。

|部位|直接版|Make経由版|DSMの根拠|
|---|---|---|---|
|ヘッダー・ナビ|`headerWrap > header > headerNav > nav.gNav > ul` と操作IDを維持|同構造、ロゴ画像と寸法を変更|`_head_foot.scss`、`tips.js`|
|支援4件|`div.flex > article.line-2`。枠・丸み・paddingは `_top.scss` の独自指定。DSMの `.card.line` 部品採用とは認定しない|`ul.card.line.radius.flex > li.line-2`。DSMの枠・丸み規則を採用し、色・半径・列幅を上書き|`_modules.scss` の `.card.line > *`、`.card.radius > *`、`.line-2`|
|記事3件|`ul.card.line.flex > li.line-3 > a`。ただし枠と内側余白を無効化|`ul.card.flex > li.line-3 > a`。内側余白・ラベル等を調整|同 `.card a`、`.line-3`、`.meta`|
|ニュース5件|`ul.indexList > li > a`、meta/timeを保持。表示をGrid化|同構造。Grid、列幅・余白・色を調整|同 `ul.indexList li a` の罫線・ホバー等|
|フッター|`.footerInner`を利用。補助navは独自の配置|`.footerGNav`構造も利用し、配置等を調整|`_head_foot.scss`|
|スキップリンク|`.toContents` → `main#mainContent[tabindex=-1]`|`.toContents` → `main#contentsWrap[tabindex=-1]`|`_modules.scss`、`_responsive.scss`|

共通Sass11ファイルをUTF-8文字列で照合した。直接版は9ファイル一致、`style.scss` と `_set.scss` が相違。Make版の `sass/dsm` は10ファイル一致、`_set.scss` が相違。この数は**基盤ソースの一致数であり、部品採用率ではない**。ページ用Sassは別に存在する。

直接版の `tips.js` はDSM基準と全文一致。Make版は変更されており、SP境界を860pxから767pxに変更し、別の `menu.js` でページ内リンク選択時の閉鎖・フォーカスを補完している。単なるReactコードの移植ではなく、現在の配信ページは静的HTML＋DSMである。

**実効性の問題（独立確認）：** 直接版 `_top.scss` は `#capabilities > div` に `display:grid` と16px gapを指定するが、DSM `.flex { display:flex !important; }` が勝つ。計算済みdisplayは1440pxでも375pxでもflexだった。1440pxの子要素max-widthもDSMの48.4%が残る。見た目の2列は成立するが、「Gridで等幅」というソース上の意図は成立していない。先の調査段階でのGrid構成という読み取りは、実表示では修正される。

同様に直接版のヒーロー補足文は `text-2xl` を持ち、DSMの24px `!important` がページ側16px指定に優先する。既存クラスを活用するときは、上書きの有無だけでなく勝敗も検証する必要がある。

## 5. 視覚再現とフェイズ04からの継承

新規画像：[直接版1440px](phase08-evidence/codex-1440.png)／[Make版1440px](phase08-evidence/make-1440.png)／[直接版375px](phase08-evidence/codex-375.png)／[Make版375px](phase08-evidence/make-375.png)。

保存最終案とPC画像を目視照合した結果、両版ともロゴ、主コピー、事業案内、4領域、記事3件、ニュース5件、フッターの大枠を維持する。直接版は英字内の点が赤で、保存案の黒と異なる。ナビ下線、本文・見出しの字形／太さ、補足文の大きさ、カード幅・間隔にも差がある。Make版は黒い点と英字形状、カード内の注記・詳細表示、セクション配置をよりよく保持するが、アイコンの大きさや文字、記事／ニュースの通常時の下線などは一致しない。

直接版の事業関係図はJPGから切り出したPNGで、説明的altはあるが図中文字を編集・検索できず、高倍率表示の鮮明さに制約がある。Make版はHTMLと線・画像で組み、文字を編集できる一方、図版用DOMと位置調整が増える。

直接版は個別の「詳細を見る」と未確定注記を省略し、サービス一覧リンクへ置換した。リンク先未確定への対処として理解できるが、最終案の忠実再現とは別の設計判断である。Make版は注記と詳細風のspanを残すため、見た目は近いが操作上は未完成。

フェイズ04 v2の記録では5セクション、ラボ3件、ニュース5件、既存DSMの一覧構造が基盤。両版ともこの主要情報量を保持し、デザイン用にカード・図版・配置を変更している。04のHTMLと全テキスト／URLの機械的完全一致、全prototype版との差分は未実施。

|同条件の実測ページ高|直接版|Make版|
|---|---:|---:|
|1440px幅|3805px|3824px|
|375px幅|4997px|5373px|

保存最終案JPGは1440×3803。ページ高の近さは内部の忠実度を意味しない。PC用画像しかないためSPは再現精度を採点せず、実装上の挙動のみ確認した。

既存Make報告の画素差0.82%／0.68%は「Make元コードの描画」との比較であり、Figma最終ノードとの比較ではない。直接版の既存報告は保存画像との寸法比較。比較相手が異なるため数値を並べて方式の優劣を決めない。本評価では両版のFigma一致率を算出していない。

## 6. アクセシビリティと操作性

新規独立試験では、両版とも全8幅（320、375、767、768、860、861、1100、1440px）でdocumentの横幅がviewport幅と一致、img要素の欠落0、捕捉した実行時JS例外0、H1は1個、main直下のsectionは5個だった。背景画像・疑似要素の全資源疎通を保証する測定ではない。

375pxでは両版で最初のTabに「本文へ移動」が現れ、Enterでmainにフォーカスした。メニューをEnterで開くと閉じるボタンへ移動、Shift+Tabで末尾リンクへ、Tabで閉じるボタンへ循環し、Escapeで閉じて開くボタンへ戻った。これらは既存自己申告を今回再現した事項である。

静的確認でもlang、viewport、main/nav/footer、見出し階層、timeのdatetime、名前付きメニューボタンがある。直接版はsectionのaria-labelledbyと関係図の説明的altを備える。Make版は関係図の内容をHTMLで読めるが、group名だけで全関係の理解を保証できない。

共通の保留事項：スクリーンリーダー、200%拡大・リフロー、文字間隔変更、全配色のコントラスト、タッチ領域、他ブラウザー、実機、全リンク先の疎通、外部フォント配信時は未検証。WCAG適合率や適合レベルを断定しない。Make版の4つの「詳細を見る」はspanで、リンクに見えてもキーボード操作できない。これは検証失敗というより未確定遷移の未実装であり、公開前に表示方針を確定する。

## 7. コード品質・拡張性

直接版は日本語の意味に沿うsection/articleと短いHTMLで編集しやすく、専用Sassを `.phase07` 配下に限定している。反面IDセレクターへの依存、DSMの重要指定との競合、既存の列幅が残ること、画像図版の更新性が課題。Make版はSassの基盤と図版を分離し、DSMのカード構造を保つ。一方、多数のflex補助クラス、細かな数値、`!important`、汎用名 `.rule` 等のページ外へ及び得るセレクターがあり、別ページと統合する際に整理が必要。

両版とも共通Sassのコピーを保持し、MASTER更新の自動追従や共通テンプレート生成は確認できない。複数ページではヘッダー／フッター・カード・ニュースを共通化し、ページ固有スタイルを分離し、共通基盤との差分管理を行うことを推奨する。これは保守性に関する推論であり、複数ページ展開の実測ではない。

現時点のgit statusでは対象ディレクトリが未追跡だったため、コミット履歴からの手戻り量・人間の変更量・製作時間の復元はできない。今回の試験は配信済みCSSに対するもので、Sassの再コンパイル一致やビルドの再現性は未検証。

## 8. 実装効率・AI消費・手戻り

|指標|直接版|Make経由版|扱い|
|---|---|---|---|
|時間|実装記録の約2〜3分。資料照合・報告を除く|再実装記録の約4分。元コード制作・前回版作成を除く|異なる作業範囲の自己申告。速度比較不可|
|AI消費・料金|トークン／請求根拠なし|同左|未確定。円換算・削減率なし|
|手戻り|フォント参照の変更等の記録あり|前回版保存、DSM再実装、SP図版・フッター修正の記録あり|回数・総工数は未測定|

05–06総括の約1,640クレジットはデザイン工程等の既知集計で、最終修正分も未確定。07の二方式に割り振らない。クレジットとトークン、追加工程と総工程、経過時間と人間の実働時間を混同しない。

## 9. フェイズ00／09への申し送り

1. 08の実コード比較と限定条件の独立表示・操作試験は完了。Figmaライブ照合とWCAG適合検証は保留として残す。
2. 今回の現物の再現性・DSM部品構造はMake経由のDSM再実装版が優位。ただし「Makeの生成コードだけでDSM準拠になる」と結論しない。
3. 実務工程は確定デザイン＋DSMの実部品を基盤にし、計算済みスタイルと操作を検証する。今回のMake再実装版を次工程の基盤候補とする。
4. 公開前は未確定リンク、直接版の無効な指定と視覚差、フォント運用、拡大・支援技術・コントラスト、共通化を扱う。実装修正は今回実施していない。
5. 次回の方式比較では同じFigma版・資産・開始条件・完了条件を固定し、全工程の時間・AI使用量・修正履歴を記録する。今回の結果から工数削減率や方式一般の因果を示さない。

### 参照記録

- [直接版の実装者記録](../dsm_for_design_codex/フェイズ07_実装記録.md)
- [Make版の実装者記録](../figma_k2pb/verification/REPORT.md)
- [フェイズ04 v2検証記録](../prototypes/phase04-top-wireframe-v2/verification/requirements-check.md)
- [05–06終了総括](K2pbLab_05-06_終了総括.md)
- [新規独立試験の生データ](phase08-evidence/audit.json)