AIで作ったサービスを、デザインで損させない。
あなたの画面をプロのデザイナーが見て、AIに直し方を指示します。 デザイナー観点が入るから、AIっぽさが消えます。
対象
LP / Webアプリ
公開ページもログイン後画面も。
対象外
スマホアプリ
後日対応予定。
最小
1画面 ¥3,000
まず1画面から。
納品
AI向け指示
Markdown / JSON / コード。
対象画面
LP・Webアプリ
抽象見出し、弱いCTA、詰まったカード、読みにくい管理画面をそのまま渡せます。
座標付きコメント、画面幅、理由、修正指示を Markdown / JSON で納品します。
対応する開発フロー
価値
デザイナー観点を、
AIの実装指示に変える。
勝ちは、AIで作った画面をもう一度AIに直させることではありません。 プロのデザイナーが判断し、AIが実装できる言葉へ変換することです。
AIが作った画面
機能はある。けれど、余白、文字、色、導線がどこかテンプレートっぽい。
デザイナー観点
どこが安っぽく見えるのか、なぜ信頼を落とすのかを見抜く。
AIへの修正指示
Claude Code、Codex、Cursorが実装できる粒度へ翻訳する。
よくある「惜しい」
AIで画面は作れる。
でも、見た目で損をする。
LPもWebアプリも、最後は「見せられる画面」かどうかで判断されます。
機能は動く。でも、安っぽい。
画面を見た瞬間に、テンプレート感が出てしまう。
見た目の弱さが、信頼の弱さになる
商談、納品、社内稟議で、最後の印象が弱い。
Webアプリ画面がばらつく
LP、一覧、詳細、設定、管理画面のトーンが揃わない。
Figmaをもらっても、実装に戻せない
ほしいのは、AIコーディングに渡せる直し方。
LPだけではありません
Webアプリの主要画面まで、
まとめて見ます。
商談、デモ、納品、社内稟議で見られるのはLPだけではありません。 ログイン後の画面が雑だと、プロダクト全体の信頼が落ちます。
LP
01最初の3秒で何のサービスか伝わるか。
ダッシュボード
02次に何をすればよいか一目で分かるか。
一覧
03探す、比べる、絞る動きが迷わないか。
詳細
04重要情報、操作、状態が整理されているか。
設定
05業務画面として安心して触れる密度か。
管理画面
06運営が見落とさず、素早く処理できるか。
「いい感じに」ではなく、
AIが直せる指示にする。
AIっぽさは、抽象的な修正依頼では消えません。 デザイナーが問題点、理由、修正案を分けて書くことで、AIが迷わず実装できます。
抽象コピーで、誰向けの価値か分からない。
AIへの指示
H1を対象者と成果が分かる文に変更。CTAは1つに絞り、補助導線を下げる。
カードと表が混在し、視線の流れが途切れる。
AIへの指示
検索、フィルタ、主要列、ステータスの優先順位を決め、表の密度を揃える。
装飾が強く、処理すべき案件が目に入りにくい。
AIへの指示
納期リスク、未返信、決済状態を上段に集約し、色は状態表示だけに使う。
# デザイナー指示
対象: ダッシュボード上部
問題: 進行中の依頼と納品待ちが同じ強さで見えている
理由: 次に何をすべきか判断しにくい
指示: 納品待ちを最上段に移動し、CTAを1つだけ青で強調
優先度: 高
納品イメージ
そのままAIに渡せる形で、
戻ってくる。
画面を見た感想ではなく、AIコーディングエージェントが実装できる単位に分解します。 コピペでも、CLI取得でも扱える構造です。
見るところ
AIっぽさは、細部の積み重ねで出ます。
派手な作り替えより、画面の判断基準を揃えることが重要です。 見た目、情報設計、Webアプリ品質、AIっぽさの4方向から確認します。
見た目
- 余白
- 文字サイズ
- 配色
- カード
- ボタン
- フォーム
情報設計
- 見出し
- 順番
- 導線
- 画面密度
- 状態表示
- CTA
Webアプリ品質
- 一覧性
- 検索性
- 操作の迷い
- エラー表示
- 設定画面
- 管理画面
AIっぽさ除去
- 抽象コピー
- 過剰な装飾
- 同じカードの連発
- 弱い階層
- 汎用感
- テンプレート感
制作会社ではなく、
AI実装に戻すためのデザインレビュー。
対象はLPとWebアプリ画面。スマホアプリは今は対象外です。
安っぽさを消す
余白、色、文字階層、CTA、画面密度を整える。
画面間を揃える
LPとログイン後画面のトーン差を減らす。
実装指示にする
感想ではなく、AIが読める修正単位に落とす。
対象になる画面
LP、SaaS、管理画面、業務ツール。
対象外
スマホアプリは後日対応予定です。
- スマホアプリ
- フルスクラッチ実装の請負
- 要件定義代行や定例MTG
- AIチャット / 推論APIの提供
- Figmaデータだけの納品
- 画像単体制作だけの依頼
- 無制限の全画面修正
「惜しい」が、「提出できる」に変わる。
デザイナーは作り直しません。直すべき場所をコメントし、AIコーディングエージェントが既存コードへ反映します。
画面にコメントを追加
フィードバックを取得
コメントを読み込んで修正
$ fix-ai-design feedback pull REQ-2048
取得: デザイナーコメント 3件
$ claude < feedback
編集: Hero.tsx / Button.tsx / spacing.css
- 世界を変えるAIサービス
+ 問い合わせ対応を、1日で自動化。
+ CTA: 無料で相談 / 改善例を見る
+ spacing: card gap 16px, hero padding 24px
すべての仕事を効率化する次世代ツールです。多機能で便利です。
Slackとメールを横断し、未返信・期限・担当者をひとつの画面で管理できます。
何を渡して、何が返るか
画面URLと文脈を渡す。
実装に戻せる指示で返る。
URL、スクショ、READMEを渡す。デザイナーの指摘がAI向けの修正指示で返る。
レビュー観点
入稿できるもの
仕様
README / 画面一覧 / 対象顧客
画面
URL / スクショ / 動画 / PDF
コード
既存UI / 避けたい印象 / 参考
返ってくるもの
画面別フィードバック
座標、表示幅、重要度、カテゴリ、問題点、理由、修正案を画面ごとに整理。
AIエージェント向け実装指示
Claude Code、Codex、Cursor などにそのまま渡せる Markdown / JSON。
UIルール
配色、余白、文字サイズ、ボタン、カード、フォーム、CTAの使い方。
before / after の意図
なぜ変えるのか、顧客に見せる品質へ何が改善されるのかを説明。
打ち合わせは、前提にしません。
制作依頼ではなく、フィードバック依頼。すべてテキストで完結し、開発に戻せる形で受け取れます。
手順 1
画面を渡す
仕様書・README・画面一覧・コード・スクリーンショット・URLを送るだけ。要件定義書は不要。
手順 2
コメントだけ返す
デザイナーが作り直すのではなく、配色・余白・CTA・レイアウトの直し方をコメントで返します。
手順 3
Agentが直す
CLIで取得したフィードバックを Claude Code・Codex・Cursor に渡し、既存コードへ反映します。
WebでもCLIでも同じ依頼へ
手元の開発フローを、
止めない。
依頼、入稿、メッセージ、フィードバック取得、納品取得はWebとCLIでつながります。 デザイナーの指摘を、コーディングエージェントが読める形で受け取るための導線です。
導線 1
Webから依頼
プランを選び、URLと画面説明を入れ、必要なら素材を添付します。
ログイン後は依頼状況、メッセージ、納品、請求を同じ画面で確認。
導線 2
CLIから依頼
device codeで認証し、request create / upload / feedback pull / delivery pull を実行します。
開発者顧客だけが使う導線。デザイナーや運営にはCLI tokenを発行しません。
導線 3
納品を実装へ戻す
Markdown、JSON、納品zip、修正コード、デザインルールを受け取り、手元のAIに反映させます。
Fix AI DesignはAIを実行せず、あなたの開発環境へ戻せる指示を作ります。
納品物
ただの感想では、
ありません。
Figmaや完成コードを納品するのではなく、Claude Code・Codex・Cursor に渡せるフィードバックを納品。 だから制作費を抑えながら、既存のAI実装を改善できます。
LPを依頼する- 既存コードへ反映しやすい修正コード
- Markdownで読める画面別フィードバック
- AIコーディングエージェントへの実装指示
- デザインルール
- デザイナーの画面別フィードバック
- CLIで取得できる実装向けコメント
- 配色・余白・文字・レイアウトの修正方針
- コンポーネント方針
提出前の、最後のひと押しに。
デザイナーが作るのではなく、直し方をコメントする。だから固定価格で始められます。
5画面までチェック
AIで作った自社サイト全体をまとめて確認。
¥15,000
- 自社サイト全体 5画面まで
- 初稿5営業日
- レビュー2回
- AI向けデザイン指示 / デザインルール
10画面までチェック
AIで作ったWebアプリ全体を主要導線ごと確認。
¥30,000〜
- Webアプリ全体 10画面まで
- 初稿7営業日
- レビュー3回
- 複数方向のデザイン検討
- 追加画面 3,000円 / 画面
選び方
- 1画面: LPでもWebアプリ画面でも、まず1画面から確認します。
- 公開サイト全体: 5画面までチェック。料金、事例、問い合わせなどの印象差を揃えます。
- Webアプリ: 10画面までチェック。LP、ダッシュボード、一覧、詳細、設定を主要導線ごと見ます。
価格例
追加画面は10画面超過分だけ加算します。