Claude Fable 5がデザインとコードの溝を埋めた

Fable 5はゴールラインを動かした。デザイナーの1週間を食い潰していた工程、静的な画面を動くインターフェースコードに変換する作業が、今やほぼ無コストに近い。このたった一つの変化が、あなたの成果物の意味を根本から変える。気づかないふりをしていると、取り残される。

デザイナー同士の正直な話をしよう。何が実際に変わったのか、どこでまだ崩れるのか、そしてスクリーンショットからコードへの変換が難関でなくなったとき、あなたの仕事は何になるのか。

誰もが反応しているデモ

figma.comで実際に見る

@chubbyのバイラルスレッド(1万8400リポスト、340件超のデザイナー返信)には、Fable 5がFigmaのスクリーンショットを受け取り、ほぼ追加プロンプトなしで一発で動くインターフェースを返す動画が投稿された。返信欄では、デザイナーたちが自分のファイルで同じことを試して結果を投稿している。これが証拠だ。ベンダーの宣伝映像ではなく、現場のプロが実際の仕事で試している。

@bauyoの2つ目のデモスレッド(1万2100いいね)はさらに踏み込んで、静的デザインから再構築された複雑なマーケティングサイトのビフォーアフターを投稿した。両スレッドの要点は同じだ。モデルにインターフェースの画像を渡すと、返ってくるのはスケッチではなく、そのまま出荷できるものだ。

タイミングが重要だ。Fable 5は13日間の停止を経て、6月24日と25日にBedrockとClaude Codeのモデル選択画面に再登場した。本当に優れた公開デモの第一波は、その後48時間以内に現れた。つまり今あなたが目にしている反応は、誇大広告が落ち着いたものではなく、最初の正直な評価だ。

実際に何が変わったのか

速度は本題ではない。速くてひどいコード生成なら2年前からあった。変わったのは、ビジョン読み取りの精度が上がり、出力がデザインを近似するのではなく、尊重するようになったことだ。

昨年のスクリーンショット変換ツールが返すのは「雰囲気エクスポート」だった。だいたい合っているレイアウト、でたらめなスペーシング、あちこちにハードコードされた16進数値、型スケールは完全無視。節約した時間を全部クリーンアップに費やすことになった。Fable 5の飛躍は、デザイナーが実際に感じる2つの点にある。

第一に、デザインを正確に読み取る。スペーシングの関係、階層、コンポーネントの繰り返し、カードとセクションの違い。

第二に、返ってくるコードがシステムに寄ろうとする。スレッドのデザイナーたちは、生の値をそのまま吐き出すのではなく、既存の変数やコンポーネント規約にマッピングするトークン対応の出力を報告している。これが、使い捨てと、エンジニアが受け入れる出発点との違いだ。

それでも破綻する場所

これが誇大スレッドが飛ばす部分であり、あなたの仕事を守る部分だ。スクリーンショット一枚は一つの状態に過ぎない。製品は一つの状態では存在しない。静的フレームが表示できないすべてが、Fable 5が魔法でなくなる場所だ。

一画面渡せばその画面が返ってくる。空の状態も、ローディングスケルトンも、エラーコピーも、バリデーションルールも、400行目に何が起きるかも、モデルには分からない。あなたが描かなかったインタラクションは見えない。そもそも作る価値があるかどうかについても、モデルに意見はない。

これらはどれも次のリリースで修正されるバグではない。入力の限界だ。ボタンの画像は、ネットワークが落ちたときにボタンが何をするかをモデルに伝えられない。あなたの判断がそのギャップを埋める。そしてそのギャップが、実際の仕事のほとんどを占める。

「完成」が今何を意味するか

成果物の形が変わった。長年、「完了」とは47画面のFigmaファイルに赤線、仕様書、引き継ぎ会議を意味していた。そのアーティファクトが存在したのは、画面からコードへの変換が高コストで情報が失われやすかったから、意図を守るために過剰に仕様を記述していたのだ。

変換がほぼ無コストで忠実になれば、巨大な仕様書はただの重荷だ。動くアーティファクトが勝つ。アイデアのレンダリングされたインタラクティブバージョンは、注釈のページより10秒で多くを伝える。エンジニアはそれを解釈すべきドキュメントとしてではなく、コードとして読める。

プロセスドキュメントは3分のLoomに負ける。動いているものを見せ、重要な2つの決断を語ることは、誰も開かない書面仕様に勝る。成果物はもはや画面のデザインではない。画面が何であるべきかという決断と、正しく返ってきたという判断だ。

ギャップが閉じた後のデザイナーの仕事

ギャップが閉じてもデザイナーは消えない。仕事のふりをしていた雑務が消えるのだ。3つのことがゲームのすべてになる。

一つ目、何を作る価値があるかを決める。画面を生成するのに数分しかかからなくなれば、制約は正しい画面を選ぶことに移る。何を削り、何を順序立て、何を作らないかを知ることが競争優位だ。モデルには抑制のセンスがない、あなたにはある。

二つ目、モデルが返したものを判断し修正する。Fable 5は自信のあるドラフトを返す。自信のあるドラフトは危険だ。上の限界テーブルと照らし合わせて出力を読み、欠けているエラー状態、間違ったフォーカス順序、ずれたブランドトーンを見つけることが新しいコアスキルだ。生成ではなく、キュレーション。

三つ目、システムとセンスを所有する。モデルはあなたのトークンとコンポーネントに頼るから、システムの品質がモデルが生成するすべての品質を決める。強いデザインシステムはFable 5を輝かせ、弱いものはスケールで自信満々に間違わせる。システムの背後にあるセンスはモデルが持てないものだ。

今週実際にどう使うか

bolt.newで実際に見る

おもちゃ扱いをやめてパイプラインに組み込め。ワークフローは短く、今日から使える。

ピクセルではなく意図から始める。何かを描く前に、その画面が何のためにあるか、どんな状態を持つかを決める。考えることはモデルにできない部分だから、最初にやる。

プライマリ状態をいつものレベルでデザインしてスクリーンショットを撮る。実際のシステムの中の、自分のトークンを使った綺麗なフレームが最良の読み取りを与える。それをFable 5に渡して、一発で動くアーティファクトを返させる。

それから限界テーブルと照らし合わせてレビューする。流し読みしてはいけない。モデルが見えなかった空、ローディング、エラーの状態を丁寧に確認する。フォーカス順序、コントラスト、ARIAを確認し、値がハードコードではなくトークンにマッピングされているか確認する。間違っているものを修正し、アーティファクトを出荷し、仕様書の代わりにLoomを送る。

まとめ

これは「デザイナーは時代遅れ」という話ではない。正反対だ。Fable 5は仕事の機械的な中間部分、変換ステップを食い、常に最も重要だった両端を残した。何を作るかを決めることと、それが正しいかを判断すること。

今年勝つデザイナーは、ピクセル操作を守るのをやめて判断力を磨き始めた人たちだ。モデルはデザインとコードの間のギャップを縮めた。良いものと正しいものの間のギャップは縮めていない。そしてそのギャップが今や仕事のすべてだ。

FAQ

Claude Fable 5とは何か?

Fable 5はClaudeのモデルで、13日間の停止を経て6月24日と25日にBedrockとClaude Codeのモデル選択画面に再登場し、デザイナーの目に改めて留まるようになった。反応の核心はビジョンからコードへの品質、インターフェースのスクリーンショットを一発で動くUIに変換することにある。

Fable 5は本当にスクリーンショットを本番コードに変換できるか?

静的フレームが表示できる範囲では、ほぼそうだ。バイラルな@chubbyスレッド(1万8400リポスト)と@bauyoのデモスレッド(1万2100いいね)のデザイナーたちは、追加プロンプトをほとんど使わずに静的デザインから忠実でトークン対応の再構築を見せている。ただし、空、ローディング、エラーなど見えない状態は生成できないため、出力はレビューすべき強力な出発点であって、完成品ではない。

これはデザイナーに取って代わるか?

いいえ。デザインからコードへの機械的な変換を取り除き、判断を必要とする部分を残す。何を作る価値があるかを決めること、モデルが見逃したものを見つけること、モデルが頼るデザインシステムを所有すること。生成が安くなったことで、キュレーションとセンスの価値は下がるのではなく上がる。

Figmaから本番コードへの変換は引き継ぎを変えるか?

はい。成果物は大きな仕様重視のFigmaファイルから、一つの動くアーティファクトと短いLoomに移行する。変換が忠実でほぼ無コストになれば、過剰仕様はただの重荷であり、アイデアの動作バージョンは赤線より速く意図を伝える。

今週Fable 5で何をすべきか?

自分の判断の後ろにあるパイプラインに組み込む。まず意図と状態を決め、プライマリ状態をいつものレベルでデザインし、スクリーンショットを撮り、Fable 5に生成させ、それから出荷前に既知の限界に照らして厳しくレビューする。モデルは変換を担い、あなたはモデルが見えないものすべてを所有する。