実装で使っているSkills。AIに「毎回言わなくていいこと」を渡す。

Web品質監査、公開前後の確認、レイアウト検査、デザイン基準。実際に使っているSkillsを、導入数ではなく役割と使う場面で紹介します。

実践記録：2026.09.27記録・編集：株式会社オーシャン

この記事の考え方

Skillsは、成功を保証する魔法ではない

ここでいうSkillsは、AIが特定の作業を進めるときに参照する手順や基準です。作業のたびに同じ注意を長く伝える代わりに、使う条件、実施すること、検証方法を整理しておきます。オーシャンでは、制作中に繰り返した指摘を次の作業へ持ち越さないために使っています。

ただし、ファイルを用意しただけでは品質は上がりません。実際に適用したか、検証したか、変更に合う範囲だったかを確かめる必要があります。以下は一般的な順位付けではなく、私たちのWeb制作で役割が明確だったSkillsです。

web-quality-auditは、HTML、SEO、アクセシビリティ、配信などを横断して扱う共有手順です。記事追加では、本文だけでなくメニュー、フッター、計測、サイトマップ、公開後確認までを一式にします。技術的な確認を最後にまとめて付け足さないことが、主な役割です。

design-mdは、色、書体、余白、部品の基準を参照するために使っています。AIに毎回「シックに」と言うだけでは解釈が揺れるため、具体的な値と使い方を残します。品質監査とデザイン基準を分けておくと、見た目を守りながら技術面を修正しやすくなります。

web-deploy-qaは、公開前の確認と公開後の確認を分ける手順です。ソースを編集したことを、公開されたことと混同しないために使います。HTTP応答、PCとスマートフォンの表示、周辺への影響、証跡までを作業に含めます。

layout-scanは、文字の重なりやはみ出しを機械的に調べるための手順です。カードや表を追加したとき、見た目の印象だけで判断しないようにします。ただし機械検査の結果だけで、読みやすさや表現の良さまで保証できるわけではなく、目視確認と併用します。

まだ仕様や依頼内容がまとまっていなくても、まずは経営や現場で気になっていることからお聞かせください。

オーシャンの社内備忘録を、人とAIで整理・編集して公開しています。クライアントを特定できる情報、実際の数値や非公開の画面は掲載していません。

公開：2026.09.28。記録の日付は題材となった取り組み・検討の時点です。