世界を動かす技術を、日本語で。

今ではFigmaよりもClaudeでデザインしています

概要

  • LLM(大規模言語モデル)活用 への懐疑心から、実践を通じて有用性を実感した体験談。
  • Jane Street入社後、AIサポートが業務に不可欠となった背景。
  • 従来のデザインワークフロー から、AIを活用したプロトタイピング中心への変化。
  • AIによるプロトタイプ開発 のメリットと課題、チーム内でのフィードバック体制。
  • デザイナーとしての自己成長 と、AI時代の創造性・自由度の変化。

LLM活用への懐疑心と変化

  • 過去の経験 :CopilotやCursorで自作ゲームの修正を試みるも、期待外れの結果
  • Gemini利用 :プロダクトブリーフやワイヤーフレームの自動生成も、最終的に全て破棄
  • 自分の得意分野 でLLMを使うと、人間の方が優れていると感じる傾向

Jane StreetでのAIサポートの必要性

  • Jane Street入社後、新しい技術(OCaml、Bonsaiなど)への対応が必要
  • AIの活用 が、未経験領域での業務遂行に不可欠となる実感
  • AIの意外な効果 :自分が最も得意とするデザインワークフローにも大きな変化

新しいデザインワークフロー

  • 従来の流れ :仕様書作成、Figmaでのモックアップ、提案書作成、開発者との実装レビュー
  • 新しい流れ
    • 問題と提案内容の記述
    • エディタ・ビルド・サーバ・Claudeを立ち上げ、記述内容をプロンプトとして利用
    • 基本機能の実装で実現可能性を確認
    • 必要なだけ反復しながら改良
    • 開発環境にプッシュし、ユーザーからフィードバック収集
    • 希望通りの動作・見た目の機能として提出

プロトタイプ開発の具体例と利点

  • JSQL入力へのLLMプロンプト追加 プロトタイプの実装
  • Claudeによる無制限の反復 :細かな調整や仕様変更にも柔軟に対応
  • 全ての労力が実際の成果物の改善に集中、Figmaやドキュメント作成などの周辺作業が不要
  • 従来なら数日~数週間かかる設計・実装のやり取りが大幅に短縮

ワークフロー確立までの試行錯誤

  • 当初は小規模タスクのみAI活用、大規模案件はFigmaやドキュメント中心
  • モデルの進化や自分自身のスキル向上、適切なスコープ設定 によりAI活用範囲が拡大
  • 現在は大規模なプロトタイプ開発にもAIを活用、Figmaを使う機会が激減

デザイナーとしての影響とチーム内の課題

  • デザイナーが自分で動くプロトタイプを作れるようになった ことで、提案の説得力が向上
  • 「JSQL入力での直接LLMプロンプト」など、実現性が不明なアイデアも形にできる
  • チーム内でのフィードバックのあり方 :完成度の高いプロトタイプを提出することで、レビュー担当者の役割が変化
    • プロトタイプは「生きた提案書」 であり、コード自体は使い捨て
    • レビュー担当者はデザイン・ユーザー体験へのフィードバックが主な役割
    • 最終的な実装は別途担当者が引き継ぎ、本番コードとして作成

AI活用による創造性・自由度の変化

  • AIとの反復的な作業 が、発想の幅を狭めてしまう懸念
  • 成熟したツールの場合は反復的な改良が有効 だが、新規性の高い領域では発想の制約となる可能性
  • 「デザイナーはコードを書くべきか」論争との類似性
    • コーディング経験があると、大きな発想転換がしにくくなる懸念
    • それでも実際に手を動かすことの楽しさ・成長実感

AI時代のデザイナーとしての自己成長

  • Jane Street入社前ならFigmaに依存していたはず
  • JavaScript経験はあるが、OCamlやBonsaiは完全な未経験領域
  • AIの力で「本物のプロダクト」に直接触れられるようになった解放感
  • 新しいことに自由に挑戦できる環境の実感

Edwin(Jane Streetのオプションデスク所属デザイナー)

Hackerたちの意見

フロントエンドにはClaude Designを使ってるんだけど、出力は見た目も感じも悪くないんだよね。でも、デザインが似たり寄ったりで、現代のウェブのトロープに沿ってることが多い。誰かがこれを使って変わったクリエイティブな冒険をしたことがあるか、聞いてみたいな。

その経験、俺もあるよ。いろんなプロンプトや入力を試し始めたんだ。要件を与えるとちゃんとそれに応じてくれるのに、方向性を示さないと安全な選択をするのが面白いよね。だから、出力の美的感覚やUX/コンテンツを評価するつもりなら、特に美的な部分についてあまりプロンプトを与えないと、ただの安全なデフォルトしか得られないよ。ブートストラップやテイルウィンドのクローンデザインを作るのは得意だけど、その方向性を活かさないとね。シンプルなウェブページに関しては、初期のイテレーションのためにこれだけに集中し始めたよ。

まあ、いくつかの変わったUIの例を与えて、それを組み合わせて作らせたことがあるけど、まあまあだったよ。でも、なんかズルしてる気がする。

いくつかの異なることをやってみたけど、プレゼンテーションやウェブモックアップなど、どれも箱から出した時はほぼ同じに見える。プレゼンテーションのケースでは、Claude Designはレイアウトの境界を全く理解してなくて、スライドが表示領域の200%以上に広がることもある(コンテンツが多すぎて、うまく見せる方法がわからない)。でも、俺にはまだ価値がある。意図を伝えるのに十分な出力が得られるし、時々HTMLを手動で調整することもある。フォントを定義するのは、少なくとも他の人と同じタイポグラフィにならない良い方法だね。

でも、ほとんどのアプリケーションには、型破りなクリエイティビティは必要ないよね。

私もClaude Designを使ってるよ。すごく尊敬されてる経験豊富なデザイナーたちから勧められて、今はほぼClaudeでプロトタイプを作って、満足したらFigmaでブラッシュアップしてる。ちなみに、プロンプトを調整すれば、一般的なデザインにならないようにできるよ。詳細なスタイリングのプロンプトなしで一般的なUIを頼むと、普通のデザインが返ってくるからね。

同じく、特定のスタイルを見せるように指示できるし、欲しいウェブサイトのスタイルの例を与えることもできるよ。ちょっと手間がかかるけど、少しクリエイティブに感じるようになる。ただ、プロンプトが必要だけどね。

Jane StreetはAnthropicの投資家だと思うから、参考程度にね。

今やHN全体が一つの巨大なAI広告になってるね。

大きな塩を添えて > 2025年7月、インド証券取引委員会(SEBI)は、Jane Streetが市場操作のために複数の法人を使用したと主張し、市場へのアクセスを禁止した。

たとえそうでなくても、フロントエンドデザインに関する定量的なトレーディングファームの意見を気にするべきかどうか、ちょっと疑問だな…。

大体そうだね。中にはお金を払ってるのもある。でも、AIが良いツールじゃないとは言わないけど、使ってるものややってることを理解してないと、働いてるビジネスを危険にさらすことになるよ。

これがHNが最高な理由だよ。最初のコメントで、記事を読むべきかどうか決められるからね。

数字を上げないとね。これは初心者の数字だよ。自分は、少なくとも1日2回は投資を増やしてる。朝、トレーニングの後と、ランチの後にね。やりたいからやってるんじゃなくて、やらなきゃいけないからやってるんだ。

なんか、ランダムな社員のちょっと面白いブログ記事が、心理作戦を探す場所じゃない気がする。でも、それが彼らが思わせたいことかもね。

Jane Streetについての理解では、彼らはOCamlに素晴らしいことをしてきたし、自分たちのウェブフレームワークも持ってるみたい(あの大金のビンにはたくさんのダッシュボードが必要だろうね)。ここでのデザイナーはちょっと間違ったアプローチを取ってると思う。エンジニアの嫉妬に陥って、できるだけ深くリアルなプロトタイプを作りたがってる感じ。でも、デザインの仕事で一番大事なのは、正しいものが作られることだよね(JSQLの入力ボックスが必要なのはなぜ?実際に何が欲しいの?他にどうやってできる?)。これって、特定のデザインに急いで絞り込むより、ペンと紙でスケッチしたり、ミーティングや観察、ディスカッションをする方がうまくいくことが多いんだよね。ボタンが左にあるべきか右にあるべきか、LLMの細かいことについて議論するのはあまり意味がないし。

俺も同じアプローチをよく使ってる。AIが出る前は手作業でやってたし。まずユーザーと一緒に座って、紙と鉛筆でアイデアを出して、それからフロントエンドのPOCやデモを作って、遊んでもらって調整するって感じ。コードでクイックな(プロダクション品質じゃない)フロントエンドデモを作る方が、Figmaで正しいインタラクションを作るよりも早いことが多かったんだ。それに、完全にインタラクティブにできるから、UXのエッジケースもたくさんキャッチできる。今はClaude Codeのおかげで、使い捨てのプロトタイプを作るのがさらに早くなった。でも、ユーザーとのディスカッションやどう動くべきかを考えるのが80%の時間だから、大きな違いはないかな。Claudeを使うと、残りの20%の時間が半分になるかも。初版を作るのは早いけど、完全に理解できてなかったらイテレーションは遅くなるね。

うちのチームでもこれやってるんだけど(俺はフロントエンドエンジニア)、正直、昔のやり方が恋しいよ。書面での仕様が減って、動くプロトタイプが重視されてるけど、今はコードを読んで意図された変更が何だったのか、捨てるべきスロップが何かを判断するという余計な認知的負担があるんだ。生成されたPRを引き継いで必要な変更を加えるべきか、それとも最初からやり直すべきかを考えなきゃいけない。どちらにしても、摩擦を感じることが多いよ。意図しない変更がたくさん生成されて、それを再実装に移すのに時間がかかったこともあったし、後で「おっと!ごめん!それを変えるつもりじゃなかったんだ」と言われることもあった。力を与えてくれるのは分かるけど、昔の仕事の楽しさが少し失われて、頭痛が増えた気がする。

Claude Designにプロトタイプを完全に指定する文書を書いてもらうのはどう?

昔のやり方はクソだったし、フィードバックサイクルも長いし、UIの管理も面倒くさい。もういいや。BEの連中は今はFEもやってるし。

自分も似たような状況だよ。デザインとプロダクトにClaudeを使って、機能や体験をデザイン・コーディングして、顧客の前に素早くプロトタイプを出してフィードバックをもらうんだ。素晴らしい!でも、実際には全体的に物を早く出すのにはあまり役立ってないかもしれない。理由は、途中で何かを失った気がするから。考えること。今やその大部分が言語モデルにアウトソースされてる。プロンプトの亀裂を塗りつぶして、指定されてない時に物事がどうあるべきかを幻覚的に描いてしまう。「これ、うまくいってないな」とか「このアイデアをどう伝えればいいんだろう」とか「何が起こるんだろう…」って考えることがなくなっちゃった。今は、ちゃんと作った後にその詳細を考えることになってる。確かに、プロセスを改善してこの新しい技術をどう活用するかをもっと考えることはできるけど…昔のやり方より良くなってるのかな?うーん、微妙だね。

そのコードはもう読まれるためのものじゃない。それが間違いだよ。コンパイラから出てくる生成されたアセンブリを見てる?見てないよね。じゃあ、なんでこのコードを見てるの?抽象化のレイヤーを上げてるんだから。

Claudeは無料で無制限に反復できて、50回目の変更をしても小さな調整を頼んでも全然気にしないんだ。Claudeにお金払ってないの?

月額20ドルで簡単に無料だよ!

創造的自由があって、手間いらずってことだね。値段じゃなくて。

無制限の反復ができて、気が変わっても気にしないってことだと思う。3rdパーティのプロジェクトやフリーランスのデザイナーと仕事をする時は、通常「初稿+一回の修正」の価格が多いから、以降の変更は追加料金がかかるんだ。小さなデザインショップも似たような感じ。デベロッパーから受けるような時間単位の料金じゃないよ。

ちょっと関連する話だけど、あるインタビューでCEO、リード開発者、リードデザイナーがいて、避けられない「あなたの弱点は何ですか?」って質問が出たことがある。正直に答えたんだけど、デザインが本当に苦手で、デザインシステムを外挿するのにも問題があるって言ったんだ。自分が「これいいな」って思うものにたどり着くのがすごく難しくて、その過程でほぼ必ず悪化させちゃう。面接してくれたデザイナーはこれを個人的に受け取って、私に対して厳しく言ってきた。それは初めてじゃないし。彼らは、どうあるべきかについての質問が止まらないのが嫌で、ワンアンドダンのハンドオフを望んでいたみたい。マーケティングや広告代理店でも、彼らがデザイン仕様にないもののサンプルをくれるように戦ってた。私が正しかったとは言わないけど、これは私にとって大きなアキレス腱なんだ。だから、誰かが「自由で無限の反復、気にしない」って言うと、すぐに思い浮かぶのはそれ。お金じゃなくて、時間と忍耐だね。ボルト(私がプロトタイピングに使ってるツール)は、私に対して怒ったりしない。最高のデザインを生み出すわけじゃないけど、私ができることよりはずっとマシだ。終わったら、本物のデザイナーにもっと良く見せてもらうけど、それまでは誰かをイライラさせる心配はしなくていいんだ。

ここでの利点は、デザイナーがコーディングを学ぶことだね。デザイナーがソフトウェアを形作るのに、どうやって作られているか知らないのはいつも変だと思ってた。ちなみに、俺はデザイナーだよ。でも、コードでデザインするのはテクノロジー優先だよね。デザインの目的、つまり人間の目的のためにアーティファクトを形作ることは、厳格なコードのルールから始めない方がいいって主張することもできる。ペンと紙はまだまだ強いよ。見た目が良いものだけじゃなくて、頭を進めるのに役立つからね。

でも、君は「ソフトウェア開発者みたいにデザインする」ってことだね。

どうやって作られたか知らなくても メディアの制約を理解するのは大事だけど、シリコンを通る電子の動きまで全部知る必要はないよ。

LLMは通常、コーディングを忘れさせるから、こういう使い方だと学習にはあまり良くないと思う。デザイナーにとっては、Figmaと似てて、結果を見て言葉で編集できる感じだね。

もちろんだけど、時々デザイナーは建築家のように、簡単には作れないものをデザインすることがあるよね。

LLMにコードを生成させることは、コーディングを学ぶことじゃなくて、ツールを使ってコードを生成することを学ぶことだよね。まあ、それが重要じゃないかもしれないけど、多くの開発者は自分が生成するコードを全く見なくなるんじゃないかな。

ここでの利点は、デザイナーがコーディングを学ぶことなんだけど、実際にはデザイナーはコーディングを学んでないんだ。うちの妻はFAANGでプロダクトマネージャーをやってて、彼女のチームはAIを使って、WordやExcelでやってたようなソフトウェアの一部を「バイブコーディング」することにすごく力を入れてる。コーディングを学んでるわけじゃないし、コードを一瞬も見ないよ。

エンジニアと密に連携してきたデザイナーが必要だし、しっかり考えられる人がいいね。

僕はフルスタックとフロントエンドに特化したエンジニアを6年間やってて、手でコードを書くのに飽きちゃったんだ。それでデザインに移った。今は声でコーディングできるから、またバイブコーディングやプロダクト作りに戻ってきてる。めっちゃ楽しいよ。ただ、上司はこの新しい状況をまだ理解しようとしてるみたいで、昔の役割分担が崩れ始めてる気がする。今はその交差点にいるのが一番いい場所だと思う。自分の人生の全てがこの瞬間のために準備されてきた気がするよ。

仕事では今、Figmaから移行中なんだ。何年もかけてFigmaベースのデザインワークフローを完璧にしてきたのに、今はすべてのデザインをコード自体に移してる。Storybookを使ってね。今の課題はレビューとフィードバックで、Chromaticがそれに対応してくれてる。

プロトタイプは生きた提案書で、コードは使い捨て。レビュアーの仕事はデザインとユーザー体験についてフィードバックをすること。最終的には、レビュアーがそのアイデアを引き継いで、プロトタイプを参照しつつ別の機能として実装するんだ。それが、すべてのPOCに対する私の問題を解決してくれる、本当に良いアプローチだね。

この記事は、Figmaを使って生計を立てている人からのものじゃないね。特定の製品の特定の問題に取り組んでいるときは、「提案書」って呼ぶのは簡単だよ。でも、Figmaを使って製品やプラットフォームを超えたデザインシステムを定義・維持しているデザイナーはまだまだたくさんいる。Figmaが真実の源なんだから。

もうビジネスサイドから「解決策」という形で要求が来てるんだけど、ほとんどの場合、ルーブ・ゴールドバーグ的な仕組みで、実際の要求にたどり着くためには会話を通じて逆算しなきゃいけない。将来的には、彼らは「準備ができた」解決策を持ってきて、すでに「動いている」から、デザインやアーキテクチャを全体的に見ることにはさらに受け入れが悪くなるだろう。「こうやって作ってくれればいい」とか、「なんでX人時間もかかるの?」って感じで、基本的にはもうできてるって思ってるからね!

これ、もう見たことある。バイブコーディングが隅々まで行き渡ってる。問題は、ビジネスの人たちが「なんでそのままアプリを本番環境に入れられないの?」って理解してないこと。しかも、「AIを使えば早く進められるから、すぐに実現して!」ってプレッシャーがすごい。これは健全な組織のダイナミクスにかかってくるし、リーダーシップにとって学びの機会になるといいな。良い点は、アイデアがナプキンのスケッチよりもずっと徹底的に証明されていること。クロードはすでにエッジケースやデザインの決定について彼らに促している。おそらく、彼らは「心配しないで、仮定を作って」ってクロードに明示的に言わなきゃいけなかったり、「何回か試してみて、あのインタラクションはあまり好きじゃないから、違う風にできる?」って言ったりしたはず。AIに促すために、自分たちのアイデアを明確で直接的な言葉で書き出さなきゃいけなかったんだ。彼らは、自分たちが呼び寄せたおもちゃで遊んで楽しんでいるから、体験を発見して自分の好みを洗練するチャンスがあったんだろうね。今は「すぐに出せ、何が問題なの?」ってプレッシャーが強くて、馬鹿げてて、士気を下げて、働くのが辛いけど、将来的には安定して、次のプロジェクトにはプラスになるかもしれない。

これもすでに見たことある。そうなると、SEの仕事はバイブコーディングされたものをレビューして解きほぐすだけになるね。

正直、昔のようにコミュニケーションが言葉やテキストだけだった頃より、今の方がずっと好きだな。デモと会話だけで、相手が持ってくる製品の意図をもっと全体的に理解できるようになったから。もちろん、そのバイブな製品を作っている人には、あくまでアイデアのモックアップで、変わることを理解してもらう必要があるけど。これは、製品担当者には常に必要な資質だと思う。

Claudeは特定の画像デザインが得意だね。ファビコンやロゴ、OGカードなんかはすごくいい感じ。フル画像生成に関しては、他のところに行くかな。