David Dias

行と列を同時にそろえる画面レイアウトを見直し、CSS Gridへの置き換えや、画面幅・内容に応じて配置が変わるグリッドの設計を支援するスキル。

• 二次元のFlexboxやfloat配置の見直し
• 画面幅に応じたカード一覧の配置
• 入れ子の要素を親グリッドにそろえたいとき

WebサイトのCSP設定とHTMLの挿入処理を点検し、読み込めるリソースの制限や安全な表示処理を整え、本番に近い環境でブラウザの挙動まで検証するスキル。

• 既存のCSP設定を点検したいとき
• スクリプトや外部リソースを制限したいとき
• 信頼できないHTMLの表示処理の確認

Webページの文字や入力欄の枠、アイコンなどの色のコントラストを点検し、操作中の状態も含めてWCAGの基準を満たす配色への修正を支援するスキル。

• 文字と背景の配色を点検したいとき
• 入力欄の枠やアイコンの視認性確認
• ホバーやフォーカス時の色の確認

Cookieへの同意前に解析・広告タグが動いていないかを点検します。拒否や同意撤回後の挙動、設定変更の導線まで確認し、実装の修正を支援します。

• 同意前の追跡タグを点検したいとき
• Cookieの拒否・撤回時の挙動確認
• バナーを閉じた後の設定変更導線の確認

検索エンジンに正規ページを伝えるcanonical URLの転送を点検し、HTTP応答と表示後のHTMLを確認して最終URLへの直接指定を支援するスキル。

• canonical URLの転送を確認したいとき
• URL変更後のcanonicalタグの点検
• 正規URLを生成するテンプレートの確認

異なるサイト間の通信をコードとブラウザの動作から点検し、CORS設定、メッセージの送信元確認、認証後の転送先などの問題を見つけて修正するスキル。

• 認証が必要なAPIのCORS設定の点検
• postMessageの送信元検証
• ログインやSSO後の転送先を確認したいとき

カードなどの部品が配置先の幅に合わせて表示を変えるよう、CSSを点検・修正します。画面幅に依存する指定を見直し、異なる配置での再利用を支援するスキル。

• カードをグリッドとサイドバーで使いたいとき
• メディアクエリを書き換えたいとき
• 配置先の幅ごとに表示を点検したいとき

公開前のHTMLに残る開発用コメント、デバッグコード、ログ、仮の要素を点検して除去します。必要なコメントを残しながら、機密情報の露出も確認するスキルです。

• 本番公開前にHTMLを整理したいとき
• コメント内の機密情報を点検したいとき
• デバッグログや仮の要素の削除

Webページを紙に印刷したときの読みやすさを点検し、印刷用CSSを整えます。ナビや広告の非表示、文字サイズ、改ページ、外部リンクのURL表示を確認します。

• Webページを紙で読みやすくしたいとき
• 印刷時にナビや広告を隠したいとき
• 印刷の文字・改ページ・URL表示の調整

HTMLのhead内でCSSとJavaScriptの読み込み順を点検し、画面幅や操作状態ごとの表示も確かめながら、表示の遅れや装飾のちらつきへの修正案を示すスキル。

• 装飾のない画面が一瞬見える原因の調査
• head内のCSSとJSの順序確認
• スクリプト遅延と重要なCSSの点検

ページを開いてすぐ見える重要画像の読み込み順を点検し、画像サイズや遅延読み込み、優先度指定を見直して、主要コンテンツの表示改善を支援するスキル。

• ヒーロー画像の読み込み優先度の点検
• 初期表示画像の遅延読み込みを調べたいとき
• DevToolsで画像の修正を確認したいとき

ブラウザーに届くHTMLの文字コード宣言を点検し、UTF-8の指定漏れや配置の問題を見つけ、日本語や特殊文字の文字化けを防ぐために修正するスキル。

• 日本語や特殊文字の文字化け調査
• 公開前の文字コード宣言の確認
• 共通テンプレートのHTML出力点検

SharedArrayBufferなどに必要なクロスオリジン分離を点検。セキュリティヘッダーと外部リソースの互換性を調べ、ブラウザーでの成立を確認するスキル。

• SharedArrayBufferの利用要件確認
• COEP導入前の外部リソース調査
• ポップアップや埋め込みへの影響確認

サイト内のリンク切れを調べ、404やサーバーエラーになるリンクの修正を支援します。実際のページとHTTP応答を確認し、検索エンジンの巡回への影響も説明します。

• ページ移動・削除後にリンクを点検したいとき
• メニューや本文のリンク切れを探したいとき
• リンク切れの検索巡回への影響を調べたいとき

空のボタンやアイコンだけのボタンを点検し、読み上げで操作内容が伝わる名前を付けます。別ページへ移動する要素はリンクに直すなど、役割も見直します。

• 説明のないボタンを探したいとき
• アイコンボタンの読み上げ名を追加
• 画面移動に適した要素を確認したいとき

ページ内の外部リンクを点検し、404などのエラーや期限切れドメインを確認して、正しいURLへの更新や削除が必要なリンクと該当ページを特定するスキル。

• 古い記事の参考リンクを点検したいとき
• 外部リンク切れの更新・削除
• 期限切れや転用されたドメインの確認

各ページのcanonicalタグを確認し、URLの表記違いやパラメータで重複するページについて、検索エンジンに伝える正規URLの設定を整えるスキル。

• 各ページのcanonicalタグの点検
• パラメータやドメイン表記による重複URLの確認
• 正規URLを追加・修正したいとき

大きなJavaScriptの配信ファイルを点検し、初期表示に不要な機能やライブラリを必要な場面で読み込む形へ分割して、読み込み待ちの表示も整えるスキル。

• 大きなJavaScriptの分割候補を探す
• グラフやエディターの読み込みを遅らせる
• ページごとの読み込みコードの点検

CSSを無効にしても内容を理解し操作できるか、HTMLの読み順や見出し、フォームのラベルを点検し、見た目に依存した構造の修正を支援するスキル。

• CSS無効時の使いやすさの確認
• 読み順や見出し構造の見直し
• フォームのラベルやエラー表示の点検

CSS変数を使うアニメーションやグラデーションを点検し、@propertyで値の型・初期値・継承を定義して、滑らかな変化を支援するスキル。

• グラデーションを滑らかに動かしたいとき
• CSS変数を使う画面効果の点検
• デザイントークンの型と継承の設定

再訪時の不要なダウンロードを減らすため、ブラウザのキャッシュ設定を点検します。静的ファイルとHTMLの違いに応じて、保存期間や再検証用ヘッダーの修正を検討します。

• 再訪時の読み込み遅延を調べたいとき
• 静的ファイルのキャッシュ設定確認
• HTMLとハッシュ付き資産の方針整理

ページの初期表示を待たせるCSSの読み込みを点検し、必要なスタイルの埋め込みや後回しの読み込みを支援します。画面幅や操作状態ごとの表示も確認しながら修正を検討します。

• 初期表示を遅らせるCSSを調べたいとき
• 最初に必要なCSSと後回しのCSSの整理
• preloadやmediaによる読み込みの点検

閉じ忘れたタグや誤った入れ子など、HTML構造の不備を点検・修正します。実際のHTMLとHTTP応答を確認し、表示や検索エンジンの読み取りに影響する問題を探します。

• タグの閉じ忘れや入れ子の点検
• HTMLに起因する表示崩れの調査
• 検索エンジン向けのHTML構造確認

HTMLのcanonicalタグとHTTPのLinkヘッダーが示す正規URLを比較し、検索エンジンに矛盾した情報を送るページやテンプレートを特定するスキル。

• HTMLとHTTPの正規URL宣言の比較
• 正規URLの指定が矛盾する原因調査
• ルートやテンプレート別の出力点検