【デザイン以外の知識が必要？】今必要とされる構造化データとアクセシビリティ - デザイナー編 -

デザイナーだから

そんなセリフ、言った覚えや思ったことありませんか？
デザインの勉強をしてきたから。コードは難しくて苦手。ウェブデザイナーでもデザイン専業の方からよく聞く言葉です。

デザイナーでもコードは人並み以上にできている

制作会社にいた時に「苦手、嫌い、できない」と言ってたデザイナーは多くいました。
でも、いざコードを書く機会があったときに、全員が人並み以上にコーディングできていました。
実際に、これだけ書けるならもっと自信を持ったら良いのにと思ったことがありましたし、今でもウェブデザイナーでコードを書けないなんて人はいないと思ってます。※自信がないだけなんです。

難しいと思考停止しちゃうからデザインとウェブサイト運用時にズレが起こる

ユーザーへの視線誘導、ヒーロー画像、CVボタンの位置。目に見えるグラフィックに全力を注いでいませんか。配色と余白は大事です。ですがそれだけで「優れたWebデザイン」と呼べるかは、別です。2026年現在、今必要なものに一旦立ち止まって考えてみましょう。画面の外（SNS等へのシェアカード、音声読み上げ、キーボード操作）まで含めて、意図が伝わるかが問われやすくなりました。

結論です。Webデザインは、見た目だけではありません。 構造（何が見出しで、何が一塊の情報か）と、誰がどの操作手段でも辿れることを、カンプの段階で決める行為です。OGP・JSON-LD・WCAG をデザイナーがコードで書け、という事ではありません。カンプに意図が無いと、コーダーが推測し、ユーザーが詰まる。絵だけを渡す側から、状態と意味が読めるデータを渡す側へ移ることがこれからのデザイナーには必要です。信頼されるプロの合格ライン、とは言いません。実装と検証がしやすい事は、素人とプロの大きな違いです。

この記事では、フリーランスのWebディレクター兼エンジニアとして、デザイナーがカンプで決めておく範囲を整理します。「絵描き」という呼び方では片付けません。見た目に時間をかけた結果、状態と階層が後回しになる、という場合の話です。架空の診断商品名や、JSON-LD を入れれば AI 検索に載る、とは書きません。

見た目だけを詰めたデータで、起きやすいこと

OGPとシェア用の見た目が無い

サイト内は整っていても、SNS やチャットに貼ったときのカード（画像、タイトル、説明）が未設計、はよくあります。放置すると、ロゴの切れ、文字潰れ、別案件の画像流用が残ります。Facebook の画像サイズ案内 では、1200×630 前後がよく使われます。必須サイズではありません。コンポーネントに、カード用のフレームと、タイトルが切れたときの見え方を入れておく。

見出しの見た目と、HTML の順番がずれる

トップページの見出しデザインで h2 h3を設定、その後、その他のページで h2 の下に別デザインの見出しが追加されたり。コーダーは見た目の大きさでデザインにタグを振ることはしません。納品時はそれでカバーできます。しかし実際の運用ではどうでしょうか？運用担当者はタグやclass名を付け替えたりしません。結果、読み上げと目次が壊れます。崩壊、と煽るのではありません。スタイル名に役割（h1〜h6、Body、Caption）を付け、スキップしない順を注記する。見た目のデザインとタグを一致させない例外は、理由を書く。

薄いグレーと、小さい注釈

おしゃれな低コントラストは、屋外のスマホ、拡大、色覚の特性で見落とされます。高齢者と視覚障害者に限った話ではありません。WCAG の通常テキストは、おおよその目安として コントラスト 4.5:1（AA）。大きいテキストは 3:1。ブランドカラーが足りないなら、本文色を分ける。

構造化データと、デザイン上の塊

JSON-LD は、検索エンジン向けのラベルです。生成 AI（いわゆる GEO）が正しく読む公式スコア、はありません。デザイナーが書くファイルでもありません。関係するのは、画面上で「これは FAQ」「これは商品」と一目で塊になっているかです。塊が無いと、実装もマークアップも、どこまでが一つの事実かで割れます。

カンプで見ておく例です。

• FAQ: Q と A の対比が、同じパターンで繰り返せる。折りたたみでも、開いた文が見える。機械にも人にも、問いと答えが対応している。
• 製品・サービス: 名前、条件、価格、評価が一つのカードにまとまっている。無い星をデザインだけ置くと、構造化にだけ数字が乗る原因になります。画面に無い評価は描かない。
• パンくず: 階層を示す UI があるか。グローバルナビのコピーではない。ラベルと順が、情報設計と一致しているか。

アクセシビリティが、カンプで決まる4点

1. コントラスト

通常テキスト 4.5:1、大きいテキスト 3:1 が AA の目安。リンクとボタンも、背景との差を測る。Stark などのプラグインは一例です。初稿前に自分で見る。実装後にも再測する。

2. サイズ、行間、余白

本文 16px が WCAG の条文ではありません。相対サイズと拡大が前提です。現場の出発点として本文を 16px 相当に置く、は分かりやすい。タップ領域は、WCAG 2.2 の 2.5.8 で 24×24 CSS px が AA。2.5.5 の 44×44 は AAA。44 を目標にするなら、その旨を申し送りに書く。24 未満を隙間なく並べない。

3. ホバーとフォーカス

マウス用のホバーだけだと、キーボードでは今どこかが分かりません。フォーカスリング（枠や下線）を、通常・ホバーと並べて定義する。色の変化だけにしない。
実際にフォーカスリングを嫌うデザイナーは一定層います。
なぜならフォーカスリングは太く、存在感が強いため、おしゃれな低コントラストデザインではデザイナー目線で悪目立ちするからです。
しかし、2026年現在のウェブ制作ではフォーカスリングは消さない、をデフォルトにする。

4. フォームのラベルとエラー

プレースホルダーだけがラベルだと、入力中に消える。常時見える label。エラーは赤枠だけにしない。アイコンとテキストで、何が駄目かを書く。送信中と無効も、見た目を分ける。
必須を文字ではなく色だけで表現するデザイナーはいます。
ただ色では判別できないユーザーがいることを忘れてはいけません。

実践：破綻しにくいデータの渡し方（Figma / XD）

コーダーに喜ばれる、は主観です。推測が減る、が目的です。

1. テキストスタイルに役割を付ける。 h1〜h6、Body、Caption。見た目用の「大きい見出し」だけにしない。
2. OGP 用（目安 1200×630）のフレームと、切れ方をコンポーネントにする。 サイト内ヒーローの流用だけにしない。
3. 初稿前にコントラストを自分で見る。 使用するプラグインは Stark に限りません。数値は実装後にも確認する。
4. ボタンとリンクの状態を一覧にする。 通常、ホバー、フォーカス、無効。訪問済みが要る場合も書く。

デザイナー用 チェックシート

まとめ：美しさと、使えることと、塊があること

2026年の正解、という一本の公式はありません。見た目と、辿れることと、情報が塊になっていることを、同じカンプで決める。

UI の状態定義、コントラスト、見出しと OGP の切り方の相談は、相談・お問い合わせからどうぞ。