再訪時の不要なダウンロードを減らすため、ブラウザのキャッシュ設定を点検します。静的ファイルとHTMLの違いに応じて、保存期間や再検証用ヘッダーの修正を検討します。
- 再訪時の読み込み遅延を調べたいとき
- 静的ファイルのキャッシュ設定確認
- HTMLとハッシュ付き資産の方針整理
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
CSSを無効にしても内容を理解し操作できるか、HTMLの読み順や見出し、フォームのラベルを点検し、見た目に依存した構造の修正を支援するスキル。
- CSS無効時の使いやすさの確認
- 読み順や見出し構造の見直し
- フォームのラベルやエラー表示の点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
実際のブラウザでページの読み込みや描画を測定し、遅さの原因となる通信・スクリプト実行・レイアウト処理を特定して、改善点を検討するスキル。
- ページの読み込みが遅い原因の調査
- 端末や回線条件ごとの性能比較
- 開発やCI/CDへの性能監査の導入
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
行と列を同時にそろえる画面レイアウトを見直し、CSS Gridへの置き換えや、画面幅・内容に応じて配置が変わるグリッドの設計を支援するスキル。
- 二次元のFlexboxやfloat配置の見直し
- 画面幅に応じたカード一覧の配置
- 入れ子の要素を親グリッドにそろえたいとき
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
Google Consent Mode v2の実装と同意状態の送信を点検します。広告関連の同意項目や通信を確認し、GTMやgtag.jsの設定修正を支援します。
- Consent Mode v2の実装点検
- 広告関連の同意設定を更新したいとき
- Googleへの同意信号の送信確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ページの初期表示を遅らせるリソース取得の依存関係を計測し、重要なCSSの埋め込みや必須ファイルの先読みで、通信の待ちが連鎖する構造を見直すスキル。
- ページの初期表示が遅いとき
- リソース取得の依存関係の点検
- 重要CSSの埋め込みや先読みの検討
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
HTMLのhead内でCSSとJavaScriptの読み込み順を点検し、画面幅や操作状態ごとの表示も確かめながら、表示の遅れや装飾のちらつきへの修正案を示すスキル。
- 装飾のない画面が一瞬見える原因の調査
- head内のCSSとJSの順序確認
- スクリプト遅延と重要なCSSの点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
検索エンジンに正規ページを伝えるcanonical URLの転送を点検し、HTTP応答と表示後のHTMLを確認して最終URLへの直接指定を支援するスキル。
- canonical URLの転送を確認したいとき
- URL変更後のcanonicalタグの点検
- 正規URLを生成するテンプレートの確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ページを開いてすぐ見える重要画像の読み込み順を点検し、画像サイズや遅延読み込み、優先度指定を見直して、主要コンテンツの表示改善を支援するスキル。
- ヒーロー画像の読み込み優先度の点検
- 初期表示画像の遅延読み込みを調べたいとき
- DevToolsで画像の修正を確認したいとき
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
CSSファイルの容量と読み込みを調べ、表示の遅さにつながる箇所を測定で確認しながら、不要なスタイルの削除や圧縮、ページ別の分割を進めるスキル。
- ページの初期表示が遅い原因の調査
- 容量の大きいCSSを探したいとき
- 未使用スタイルの削除とCSSの圧縮
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
記事やブログの公開日・更新日を点検し、読者向けの日付表示と検索エンジン向けの構造化データを整え、本文の実質的な変更に合う更新日の管理を支援します。
- ブログ記事の日付表示の点検
- Article JSON-LDへの日付追加
- CMSテンプレートの日付処理確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
CSS変数を使うアニメーションやグラデーションを点検し、@propertyで値の型・初期値・継承を定義して、滑らかな変化を支援するスキル。
- グラデーションを滑らかに動かしたいとき
- CSS変数を使う画面効果の点検
- デザイントークンの型と継承の設定
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
画像や内容を切り替えるカルーセルを点検し、自動再生の停止、キーボード操作、読み上げ通知、動きを抑える設定への対応を確認・修正するスキル。
- 自動再生スライドの停止操作の点検
- キーボードだけでの操作確認
- スライド変更の読み上げ通知の確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ページ内のaccesskey属性の重複を調べ、キーボード操作の競合を見つけます。値の割り当て直しや不要な指定の削除を提案し、修正後の確認方法まで整理します。
- キーボードショートカットの重複確認
- 操作要素へのキーボード移動のレビュー
- ショートカット修正後の操作確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
チェックボックスやラジオボタン、スイッチの読み上げ用の名前を点検し、何を選択・切り替える操作かが伝わるラベルの付け方と確認方法を示すスキル。
- チェックボックスやラジオのラベル確認
- スイッチ名が目的を伝えるかの点検
- 読み上げ用の名前の不足や曖昧さの修正
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ツールチップの補足情報がスクリーンリーダーに伝わるかを点検。読み上げ用の名前や表示元の要素との関連付けを確認し、修正案と検証方法を示すスキル。
- ツールチップの読み上げ確認
- 表示元と補足説明の関連付けの点検
- 共通ツールチップ部品のレビュー
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
画面のHTMLを確認し、role="text"の内側にあるリンクやボタンを検出。読み上げで操作要素が隠れる問題の修正と、キーボード操作の確認を支援します。
- テキスト内のリンクやボタンの点検
- 読み上げで操作要素が消える原因調査
- デザインシステムのアクセシビリティ確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
読み上げ対象から隠した領域に、キーボードで移動できるリンクやボタンが残っていないか調べ、フォーカスの迷子を防ぐ修正と検証方法を示すスキル。
- 非表示領域に残る操作要素の点検
- キー操作中に読み上げが途切れる原因調査
- 共通UI部品のアクセシビリティ確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ダイアログの目的がスクリーンリーダーで伝わるかを点検し、タイトルやラベルの付け方を見直します。対象の要素と修正後の確認方法も示すスキル。
- モーダルの読み上げ名の点検
- 警告ダイアログのラベル確認
- 共通ダイアログ部品のレビュー
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
CSSアニメーションで描画負荷のかかる指定を見つけ、transformやopacityを使う修正を提案します。画面幅や操作状態ごとの表示、動きを減らす設定も確認します。
- カクつくアニメーションの見直し
- 位置やサイズを動かす指定の修正
- 動きを減らす設定の確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
ページ内の大きなアニメーションGIFを調べ、計測で負荷を確認したうえでMP4やWebMへの変換と動画タグへの置き換えを支援するスキル。
- GIFを含むページの遅さを調べたいとき
- 大きなGIFをMP4やWebMに変えたいとき
- ループ動画の再生属性を見直したいとき
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
フォームのエラーや完了通知、リアルタイム更新が読み上げでも伝わるよう、実際に表示されるHTMLの属性、表示時間、閉じる操作を点検するスキル。
- フォームエラーの読み上げ確認
- 完了通知の表示時間を見直したいとき
- リアルタイム通知の点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
画面要素の役割を支援技術に伝えるARIAの指定を点検し、誤記や未定義の値を修正します。標準HTMLへの置き換えや、キー操作・読み上げの確認も支援します。
- ARIAの誤記や未定義値を探したいとき
- 独自部品を標準HTMLへ置き換え
- 共通UI部品のアクセシビリティ確認
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新
フォームの結果やカート更新など、画面内で変わる情報が読み上げ利用者に伝わるかを点検し、ARIAライブリージョンの属性と通知の優先度を見直すスキル。
- フォーム結果とエラーの読み上げ点検
- カート更新を読み上げで伝えたいとき
- 読み込み状態や状況通知の点検
thedaviddias/Front-End-Checklist☆ 7.4万2026年10月6日 更新