ai-design-skillsとは？使い方・日本語でのランディングページ依頼を実際に使って調べてみた動いた

配布元: https://github.com/elayadesign/ai-design-skills 　／　2026-10-10 時点で確認

この日に実際に動かした結果です。内容の誤りに気づかれた場合はお問い合わせください。確認のうえ訂正します。

使う前に分かること

elayadesign/ai-design-skillsは、Claude CodeのようなAIコーディングツール向けに、デザインの進め方を教え込むAgent Skills形式のスキル集です。現時点で収録されているのはlanding-page-designという1つのスキルで、「何を聞く→どう構成する→どんな言葉で書く」という戦略の部分と、「フォントはこれ以外使わない」「余白はこの数値だけ」といった、かなり細かく決め打ちされたビジュアルルールの2段構えになっています。

今回は、架空の個人開発アプリ「Mizuyari（植物の水やりを旅行中でも忘れないように通知するアプリ）」のランディングページを日本語で依頼し、そのまま実際のHTML・CSS・JavaScriptファイルが書き出されるところまでを試しました。同じようにユーザーの選択を待って一度立ち止まる設計のスキル（過去に試したlogo-design-skillなど）とは違い、このスキルは質問で止まらず、答えのない項目は仮定を置いてそのまま最後まで一気に作り切る設計でした。スキル集自体には「他のスキルも追加予定」とありますが現時点では1つだけで、既存サイトの改修用に別リポジトリで配布されている姉妹スキル（redesign-skill）は今回は試していません。

Claude CodeのSkillとして入れる

配布元はただのGitHubリポジトリです。ターミナルで、今作業しているプロジェクトのフォルダの中に.claude/skillsというフォルダを作り、そこにリポジトリの中のskills/landing-page-designフォルダだけをコピーします。

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

2行目の/tmp/ai-design-skillsは、リポジトリを一旦まるごと置くための作業用の場所です。3行目で必要なlanding-page-designフォルダだけを.claude/skills/へコピーしたら、そちらはもう使いません。

Claude Code以外のエージェントを使っている場合は、Cursorなら.cursor/rules/に、Codex・WindsurfならAGENTS.mdや.windsurfrulesに同じSKILL.mdの中身をコピーするだけで使えます（Claude Codeを使うなら、ここは読み飛ばして構いません）。ビルドや依存パッケージのインストールは不要で、フォルダの中身はルールを書いたMarkdownファイル1本（SKILL.md）だけです。

「Mizuyari」というアプリのLPを日本語で頼んでみる

頼んだのはこの一文だけです。

個人で作っている『Mizuyari』というアプリのランディングページを作ってほしい。旅行や出張で家を空ける間、植物の水やりを忘れないように、水やりのタイミングを通知してくれるスマホアプリです。無料プランは植物を3つまで登録できて、有料プラン（月350円）だと植物を無制限に登録できて、家族とスケジュールを共有できる。まだベータ版。

これをClaude Codeに日本語で打ち込んで送ると、サイトを作る上で必要だけれど依頼文には書いていない項目（誰に何をしてほしいページなのか・どこから人が来るのかなど）がいくつもあるはずですが、エージェントは質問で止まらず、それぞれに「とりあえずこう考えて進めます」という仮定を1行ずつ置いて、そのまま先に進みました。実際にこう返ってきました（マーケティング寄りの専門用語も混じっていますが、要は「分からない点は常識的な仮定を置いて止まらず進めている」という内容です）。

Mizuyariのランディングページを作ります。まず依頼文にない項目は、SKILL.md A1の指示（答えられない項目は仮定を1行で置いて進める）に従って以下のように仮定しました。

**A1 仮定(止まらずに進めるための1行仮定)**
- コンバージョン地点: まだベータ版でストア配信前のため、「メールでベータ登録」を一次コンバージョンとする
- ICP: 出張・旅行が多く観葉植物を複数育てている個人
- 主な反対理由: (1)カレンダーで十分だと思っている (2)家族共有が本当に必要か分からない (3)ベータ版の安定性への不安
- トラフィック源: SNS(植物コミュニティ)とオーガニック検索を想定
- プルーフ: 実績データがまだ薄いので、丸くない具体的な人数(128人)と2件のベータテスターの声を使う
- デザイン方向性: ミニマルで明るいライトテーマ1本(ダークテーマは今回スコープ外とする)
- モバイル優先: はい

そのあと、ページ構成の一覧・ヒーローの見出しとコピー・5つのベネフィット・使い方の3ステップ・FAQ・SEO設定・レイアウトの選び方まで、コードを書く前にすべて文章で提示してきました。たとえばヒーロー部分はこうです。

**2. ヒーローコピー**
- 見出し: 「旅行や出張で家を空けても、植物への水やりを忘れない。」
- サブ見出し: 「Mizuyariが植物ごとに最適な水やりのタイミングを通知します。家族とスケジュールを共有すれば、留守のあいだも誰かが必ず気づけます。」
- CTA: 「無料でベータ版を使ってみる」
- プルーフライン: 「すでに128人が、旅行中の水切れの心配をMizuyariに任せています。」

レイアウトの選び方では、4種類の型（クラシックなヒーロー+セクション／ロングフォーム／最小限の訴求ページ／比較ページ）のうちどれを選んだかの理由も説明していました。

**7. レイアウト推奨**
- **A. クラシックなヒーロー+セクション構成** を選択。理由: 「通知が届いて水をやる」という体験はヒーローのスクリーンショット(今回はベータのためモックアップ)で十分理解できる、最も一般的なケースだから(ロングフォームで説得が必要なほど懐疑心が強い製品ではない、比較検討ページでもない)。

この説明のあと、実際にindex.html・styles.css・script.jsの3ファイル（合計800行強）が書き出されました。フォントは指定されたManropeのみ、余白はスキルが定めた数値だけ、スクロールで要素が画面に入ったタイミングを検知してふわっと現れる演出も実装、といった具合に、SKILL.mdの細かいルールが実際のコードにそのまま反映されています。ブラウザで開くとこうなります。

スクロールすると、指定どおり大きな文字で2行のキャッチコピーが1文字ずつ色づいていくセクション（これはスキルが必須としている演出です）のあと、丸いアイコン付きのカードで「できること」が並びます。

詰まったこと

見出しの改行が不自然になる

スキルのルールには「見出しの改行は意味の切れ目に入れる」（B5）と「見出しの文字はtext-wrap: balanceで整形する」（B1）の両方が決まっています。出力されたコードもこの2つを律儀に両方満たそうとしていましたが、実際にブラウザで見ると、狙った2行では収まらず、単語の途中で折り返される行が出ていました。

コード側はこうなっています。

h1, h2, h3, .balance {
  text-wrap: balance;
}

<br>で入れた意味的な改行位置と、ブラウザが自動でバランスを取ろうとするtext-wrap: balanceが競合し、結果として「を忘」で行が切れるという、どちらのルールも生きているがゆえに起きる崩れ方でした。見出しの文字数や画面幅によっては起きない場合もありそうですが、日本語の見出しでこの2つのルールを両方満たそうとすると、こうした不自然な改行が起きうる点は知っておいた方がよさそうです。

出荷前のチェック項目は一部が未着手のまま

SKILL.mdには出荷前に揃えるべき項目のチェックリスト（B10）があり、OGP画像・プライバシーポリシー・利用規約・404ページ・Cookie同意バナーなどが挙げられています。今回の出力では、タイトル・メタ説明・ファビコン・フォームの入力チェックといった項目は実装されていた一方で、OGP画像の実ファイル（HTML内では参照のみ）、プライバシーポリシーと利用規約のページ本体（フッターにリンクはあるが中身は未作成）、Cookie同意バナーは手がつけられておらず、エージェント自身がその旨を未実装として申告してきました。チェックリストに沿って「やった」「まだ」を自己申告させる作りにはなっていますが、全項目が自動で揃うわけではない、という点は実際に使う際に覚えておく必要がありそうです。

まとめ

日本語の一文だけで、質問を挟まずにページ構成・コピー・FAQ・SEO設定の提案から、実際に動くHTML・CSS・JSファイルの書き出しまで一気に進む点は、ロゴ生成系の他のスキルとは違う体験でした。フォント・余白・角丸・配色といった細かいビジュアルルールも、実際のコードにきちんと反映されていました。一方で、日本語見出しの改行まわりには机上のルールどうしがぶつかって崩れる場面があり、出荷前チェックリストの項目も全部は自動で埋まりません。出てきたコードをそのまま公開するのではなく、見た目を一度ブラウザで確認してから仕上げに手を入れる、という前提で使うとよさそうです。

確認した環境

スクリーンショットは、このサンドボックスの通信の許可リストの都合でTailwind CSSのCDN（cdn.tailwindcss.com）に届かなかったため、出力されたHTMLが使っているのと同じユーティリティクラスをローカルでビルドしたスタイルシートに差し替えて撮影した。出力のHTMLファイル自体はCDN読み込みのまま変更していないので、通常のインターネット接続があるブラウザで開けば、そのままCDN経由で同じ見た目になる。