Yoshino｜Webデザイナー

デザインからコーディングまで、一貫して丁寧に制作いたします。ご連絡はDMからお願いいたします。

[Yoshino｜Webデザイナー @y_weblab]

2025.04.11

沢山悩んで沢山時間かけて作成してきたポートフォリオ、ようやく完成です！
https://t.co/ODeezSm5Rx

ここからまた気合い入れてお仕事頑張ります！

#RaiseTech
#BuildUpDaily

[Yu Morita (yuu) @securecat]

Claudeがいちいちアクセシビリティ不考慮のコードを吐くので、逐一対応した結果、グローバルCLAUDE.mdからアクセシビリティ基準として参照している A11Y.md 、現状こうなっています。
ーーーーーーーーーーーーーーーーーーー

# Accessibility Baseline (WCAG 2.2 AA)

サンプルコード・テストコードを含む**すべてのコード出力**において以下を遵守すること。

WCAG 2.2 AA ぎりぎりではなく、**余裕のある水準**を目指すこと。このファイルに明示的な記載がある場合はその値を優先し、記載のない事項は WCAG 2.2 AA に基づいて判断すること。

---

## アクセシビリティの哲学

アクセシビリティとは、基準のぎりぎりを狙ったり、基準の抜け道をくぐって省略したりするものではない。**できるだけ多くの人に恩恵があるようにすること**が目的である。

### 「装飾かどうか」を決めるのは制作者ではない

ある要素が「装飾的かどうか」を決める権利は制作者にない。閲覧者は誰もが、画面に表示されているものが何であるかを知る権利を等しく持っている。晴眼者も、弱視の人も、全盲の人も。制作者がその権利を「これは装飾だから対象外」という判断で奪うことは許されない。

### WCAGの免除規定は現代に適合していない

WCAGの免除規定のほとんどはWCAG 2.0（2008年）当時のブラウザの表現力・支援技術の機能・通信速度などを根拠に書かれており、現代の技術環境にはマッチしていない。「WCAGではこれは免除される」という理由を、基準を下げる根拠にしないこと。

視認できる要素はすべて、テキストであるか装飾であるかを問わず、コントラスト比の基準を満たすこと。

---

## フォントサイズ

- `lang="ja"` の文書：本文・注釈ともに **最小16px**
- `lang="en"` の文書：本文・注釈ともに **最小14px**
- 単位は `px` に限らず `rem` / `%` 等を用途に応じて使ってよい。最終レンダリング結果として上記サイズとすること
- 見出し（h1・h2・h3 等）は本文より大きくすること。具体的なサイズは都度決める
- ただし、ブラウザ拡張の `popup.html` においては、見出しサイズは本文と同じでよい
- 本文と注釈の優先度の差は、フォントサイズではなく**コントラスト比**で表現すること（後述）

---

## コントラスト比（全般）

コントラスト比は、実装方法によらず**最終レンダリング結果**で判定すること。`opacity` の重ね合わせ・`rgba()` / `hsla()` の透明度指定・`filter: opacity()` 等で色が薄まった場合も、実効コントラスト比がこの基準を満たしていなければならない。

`opacity` はデザイン上の明確な理由がある場合を除いて使用しないこと。テキスト・境界線・UIコンポーネントなど、コントラスト比が求められる要素に適用すると実効コントラスト比が下がるため。

---

## コントラスト比（テキスト）

- **本文**と背景のコントラスト比：**7:1 以上**
- **注釈など優先度の低いテキスト**と背景のコントラスト比：**4.5:1 以上**（本文より淡い色にすること）
- ライトテーマ・ダークテーマのそれぞれで独立して適合すること
- ぎりぎりの確保を狙わず、余裕をもった色選定をすること

---

## コントラスト比（非テキスト）

境界線・区切り線・アイコンなど、**あらゆる視覚的要素**は隣接する背景色に対して **3:1 以上**を確保すること。ボタン・入力欄などの UI コンポーネントはもちろん、カードの枠線・水平線・装飾的なボーダーも同様に適用される。

余裕のある目安：
- 白・明るい背景（`#fafafa` 相当）に対して：`#767676` 相当以上の濃さ
- 黒・暗い背景（`#18181b` 相当）に対して：`#6e6e76` 相当以上の明るさ

ボタン背景が薄くなる場合は、**`#949494` 以上の濃さのボーダー**で囲むことでコントラストを確保してよい。

ライトテーマ・ダークテーマのそれぞれで独立して適合すること。

---

## CSS 変数の設計

- 「装飾的な区切り線・背景」と「UIコンポーネントの境界・インジケーター」を**同じ変数で兼用しない**こと
- 装飾ボーダーが 3:1 を確保できない場合は、削除すること（低コントラストの装飾は弱視ユーザーに見えておらず、存在意義がない）

---

## フォーカス・リンク

- フォーカスインジケーターを消さないこと（`outline: none` の安易な使用禁止）
- リンクのアンダーラインを消さないこと
- hover 時もアンダーラインを維持し、さらに**太くする**こと

---

## インタラクション

- **トースト／スナックバー**は自動消去しないこと
- 原則：操作結果は地の文章として表示する
- トーストを使う場合は**閉じるボタン**を設け、ユーザーが閉じるまで表示を維持すること
- **自動再生・自動スクロール・カルーセル等**の自動で動くものを作らないこと
- ユーザー操作による動きはOK。ただし**いつでも停止できる**手段を提供すること

---

## キーボード操作

- すべてのインタラクションをキーボードで操作できるようにすること
- `<div>` や `<span>` をボタン代わりに使わないこと
- 画面内アクション → `<button>`
- 画面遷移 → `<a>`
- ファイルのドロップエリアを作る場合は、必ず **`<input type="file">`** も併設すること

---

## フォームコントロール

- `<input>`・`<textarea>` の代わりに `contenteditable` な `<div>` を使わないこと
- フォームコントロールは必ずネイティブ要素（`<input>`・`<textarea>`・`<select>` 等）を使い、見た目は CSS でカスタマイズすること

[Yoshino｜Webデザイナー @y_weblab]

@yat8823jp 私は2日前に再発です🥲

[なつ @Dia_Nexus]

どう作ったか記事を書いてみた
https://t.co/I6NF3cBvQw

[たにぐち まこと／ちゃんとWeb withAI @seltzer]

https://t.co/VNUHmLToCY

[CeeBeeDee（CSS Nite/DTP Transit） @ceebeedee_jp]

Web制作（コーディング）の現場で、いまでは前提が変わりつつある考え方や手法について、長谷川喜洋さん、相原典佳さんに解説いただきます。

出演：
・長谷川 喜洋 @hiro_ghap1
・相原 典佳 @noir44_aihara

今回、取り上げる内容（予定）

・html { font-size: 62.5%; } は、いま積極的に採用すべき手法ではない（見直し対象）
・target="_blank" に対して「常に rel="noopener" が必須」という理解は誤り（前提と条件を整理）
・address は「住所を書くためのタグ」ではない（役割の誤解を解く）
・ファビコンは .ico 固定でなくてOK（現行の定番に合わせる）
・type="text/javascript" は不要（いまの書き方に統一）
・dvh はスマホ環境でレイアウトシフトの原因になり得る（使いどころに注意）
・outline: none; はしない（アクセシビリティの観点で整理）
・詳細度の「は1000点、. は10点、タグは1点」みたいな覚え方は誤解を招く（正しい理解に更新）
・変数宣言で var は使わない（let / const を前提に整理）

2026年2月27日（金）21:00 - 23:00 オンライン開催
#デジタルお焚き上げ 2026 Web制作（コーディング）の常識をアップデート
https://t.co/Az6mPgHQdk

[Yoshino｜Webデザイナー @y_weblab]

@ABECK_Q すごいね👍

[Yoshino｜Webデザイナー @y_weblab]

@matsumatsu04 ロゴ

[Yoshino｜Webデザイナー @y_weblab]

@emiweb2 あらら、大丈夫？

[辻勝利 @KatsutoshiTsuji]

Alt属性はあなたのお気持ちを表明するための無限に詰め込める魔法の箱ではありません｜Katsutoshi Tsuji @KatsutoshiTsuji https://t.co/edsWFU2MhK

[せきゆおう🇯🇵Web制作とAIのことを発信する人 @wurst_design]

意外と多いコーディング時の検討事項と、デザイナーにも事前に考えてほしいこと

----------

コーディング作業は、見た目の再現だけでなく、以下のような点も考慮しながら構築しています。

・適切なマークアップになっているか
・表示速度への影響はどうか
・運用・保守のしやすさ
・可変領域のレイアウト変化の想定
などなど...

一つの要素を作るだけでも、実はかなり多くのことを考えています。

上記の中でも、下の2つはコーダーだけでなくデザイナーにも一緒に考えてほしい部分です。

「お知らせ一覧」の例で考えてみます。

このデザイン自体には特に問題はないのですが、コーダーは以下のような観点で設計を考えます。

[日付]
・文字数によって横幅が変わるな
・どの端末でも改行や崩れが起きないように構築しよう

[カテゴリ]
・カテゴリって4文字以上が入る可能性は？
・CMSの場合クライアントが自由に追加できる？
・4文字を超える可能性があるなら固定幅はNG
※5文字以上入った場合の見た目はどうなる？

[記事タイトル]
※タイトルの文字数が多い場合は？
└[...]で省略する仕様？
└2行にするのかな？
└その場合は上揃え or 中央揃え？

[可変領域]
・要素の横幅が700pxあたりで改行が入るな
◎540pxあたりでタイトルが窮屈になるけどよい？
※SPサイズになる前に、見せ方を変える必要がある？

[その他]
※記事が存在しないケースはどう扱う？
・このテキストは音声で読み上げるべき？
・音声の読み上げが自然になってる？

※はクライアントやディレクターに確認が入ると思います。
◎は確認が入らないケースが多いと思います。

このように、想像以上に多くの検討を重ねながらコーディングは行われています。その中に「見た目」に関する検討も含まれています。

コーダーの経験値から「いい感じ」に作ってくれる人もいますが、経験の浅いコーダーや、見た目作りが苦手なコーダーからは細かく確認が入ることが想定されます。

とくに、今回のようなケースでは、「カテゴリの文字数」や「記事が無い場合の表示」などは、コーダーだけでは判断が難しい項目です。

そのため、デザイナーやディレクターは、
「○○の場合はどうする？」といったパターンの想定をすることも仕事のひとつだと考えています。

これが、「Webデザイナーはコーディングができなくてよいけど、Webの仕様を理解するべき」の一例かなと、僕は考えています。

[Yoshino｜Webデザイナー @y_weblab]

@okada71138777 それは良かった👍

[Yoshino｜Webデザイナー @y_weblab]

@okada71138777 あー、やってしまいましたね。
怪我はしていないの？

[Yoshino｜Webデザイナー @y_weblab]

@emiweb2 思わぬ出費だったねぇ

[Yoshino｜Webデザイナー @y_weblab]

@y_design_works おおお、今見ました。
マーケと起業⁉︎
新しい挑戦、応援しています！

[Yoshino｜Webデザイナー @y_weblab]

@y_design_works 早く治りますように！
お大事にしてね🙏

[Yoshino｜Webデザイナー @y_weblab]

@Yuito_Kuroyama ほしい

[Yoshino｜Webデザイナー @y_weblab]

@yat8823jp 腰、やっぱりやっちゃいますよね。
お大事になさってください。

[Yoshino｜Webデザイナー @y_weblab]

@yuureto228364 おめでとう‼︎
努力が実りましたね👍