Claude Fable 5が最強すぎる…異次元のAIコーディング能力でWebサイトが一瞬で完成した
概要
Anthropicの最上位AIモデル「Claude Fable 5」を使い、現役Web制作フリーランスがCursor上のClaude Codeからサイト制作を実演。1回の指示で完成度の高い美容室サイトを生成し、コード品質・デザイン・料金面での使いどころを検証している。
主なポイント
- Fable 5はAnthropicの最上位モデルで、内部的には非公開の最強モデル「Mythos 5」に強力な安全フィルターを追加したもの
- 強み3点:異次元のコーディング能力、長時間の自律タスク遂行能力、画像認識能力(ポケモン攻略の例など)
- Cursorのターミナルで
claude --dangerously-skip-permissions起動、/modelコマンドでFable 5に切替という具体的操作手順を解説 - シンプルな指示「美容室の公式サイトのトップページを作成」だけでセマンティックHTML・BEM設計・レスポンシブ対応済みのサイトが数分で完成
- デメリットとしてトークン消費量がOpusの2倍、料金も2倍で従量課金、簡単な1ページサイトでも利用枠の78%を消費と燃費が悪い
- 同じ簡易プロンプトだと毎回似たようなサイトになりがちで、差別化には具体的な設計指示が必須
- 生成後にCTAボタンの色変更、実写画像追加、タブレットサイズの崩れ修正、トップに戻るボタン追加など具体的な自然言語指示で細部を反復修正する流れを実演
- Cloudflare Pagesへのドラッグ&ドロップでの無料デプロイ手順も紹介
- 結論として数ページ程度のサイト制作にはFable 5はオーバースペックで、複雑なアニメーションや数十ページ規模のWordPressサイトなど大規模タスクに向く
実践に使えること
- Claude Codeで
--dangerously-skip-permissionsは確認作業を減らせるが誤操作リスクもあるため、自己責任で使える環境に限定する - サイト制作をAIに任せる際はざっくり指示ではなく、設計書・仕様書レベルの具体的な指示を用意して差別化を図る
- AIが出したコードはメインタグの有無、image要素のwidth/height指定、親要素での画像ラップ、ブレイクポイントの妥当性など、実務基準でレビューする習慣を持つ
- 一括生成後は「ボタンの視認性」「中間サイズ(タブレット)でのレイアウト崩れ」「アスペクト比調整」など具体的な観点で追加指示を出し、細部を磨き込む