「render」の検索結果

実際のブラウザでページの読み込みや描画を測定し、遅さの原因となる通信・スクリプト実行・レイアウト処理を特定して、改善点を検討するスキル。

• ページの読み込みが遅い原因の調査
• 端末や回線条件ごとの性能比較
• 開発やCI/CDへの性能監査の導入

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

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

パンくずリストのHTML構造と現在地の指定を点検し、サイトの階層を画面読み上げでも理解できるよう、適切な要素とARIA属性を整えるスキル。

• パンくずの読み上げ対応を点検したいとき
• 共通部品が出力するHTMLの確認
• 構造化データと表示内容の整合確認

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

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

CSSに散らばる色・余白・文字サイズの指定を見つけ、共通のCSSカスタムプロパティへ整理します。テーマ変更や画面幅ごとの表示を確認しながら修正を提案します。

• 重複する色や余白の整理
• ブランド変更に向けたCSS整備
• ダークモード用の値の見直し

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

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

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

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

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

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

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

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

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

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

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

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

読み込み中に画像や広告でページの配置がずれる原因を測定し、表示領域の確保やフォント・アニメーションの見直しで、誤クリックや読書の中断を減らす改善を支援します。

• 読み込み中に内容が動く原因を調べたいとき
• 画像・埋め込み・広告の表示領域を確保
• フォントやアニメーションの安定性確認

ページ表示の遅さを実測し、画像などの静的ファイルがCDNから適切に配信されているかを点検。キャッシュ設定や配信経路の改善につなげるスキル。

• ページ表示が遅い原因を調べたいとき
• 画像やスクリプトのCDN配信の点検
• 海外向けのキャッシュ設定の見直し

進捗バーに何の処理を示すか分かる名前があるかを点検し、ラベルや値の属性を整えて、スクリーンリーダーでも進行状況の意味を把握できるようにするスキル。

• 進捗バーの読み上げ用の名前の点検
• 読み込み表示への処理名の追加
• 進捗の現在値と範囲の確認

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

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

ダイアログの目的がスクリーンリーダーで伝わるかを点検し、タイトルやラベルの付け方を見直します。対象の要素と修正後の確認方法も示すスキル。

• モーダルの読み上げ名の点検
• 警告ダイアログのラベル確認
• 共通ダイアログ部品のレビュー

画面要素の役割を支援技術に伝えるARIAの指定を点検し、誤記や未定義の値を修正します。標準HTMLへの置き換えや、キー操作・読み上げの確認も支援します。

• ARIAの誤記や未定義値を探したいとき
• 独自部品を標準HTMLへ置き換え
• 共通UI部品のアクセシビリティ確認

画面の状態やラベルを支援技術へ伝えるARIA属性の値を点検し、真偽値の誤記や参照先IDの不備を見つけ、仕様に沿った修正と確認方法を示すスキル。

• 操作部品のARIA属性を点検したいとき
• ARIA属性の参照先IDを確認したいとき
• 公開前にアクセシビリティ修正を確認

HTMLに含まれるARIA属性の誤字や存在しない属性名を調べ、仕様に沿った名前への修正を支援します。支援技術に役割や状態が伝わるか、確認方法も案内します。

• HTMLのARIA属性の誤字点検
• 読み上げに状態が反映されない原因調査
• 共通部品のアクセシビリティ属性の確認

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

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

フォームへの自動フォーカスを点検し、読み込み直後に説明文を飛ばして入力欄へ移る動作を見直します。利用者の操作を起点にフォーカスを移す修正も提案します。

• 説明文のあるフォームの点検
• 読み込み時の意図しないスクロール調査
• 利用者の操作後にフォーカスを移したいとき

ページを開いた際の音声・動画の自動再生を点検し、再生設定の解除や消音、キーボードで使える一時停止操作を整えて、利用者が再生を制御できるようにするスキル。

• 読み込み時の音声・動画再生の点検
• 動画の消音と一時停止操作の追加
• 再生操作のキーボード対応の確認

ページ内リンクのスクロールを点検し、動きを減らす設定に応じた即時移動と、キーボード操作時のフォーカス移動を確認して、修正方法を示します。

• ページ内ナビゲーションの点検
• 動きを減らす設定でのスクロール確認
• アンカー移動後のフォーカスを直したいとき

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

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