David Dias

通信が切れた際の案内ページを作り、service workerで事前保存して表示する仕組みを整えます。外部リソースへの依存や表示条件も点検するスキル。

• PWAにオフライン画面を追加したいとき
• 通信切断時の案内を整えたいとき
• オフラインページの事前保存を点検

SNSやメッセージでURLを共有した際のプレビュー画像を点検し、画像の寸法・縦横比・容量とメタタグの指定を整え、表示崩れの原因を見直すスキル。

• SNS共有画像の点検
• 1200×630の共有画像を用意したいとき
• プレビュー画像の未表示や切れの調査

企業やブランドのトップページにある組織情報の構造化データを点検・追加し、名称やロゴ、公式SNS、連絡先をGoogleに伝える記述を整えるスキル。

• 企業トップページの組織情報を点検
• ブランド名やロゴ、連絡先のJSON-LD追加
• 公式SNSへのリンクを確認したいとき

商品ページの価格や在庫、評価を検索エンジンに伝えるProduct構造化データを追加・点検し、必須項目の不足や画面表示との食い違いを確認するスキル。

• 商品ページへのJSON-LD追加
• 構造化データと表示価格の照合
• 在庫状況や評価項目の点検

サイト内の他ページからリンクされていない重要ページを探し、関連する既存ページからのリンク追加を提案します。検索流入が少ない原因やサイト構造を調べるスキルです。

• サイト内のリンク構造を点検したいとき
• 検索流入が少ないページの原因調査
• 孤立した記事へのリンク元探し

動きを減らす端末設定にサイトが対応しているかを確認し、アニメーションや点滅、スクロール演出の代替表示、一時停止操作、事前の警告を点検するスキル。

• 動きを減らす設定への対応確認
• 点滅の頻度を点検したいとき
• スクロール演出の代替表示を検討

ページの読み込み時間を測り、3秒未満を目指して遅延の原因を調べます。重い画像や通信、描画処理を実測で確認し、遅延読み込みやキャッシュなどの改善につなげます。

• ページ表示の遅さを調べたいとき
• 重いリソースや描画処理の特定
• 低速回線での表示性能の確認

画像やJavaScriptなどを含むページ全体の転送量を測り、読み込みを重くする原因を確認します。1500KB未満を目安に、画像やコードの削減を進めます。

• モバイル回線での読み込み遅延の調査
• ページ総容量が上限内か確認したいとき
• 重い画像やJavaScriptの軽量化

絞り込み・並べ替え・広告計測で増えるURLを点検し、検索エンジンに伝える正規URLを整理して、重複ページや不要な巡回につながる設定を見直すスキル。

• 商品の絞り込み・並べ替えURLの点検
• 正規URLから広告計測情報を除きたいとき
• 巡回対象になるURLの組み合わせ調査

パスワード入力欄の安全性と使いやすさを点検し、自動入力の設定、表示切り替え、強度表示、パスワード管理ツールとの連携を確認・改善するスキルです。

• ログイン・会員登録フォームの点検
• パスワード管理ツールとの連携確認
• 操作しやすい表示切り替えへの改善

配信ファイルの容量や表示速度に基準値を設け、変更による性能低下をCIで検出します。容量と実行時の性能を分けて点検し、基準超過時のチェック失敗や公開後の監視を整えます。

• CIの性能基準を点検したいとき
• 依存ライブラリや素材追加時のレビュー
• 容量と表示性能の基準を設けたいとき

ページ表示の遅さを実測で確認し、重要な画像やフォントの先読み、外部サーバーへの事前接続を適切に設定して、読み込みを早める改善を支援するスキル。

• 主要画像やフォントの表示遅延の調査
• 外部サービスへの事前接続の検討
• 次の画面で使うファイルの先読み

Web画面の文章や操作説明を点検し、専門用語や複雑な文を分かりやすく整えるスキル。読者に合う言葉と文の長さを選び、次に取る行動が伝わる表現へ改善します。

• Web画面の説明を平易にしたいとき
• 一般読者向けに専門用語を説明
• 画面の文章のアクセシビリティ確認

件数を含む画面の文言や翻訳ファイルを点検し、単数・複数の二択では扱えない言語も含め、対象言語に合う表現へ実装を見直すためのスキル。

• 多言語画面の件数表示のレビュー
• アラビア語やロシア語の複数形対応
• 翻訳ファイルと国際化設定の点検

WebアプリのPWAインストール対応を点検し、HTTPSや設定ファイル、アイコンの不足を確認するスキル。オフライン応答や起動先の設定も見直します。

• PWAインストール対応の点検
• インストール案内を追加する前の確認
• アイコンのサイズと形式の見直し

サイト移行やドメイン変更後の転送設定を点検し、多段リダイレクトやループを洗い出します。転送経路と応答コードを記録し、最終URLへ直接つなぐ修正を支援します。

• URL移行後の転送経路を点検したいとき
• ドメイン変更後の多段転送やループの調査
• CMS更新で蓄積した転送設定の整理

外部サイトへのアクセスでURL内の機密情報が送られないよう、Referrer-Policyの設定を点検し、ページの性質に合う値と修正方法を示します。

• パスワード再設定ページの情報漏えい点検
• サーバーやCDNの応答ヘッダー確認
• 機密URLに適したポリシーの比較

ブラウザごとの標準スタイルによる表示の差を減らすため、CSSリセットの導入状況と読み込み順を点検し、画面幅や操作状態を踏まえた修正案を示します。

• ブラウザ間の表示差を調べたいとき
• 新規サイトのCSSの土台づくり
• CSSフレームワーク内蔵リセットの確認

表示幅に対して大きすぎるWeb画像を調べ、画面サイズに合った画像配信へ修正するスキル。画像の寸法と実際の表示幅、srcsetやsizesの指定を確認します。

• スマホ向けページの過大な画像を探したいとき
• srcsetとsizesの指定を点検したいとき
• 画面幅に合う画像サイズを用意したいとき

商品やサービスのレビュー情報を検索エンジンへ伝える構造化データを点検・追加します。実際の評価データと必須項目を確認し、検索結果での星評価表示に備えます。

• 商品ページのレビュー情報を点検
• 実際の口コミから平均評価を追加
• 検索結果の星評価表示への適合確認

URL移行後などのサイト内リンクを巡回し、転送元・途中の経路・最終到達先を整理して、転送を挟まず目的のページへ直接つながるリンクへの修正を支援するスキル。

• URL移行後の内部リンク更新
• ドメイン変更後のリンク点検
• サイト刷新後の転送経路の洗い出し

背景と前景が異なる速さで動くパララックス演出を点検し、動きを減らす設定への対応と、演出なしでも必要な情報が伝わる静的な表示への修正を支援します。

• Webサイトのパララックス演出の点検
• 動きを減らす設定への対応確認
• 動くコンテンツの静的な表示を用意

HTMLの `<object>` 要素を点検し、埋め込み内容を読み込めない場合にも情報が伝わる代替テキストや代替コンテンツを整えるスキル。

• 代替内容のないobject要素の確認
• 埋め込みの読み込み失敗に備えたいとき
• 代替内容が同等の情報を伝えるか点検

SNSやメッセージアプリで共有したページのタイトル・説明・画像を整えるため、Open Graphタグの不足や空欄、画像サイズ、URLの設定を点検するスキル。

• 公開前にリンクプレビューを確認したいとき
• Open Graphタグの不足を探したいとき
• 共有画像とURLの設定を見直したいとき