開発のスキル

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

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

本番公開するJavaScriptに残ったconsole出力を点検し、削除や環境別の無効化、ログサービスへの置き換えを支援します。ブラウザでの実行経路と修正後の確認方法も扱います。

• 公開前のデバッグログ点検
• 開発用と本番用のログを分けたいとき
• ビルド時のconsole出力除去

CSSの上書き競合を点検し、`@layer`でスタイルの優先順を明示する構成へ整理して、複雑なセレクターや`!important`への依存を見直すスキル。

• CSSの上書き競合を調べたいとき
• デザインシステムのスタイル優先順を設計
• ユーティリティ中心のCSSから段階的に移行

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

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

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

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

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

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

ページの初期表示を遅らせるリソース取得の依存関係を計測し、重要なCSSの埋め込みや必須ファイルの先読みで、通信の待ちが連鎖する構造を見直すスキル。

• ページの初期表示が遅いとき
• リソース取得の依存関係の点検
• 重要CSSの埋め込みや先読みの検討

本番配信するCSSの空白やコメントを削ってファイルを小さくするために、圧縮の適用状況やビルド設定を点検し、画面幅ごとの表示も確認するスキル。

• 本番CSSの圧縮状況の確認
• ビルド工程に圧縮を追加したいとき
• PostCSSの出力を見直したいとき

CSSファイルの容量と読み込みを調べ、表示の遅さにつながる箇所を測定で確認しながら、不要なスタイルの削除や圧縮、ページ別の分割を進めるスキル。

• ページの初期表示が遅い原因の調査
• 容量の大きいCSSを探したいとき
• 未使用スタイルの削除とCSSの圧縮

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

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

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

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

表示されない画像や失敗しやすい参照先を調べ、ファイルパスの修正と代替画像への切り替えを支援し、読み込みエラー時の表示まで確認するスキル。

• 商品画像が欠ける原因を調べたいとき
• ビルド後の画像パス確認
• 外部画像に代替表示を付けたいとき

独立した画面部品のCSSを点検し、レイアウト再計算や再描画の範囲を抑える設定を提案します。画面幅や操作状態ごとの表示も確認し、適用箇所を見極めます。

• 独立した部品が多いページの見直し
• 画面外の一覧項目の描画を省きたいとき
• 画面幅ごとの表示を確認したいとき

チェックボックスやラジオボタン、スイッチの読み上げ用の名前を点検し、何を選択・切り替える操作かが伝わるラベルの付け方と確認方法を示すスキル。

• チェックボックスやラジオのラベル確認
• スイッチ名が目的を伝えるかの点検
• 読み上げ用の名前の不足や曖昧さの修正

CSSアニメーションで描画負荷のかかる指定を見つけ、transformやopacityを使う修正を提案します。画面幅や操作状態ごとの表示、動きを減らす設定も確認します。

• カクつくアニメーションの見直し
• 位置やサイズを動かす指定の修正
• 動きを減らす設定の確認

Webサイトの画像を点検し、圧縮効率の高いAVIF形式の導入を支援します。画像サイズや読み込み方も確認し、非対応ブラウザ向けにWebPやJPEGを用意する構成を検討します。

• サイトの写真にAVIFを導入したいとき
• 非対応ブラウザ向けのWebP・JPEG配信
• 初期画面の画像サイズや読み込み方の点検

画面部品の役割を示すARIAロールに必要な属性がそろっているか点検します。実際のHTMLと操作時の状態を確認し、読み上げに必要な情報の不足を修正します。

• 独自スライダーの必須属性の点検
• 共通UI部品のアクセシビリティレビュー
• 読み上げに伝わる状態情報の確認

読み上げ対象から隠した領域に、キーボードで移動できるリンクやボタンが残っていないか調べ、フォーカスの迷子を防ぐ修正と検証方法を示すスキル。

• 非表示領域に残る操作要素の点検
• キー操作中に読み上げが途切れる原因調査
• 共通UI部品のアクセシビリティ確認

画面の要素に設定した役割とARIA属性の組み合わせを点検し、スクリーンリーダーが意味を正しく受け取れるよう、未対応の属性の削除や修正を案内するスキル。

• 共通部品のARIA属性の点検
• デザインシステムのアクセシビリティ確認
• 意図と違う読み上げを調べたいとき

ツールチップの補足情報がスクリーンリーダーに伝わるかを点検。読み上げ用の名前や表示元の要素との関連付けを確認し、修正案と検証方法を示すスキル。

• ツールチップの読み上げ確認
• 表示元と補足説明の関連付けの点検
• 共通ツールチップ部品のレビュー

折りたたみ式のアコーディオンをキーボードや読み上げで利用できるよう、ボタンと開閉状態の属性、見出し構造、実際に出力されたHTMLを点検・修正するスキル。

• 折りたたみ部分のキーボード操作確認
• 読み上げで開閉状態を伝えたいとき
• 共通のアコーディオン部品の見直し

ファイル一覧や階層メニューの項目名と開閉状態を点検し、スクリーンリーダーで各項目を区別できるように、ARIA属性や表示テキストの修正を案内するスキル。

• ファイル一覧の項目名を点検したいとき
• 階層メニューの開閉状態の確認
• アイコンだけの項目への名前付け

表の見出しやセルの対応関係を点検し、読み上げでもデータの意味が伝わるHTMLへ整えるスキル。単純な表から結合セルのある複雑な表まで確認します。

• 表の読み上げ対応を確認したいとき
• 結合セルと見出しの関係を見直すとき
• デザインシステムの表のレビュー

バッテリー残量や容量などのメーター表示を点検し、スクリーンリーダーで数値が何を表すか伝わるよう、読み上げ用の名前を確認・追加するスキル。

• 残量や容量メーターのラベル確認
• メーターに読み上げ用の名前を付けたいとき
• 共通UI部品のメーター点検