David Dias

画面の文章や操作案内を見直し、障害・性別・文化への思い込みを含む表現や利用者を責めるエラー文を見つけ、中立で建設的な言い換えを提案するスキル。

• 画面文言の排他的な表現の点検
• 利用者を責めるエラー文の書き換え
• 性別を決めつけない表現を選びたいとき

Webページの見出しを点検し、階層の飛びや内容に合わない見出しを洗い出します。画面読み上げでページ構成をたどりやすいよう、HTMLの構造を整えます。

• ページの見出し階層を点検したいとき
• 画面読み上げでの移動しやすさ改善
• デザインシステムの見出し確認

サイト内のリンク構造を調べ、重要ページへのリンク不足や孤立ページを見つけるスキル。関連記事からのリンク追加や、リンク文言の具体化を支援します。

• 重要ページへのリンク不足を探したいとき
• 関連記事同士のリンクを追加したいとき
• 曖昧なリンク文言を見直したいとき

Front-End Checklistのルール文書を採点基準に沿って点検し、曖昧なAI向け指示や不足項目を、具体的な手順とコード例で補うスキル。

• 未完成のチェックリストルールの拡充
• AI向け確認・修正指示の具体化
• PR前のルール構造と品質の確認

本文を覆うポップアップやモーダルを点検し、モバイルでの閲覧、閉じる操作、キーボードのフォーカス管理を確認して、SEOとアクセシビリティの改善を支援するスキル。

• モバイルの広告ポップアップ点検
• モーダルをキーボードで閉じたいとき
• ダイアログ開閉時のフォーカス確認

HTTPSサイトの応答ヘッダーを点検し、暗号化通信を継続させるHSTSの設定、サブドメインへの適用、事前登録の注意点まで確認するスキル。

• HTTPS応答のHSTSを確認したいとき
• サーバーやCDNにHSTSを設定したいとき
• 有効期間とサブドメイン適用の点検

ページの読み込み時に発生するHTTPリクエストを数え、実測で遅延の原因を確認しながら、ファイル統合や重要な資源の埋め込みなどの削減案を示すスキル。

• ページの初期表示が遅い原因の調査
• 画像やCSSなどの不要な通信の確認
• ファイル統合やアイコン集約の検討

HTMLに直接書かれたJavaScriptを点検し、外部ファイルとaddEventListenerへ整理して、保守性やキャッシュ利用の改善を支援します。

• HTML内のJavaScriptを分離したいとき
• onclickをaddEventListenerに変更
• キャッシュ利用と保守性の見直し

初回表示を重くする地図やエディターなどの任意機能を見つけ、クリックやフォーカス後に必要なコードを読み込む構成へ変更し、読み込み中の表示も整えます。

• 地図をパネル表示時に読み込みたいとき
• エディターを操作時に読み込みたいとき
• 初回表示を遅くするチャットの点検

HTMLフォームやJavaScriptの送信先を点検し、HTTP通信による情報漏えいを防ぐために、送信先URLとページのHTTPS設定を見直すスキル。

• ログインフォームの送信先を確認したいとき
• fetchやXHRの接続先を点検したいとき
• action省略フォームの確認

Webページの画像形式・容量・表示サイズ・読み込み方法を点検し、修正を支援します。画面幅に応じた画像の出し分けや、読み込み時のレイアウトずれも扱います。

• 表示が遅いページの画像容量・形式点検
• モバイルとPCで画像サイズを出し分け
• 画像読み込み時の表示ずれを防ぎたいとき

ページのHTML容量を調べ、埋め込みJSONや画像など肥大化の原因を確認します。検索エンジンの巡回を意識した軽量化や、インデックスされない内容の調査に使えます。

• 検索に出ないページ内容を調べたいとき
• HTML内の巨大なJSONの見直し
• ECサイトのHTML容量点検

検索に載せたい重要ページを対象に、noindexやHTTPヘッダー、robots.txt、CMSの設定を点検し、意図しない検索登録の妨げを見つけて修正するスキル。

• 重要ページがGoogle検索に出ない原因の調査
• 公開後にテスト環境の制限が残っていないかの確認
• CMSのページ・カテゴリ別登録設定の点検

ログインせずに開ける公開フォームのボット対策を点検し、CAPTCHAの導入、サーバー側のトークン検証、送信回数制限の追加を支援します。

• 問い合わせフォームの迷惑送信対策
• 会員登録やログインのボット対策
• CAPTCHAのサーバー側検証の確認

記事やブログの更新日時を、画面表示・HTTPヘッダー・構造化データの三つから点検し、本文の変更に合わせて整合するように設定を見直すスキル。

• 記事やブログの更新日時の点検
• CMSの更新日変更ルールの見直し
• 静的サイト公開時の日時処理の確認

検索エンジンがたどれないリンクをHTMLから洗い出し、空のhrefやJavaScriptだけの画面遷移を、適切なURLや要素へ修正するスキル。

• JavaScript中心の画面遷移の点検
• 動的に生成するリンクを確認したいとき
• 画面遷移と操作ボタンの使い分け

画像を使った入力ボタンのHTMLを点検し、操作の目的を伝える代替テキストの不足を見つけます。検索や送信などの動作が読み上げでも分かるよう、alt属性の修正を支援します。

• 画像入力ボタンの代替テキスト点検
• 検索・送信ボタンの説明を整えたいとき
• 共通の画像ボタン部品のレビュー

Webページの画像を調べ、見た目への影響を抑えた圧縮を進めるスキル。ファイル容量や表示寸法、読み込み方法、配信設定をまとめて確認します。

• 容量の大きいWeb画像を探したいとき
• 写真と図版の圧縮方法の選定
• ビルド時の画像圧縮を自動化したいとき

フォームの入力エラーや必須項目が支援技術にも伝わるかを点検し、説明文と入力欄の関連付け、エラー状態、選択肢のグループ化を改善するスキル。

• 読み上げでも伝わる入力エラーにしたいとき
• 必須項目と選択肢グループの点検
• Reactフォームの入力検証レビュー

ページの言語を示すlangとxml:langの不一致を点検します。XHTMLと通常のHTML5の違いを踏まえ、読み上げやXML処理で使われる言語指定の修正を支援します。

• XHTMLの言語属性を点検したいとき
• HTML5の不要なxml:langの整理
• 読み上げの発音がおかしいとき

サイト内の画像容量を用途別の目安で点検し、重い画像と削減目標を一覧化します。圧縮・形式変更・端末別の配信を見直し、容量と表示寸法の問題を切り分けます。

• 容量超過の画像と削減目標の一覧化
• CMSに登録された画像の点検
• ヒーロー画像やサムネイルの軽量化

Google Tag Managerがページの表示速度に与える影響を実測し、不要なタグやトリガー、読み込み方法を点検して改善案を示すスキル。

• GTM導入ページの遅さを調べたいとき
• 不要なタグやトリガーの見直し
• 非同期読み込みの確認

サイト全体が有効な証明書でHTTPS配信されているかを点検し、HTTPからの転送や内部リンク、読み込む素材のURLを含めた設定の修正を支援します。

• サイト全体のHTTPS対応の点検
• 証明書の期限と対応ホスト名の確認
• HTTPからHTTPSへの恒久転送の確認

JavaScriptのオブジェクトや配列を直接書き換える箇所を探し、コピーを作って更新する形に直すスキル。共有状態の変更を追いやすいコードへ見直します。

• 共有オブジェクトの直接変更の検出
• pushやspliceによる更新の見直し
• クライアント側の状態更新のレビュー