「SaaS is dead」は本当か？Claude Designで請求書管理アプリのUIを作って感じた、AI時代の業務アプリ開発

こんにちは、株式会社サイシキ代表の藤倉です。
codexやclaude codeなどのAIコーディングによるプロダクト開発が当然といった時代になってきましたね！その中でもデザインに特化したAnthropicによる新規サービスのClaude Designの提供が開始されたので、さっそく使ってレビューしてみたいと思います。

結論から共有します、Claude Designを使用すると開発面で強力であることは間違いないですが、これに加えて業務アプリのUI設計における「最初のたたき台づくり」と「顧客との会話の進め方」が大きく変わる印象を持ちました。

この記事は、AIコーディングを活用して業務アプリを作っている方、社内アプリやBtoB向けアプリの開発に関わっているエンジニア、デザイナー、PM、PdM、経営者などを対象として、今後のアプリ開発体験がどのように変わってくるのかを紹介します。

まず記事を作成している私についてですが、社内AIエージェント環境の構築やBtoB向けアプリの作成支援をリードエンジニアやプレイングマネージャーの立場として取り組んできました。その経験からClaude DesignがBtoBプロダクトライクな開発においても有効なのか実際に使用しながら紹介します。

今回は請求書アプリのUIを作成します。請求書アプリを選んだ理由ですが、自社ニーズに特化したい需要が多く、これまで自社内で開発を行ってきた企業も多いといった事情から業務アプリのデモとして適していると判断しました。またAIコーディングによって、これまでSaaSで提供されてきた業務アプリの内製化が行いやすくなってきている背景もあります。このような理由から今回のClaude Designは「Saas is dead」につながるようなサービスなのか？という問いにも関心があり、以上の理由から請求書アプリを選択しました。

実際に使ってみる

さっそく見ていきましょう。

claude designは https://claude.ai/design から使用することができます。
最初にプロトタイプの名前を入力し、今回はすぐに使えるUIに関心があったのでHigh fidelityを選択しました。

次に実際に作りたいもののイメージをClaudeに伝えます。

スクショやFigmaのファイルから作成もできるみたいですが、今回はシンプルにプロンプトで要件を伝えました。この段階ではまだふわっとした要件だけ伝えています。

【使用したプロンプト】

請求書管理アプリの管理画面を作成してください。
中小〜中堅企業の経理担当が使うことを想定します。
主な目的は一般的な請求書アプリと同様に、受領した請求書の処理状況、承認待ち、支払期限、金額、取引先を一覧で確認できることです。

面白いのはここからです、最初のプロンプトからClaude Designからいくつかのヒアリングが発生します。

ポチポチと一つずつ選択していきます。
（freee/MFクラウド系やBloombergといった具体的な名称がでてくるのに驚きました！）

「目指す雰囲気・トーン」といった視覚的な領域だけでなく「一覧から実行できるべきアクションは？」といったヒアリング事項まであり、請求書アプリが一般的にどのようなものであるのかを理解した上でヒアリングと提案を行ってくれます。

ヒアリング項目にすべて答えてサブミットします。

左手側のチャット欄に先程のヒアリングに対する回答がプロンプトとして渡されました。

14分ほどして草案が出来あがりました。

上段にステータスサマリーが表示され、中段にフィルター、下段にアイテムの一覧が表示されるレイアウトがでてきました。一般的に想像ができるであろう請求書アプリのUIに見えます。企業名や人名などはすべてモックアップで自動で設定されていました。ちなみに、フィルター機能は実際にインタラクティブに動きましたが、左手側（黒背景の領域）は押しても反応がありませんでした（おそらく関連ページを作成していないため）。

普通の請求書アプリを作っただけでは恩恵がないので少しチューニングを試してみます。例えば自社ニーズをプロンプトで指示してみます。

【使用したプロンプト】

定期取引の有無の情報も管理できるようにして、定期取引先からの請求書で金額差異が5%以上ある場合にアラートを出すようにしたいです。
新規取引先からの請求書は、支払前に反社チェック・登録情報確認を必須にしてください。

また10分ほどすると改善版があがってきました。指示していたように”月次”や”金額差異”の表示が増えていることが確認できます。

請求書の個別ページを開いても金額差異のアラートが表示されています。

一覧の表示項目が増えて企業名が崩れてしまうため調整をしてみます。

【使用したプロンプト】

月次、適格、金額差異などの情報で取引先の名称が収まりきらなくなっています

今回は軽微な修正のためか30秒ほどで修正版がでてきました。

東京エナジーパートナーの表示崩れが無事に改善されています。

今回作成したUIデザインはあくまでレイアウトやUIパーツの作成に留まり、実際のDBへの保存処理などは実装されていません。ここから先は手元のcodexやclaude codeなどのAIコーディングで進める領域になります。今回作成したデザインをダウンロードして利用できるようにしましょう。

【使用したプロンプト】

codexやclaude codeで開発が進められるようにファイルをダウンロードできるようにまとめてください

zip形式でファイルがダウンロードできました。中身を開くと以下のようになっており、README.mdを筆頭にこれらファイルのディレクトリの場所をAIに教えれば、引き続きAIコーディングをベースに実装を進めていくことができるようになっています。

ここまでがClaude Designを使用した請求書アプリUI作成のデモになります。

Claude Designはかなりオススメできる

技術主導で動いているPoC段階であったりMVPを構築しようとしているフェーズだとClaude Designは適していると判断しました。特にリターンが未知なプロジェクト初期の段階ではデザイナーの方に入ってもらいにくいタイミングがあります。その穴を埋めるのにピッタリかなと思います。

また、これまでCodexやClaude CodeのようなAIコーディングツールを使っていると、実装そのものは速い一方でデザインやUI設計の部分はそこまで強くないと感じる場面がありました。Claude Designは、その弱点を補うツールとしてかなり強力に感じました。

加えて、最初に議論できる画面がすぐに出てくることには大きな価値があります。業務アプリの開発では抽象的な要件を言葉だけで話していてもなかなか認識がそろいません。実際の画面に近いものを見ながら会話できるだけで、チームや顧客とのコミュニケーションはかなり進めやすくなります。

これまではFigmaを使うことが多かったと思いますがワイヤーを作るためにデザイナーが入っている必要がありました。Claude Designではデザイナーの参加状況に依存せずに「まず試してみる」アプローチが実践できることが強力です。

それと実際に試してみての評価ですが過去にFigmaのMCPサーバを準備してAIコーディング環境からつなげてみても成果物がイマイチだったのですが、Claude Designで出力したファイルベースだと出来上がりがほぼそのままでAIコーディングの開発体験としても素晴らしかったです。

Claude Designの限界

まず、Claude DesignはClaudeの上位プランでしか使用できません。

また、利用上限にも簡単に引っかかりました。私が試したときは、2つのプロジェクトでデザイン案を7〜8個ほど作らせたところでその月の上限に到達しました。そのため、複数ユーザーで日常的に使うことは現実的にはまだ難しいかもしれません。

少なくとも、チーム全員が日常的に何度も試行錯誤する前提で使うには、利用上限との付き合い方を考える必要があります。個人や少人数で初期案を作る、重要な画面のたたき台を作る、といった使い方から始めるのが現実的です。

アナリストによる分析

AnthropicによるUIデザインに限らない変革の可能性

Claude Designを使用して特に印象的だったのは、最初のヒアリングです。作りたいものや目的を伝えると、それをもとに画面構成やUIの方向性を組み立て、必要な機能や業務の流れを整理して最初の草案を出してくれます。

今回はプロのデザイナーが行っていた活動の一部をAnthropicがAI化してきましたが、今後は同様の流れで様々な専門分野におけるAI化が進むかもしれません。例えば作曲家や映像クリエイターを模したAI化が同じように行われると、いくつかのヒアリングの後に動画が出力されたり、もしくは自身に特化した動画編集アプリが出力されるような未来があるかもしれません。

専門家 vs AI

ここまでClaude Designをべた褒めしてきましたが、もちろんプロのデザイナーの方が適している場面もあります。特に、他社事例や業界知識を踏まえて最適なパターンの候補を柔軟に提案してくれる力は、経験のある人間のデザイナーの大きな価値です。抽象的な要望から本質的な課題を見つけたり、過去の事例を踏まえて複数の方向性を比較検討できるように示す仕事は専門家ならではの強みがあります。

ただし、その強みが最大限に活きるのは作成するアプリとそのプロの専門性が合致する場合です。Claude Designの場合は専門性のマッチ度をそこまで気にせず、とりあえず相談して一定以上の成果が得られる点に価値があります。Claude Designは最初の壁打ち相手として、あるいは初期案を作るパートナーとしてはかなり便利です。

「SaaS is dead」は本当か

昨今のAIコーディングやClaude Designのようなツールを見ていると、「SaaS is dead」と表現したくなる心情も理解できます。AIコーディングにより開発工数が大幅に減少したため内製化することも現実的になってきており、既存のSaaSを導入しなくてもよくなるのではないか、という見方です。

ただ、私としては「SaaS is dead」は過言だと思っています。

社内で同等の機能を持つアプリを作ろうとしても業務理解や設計能力が必須です。また、業務アプリはただ作ればよいものではなく導入後の支援も重要な価値提供です。

特に大手企業では開発担当者のスケジュールやモチベーション管理の難しさや異動もあり、社内アプリの継続開発が難しいことがあります。この影響で元々内製していた社内プロダクトをSaaSの導入にシフトする事例も見てきました（実際に私がエンプラ向けの営業に参加して案件化したときにこのような事情に気づきました）。

一方で、社内開発の方がコミュニケーションの機会を取りやすいケースもあります。稟議のハードルも大きく異なります。AIコーディングによってアプリの開発速度が向上しているからこそ、差別化ポイントとして現場の意向を取り込みながら最適化していくことの価値がより大きくなります。場合によっては画一的だったUIを事業者向けに個別に最適化した形で提供を行うようなプロダクトデザインの在り方が抜本的に変化する可能性もあります。

上記のように、今後SaaSを提供する事業者は顧客とより密接にコミュニケーションを取る方向へとトレンドがシフトしていく可能性があります。実際にPalantirのFDEのような顧客とのコミュニケーションの機会を増やす新しいポジションも提唱され始めています。SaaSがなくなるというより、SaaS提供者にも顧客の業務に深く入り込んでバリューを発揮する力がより求められていくのではないでしょうか。

さいごに

この記事では、Claude Designを使用して請求書管理アプリのUIを作成する実践的な事例をもとに、AI時代の業務アプリ開発について整理しました。

弊社サイシキでは、AIツールの導入や社内AIエージェント環境の構築、BtoB向けアプリの作成支援を提供しており実績も豊富です。コンサルティングサービスや自社のアセットから、どのような導入やサービス化を行うことで業務効率化やコストカット、AIを利用した新規の事業化を行えるのかといった診断サービスまで提供していますので、ご関心のある方は以下のフォームからお問い合わせください。