AIが作るアプリはなぜ似てしまうのか、解決する無料ツール

AIが作るアプリはなぜ似てしまうのか、解決する無料ツール

AIが作ったウェブサイトを開いて、次にまた別のAI製サイトを開く。なんだか見覚えがありませんか。フォントも同じ、紫のグラデーションも同じ、カードの中にカードが入っている構成も同じ。これは気のせいではありません。ほとんどのAIモデルは同じようなSaaS系デザインのテンプレートで学習されているため、いつも似たようなデザインを描いてしまうのです。Impeccable(英語で「完璧な、非の打ちどころがない」という意味)という新しいツールが今週GitHubのトレンド上位に浮上し、スター数は73000を超えました。まさにこの問題を解決すると謳っています。

Impeccableとは

Impeccableは、無料でオープンソースの「デザインスキル」一式で、Claude Code、Cursor、GitHub Copilot、Gemini CLIなど、すでに使っているAIコーディングツールに組み込んで使います。インターフェースを代わりに描いてくれるわけではなく、AIの後ろに立つデザインメンターのように、AIがやりがちなデザインの失敗を避けるよう促してくれます。

AIが陥りがちなデザインの癖

プロジェクトのドキュメントによると、Impeccableが検出するよう訓練されている典型的な問題は次の通りです。

  • 何でもInterフォントを使う、あるいはArialのような味気ないデフォルトフォントを使う
  • 紫から青へのグラデーションがいたるところに出てくる
  • 真っ黒や無彩色のグレー、色付き背景の上にグレーの文字を置いて読みにくくなる
  • カードの中にカードが入っている構成、見出しのすぐ上に角丸のアイコンタイルを置く
  • 時代遅れに感じられる、弾むようなアニメーション
  • サイドタブの枠線、暗いグロー効果、小さすぎるタップ領域、要素同士が詰まりすぎた余白

心当たりはありませんか。これは、AIと会話しながらコードを書く「バイブコーディング」アプリの多くに共通する、いわば署名のようなものです。

仕組み

Impeccableは61個の決定論的なルールからなるチェック層を動かします。追加でAIを呼び出す必要がなく、余計なコストもかかりません。始める前に一度/impeccable initを実行し、ツールに製品の背景情報を記録させます。対象ユーザーは誰か、製品の目的は何か、トーンはどうするか。これらはPRODUCT.mdというファイルに保存されます。以降、すべてのデザインコマンドは、汎用テンプレートからの当て推量ではなく、製品の実際の背景情報に基づいて実行されます。

注目すべきコマンドをいくつか紹介します。

  • /impeccable shape: コードを書き始める前にインターフェースを設計する
  • /impeccable critique: 作ったばかりのインターフェースをAIに採点させ、ごちゃついている箇所やわかりにくい箇所を指摘させる
  • /impeccable audit: アクセシビリティ(視覚や聴覚に障害のある人でも使えるか)、読み込み速度、スマートフォンでの表示などの技術的なチェック
  • /impeccable polish: 実際のユーザーに届ける前の最終チェック
  • /impeccable colorize、/impeccable typeset、/impeccable layout: それぞれ色、フォント、レイアウトを調整する

プログラミング未経験者でも使えるか

使えます。プロジェクトフォルダでインストールコマンド(npx impeccable install)を一度実行し、使っているAIコーディングツールを選び、/impeccable initと入力すれば始められます。完全無料でApache 2.0ライセンスのオープンソースであり、隠れた料金も有料プランもありません。コードを書かずにAIでサイトを作っているなら、自分の製品が数えきれないほど存在する似たようなAI製アプリの一つにならないための、最も手軽な方法です。

なぜ重要なのか

バイブコーディングのおかげで、プログラミングができない何百万もの人が自分だけのアプリを作れるようになりました。しかし、AIに頼ってコードを書く人が増えるほど、すべての製品が同じ見た目になってしまうリスクも大きくなり、全体の体験品質が下がってしまいます。これは、最近発表されたバイブコーディング市場に関するレポートでもすでに警告されていたことです。Impeccableのようなツールや、Claude Codeに組み込まれたデザインガイダンスは、AIが「動くコード」を書くだけでなく、本当に見やすく使いやすいインターフェースを作れるようにする、欠けていたピースと言えるでしょう。

#AI #バイブコーディング #ClaudeCode #UIデザイン #オープンソース

他の記事