AIで画面は作れたけれど、余白、文字の強弱、情報の順番がしっくりこない。そんなときは装飾を追加する前に、誰が何をする画面かを整理することが役に立つで。
pbakaus/impeccable はAIコーディングエージェントにデザインの指針と点検・改善の操作を加えるプロジェクトやで。この記事は公式READMEとライセンスを確認した紹介で、実機での性能評価やないで。
Impeccableでできること
Webアプリの管理画面、フォーム、ランディングページなどをAIで作る開発者に向いてるで。初期設定で製品の目的や利用者の情報を整理し、critique、audit、polishなどの操作で見直せるで。
READMEは、決定的な検出ルールとLLMによる批評を区別してるで。見た目の問題を探す助けにはなりますが、すべての操作性やアクセシビリティを自動で証明するものやないで。
フォームなら、どこが変わる？
下の練習フォームには、名前の入力欄と「確認」ボタンがあるだけや。例えば「初めて来た人が迷わず入力できること」を目的にするなら、見た目の印象に加えて、次のように点検できるで。
| 見るところ | 確認・改善の例 |
|---|---|
| 目的 | 何のための名前入力か、見出しや短い説明で分かるか |
| 操作 | ラベルを読めるか、Tabキーで入力欄とボタンに移れるか |
| 狭い画面 | 文字やボタンが画面からはみ出さず、読めるか |
例えば「見出しと入力欄の余白を整える」「フォーカス位置を見えるようにする」といった案を、目的に沿うものだけ採用するんや。これは記事用に考えた改善例で、Impeccableが実際に出力・修正した結果やないで。元の練習ファイルには送信処理がないので、送信成功やエラー表示まで動いたと判断したらあかん。
普通にAIへ「きれいにして」と頼んでも修正はできる。一方、このスキルを使う場合は、公式の設計指針や点検のための手順をAIに渡して、目的や制約を共有しながら改善を検討できるで。この記事では両者の結果や作業時間を比較してへん。最終的な使いやすさは実際の画面とキーボード操作で確認してな。
今回のゴールと環境
小さなフォームを1つ用意し、デザインの改善案を確認する。
確認した範囲：2026年10月24日に公式READMEや導入資料を読み直して、以下の手順を具体化したで。この改訂でアプリのインストールから最終結果までを実機で通したわけやない。成功の目安は、手元で試すときのチェックとして使ってな。
準備
ここではWindows 11 x64とPowerShellで進めるで。スタートで「PowerShell」を検索して開いてな。Node.js公式ダウンロードで24系LTS・Windows・x64のInstaller（.msi）を選び、ダウンロードしたファイルを開いて画面に沿って入れてな。入れ終わったらPowerShellを開き直すんや。
node --version
npm.cmd --version両方にバージョンが出たら準備OKや。以下ではWindowsのスクリプト実行ポリシーで止まりにくいnpm.cmdとnpx.cmdを使うで。インストール済みなら入れ直す必要はないで。
Git公式のWindows用ページからx64 Setupをダウンロードし、インストーラーの案内に沿って入れてな。PowerShellを開き直し、git --versionでバージョンが出ることを確認するんや。
今回はClaude Codeを使うで。使えるプランやAPIの支払いは別に必要やから、公式の準備・ログイン案内を先に確認してな。PowerShellで次を実行し、インストール後は新しいPowerShellを開いてな。
winget install Anthropic.ClaudeCodeWinGetがないときは、WindowsのMicrosoft Storeで「アプリ インストーラー」を入れるか更新してからやり直してな。次の確認でバージョンが出たら準備OKや。実際にclaudeを起動するんは、下の練習フォルダーを作ってからやで。初回起動は画面の案内でブラウザーにログインし、戻って入力欄が使えることを確かめてな。
claude --versionPowerShell用のコマンドと、Claude Codeの入力欄へ送る文は別やで。「Claude Codeで入力」と書いたブロックをPowerShellへ貼らんようにしてな。AIにファイルを読ませると、その内容が利用するサービスへ送られることがあるで。最初は以下の架空例だけで試そか。
New-Item -ItemType Directory -Force "$env:USERPROFILE\github-practice\impeccable" | Out-Null
Set-Location "$env:USERPROFILE\github-practice\impeccable"使い方
@'
<!doctype html><html lang="ja"><meta charset="utf-8"><title>練習フォーム</title><form><label>名前 <input name="name"></label><button>確認</button></form></html>
'@ | Set-Content index.html -Encoding UTF8練習用のindex.htmlを作ったで。プラグインの導入場所は次の案内を守ってな。
PowerShellで入力：
npx.cmd impeccable install --providers=claude --scope=projectインストーラーが表示するフックと保存先を確認してな。フックの導入可否を聞かれたら、何を実行するかを読んでから選ぶで。
Claude Codeが開いてるときは/exitで閉じ、PowerShellで同じフォルダーからclaudeを起動し直すで。フォルダーを信頼するか聞かれたら、今作った練習用の場所か確認してな。
Claude Codeで入力：
/impeccable init
このindex.htmlは、名前を入力して確認するだけの練習用フォームです。読みやすさと入力しやすさを優先し、外部フォントや送信処理は追加しません。成功の目安：初期設定後に、続けて /impeccable critique index.html を入力して、対象を絞った改善案が返ることや。採用する案だけを伝えて修正を依頼し、保存したindex.htmlをブラウザーで開いて比べてな。
仕組みとデータの流れ
トラブルシューティング
| 困ったこと | 確認すること |
|---|---|
| 導入した機能が出ない | Claude Codeを再起動し、導入時に選んだ対象と保存先を確認してな。/pluginで使うプラグインの状態も確認するんや。 |
| 想定外のファイルを変えようとする | 実行前の提案を読み、練習フォルダーだけに対象を絞ってな。既存の仕事用ファイルにはそのまま適用せんといてな。 |
終了と再開
Claude Codeは入力中ならEscで作業を止め、/exitで終了できるで。続けるときは同じ練習フォルダーでclaudeを実行するんや。保存したHTMLはエクスプローラーからダブルクリックして表示を確認してな。
公式READMEと最新の導入案内も確認してな。配布版や外部サービスの変更で、手順が変わることがあるで。
改善案の選び方
例えば入力フォームなら、見出しの目立ち方だけでなく、必須項目、エラー、送信完了までの順序を確認してな。装飾の好みと、操作に必要な情報を分けて判断することが大切やで。
| これまでの作業 | 導入後に目指せる進め方 |
|---|---|
| 見た目の印象だけで、色や影を何度も変更する。 | 利用者と目的を決め、情報の優先順位と操作を検証する。 |
ブランドと使いやすさ
既存のデザインシステムと提案が競合することがあるで。自動変更を採用する前に差分を読み、色、文字サイズ、余白、コンポーネントの一貫性を確認してな。
修正後は、狭い画面、長い日本語、キーボード操作、入力エラーなどでも試してみてな。検出ルールが問題なしでも、利用者が迷わないとは限らへんで。この記事では実画面の改善率や作業時間は測ってへんで。
公式資料と利用条件
本体はApache-2.0ライセンスやで。AIサービス、外部フォント、画像などの利用条件は別に確認してな。
確認日：2026年10月23日。本文は公式情報をもとに独自に構成し、図解は本記事用に制作したで。公式の画像・動画やREADMEの長文転載は使ってへんで。記事中の利用例・改善の比較は想定例であり、性能や成果の保証やないで。