新規プロダクト開発、AIでどう変わった？ #デザインエンジニアMeetup

2025年6月18日(水)開催、「デザインエンジニアMeetup #2 AI時代のプロダクトづくり最前線」で発表した、弁護士ドットコム株式会社 リーガルブレイン開発部 デザインエンジニア の門倉央が登壇した際の資料です。

セッションタイトル：新規プロダクト開発、AIでどう変わった？

■ 弁護士ドットコム株式会社プロダクト組織について
https://speakerdeck.com/bengo4com/introduction-for-creators

■ 採用情報はこちら
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム Creators’ blog
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATOR'S
https://x.com/bengo4_creators

Transcript

1. 弁護士ドットコム株式会社 門倉 央 Bengo4.com, Inc. 新規プロダクト開発、 AIでどう変わった？
2. Bengo4.com, Inc. 門倉央 / プロダクトデザイナー Hiroshi Kadokura @kuroinu123 弁護士ドットコム株式会社 2022年入社。法務や弁護士のリーガルリサーチ課題を解決する 「LegalBrain Agent」のデザインやフロントエンド開発をし てます 。 自己紹介
3. Bengo4.com, Inc.
4. Bengo4.com, Inc. ▪ VISION まだないやり方で、世界を前へ。 ▪ MISSION ｢プロフェッショナル・テック｣で、次の常識をつくる。 プロフェッショナルだからできること。専⾨知をテクノロジーの力で、もっと身近に。 
 弁護士ドットコム株式会社は、人々と専門家をつなぐポータルサイト「弁護士ドットコム」「税理士 ドットコム」「BUSINESS LAWYERS」、契約マネジメントプラットフォーム「クラウドサイン」、 革新的なリーガルサービスを生み出すコアテクノロジー「LegalBrain Agent」などのサービスを提供 し ています 。
5. Bengo4.com, Inc. Services
6. Bengo4.com, Inc. 企業法務や弁護士の リーガルリサーチをサポート 自然言語で法的な質問をすると、AI が問題の核心となる論点を整理し、 出典や根拠のリンクとともに提示。 質問を入力してください
7. AI 活用で変わったこと Bengo4.com, Inc.
8. Bengo4.com, Inc. 具現化までのスピードが飛躍的に「速くなった」 価値検証サイクルを高速で回せるようになった。 「一旦持ち帰る」が激減し、チームMTGや顧客との MTG中にリアルタイムで検証可能になった。
9. Bengo4.com, Inc. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 import from const as const export default function const const null null const return div input { useEffect, useState } ; [ , ] ; () { [searchValue, setSearchValue] ( ); [suggestion, setSuggestion] ( ); (() { randomIndex Math. (Math. () .length); ( [randomIndex]); }, []); ( < className="space-y-2"> < type="text" className="border p-2 w-full" placeholder="質問を入力してください" value={searchValue} onChange={(e) (e.target.value)} 'react' '株主総会決議を経ずに取締役に報酬を渡した場合、事後的な株 '会社が役員にD&O保険をかけ、その保険料を会社が負担する場 '出向社員や派遣社員が行った職務発明について、出向元や派遣 '取締役の義務について、株主総会を経ずに取締役会にて' '契約書について、有効性の判断基準ポイントが限定的にまるま '' EXAMPLE_QUERIES EXAMPLE_QUERIES EXAMPLE_QUERIES = = <string> = <string | > => = => SearchInput useState useState useEffect floor random setSuggestion setSearchValue フィードバックを素早く得られる
10. Bengo4.com, Inc. 作業領域が広がった デザイナーも Cursor を活用し てコードを書いたり、 v0.dev を活用し て UI の案出しをしたり、 動くプロトを作ったり、 時にはデータベースや認証機能を加えたりと 
 デザインとコードの行き来が増えた。
11. Bengo4.com, Inc. 「AIは便利」「生産性が向上した！！」 を実現するために必要なことは...
12. 理想の状態を しっかりと言語化して描けているのか Bengo4.com, Inc.
13. Bengo4.com, Inc. それっぽい動くコードが返ってきてしまう。ちょい微妙なところを修正する。 またプロンプトを与える。またそれっぽいコードが返ってくる×数十回。 油断するとAI の生成結果に辻褄を合わせようとし てしまう。 → レスポンス速度が速いが故に振り回されがち 曖昧な指示のままだと、曖昧な結果しか返ってこない
14. 理想の状態を言語化とは Bengo4.com, Inc. 課題 ユーザーは何に困っていて、今どんな体験になっているのか？ ゴール それがどうなっていたら“うまくいっている”と言えるのか？ 解決策 どのようなアプローチで理想を実現するか？ リーンキャンバス KJ法 MECE ロジックツリー 対話 ジャーニーマップ インタビュー ※ 色々な方法があるので適宜選択
15. 発想のヒントとしてのAI活用 Bengo4.com, Inc. 長いリサーチ時間に対する、体感速度削減の施策があ る。これについて...
16. 言語化されてテキストになると人間にもAIにも優しい Bengo4.com, Inc.
17. ゴールを共有しながら AIと協業する Bengo4.com, Inc.
18. 「命令的」な指示から 理想の状態を伝える「宣言的なプロンプト」へ Bengo4.com, Inc. 作業を代替してもらうための命令的な指示（How） 理想の状態を共有し、協業しながら開発するための 宣言的な依頼 （What）へ 1 2 3 4 5 6 7 8 9 // numbersの配列の大きさに達するまで // 要素を、頭から1つずつ繰り返し確認します // 偶数の要素だけ偶数の箱に追加してください for let if ( i ; i numbers.length; i ) { (numbers[i] ) { evenNumbers. (numbers[i]); } } = < ++ % === 0 2 0 push 1 2 3 // 宣言的：偶数だけを抽出して、新しい配列を作る const evenNumbers numbers. ( ); = number => number % === filter 2 0 「 How 」は、 自分 の 知っ て い る こと＝提 示 でき る 選択肢 の 限界。 複雑 な 表現は 、言 語化 して 伝え るのが 大変...。
19. AI の持つ膨大な引き出しを有効活用しながら ペアプロ的に協業する Bengo4.com, Inc.
20. 変わらなかったこと Bengo4.com, Inc.
21. Bengo4.com, Inc. とりあえず動くものを開発することはできるが、知識がないと、どんなに理想 の状態を描いたとし ても”良し悪し”までは判断できない。 なんでもできそうな気になるけど、ちゃんと頼るべきところは頼る。 そし て、頼られるよう（良し悪しの判断ができるよう）自分の専門性を磨き続 けるのが大事！ 良し悪しの判断には、専門性が必須
22. Bengo4.com, Inc. デザインと開発の視点を持つデザインエンジニアは、理想の状態を言語化 することで、「プロデューサー」のような視点でAIを活用し てプロダクトの 価値を最大化できる可能性があるのでは？ 最後に
23. Bengo4.com, Inc. Thank You!!