Claude Code UIデザインガイド：Oil UI Skillの導入、プロンプト、複数画面レビュー

Claude CodeでUIを作るときにデザインSkillが役立つ理由

Claude Codeに「モダンでシンプル、洗練されたSaaSのホームページを作って」とだけ入力する開発者は少なくありません。こうした指示を受けると、モデルは学習データで最も一般的な定型に戻りやすくなります。中央揃えの大見出しの上にピル型ラベルを置き、その下に同じ幅の角丸カードを3枚並べ、隅には作り話の増減率や折れ線グラフを添える構成です。コードは動いても、ページはありきたりなデモに見えます。

Oil UIは、人間のデザイナーに近い作業順序をClaude Codeに与えます。まずプロダクトのカテゴリーとユーザータスクから参照点を探し、大きく異なる複数のビジュアル方向を一つのWebページで比較します。方向を決めた後は、実際のブラウザーのビューポートでファーストビューの重心、長文の可読性、フォームエラー、モバイルでの折り返しを確認します。

3ステップでインストールと環境準備を行う

Oil UIは、個人のグローバル環境とプロジェクト単位のどちらにもインストールできます。グローバルインストールは日々複数のリポジトリを行き来する場合に、プロジェクト単位のインストールはデザイン規約をコードベースと一緒にチームで共有する場合に適しています。

1. インストーラーを実行してClaude Codeを選択

   ターミナルでインストールコマンドを実行し、案内に沿ってClaude Codeとインストール範囲（グローバルの ~/.claude または現在のプロジェクトディレクトリ）を選びます。

   npx skills add oil-oil/oil-ui

2. スクリーンショットを撮れるローカルブラウザー環境を用意

   Oil UIのビジュアル検証は実際のページレンダリングに依存します。Playwright、ローカル開発サーバー、ブラウザーツールでページを開き、1440×900（デスクトップ）と390×844（モバイル）の画像をキャプチャできる環境を用意してください。

3. 完全なインタラクション、既存プロジェクト改修、詳細なレビューが必要ならProを導入

   Oil UI Proを購入済みなら、CLIでインストールしてデバイス認証を完了します。Proを導入したらオープンソース版も残しておく必要はありません。2つのSkillが同じ種類のリクエストに同時に反応し、競合するのを避けられます。

   npx github:oil-oil/oil-cli install oil-ui-pro

Claude Codeに伝わりやすい、情報密度の高いプロンプトの書き方

ギャラリーに収録されたClaudeシリーズの作品、例えばClaude Opus 5.5によるタブレットリーダー「Margins」と音声アシスタント「Echo」、Claude Sonnet 5.5による配車アプリ「Pickup」と「Pinch Checkout」では、プロンプトに共通する構成があります。プロダクトと対象ユーザーを先に書き、中心的なインタラクションと重要な状態を示し、最後にビューポートと成果物を指定しています。

誰がどんな場面で使うのかを明確にする

配車アプリなら、「見栄えのよい移動アプリ」と書くより、「乗客が乗車地点を確認し、ドライバーの到着を待ち、走行中に目的地を変更する3画面のフロー」と指定する方がずっと明確です。

最も磨き込むべき一つの操作を挙げる

各UIには、ビジュアルとインタラクションの重心が必要です。チェックアウトなら割引コードの展開、送料の再計算、支払いボタンの状態表示、リーダーなら本文のタイポグラフィ、目次ドロワー、注釈のハイライトが重心になります。

ビューポートとカバーすべき状態を指定する

デスクトップの1440×900から幅390pxまでのレスポンシブ対応、またはモバイルの390×844を3画面並べたscreens.htmlのように具体的に指定し、確認すべき3つの実際の状態も列挙します。

Oil UIを使って、私たちの[プロダクトの種類（例：独立系書店のオンラインチェックアウトモジュール）]のUIをデザインしてください。
- 対象ユーザーとタスク：[例：読者が1カラムまたは2カラムのチェックアウトで書籍を確認し、店頭受け取りと配送を切り替え、割引コードを入力して支払いを完了する]
- 中心的なインタラクションと状態：[最も重要な操作]を重点的に磨き、[状態1：通常の入力状態]、[状態2：送料と割引の即時更新]、[状態3：カード番号の検証エラーと復帰]をカバーしてください。
- 技術・環境上の制約：現在のリポジトリの技術スタックを維持し、デスクトップは1440×900、幅390pxのモバイルビューポートにも対応させてください。
最初に比較できるよう複数の異なるデザイン方向を提案し、選択後に実装とスクリーンショットレビューへ進んでください。

Claude Codeのサブエージェントで実際のスクリーンショットをブラインドレビューする

コードを書いたエージェントは、自分が作ったばかりのレイアウトを贔屓目に見がちです。カードが窮屈でも、薄いグレーの小さな文字が読みにくくても、問題ないと判断してしまうことがあります。Oil UIでは、メインエージェントがレンダリング後のページをキャプチャし、直前にどんなコードを書いたかを全く知らない独立したサブエージェントを起動して問題を指摘させます。

サブエージェントは3種類の画面を確認します。100%の原寸で撮ったファーストビューと長いページのスクリーンショット、ナビゲーションやテーブル行、フォーム入力領域など操作頻度の高い部分を200%に拡大した画像、そして文字をぼかして色面にしたレイアウト構造図です。階層の混乱、はみ出しや切り詰め、AIの定型表現が指摘されなくなって、ようやくその改善ラウンドが完了します。

実際に動くギャラリー作品とプロンプト

1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。

Margins

タブレット電子書籍リーダー

Claude Opus 5.51024×1366

長文読書アプリのタブレット向け読書インターフェース。縦向き1024×1366でデザインし、プレゼンテーションキャンバス上に配置する。本文、ハイライト、注釈、目次、読書進行状況を含める。 中国語の長文タイポグラフィに重点を置き、フォントサイズ、行の高さ、段落間隔、句読点の余白を丁寧に調整し、10分間の読書が快適になるようにする。ユーザーはテキストをハイライトした後に短い注釈を書ける。 読書中、ハイライトして注釈を書いている状態、目次を開いた状態の3状態を撮影する。

作品とプロンプトを見る →

Pickup

配車アプリ

Claude Sonnet 5.5390×844

配車アプリで車を呼んだ後の画面（390×844）。地図上で近づく車、ドライバーと車両の詳細、到着予定、乗車後の行程を表示する。 道路網とルートは、実際の地図のスクリーンショットではなくコードで描く。車を待つ時間は最も不安になりやすいため、車との距離をすぐに把握できるようにする。 待車中、車の到着、行程中の3状態を撮影する。`index.html` と、3画面を横に並べた `screens.html` を納品する。

作品とプロンプトを見る →

Pinch Checkout

Eコマースチェックアウトモジュール

Claude Sonnet 5.51440×900

独立デザイナーブランドのオンラインストア向けチェックアウトモジュール（デスクトップ1440×900、チェックアウトパネルを中央に配置）。ショッピングリスト、配送先住所、支払い方法、注文確認を含める。 各ステップを滑らかにつなぎ、すべての入力に、入力中、無効、完了の明確な状態を示す。注文完了時は、チェックマークを表示するだけでなく、喜びを感じられるようにする。 フォーム入力中、検証エラー、注文成功の3状態を撮影する。

作品とプロンプトを見る →

Echo

AI音声アシスタント

Claude Opus 5.5390×844

AI音声アシスタントのモバイル全画面インターフェース（390×844）。音の可視化に重点を置き、発話待ち、リスニング、思考中、回答中のそれぞれに異なる形を持たせる。 回答時には、予約した会議などの結果カードを下部に表示し、光る球体だけで終わらせない。紫青に光る球体は最も一般的なデフォルト表現なので、その方法は避ける。 4つの状態をすべて撮影する。`index.html` と、状態を横に並べた `screens.html` を納品する。

作品とプロンプトを見る →

よくある質問