このトップページは、
どのAI Skillで作ったのか
設計から画像生成、実装、表示確認まで。
使ったSkillと役割をたどります。
RACLIEのトップページは、ひとつのAIが工程ごとにSkillを使って制作しました。デザイン、実装、文章の編集、動作確認で使った指示と、できあがったページを紹介します。
Skillを制作の各工程にどう使うか。生成したデザイン案をどう実装へ渡すか。そして、AIが「作った」と報告したものを、実際の画面と操作でどう確かめるか。
対象は、AIにWebページや記事を作らせたい人です。実例は静的なHTMLとCSSで作る紹介サイトで、会員登録や決済のあるサービスの実装は扱いません。
使ったSkillと役割
Agent Skillsは、AIエージェントに専門知識や作業手順を渡すための形式です。中心になるのはSKILL.mdという指示書で、必要に応じてスクリプトや参考資料もまとめられます。Agent Skillsの仕様サイトで、基本構成を確認できます。
今回は、制作環境に導入されていた次のSkillを使いました。ここでの名前はその環境の識別名です。同じ名前だけで同一の指示書を入手できるとは限らないため、役割と確認項目も示します。
| Skill | 担当した判断 | 反映したところ |
|---|---|---|
| Sites | 既存の構成を使い、ローカル制作として進める。 | 既存の花火作品を残したサイト構成。 |
| Frontend App Builder | 実装前に全体像を作り、文字・余白・色を共通化する。 | 初版の2列構成、改稿後の3列構成と共通CSS。 |
| Imagegen | 必要な文章と掲載内容を指定し、画面のデザイン案を生成する。 | 下に掲載したデザイン案。 |
| Frontend Testing Debugging | 表示するだけでなく、リンクや検索の結果を確かめる。 | PC・スマホ幅での画面と操作の確認。 |
| Article Production / Article Design | 読者が知りたいことと、各節が答える問いを決める。 | この記事の構成と目次。 |
| Article Research Writing | 仕様に書かれた説明と、今回の制作で起きたことを分ける。 | 出典と制作記録を区別した本文。 |
| Article Japanese Edit / Japanese Readability | 対象が曖昧な文や、同じ説明の繰り返しを点検する。 | 見出しから本文、結びまでの自己点検。 |
| yomiyasu | 文の主体と操作を確かめ、不要な前置きや重複を直す。 | 初稿後の改稿で、冒頭と実装の説明などを編集。同梱リンターも実行。 |
| Article Image Prep | デザイン案と実際の作品画面を区別する。 | 画像の選定、説明、代替テキスト。 |
| Article HTML Conversion | 見出し・表・出典・目次を、意味を保ってHTMLにする。 | この記事のHTML。 |
| Article Render QA | 本文の表示、画像、目次、リンクと戻る動作を確認する。 | 記事ページのPC・スマホ幅での検査。 |
これは別々のAIによる独立レビューではありません。ひとつのAIが指示書を読み、工程を分けて使った記録です。
トップページの案内文もyomiyasuで見直しました。抽象的な説明を減らし、作品紹介では「楽しむ」など、内容に合う動詞を選んでいます。その後の構成変更では、Journal・作品・ツールの役割が分かるように文を調整しました。
先にデザイン案を作る
トップには、記事を読む入口と作品を使う入口を置きました。現在はAISIをJournalとして位置付け、Creation Studioを作品とツールに分けています。最初の作品には、既存の「月渡川花火大会」を置きました。
Frontend App Builderの手順に沿って、HTMLを書く前にImagegenでデザイン案を作りました。指示には、2つの活動名、見出し、記事の題名、リンクの文言まで含めています。存在しない記事、利用者数、評価などを補わないことも指定しました。
案から採用したのは、白い背景、大きな明朝体の見出し、細い区切り線、オレンジのアクセントです。共通のCSSで定義し、トップ、記事一覧、記事本文に同じ文字とリンクの表現を使いました。
画像を実際のページにする
デザイン案をもとに、見出しはHTMLの文字、導線は通常のリンクとして実装しました。文章を選択でき、キーボードからリンクを操作できます。現在のPC版はJournal・作品・ツールの3列構成です。スマホでは同じ順で縦に並べています。
作品の紹介画像には、ローカルで動かしたHanabiの画面を使いました。生成した花火のイメージを実際の作品画面として見せないためです。トップの写真を押すと、花火作品をそのまま開けます。
記事一覧にはタイトルや用途で探す検索を用意しました。最初の記事はこの一本です。記事を増やすときも、存在しない内容で一覧を埋めず、読める記事だけを追加します。
表示と操作を確かめる
ビルドが通ることと、ブラウザーで読めて操作できることは別々に確認します。今回はBrowserプラグインが使えなかったため、PlaywrightでChromiumを操作しました。PC幅とスマホ幅でトップと記事を開き、スクリーンショットを見ながら、文字の折り返しや表の収まりを点検しました。
- トップから記事一覧・記事本文・花火を開き、戻れるか。
- 記事検索が一致する結果と該当なしの表示に切り替わるか。
- 目次から本文へ移動でき、画像と出典リンクが機能するか。
- 画面全体が横にはみ出さず、表だけを横にスクロールできるか。
- 公開用の生成物に、私的なメモやローカルパスが混ざっていないか。
今回の検査では、横幅1536・820・390・320ピクセルでページ全体の横はみ出しがないことを確認しました。記事検索の一致・該当なし・リセット、目次、画像の拡大、出典への移動、花火を開いて戻る操作も確認しています。検査中のページエラーとコンソールエラーは0件でした。
この制作記録の対象はローカル版です。本番サイトでの確認や、人間の読者による読みやすさの評価とは分けて扱います。また、Skillを使わない場合との比較実験はしていないため、品質や作業時間がどれだけ改善したかは数値で示していません。
自分の制作で試すなら
最初に「誰に何を届けるページか」と「本当に載せられる記事や作品」を決め、その内容をデザイン案にも引き継ぐのが出発点になります。今回なら、記事と作品という2つの入口、1本の制作記録、1つの花火作品です。
そこから、設計、画像生成、実装、文章の編集、表示と操作の確認に必要なSkillを選びます。Skillの数を増やすこと自体を目的にせず、それぞれが担当する判断と、確認する成果物を結び付けます。
制作記録には、Skill名に加えて、指示書の版、適用した部分、確認方法、まだ試していないことを残してください。使い方の見直しや、同じ工程を再利用するSkillの作成に使えます。
出典と更新履歴
- Agent Skills Overview。Skillの基本構成と使われ方。2026年10月25日確認。
- yomiyasuの使用版。日本語編集の手順と同梱リンター。2026年10月25日導入。読みやすさの改善率は測定していません。
- 制作手順の根拠は、この作業で読み込んだSkillの指示書と、ローカルでの制作記録です。前掲の表は一般的な性能比較ではありません。
- 2026年10月25日に初稿を作成。同日、作品側の表記をCreation Studioに変更し、初期画像は制作履歴として保持。その後yomiyasuを導入し、冒頭・実装の説明・読者への案内を改稿。
- 同日、AISIをJournal、Creation Studioを作品とツールに分けた3列構成へ変更。ツール欄にCycle Pilotの紹介を追加。公開版は準備中で、このサイト制作をCycle PilotのMissionで進めたものではありません。