【最終工程だからこそできる】今必要とされる構造化データとアクセシビリティ - コーダー編 -

ペルソナも CV の説明もなく、渡されるのは Figma や XD だけ。「指示が無いから、見た目どおりに組む」。その進め方になっていませんか。見た目の一致は仕事の一部です。それだけで足りるかは、別です。2026年に、トレースだけのコーダーが AI とローコードに必ず代替される、という事実はありません。画面に無い意味（見出し、メタ、JSON-LD、キーボード）をコードに残せる人が、確認しやすい納品になる、が近いです。

結論です。最終工程にいるから、上流で空欄のまま来た意味と操作を、実装で補える位置にいます。 唯一の存在、とは言いません。HTML を書く人が、画面とマークアップのずれに最初に気づける、です。JSON-LD を足せば GEO（AI 検索）に載る、見た目の再現を超えた意味の実装が2026年の真価、という合格ラインも言いません。画面に見える文と、機械向けの型と、Tab で辿れることを揃える。それが最終工程でできる補完です。

この記事では、フリーランスのWebディレクター兼エンジニアとして、コーダーが仕込む範囲と、上流への返し方を整理します。指示不足を責める文章にはしません。知識が案件に無いとき、提案できる側に回る、という話です。架空の診断商品名や、Lighthouse の点数保証は書きません。

見た目どおりだけでは足りない理由

デザインデータは、見た目しか持たない

OGP、検索用タイトル、h1〜h6 の論理順、ARIA、JSON-LD は、フレームから自動では出ません。カンプは配置と色です。タグと属性は、実装者が決めるか、空欄のまま残ります。

上流に Web 標準の知識が薄い案件ほど、コード側の確認が効く

ディレクターやインハウスが WCAG やいわゆる GEO を見ていない、と決めつけません。見ていない案件はある。そのとき、コントラスト不足、フォーカス消失、FAQ が div だけ、に気づけるのは HTML を書く工程です。最終防衛線、は比喩です。納品前のチェック項目、が正確です。

「指示が無いからやらなかった」で終わるとき

違反や「AI 検索非対応」でクライアントが必ず不利益を被る、とは言えません。起きやすいのは、納品後にキーボードで詰まる、シェアカードが崩れる、構造化が画面とずれる、です。双方が不幸、は誇張ですが納品後の手戻りや、使いにくい公開物が残る。提案と確認ができる実装者が選ばれやすい、は現場の感触であり、統計ではありません。

構造化データ（JSON-LD）を、画面と揃えて入れる

LLM や検索にファクトを一発で正しく伝える、公式の GEO スコアはありません。Google の検索ギャラリー に載るには、画面に見える文と構造化データが同じことが条件です。ガイドライン に無い星や価格を、JSON-LD にだけ足さない。

デザインから読んで入れてよい代表例です。無い型は作らない。

• FAQ: アコーディオンを div だけにしない。公開する Q と A を FAQPage に載せる。折りたたみで隠していても、マークアップする文は画面と同じにする。
• パンくず: 見た目のリストと BreadcrumbList をセット。ラベルと URL をナビとずらさない。
• 組織・店舗: フッターや概要に出ている正式名称、住所、同じ SNS の URL を Organization や LocalBusiness に。画面に無い営業時間を足さない。

埋め込みの骨組みです。値は、そのページの公開文に置き換えてください。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "（画面の問いと同じ文）",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "（画面の答えと同じ文）"
      }
    }
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "（画面のパンくずと同じラベル）",
      "item": "https://example.com/example/"
    }
  ]
}
</script>

example.com は、公開 URL に差し替えます。

アクセシビリティで、コード側が確保できること

セマンティック HTML

div / span を禁止しません。ランドマークが無いときに困ります。main、nav、article、section、header、footer を、役割があるところに使う。見た目の箱のために section を増やさない。見出し順は、スタイルの大小より、文書の節。

キーボードとフォーカス

outline: none; だけで消すのは、代替が無いときの悪手です。:focus-visible でキーボード時の枠を残す。tabindex は、まず DOM 順。正の値で順を飛ばすのは、原則使わない。フォーカスの可視性 は、色だけにしない。

alt の切り分け

装飾は空。意味がある画像は、その場の文脈。ファイル名や「画像1」は情報になっていない。指示が無くても、リンク画像なら行き先が分かるかは実装者が見られる。

フォームと読み上げ

label と input を id で結ぶ。placeholder だけがラベル、にしない。アコーディオンは、開閉が分かるように aria-expanded と、対象パネルの aria-controls。付けた属性と、実際の開閉を一致させる。

上流を巻き込む返し方

単価が上がる保証はありません。確認の手数は減ります。

1. 受領時に不足を返す。 コントラスト（AA の本文 4.5:1 目安）、ホバーとフォーカス、SP のタップ（AA は 24×24、44px は目標なら明記）。不備は指摘して、決めてもらう。
2. 設定シートを先に渡す。 検索タイトル、OGP、JSON-LD の型と対象外。空欄で「お任せ」にしない。
3. ツールを工程に置く。 Lighthouse と axe DevTools は自動の抜け漏れ用。スコア保証、標準品質の証明、にはしない。記録と、キーボードの目視をセットにする。

コーダー用 実装チェックシート

まとめ：トレースから、揃える実装へ

作業者から品質を守るエンジニアへ、という肩書きの話ではありません。画面とコードと操作を、納品前に揃える人になる、です。診断という商品名である必要はありません。

セマンティックなマークアップ、JSON-LD、キーボード操作の実装の相談は、相談・お問い合わせからどうぞ。