スキルを探す

Webサイトのダークモード対応を点検し、OS設定に合わせた配色や手動切り替えを整えます。固定色やコントラスト、画面幅・操作状態ごとの表示も確認します。

• OS設定に配色を合わせたいとき
• 暗い背景で崩れる固定色の点検
• 選択を保存するテーマ切り替えの追加

Web画面の動きを重くするDOMの読み書きやイベント処理を調べ、処理順序や更新頻度を見直して、ブラウザ上で原因に即した修正を検証するスキル。

• アニメーションのもたつきを調べたいとき
• DOMの読み書きをまとめたいとき
• スクロールやタッチのイベント処理の確認

HTMLの生の応答を確認し、先頭のHTML5文書型宣言の欠落や古い形式、宣言前の余分な文字を見つけて、標準モードで表示するための修正を支援します。

• 生のHTML応答の文書型宣言を確認
• 古いHTML4やXHTMLの宣言を置換
• 文書型宣言前の余分な文字を除去

画像と説明文のHTML構造を点検し、figureとfigcaptionで正しく関連付けます。代替テキストとの重複も確認し、読み上げ時に意味が伝わる形へ整えます。

• 説明文付き画像のHTMLを点検したいとき
• 画像説明と代替テキストの重複確認
• 読み上げ時の画像説明を改善したいとき

Webページを構成するHTML要素の数や入れ子の深さを測定し、不要な囲み要素の削除や長い一覧の表示方式の見直しを通じて、描画負荷の軽減を支援するスキル。

• ページの描画や操作が遅い原因を調べたいとき
• HTML要素数と入れ子の深さを測りたいとき
• 不要な囲み要素を整理したいとき

Webページのスクリプト読み込みを点検し、defer・async・type=moduleの使い分けと修正を支援します。ブラウザに届くHTMLまで確認します。

• ページ表示を遅らせるタグの点検
• スクリプトの読み込み方式を選びたいとき
• 共通部品が出力するHTMLのレビュー

本文から他のページへ進む内部リンクが少ないページを調べ、関連する記事へのリンクを提案します。共通メニューと本文のリンクを区別し、追加後の表示も確認します。

• 本文の内部リンクが少ないページの調査
• 独立した記事への関連リンク追加
• CMSテンプレートのリンク不足の点検

アラビア語など右から左へ読む言語や、文字方向が混在する投稿を点検し、HTMLの方向指定と表示・読み上げ順、画面配置の確認や修正を支援するスキル。

• アラビア語・ヘブライ語ページの点検
• 文字方向が混在する名前や投稿への対応
• ナビゲーションやアイコンの左右反転確認

リンクやボタン、入力欄のID重複を調べ、修正箇所と確認方法を示します。キーボード操作やスクリーンリーダーでの移動、フォーカスへの影響も点検します。

• フォームのID重複を確認したいとき
• 意図しないフォーカス移動の調査
• 共通の操作部品のレビュー

ページに最初の文字や画像が現れるまでの時間を測り、表示を妨げるCSSやJavaScript、サーバー応答の遅れを調べて、改善箇所を具体化するスキル。

• ページの初期表示が遅い原因を調べたいとき
• 描画を妨げるCSSやJavaScriptの確認
• 測定に基づく読み込み性能のレビュー

Webページの空の見出しや空白だけの見出しを探し、説明文の追加や不要なタグの削除を通じて、スクリーンリーダーでたどれる文書構造を整えるスキル。

• Webページの空見出しを探したいとき
• 装飾目的の見出しを使う部品の点検
• スクリーンリーダーの見出し移動確認

スマートフォンでの文字の読みやすさをCSSから点検し、小さすぎる文字や固定サイズを見直すスキル。ブラウザの文字設定と200％拡大時の表示も確認します。

• モバイルの文字サイズ点検
• px指定を相対単位に直したいとき
• 200％拡大時のレイアウト確認

ブラウザのタブやスマートフォンのホーム画面に使うサイトアイコンを点検し、端末に応じた形式・サイズの生成からHTMLやPWAの設定まで支援するスキル。

• タブやブックマーク用アイコンの準備
• モバイルのホーム画面用アイコン設定
• PWAのアイコン設定を確認したいとき

ファイル選択欄やドラッグ＆ドロップ領域を点検し、ラベル、形式・容量の案内、進捗やエラー通知を改善します。読み上げやキーボードで使えるか確認するスキルです。

• アップロード欄のラベルと説明の確認
• ドラッグ操作の代替手段の点検
• 進捗やエラーの読み上げ改善

広告ブロッカーで通知や同意画面が消える原因を調べ、誤検知されやすいHTMLのクラス名やIDを見直して、表示崩れや操作の不具合を改善するスキル。

• 広告ブロッカーで消える通知の調査
• Cookie同意画面の非表示確認
• HTMLのクラス名とIDの点検

ログインや購入など、利用者の一連の操作を確かめるE2Eテストの不足を調べ、追加を支援します。自動テストの構成やCI/CDでの継続実行、失敗時の扱いも確認します。

• ログインや購入のテスト範囲を確認したいとき
• フォーム送信のテストを追加したいとき
• CI/CDのテスト実行と失敗対応の点検

JavaScriptの非同期処理やReact画面で起きるエラーの扱いを点検し、例外の捕捉、原因を追うためのログ、画面側のエラー処理の追加を案内するスキル。

• 非同期処理のエラー対応を点検したいとき
• React画面のエラー処理の追加
• 原因調査に使うログの改善

画像の読み込みに失敗したときの表示を点検し、代替画像や意味のあるプレースホルダーの実装を支援します。エラーログや読み込み中の表示、修正の確認方法も扱います。

• リンク切れ画像の代替表示を整えたいとき
• 画像読み込み中の仮表示の見直し
• ログとDevToolsで画像エラーを調査

ブログやニュースサイトの編集方針ページを点検・下書きします。著者の専門性、調査と事実確認、訂正や利益相反の説明を整理し、記事やサイトからの案内も確認します。

• 編集方針ページを作りたいとき
• 著者基準と事実確認の体制の見直し
• 訂正方針や資金関係の説明整理

モーダルの開閉や画面遷移で、キーボードの操作対象が適切に移るかを点検するスキル。フォーカスの移動・復帰を見直し、動的な画面で操作位置を見失う問題を改善します。

• モーダル開閉時のフォーカス確認
• SPAの画面遷移後の操作位置確認
• 動的更新時のキーボード操作改善

文字のないリンクやラベルのないアイコン、リンク切れを点検します。説明文や読み上げ用の名前を補い、移動先が分かるリンクへ修正するスキルです。

• ページ内の空リンクを探したいとき
• アイコンリンクに移動先の説明を追加
• リンク切れを点検・修正したいとき

画面に表示されたHTMLで、ARIA属性の参照先IDの重複を調べます。ラベルや説明の誤読につながる箇所を特定し、IDと参照の修正、確認方法を案内します。

• 読み上げるラベルの誤りを調べたいとき
• 繰り返し部品のID重複の点検
• デザインシステムのARIA参照確認

ドラッグ＆ドロップをキーボードやスクリーンリーダーでも使えるか点検し、実際に表示されるHTMLを基に、代替操作や操作状況の読み上げを整えるスキル。

• ドラッグ操作のキーボード対応確認
• スクリーンリーダーへの状態通知確認
• 出力されたHTMLの点検

GIF・動画・CSSアニメーションの速い点滅を点検し、光に敏感な利用者への影響を考慮して、点滅の除去や速度変更、代替表現への修正を支援するスキル。

• アニメーションGIFの点滅確認
• 動画やCSSアニメーションの点検
• 点滅をフェードや静止表示に変えたいとき