# フェイズ07　DSM準拠による再実装

2026-11-05。実装範囲はトップページ1枚。原稿・画像・掲載順は figma_html、部品と基盤は dsm_for_design_figma を使用。前回版は作業前に [before-dsm.zip](../before-dsm.zip) に保存した。HTML・Sass・JS・画像・前回の検証資料を含む42エントリのZIPの整合性を確認済み。

## 閲覧・編集

[index.html](../index.html) を直接開く。原稿・URLはHTMLを編集。共通Sassは sass/dsm/ に複製し、[sass/top.scss](../sass/top.scss) が dsm/style と図版部分を読み込む。スタイルの変更後、figma_k2pb を作業ディレクトリとして以下を実行する。

    sass --no-source-map sass/top.scss common/css/style.css

JSは common/js/tips.js がDSMのメニュー開閉を担当し、menu.js はページ内リンクを選んだときの閉じる操作と移動先へのフォーカスを補完する。閲覧時にReactは使用しない。

## 部品の採用実績

元ファイルのパスは dsm_for_design_figma/ 基準。実装ページが読み込むのは common/css/destyle.css とDSMの全モジュールを含む common/css/style.css。部品を表示中のDOMと計算済みスタイルで確認した。集計単位の異なる部品を一つの採用率にはしていない。

|対象|元ファイル・構造|実装で確認したこと|
|---|---|---|
|本文とスキップ|html/index.html、sass/_modules.scss の toContents / mainWidth|最初のTabとEnterで main#contentsWrap へ移動|
|ヘッダーとナビ|html/temp/html/header.html、sass/_head_foot.scss、html/common/js/tips.js|headerWrap > header > headerNav > nav.gNav > ul 内に5項目。開閉ボタン・背景・閉じ込め・スクロール制御を採用|
|支援カード|html/component_list.html、html/layout_grid.html、sass/_modules.scss|ul.card.line.radius.flex の直下に li.line-2 が4件。親の計算済みdisplayはflex、各カードの枠はsolid。詳細先未確定のためリンクは付けず、原稿を残した|
|記事カード|html/pattern_list.html の card / line-3 / meta / label|3件とも li.line-3 > a がサムネイル・カテゴリ・記事見出しを内包。カテゴリの見た目をMakeに調整|
|お知らせ|html/component_list.html、sass/_modules.scss の ul.indexList|5件とも li > a に .meta > time[datetime] と本文。行全体がリンクになり、下罫線・ホバーはDSMを継承|
|フッター|html/temp/html/footer.html、sass/_head_foot.scss|footer#footerWrap.footer 内に footerInner と footerGNav > ul、リンク3件|
|見出し・リンク|sass/_title.scss、_tips.scss、_links.scss|本文見出しは text-5xl、text-4xl、text-3xl。案内リンクは textBlue。フォーカス表示はDSMの _responsive.scss|

## ページに合わせた変更

|項目|DSM標準 → トップでの値・理由|
|---|---|
|本文の幅|mainWidth・ヘッダー・フッター内側の1144px → 最大1280px。1440pxで左右80px。1100px以下は40px、767px以下は24pxの余白を確保|
|ナビ・段組みの境界|860px → 767px。ローカルの _set.scss と tips.js の両方を変更し、Makeの切り替えと一致させた|
|ヘッダーとロゴ|PCヘッダー84px → 内側95px＋罫線1px。SP48px → 71px＋1px。PCロゴ215×40 → 258×48。DSMのstickyヘッダーと小画面ドロワーの操作は継承|
|列幅|line-2 の48.4% → (全幅−16px)/2。line-3 の31.4% → (全幅−64px)/3。カード間隔をそれぞれ16px、32pxに合わせる。767px以下は1列|
|カード|DSMの line の色 #e3e3e3 → #d7d8d9、radius の8px → 4px。支援カードは内側32px、PC最小高456px。記事カードのリンクは既定16pxの内側余白を0にしてサムネイルを列幅いっぱいに表示|
|見出し|H1の48pxを維持し行高1.25 → 1.4。通常H2は36 → 40px、小見出し型は34px。SPの通常H2は32px。Makeに合わせて赤い目印と字間を追加|
|ニュースとフッター|既存一覧のリンク余白16px → 上下24px・左右0。日付112px、本文との間32px。フッターの背景を #f5f6f7 → #f6f6f6 とし、補助ナビを原稿に合わせて1階層にした|

専用の図版は [sass/_illustrations.scss](../sass/_illustrations.scss) に分離。ヒーローの英字と点はMake画像の指定位置を再現するため、関係図の線・ノードは決定者と3領域の関係を表すために必要。ビジネス紹介・お知らせの非等幅配置、記事の灰色のサムネイル、セクションの印と余白をページ側で指定した。支援・記事カード自体の段組みと枠、ニュースのリスト、ナビの操作はDSMの部品を使用。

## 比較結果

比較画像は左からMake、保存した前回版、今回版。[PC比較](comparison-1440.png) ／ [375px比較](comparison-375.png) ／ [実測JSON](measurements.json)。元寸法の各画像も同じフォルダにある。Edge 156.0.4314.58、DPR 1、高さ900px。MakeのApp.tsxをロックファイルと同版のReactで静的描画し、元CSS・Preflight・画像を適用。両ページとも外部フォントを遮断して端末の代替フォントで比較した。

|幅|Make／今回のページ高|前回の画素差|今回の画素差|
|---|---|---|---|
|1440px|3824／3824px|0.97%|0.82%|
|375px|5373／5373px|0.74%|0.68%|

画素差は、RGBのいずれかで16階調を超える差があった画素数÷全画素数。余白を含み、アクセシビリティやDSM準拠の得点ではない。1440pxの主見出しは左80・上188px、関係図は左640・上771・720×480px、先頭の支援カードは左80・上1536・632×456px。いずれもMakeと整数px単位で一致。各節の開始Yも一致。DSMではmainWidth自体を本文幅にするため、全幅セクションに余白を付けるMakeとは外箱のX・幅は異なる。図版の伸縮、ナビ・リンクの字形や装飾、SPのメニューボタンに視覚差が残る。

320／375／766／767／768／1099／1100／1101／1440pxで確認。初回検証で見つけたSPの関係図の横はみ出しとフッター余白を修正。最終検証は全9幅で本文・ヘッダー・フッターの横はみ出し0、画像欠落0、実行時JS例外0。375pxでスキップリンク、Enterで開く、閉じるボタンへのフォーカス、Shift+Tab・Tabの循環、Escapeで閉じた後のフォーカス復帰、ページ内ナビ選択後の閉鎖・スクロール解除・移動先フォーカスを確認。見出しはH1→H2→H3。スクリーンリーダー実機、外部フォント配信時、他ブラウザー、外部URLの現在の稼働状況は未検証。

## 今回の追加作業時間・費用

JST 17:30:47開始、17:35頃まで、約4分（経過時間の概算）。前回版保存と基盤照合約1分、組み直し約1分、ブラウザー検証・修正・記録約2分。前回の作業は別枠。追加の有料素材・サービス購入0円。AI利用料金は請求明細未取得、人件費は時間単価未指定のため、ともに算定不可。