AnthropicのFable 5モデルがリリースされ、数日後に配信停止となったものの、不死鳥（フェニックス）のように奇跡的な復活を遂げました[1]。そしてそれに伴い、その圧倒的なUI/UXとフロントエンド魔術への憶測が再び飛び交っています。そこで私は、Claude Designを使ってその一発生成（ワンショット）の実力をテストしてみました。一般的なアプリ／Webサイトのインターフェースのプロンプトを実行し、広く参照されているUIをリミックスし、フロントエンドのコード品質を分析して、プロダクトチームのワークフローにおけるその価値を評価しました。Fable 5によるUIの実例から、その実力をぜひご自身で判断してみてください。
ネタバレ注意：UI/UX勝負において、Gemini 3.1 PROやGPT 5.4を相手に、Fable 5はまさにラスボス級の実力を誇ります。
Fable 5によるテキストからのUI生成（Text-to-UI）
ミニマリスト向け瞑想アプリ（モバイル）
プロンプト
"Design a minimalist meditation app screen for mobile: Calm, breathing-space UI with soft gradients, one primary CTA to start a session, session length picker, and a streak tracker. Keep it clean, low-stimulation, mostly whitespace."（モバイル向けのミニマリストな瞑想アプリ画面をデザインして：柔らかなグラデーションをあしらった、穏やかで呼吸がしやすいUI。セッション開始用のメインCTAを1つ、セッション時間の選択ツール、継続日数トラッカーを配置。クリーンで、刺激を抑えた、余白を活かしたデザインに。）
デザイン出力
所要時間：約3分
プロンプトを入力する際、私はCalmアプリのUIを思い描いていました。しかし、Fable 5はそれをさらに高いレベルのミニマリズムへと引き上げました。柔らかなグラデーション、呼吸を促す円形のCTA、時間選択ツール、継続日数表示のフッターなど、要件をほぼ完璧に満たしています。色使いやタイポグラフィの選択も期待通りです。さらに驚くべきことに、指示していないにもかかわらず、軽いアニメーションまで追加してくれました。嬉しいサプライズです。
過密型SaaSダッシュボード（デスクトップ）
プロンプト
"Design a busy fintech SaaS dashboard for desktop. Dense but organized — top nav, sidebar, KPI cards (revenue, active accounts, transaction volume, churn), a large revenue/cashflow chart, a recent transactions table, and a notifications/alerts panel. Data-heavy, multiple widgets, real enterprise-tool density."（PC向けの情報が詰まったフィンテックSaaSダッシュボードをデザインして。高密度ながら整理されたレイアウト：トップナビ、サイドバー、KPIカード（収益、アクティブアカウント、取引量、解約率）、大型の収益/キャッシュフローチャート、最近の取引テーブル、通知/アラートパネル。データ重視で複数ウィジェットを配置し、実際のエンタープライズツール並みの密度に。）
デザイン出力
所要時間：約8分
今回、Claude Designは一般的なAI UIエージェントのようにいくつか確認の質問をしてきたため、お断りしておきます：Fable 5は創造的な方向性を決めるにあたり、多少のサポートを得ました。
出力に関しては、本当に緻密で大規模なものだったため、これほど時間がかかったのだと思います。かなり企業風（コーポレート）な印象ですが、煩雑にならずスマートに見やすくまとめられています。ただ、カードのサイズに合わせてもう少しサイズ調整できるバッジ要素が数箇所気になりました。また、個々の指示をただ並べるのではなく、優れたセンスを持つデザイナーのように、それらを1つのまとまりのあるプロダクトへと見事に統合してくれました。
Banani AIでフィンテックアプリUIを閲覧＆編集する >
複数画面のオンボーディングフロー
プロンプト
"Design a multi-screen onboarding flow for a dating app, mobile. Include: welcome/value-prop screen, photo upload, basic info (name, age, location), interests/prompts selection, and a final 'ready to swipe' screen. Bold, modern, high-energy."（モバイル向けマッチングアプリの複数画面オンボーディングフローをデザインして。以下を含む：ウェルカム/バリュープロポジション画面、写真アップロード、基本情報（名前、年齢、場所）、興味・関心/プロンプトの選択、そして最後の「スワイプ準備完了」画面。大胆でモダン、エネルギッシュな印象に。）
デザイン出力
所要時間：約5分
今回も、Claude Designからクリエイティブな質問があり、私はFable 5に回答しました。これは、よくあるTinder風の直感的UIに偏るのをあえて避けるためでもありました。
完成した複数画面のプロトタイプは刺激的で、遊び心のあるマイクロインタラクションが満載です。要求した画面やコンポーネントはすべて揃っています。色彩、タイポグラフィ、コピー、フロー、すべての仕上がりがプロレベルです。もしこのマッチングアプリのMVP（最小限の実感製品）を作るなら、私はAI UXリサーチツールで実際のユーザーのフィードバックを集め、Fable 5にそのデータを反映したリデザインを依頼するだけで十分かもしれません。
あえて細かな不満（重箱の隅をつつくような点）を挙げるなら、真にクリエイティブなエッジを利かせるために、Fable 5がホーム画面にイラストや画像を生成してくれたら嬉しかったのと、ロゴは装飾されたフォントではなくベクター形式であってほしかったという点です。
Fable 5によるスクリーンショットからのUI生成（Screenshot-to-UI）
スクリーンショットからUIを生成するAIは、気に入ったアプリのインターフェースを編集する際によく使われます。しかし、同じユースケースが、リミックスしたデザインから新しい画面を作る際にも拡張されるのが一般的です。そこで、Fable 5がそれをどのように理解し、編集し、リミックスするのかを試してみました。そのために、いくつかのDuolingoのUIのスクリーンショットをアップロードし、2つのステップで新しい機能画面を追加し、画像も生成するよう指示しました。
プロンプト
“Step 1 — Nav bar icon swap:（ステップ1 — ナビゲーションバーのアイコン差し替え）
Match this Duolingo screenshot's design system exactly. Replace the leaderboard/shield nav icon with a new 'Culture' icon — a simple globe or postcard, same line weight and style as the others. Keep everything else unchanged.（このDuolingoのスクリーンショットのデザインシステムに完全に合わせてください。リーダーボード/盾のナビゲーションアイコンを、新しい「カルチャー」アイコン（シンプルな地球儀またはポストカード、他のアイコンと同じ線の太さとスタイル）に置き換えてください。その他はすべて変更しないでください。）
Step 2 — Feature screen:（ステップ2 — 機能画面）
Same design system. Design the 'Culture Cards' screen this icon opens — a scrolling feed of cards, each with a real photo (street, market, café, landmark) from a country that speaks the language, a short caption tying it to a vocab word, and a 'Practice this word' button. Keep Duolingo's card style and colors, but let the photo be the focus."（同じデザインシステムを使用。このアイコンがアクティブ化した際に開く「カルチャーカード」画面をデザインしてください。カードがスクロールするフィード形式で、各カードには学習対象の言語が話されている国の実際の写真（ストリート、市場、カフェ、ランドマーク）、単語と紐づく短いキャプション、および「この単語を練習する」ボタンを配置。Duolingoのカードスタイルとカラーを維持しつつ、写真が主役になるようにしてください。）
デザイン出力
所要時間：約12分（2テイク）
最初に気になったのは、ベクターも画像もないという点でした。これは少々残念です。しかし、Fable 5はDuolingo画面の枠組みを忠実に再現して他のUIとマッチさせ、新しい機能画面のアウトラインを作成し、さらにはDuoの世界観にぴったりなカラーをスマートに選んでくれました。そのため、欠けている詳細を修正するよう具体的に指示したところ、処理にさらに約6分かかりましたが、ベクターと画像が反映されました。興味深いことに、画像は生成されたものではなく、Wikimedia Commonsから取得されたようです。ベクター素材自体はDuolingoオリジナルの完全なレプリカではありませんが、こうしたUIアセットは本来別途提供されるべきものでしょう。
（※注：ちなみに、この時点で私のClaudeの1日の利用クレジット上限に達してしまいました。やはりFable 5はかなりのリソースを消費するようです。）
Figma WeaveはUIアセット生成に本当に役立つか？ >
Fable 5のデザインシステム再現度
2026年、デザイン仕様書としてのDesign MDは新しい標準的な指示書形式となっています。Fable 5がこれにどれだけ忠実にアプリUIデザインを作成できるかテストするため、AirbnbのUIデザインMDをアップロードし、同じ方針に沿って架空のアプリ「Deskbrb」を生成するよう指示しました。
プロンプト
"Using the attached Airbnb design system/style guide as reference, design a mobile app called DeskBrB. It is an Airbnb-style marketplace for booking coworking desks and meeting rooms by the hour. 3 screens: Home/search feed (with filters and listing cards), Listing details (photos, amenities, pricing, availability), and Seller profile (ratings, reviews, verification badges — matching Airbnb's trust-signal patterns)."（添付されたAirbnbのデザインシステム/スタイルガイドを参考にして、「DeskBrB」というモバイルアプリをデザインしてください。これは、コワーキングスペースのデスクや会議室を時間単位で予約できる、Airbnbスタイルのマーケットプレイスです。3画面作成：ホーム/検索フィード（フィルターとリスティングカード付き）、リスティング詳細（写真、アメニティ、価格、空き状況）、売り手プロフィール（評価、レビュー、認証バッジ — Airbnbの信頼シグナルパターンに準拠）。）
デザイン出力
所要時間：約5分30秒
これは非常に興味深い結果となりました。なぜなら、ここでのAIは奔放なデザイナーというより、徹底したこだわりを持つPM（プロダクトマネージャー）のように振る舞ったからです。アイコン、タイポグラフィ、曲線の使い方が正確に反映されていました。さらに重要なのは、レイアウトと要素の配置が完璧で、一見すると本物のAirbnb UIと見間違えるほどだった点です。Fable 5の画像生成/調達機能の制限は再確認されましたが、それを差し引いてもUI/UXの出来栄えは素晴らしいものでした。
Fable 5のフロントエンドコード品質
Claude Fable 5を使ったウェブデザインは、プロダクトデザインAIとしての側面の半分にすぎません。もう半分の価値は、フロントエンドコードの生成力にあります。そこで、先ほど作成した2つのデザイン（瞑想アプリ（標準HTML/CSS/JS）とDeskBrB（モダンなReact + Tailwind））のコードを書き出してみました。
瞑想アプリ：単一ファイル内のHTML/CSS/JS
フレームワークは使わず、すべてがインラインで記述されています。意味論的なマークアップ（header, footer, main）、カラーシステム用のCSSカスタムプロパティ、時間選択時のaria-pressedステート管理、呼吸アニメーションでの「prefers-reduced-motion（視覚効果の減衰設定）」への配慮など。まるでアクセシビリティを熟知した開発者が書いたようなコードです。
DeskBrBアプリ：コンポーネント化されたReact + Tailwind
ここでは、もはや単なるデザインツールからのビルド出力ではなく、実際の開発チームのリポジトリのように感じられました。18ものファイルで構成され、Button、StarRating、ListingCard、PhotoCarouselといった実際のコンポーネント境界が作られており、それぞれが再利用可能でプロップス駆動になっています。
Tailwindの設定は、アップロードしたデザインMDから直接抽出された、本物のAirbnbトークン（Rauschレッド、インク/ミュートスケール、単一シャドウ層）を拡張しています。さらには、Viteのセットアップ手順やライセンスフラグが記載されたREADMEまで出力されました。また、Airbnbの独自フォント「Cereal」は商標登録されているため、デフォルトで「Inter」に変更したことが明記されていました。非常にスマートです。
出力コードの分析
両方のサンプルを見ても、Fable 5のフロントエンドコードの品質は、プロジェクトの規模や技術スタックに関係なく高いレベルを維持しています。アクセシビリティ属性、意味論的構造、デザイントークンのルール設定は、一時的な場当たり的なものではなく、一貫したベースラインとなっています。デザインの再現性もクリーンに保たれています。これは実質的にフロントエンドエンジニアへの引き渡しパッケージに極めて近く、2026年現在の専用デザインコード変換AIにも匹敵するレベルです。
Figmaなどのデザインからコードへの変換AIを無料で試す >
UI生成対決：Fable 5 vs Gemini vs GPT
2026年、UI/UXおよびフロントエンド領域を支配していた主要な2つのAIモデルは、Gemini 3.1 PROとGPT-5.4でした。Fable 5の実力を測るため、まったく同じプロンプトを3つすべてに実行して比較してみました。お題は、単一のフィンテックアプリ画面におけるモバイル用とデスクトップ用の両インターフェースを同時に生成するという、かなり複雑な内容です。
今回は、Fable 5をClaude Designで動作させ、GeminiおよびGPTモデルはBanani AI UI Designer上で動作させて検証します。
プロンプト（3モデル共通、参考資料なし）
"Design a mobile banking app screen called 'My Card' — user-side. Show a virtual debit card, balance, quick actions, spend stats, and a recent transactions list. Fill in the details and copy as suitable. As for aesthetic direction, go for a dark, bold look that feels premium but not loud. Gradient and translucent surfaces (glassmorphism-leaning) with modern typography and one accent color doing all the work."（「My Card」というユーザー向けモバイルバンキングアプリ画面をデザインして。仮想デビットカード、残高、クイックアクション、支出統計、最近の取引リストを表示。必要に応じて詳細やテキストを記述して。全体のスタイルは、うるさすぎず高級感のある「ダーク＆ボールド」な外観に。グラデーションと半透明の質感（グラスモーフィズム風）を用い、モダンなタイポグラフィと単一のアクセントカラーで洗練された仕上がりにして。）
デザイン出力（3モデル並列比較）
Gemini 3.1 PROが作成したデザインを閲覧＆編集 | GPT 5.4が作成したデザインを閲覧＆編集
3モデルとも確認の質問を行いました（ただし、BananiのAI UIエージェントはより少ない手間で自律的に対応しました）。そして、BananiによるUIデザインの生成は2分未満（モバイルとデスクトップそれぞれ1分ずつ）で完了したのに対し、Claude Design内のFable 5は同様の処理に約6分かかりました。
デザイン自体について言えば、まず全員がモバイルビューの指示を的確に捉えていました。面白いことに、Fable 5とGPT 5.4が似たようなグリーンとブラックの組み合わせを選んだ一方、Gemini 3.1 PROはパープルとブラックという異なるアプローチを取りました。フォント、アイコン、レイアウトの意思決定は3者とも賞賛に値します。しかし私個人としては、Fable 5の半透明カードがより洗練されたプレミアム感を醸し出していると感じました。デスクトップビューにおいても、Fable 5は1画面の中に多くの情報をスマートに詰め込んでいます。他の2つが劣っているわけではありませんが、GPTはサイドナビゲーションバーが抜けており、Geminiは少し窮屈な印象を受けました。
3つのモデルを比べるのは非常に難しい選択ですが、UIの洗練度においてはFable 5が一歩リードしていると言えます。
GeminiやGPTを使って無料でUIデザインを体験する >
結論：Fable 5はUI/UXデザインに有効か？
はい、Fable 5はウェブデザインの領域において傑出したパフォーマンスを発揮します。プロンプトの理解度、デザインのクオリティ、書き出されるコードの品質はどれも非常に優れています。静的な画面の構築はもちろん、マイクロアニメーションの実装や、インタラクティブな複数画面のプロトタイプ構築まで難なくこなします。ただし、利用クレジットの消費が多く、生成スピードに関しては（少なくともClaude Design内では）やや遅いのが難点です。
もし、AIによる優れたUI生成とあわせて、シームレスにコードに変換するワークフローを求めるなら、まずは無料で使えるBananiを試してみてください！複数のモデル（最新のGeminiとClaude）に対応し、Figmaとの高度な連携、ワンクリックでのHTML/CSS書き出しやMCPコネクタ機能を提供しています。
Fable 5をUI/UXデザインで活用する際のよくある質問
Claude DesignでFable 5にアクセスするには？
Claude Designのプロンプト入力ボックス内に、モデル選択のドロップダウンメニューがあります。そこからFable 5を選択し、処理の徹底度（ローからマックスまで）を設定してください。
Claude DesignのFable 5からフロントエンドコードを取得する方法は？
AIチャットボット内で、Fable 5が作成したデザインのスタンドアロンコードを直接リクエストできます。または、右上隅にある「共有」→「Claude Codeに送信」をクリックして、開発者引き渡し用のパッケージを出力することも可能です。
Fable 5のフロントエンドコード品質は本当に良いですか？
はい、素晴らしい品質です。Fable 5が生成した複数のフロントエンドコードファイルを検証したところ、小規模な構成では意味論的でアクセシビリティに配慮されたHTML/CSS/JSを、大規模（複数画面）な構成では見事にコンポーネント化され、トークン管理されたReact + Tailwindのコードを確認できました。実際の開発者の成果物に限りなく近いです。
Fable 5はUI用の画像を生成できますか？
現時点ではあまり得意ではありません。Claude Design内のFable 5にUI用の画像生成を試みましたが、複数回のテストにおいて画像の「生成」は行われず、代わりにWikimedia Commonsから実写真が調達されました。ただし、具体的なプロンプト指示によって、カスタムのベクターアイコンを作成させることは十分に可能です。
