フリーランスデザイナーがClaude Codeを使うと、デザインから実装まで最短1日で完結できます。Claude DesignのハンドオフバンドルをClaude Codeに渡すだけで、プロダクションコードが自動生成されます。本記事では初期設定から実務ワークフローまで5ステップで解説します。
この記事でわかること
デザインから実装まで最短1日で完結するワークフローを習得できます。Figma連携込みの初期設定を30分で完了する手順を確認できます。要件定義書の自動生成・音声入力活用など実務で使える5つのハックを習得できます。
この記事の結論
フリーランスデザイナーにとってClaude Codeは「実装を外注せずに自分で完結させる」最短ルートです。Claude DesignとClaude Codeを組み合わせると、デザインのハンドオフバンドルを単一指示でコードに変換でき、エンジニアへの依頼コストと待ち時間をゼロにできます。初期設定はFigma連携込みで約30分、/initコマンドでCLAUDE.mdを作成し、PlanモードとDevモードを使い分ければ、翌日から実務に投入できます。
今日やるべき1つ
Claude Codeをターミナルからclaudeコマンドで起動し、/initコマンドを実行してCLAUDE.mdを作成する（所要時間: 15分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| Claude DesignとClaude Codeの違いを知りたい | Claude Codeはデザイナーに3つの役割を与える | 3分 |
| 今すぐFigma連携を設定したい | Claude Codeの初期設定は30分で完了 | 5分 |
| デザインからコードへの流れを把握したい | Claude Designから実装まで4段階で完結 | 5分 |
| 自分のワークフローに合う使い方を診断したい | Claude Code活用パターンを3分で診断 | 3分 |
| 実務で使える具体的なノウハウを知りたい | Claude Codeはデザイナー実務で5つの仕組みで解決 | 10分 |
Claude Codeはデザイナーに3つの役割を与える
「Claude CodeはエンジニアのためのツールでCLIが難しそう」と感じている方も多いでしょう。しかし実際には、フリーランスデザイナーが最も恩恵を受けるのがClaude Codeです。
Claude.ai・Claude Desktop・Claude Codeは目的で使い分ける
Claude社のツール群は目的別に整理できます。Claude.aiは対話型のAIチャットで、ブランディングの壁打ちやコンセプト整理に使います。Claude Designはビジュアル制作に特化したツールで、プロトタイプ・スライド・LPを生成します。Claude CodeはCLI（コマンドラインインターフェース）から動作する本格的な開発・自動化専用ツールです（駆け出しデザイナーのためのClaude入門）。
つまり「質問・壁打ち→Claude.ai」「ビジュアル制作→Claude Design」「デザインからコードへの実装→Claude Code」と切り替えることで、それぞれのツールが最大効率で機能します。この使い分けを知らないと、Claude.aiに実装を頼んで「やり方を教えてもらうだけで終わる」という状態を繰り返します。
Webデザイナーとしてフリーランスで活躍する方法については、スキルの積み上げ方から案件獲得まで別記事でくわしく解説しています。
なお、Anthropicの公式ラインナップにおけるツール名称・機能は更新される場合があるため、最新情報はAnthropic公式サイトでご確認ください。
Claude DesignとClaude Codeは補完関係にある
Claude Designはビジュアル制作専用で、プロトタイプ・スライド・LPを生成します。Claude Codeはコード実装専用で、Claude Designが生成したデザインをプロダクションコードに変換します（Claude Designとは？できること・機能・使い方）。
この補完関係のカギが「ハンドオフバンドル」です。Claude Designが完成したデザインをハンドオフバンドルとして1パッケージにまとめ、Claude Codeへの指示に変換します。Claude Codeはこのバンドルを受け取り、デザインの意図を解釈してコードを生成します。従来のデザイナーとエンジニア間のハンドオフ作業が、この仕組みで自動化される点が最大のメリットです。
デザイナーの役割に「実装者」が加わる
Claude CodeとClaude Designの連携によって、フリーランスデザイナーの役割に「実装者」が加わります。これは役割の増加ではなく、外注していた実装工程を自分の手に取り戻すことを意味します。具体的には、エンジニアへの依頼書作成・仕様確認のやり取り・修正依頼の往復が不要になります。
過去のリファレンスを基にClaude Codeが要件定義書の叩きを自動生成し、UI/UX要件を対話しながら詰める中で役割境界が融解した、という経験を持つWebデザイナーの報告があります（Claude Codeでデザインのワークフローを変えたら）。デザイン確定から静的HTMLの納品まで1日以内に完結できるプロジェクトも増えています。
フリーランスデザイナーとしてポートフォリオを構築してクライアントに実力を証明する方法と組み合わせることで、実装まで対応できるデザイナーとして差別化が可能です。
CHECK
▶ 今すぐやること: Claude.ai・Claude Design・Claude Codeの3ツールを比較し、自分が今使っているツールがどの目的に該当するか確認する（5分）
Q: Claude CodeはProプランでないと使えませんか？
A： Claude Code本体の利用には有料プランが必要です。特にClaude Designとの連携機能を使う場合は対応プランを契約してから設定を進めてください。最新のプラン情報と料金はAnthropic公式サイトでご確認ください。
Q： CLIが初めてでもClaude Codeは使えますか？
A： ターミナルの基本操作（ディレクトリ移動・コマンド実行）ができれば問題ありません。Claude Code自体が環境構築の方法を対話しながら案内してくれるため、「何を入れればよいか分からない」という状態はほぼ発生しません。
Claude Codeの初期設定は30分で完了
Claude CodeのFigma連携込みの初期設定は、手順を知っていれば30分で終わります。
Figma連携は設定画面から完了
FigmaとClaude Codeの連携設定は、ClaudeアプリのGUI（設定画面）から行います。CLIを触る前に完了できるため、開発経験がなくても問題ありません（ClaudeCodeの初期設定や使い方を解説）。
手順は「Claudeアプリを開く→設定→コネクタ（Connectors）→Figmaを選択→連携を有効化」の流れです。この設定により、FigmaのデザインデータをClaude Codeが直接参照できるようになります。設定後にFigmaを開き、DevモードでオブジェクトをClaude Codeへ渡す準備が整います。
Figma連携はClaude Codeを起動する前に完了させてください。起動後に連携を試みると、再起動が必要になるケースがあるため、順番を守ることが肝心です。
/initコマンドでCLAUDE.mdを作成する
プロジェクトディレクトリでターミナルを開き、claudeコマンドを実行してClaude Codeを起動します。続けて/initコマンドを入力すると、CLAUDE.mdが自動生成されます（ClaudeCodeの初期設定や使い方を解説）。
CLAUDE.mdはClaude Codeへの「プロジェクト説明書」です。このファイルにプロジェクトの目的・使用技術・ディレクトリ構成を記載しておくと、Claude Codeがセッションをまたいでコンテキストを保持します。記載がない状態では、毎回同じ背景情報を説明し直す必要が生じます。
requirements/requests.mdに仕様を記載する
CLAUDE.mdの作成後、requirements/requests.mdファイルを作成し、プロジェクトの要望・仕様・デザインの意図を記載します。
requirements/requests.mdにやりたいことを入力し、/initでCLAUDE.mdを作成して仕様を策定、Planモードで確認してDevモードで実行、という流れを実践したWebデザイナーの報告があります（ClaudeCodeの初期設定や使い方を解説）。
音声入力ツールを使って話しながら書き起こすと、文章として入力するより速く仕様を書き出せます。「きれいな文章で書かなければ」という意識は不要で、箇条書きや思考の断片でも問題ありません。Claude Codeが文脈を補完して解釈します。
Figmaを活用してポートフォリオをまとめる方法を事前に習得しておくと、Claude Codeとの連携がよりスムーズになります。
MCPサーバーでFigmaのデータを直接参照する
MCP（Model Context Protocol）サーバーを追加すると、Claude CodeがFigmaのコンポーネント情報・カラートークン・スタイルガイドを直接参照できるようになります。
MCPサーバーの追加はClaude Codeの起動中に/add-serverコマンドまたは設定ファイルへの記載で行います。Figma向けのMCPサーバーはAnthropicの公式ドキュメントで公開されているものを使用してください。MCP連携なしでもClaude CodeはFigmaのスクリーンショットやエクスポートファイルから情報を読み取れますが、MCP連携があると精度が向上します。
CHECK
▶ 今すぐやること: プロジェクトフォルダを1つ決め、そのディレクトリでターミナルを開いてclaudeコマンドを起動し/initを実行する（15分）
Q: Node.jsやPythonのインストールは必須ですか？
A： プロジェクトの実装内容によります。HTMLとCSSのみの静的サイトであれば追加のランタイムは不要です。JavaScriptフレームワーク（React・Vue等）を使う場合はNode.jsが必要になります。Claude Code自体が「このプロジェクトに必要な環境」を起動後に確認・提案するため、最初は何もインストールせずに起動してみることをおすすめします。
Q： CLAUDE.mdに何を書けばいいか分かりません
A: 「プロジェクト名・目的・使用する技術スタック・デザインファイルの場所」の4項目を記載してください。/init後にClaude Codeがテンプレートを自動生成するため、そのテンプレートに沿って埋めていくだけで完成します。後から追記していく運用で問題ありません。
Claude Designから実装まで4段階で完結
Claude DesignとClaude Codeの連携ワークフローを4段階に整理すると、デザインと実装の間にあるギャップを縮める全体像が明確になります。
第1段階: Claude Designでプロトタイプを作成する
Claude DesignはClaudeアプリ上でプロジェクトを作成し、「コンテンツとゴール」「参照するブランドやコンテンツ」「コネクタ（Figmaデータ等）」を追加してプロンプトを入力するだけでプロトタイプを生成します（Claude Designを始める）。
この段階でレスポンシブ対応の要件を明示的に指定してください。「モバイル・タブレット・デスクトップの3ブレークポイントでデザインしてください」と最初に指定しないと、デスクトップのみのデザインが生成され、実装段階でレスポンシブ対応を追加する手戻りが発生します。方向性が不確かな場合は「2〜3パターンのバリエーションを出してください」と指定すると比較検討が可能になります。
第2段階: ハンドオフバンドルをClaude Codeに渡す
プロトタイプが完成したら、Claude Designの「Claude Code」ボタンを押します。このボタンを押すと、Claude Designがデザイン情報を解析し、Claude Codeへの指示プロンプトを自動生成します（Claude Design完全解説）。
自動生成されたプロンプトには、カラーコード・フォント・レイアウト構造・インタラクション要件が含まれています。このプロンプトをClaude Codeのターミナルに貼り付けて実行するだけで、Claude Codeがデザインの意図を解釈してコード生成を開始します。デザイナー側の追加作業はプロンプトのコピー&ペーストのみです。
第3段階: PlanモードとDevモードを使い分ける
Claude Codeにはコードを書く前に仕様を確認する「Planモード」と、実際にコードを生成・実行する「Devモード」があります。
まずPlanモードで「この実装で何を行うか」をClaude Codeに確認させてください。生成された仕様に不足がある場合はこの段階でrequests.mdに追記して再確認します。仕様が確定したらDevモードに切り替えて「計画に従って実装してください」と指示します。PlanモードをスキップしていきなりDevモードで実行すると、後から「意図していた動作と違う」という修正コストが増大します。
第4段階: FigmaのDevモードで微調整する
Claude Codeが生成したHTMLファイルをブラウザで確認し、デザインとのズレがある場合はFigmaのDevモードで対象のオブジェクトを選択して修正指示を出します。
過去のリファレンスを基にClaude Codeが要件定義書の叩きを自動生成し、UI/UX要件を対話しながら詰め、役割境界が融解したという経験を持つデザイナーの報告があります（Claude Codeでデザインのワークフローを変えたら）。
この段階でコードを直接編集する必要はありません。「このボタンのホバー状態を追加してください」「ヘッダーの高さをFigmaと合わせてください」という自然言語の指示でClaude Codeが対応します。コードの知識がゼロでも実装の微調整が可能です。
Claude Code WebデザインのためのUI実現手順では、CLAUDE.mdでのデザインシステム設計からプロ級UIを作るまでの具体的な流れを解説しています。
CHECK
▶ 今すぐやること: Claude Designで既存プロジェクトのプロトタイプを1つ作成し、「Claude Code」ボタンを押してプロンプトが生成されるか確認する（20分）
Q: Claude Designなしでもこのワークフローは使えますか？
A： 使えます。Claude Designを使わない場合は、FigmaのスクリーンショットをClaude Codeに共有し、「このデザインをHTMLで実装してください」と指示する方法で代替できます。ただしハンドオフバンドルを使う方法と比べると、カラーコードやフォント情報の伝達精度が下がるため、手動での補足指示が増えます。
Q： 生成されたコードの品質は実務レベルですか？
A： 静的なLPや紹介ページであれば実務レベルに近いコードが生成されます。一方でアカウント認証・データベース連携・外部APIとの接続が必要な場合は、エンジニアの確認を経た上での使用をおすすめします。
Claude Code活用パターンを3分で診断
以下の3問で最適な活用スタートポイントを確認してください。
Q1: Figmaで完成したデザインデータがありますか？
Yesの場合はQ2へ進んでください。Noの場合はQ2をスキップしてQ3へ進んでください。
Q2: 作成するアウトプットは静的なHTML/CSSですか？（LP・ポートフォリオ等）
Yesの場合はResult Aです。Noの場合はResult Bです。
Q3: デザインはまだ構想段階で、まず仕様を言語化したいですか？
Yesの場合はResult Cです。Noの場合はResult Dです。
Result A: Figma→Claude Designのハンドオフワークフローを今すぐ開始できます
既存のFigmaデータとClaude Designの連携設定が最優先です。「Claude Codeの初期設定は30分で完了」のセクションに戻り、Figma連携設定から着手してください。最初のアウトプットまで最短1日以内に到達できます。
Result B: MCP連携でFigmaデータを精度高く参照する設定が必要です
動的なインタラクションやフレームワーク（React等）を使う場合は、MCPサーバーの追加とNode.js環境の準備が先決です。「Claude Codeはデザイナー実務で5つの仕組みで解決」のハック3（環境構築）から読み進めてください。
Result C: requests.mdに音声入力する方法が効率的です
まずclaudeコマンドでClaude Codeを起動し、/initを実行してrequirements/requests.mdを作成してください。頭の中にある構想を音声で書き起こすことで、Claude Codeが要件定義書の叩きを自動生成します。
Result D: Claude.aiで壁打ちしながらコンセプトを固めるフェーズです
Claude Codeへの移行は、デザインの方向性が「具体的なアウトプットに落とせる状態」になってからで十分です。今はClaude.aiのArtifacts機能でビジュアルイメージを作成し、方向性が固まった段階でClaude Codeに移行してください。
CursorとClaude Codeの違いと使い分けも参考にすると、自分のプロジェクトに最適なツール選択がさらに明確になります。
CHECK
▶ 今すぐやること: 診断結果のResultを確認し、該当するセクションへ直接移動する（3分）
Q: 複数のResultに当てはまる場合はどうすればいいですか？
A： 最初のYes/Noに従って進んでください。Result AとResult Bを同時に試みると初期設定が複雑になります。最初の1プロジェクトはResult Aの静的HTML/CSSから始め、慣れてきた段階でResult Bのフレームワーク対応に移行するのがおすすめです。
Q： 今のフリーランス案件にそのまま使えますか？
A： クライアント案件では生成されたコードをそのまま納品する前に、セキュリティとアクセシビリティの確認を行ってください。特にフォームやお問い合わせ機能が含まれる場合は、エンジニアのレビューを経ることをおすすめします。
Claude Codeはデザイナー実務で5つの仕組みで解決
このセクションでは「どうやれば失敗しないか」という実務の肝に絞って解説します。
ハック1: 要件定義書の自動生成で初期コストを削減
【対象】: 案件開始時に要件定義書を作るのに時間がかかっているデザイナー
【手順】:
ステップ1. 過去の類似案件資料・クライアントとのやり取りのメモ・参考URLをまとめてrequests.mdに貼り付ける（5分）。
ステップ2. Planモードで「これを基に要件定義書の初稿を作成してください」と指示し、Claude Codeに叩きを生成させる（10分）。
ステップ3. 生成された要件定義書をクライアントと確認し、不足項目をrequests.mdに追記して再生成する（15分）。
【コツと理由】: 「素材を投げてAIに初稿を作らせ、自分は編集に専念する」方が完成品の品質が高くなります。Claude Codeは提供された素材から構造化された初稿を生成するため、クライアントとの認識齟齬を要件定義フェーズで解消しやすくなります。
【注意点】: クライアントの個人情報や機密情報をrequests.mdに含めないでください。Claude Codeに渡す素材は、公開しても問題ない要件・仕様情報に限定してください。
ハック2: コアレイアウトから層状に追加して手戻りを減らす
【対象】: 一度に完成形を求めて何度もやり直しが発生しているデザイナー
【手順】:
ステップ1. 「HTMLのコアレイアウト（ヘッダー・メインコンテンツ・フッターの骨格のみ）を作成してください」と指示して土台を生成する（10分）。
ステップ2. 土台が確認できたら「タイポグラフィとカラーシステムを追加してください」と指示して第2層を追加する（5分）。
ステップ3. 「ホバー・スクロールアニメーション等のインタラクションを追加してください」と指示して第3層を追加し、確認する（10分）。
【コツと理由】: 「コア→スタイル→インタラクション」と層状に追加するアプローチを取ることで、各層で確認と修正ができます。完成形を一度に求めると、後から修正したい箇所がどのレイヤーにあるか分からなくなり、Claude Codeへの指示が曖昧になります。層状アプローチでは確認ポイントが明確なため、修正指示の精度が上がります。
【注意点】: インタラクションは最後の層に追加してください。コアレイアウトが確定する前にアニメーションを追加すると、構造変更のたびにアニメーションのリセットが必要になります。
ハック3: 環境構築はClaude Codeに確認しながら進める
【対象】: Node.js・Pythonなどの環境構築で詰まって先に進めないデザイナー
【手順】:
ステップ1. Claude Codeを起動して「このプロジェクトで必要な環境を構築したいです。macOS（またはWindows）を使っています。何をインストールすればいいか教えてください」と入力する（1分）。
ステップ2. Claude Codeが提示したインストールコマンドをターミナルで順番に実行する（3分）。
ステップ3. 「環境の確認をしてください」と指示し、正常に動作しているか確認する（1分）。
【コツと理由】: 「Claude Code自体に環境構築を手伝わせる」方が迷いにくくなります。Claude Codeはユーザーの環境（OS・バージョン・既存のインストール状況）を対話で確認しながら手順を提示します。公式ドキュメントは汎用的に書かれているため自分の環境に当てはめる解釈コストがかかりますが、Claude Codeへの質問なら不要です。
【注意点】: Claude Codeが提示したコマンドを実行する前に、sudo（管理者権限）コマンドが含まれているか確認してください。不明なコマンドはClaude Codeに「このコマンドは何をしますか？」と聞いてから実行してください。
ハック4: 音声入力で仕様書作成を短縮する
【対象】: requests.mdの仕様書作成に時間がかかり、着手を後回しにしているデザイナー
【手順】:
ステップ1. スマートフォンまたはPC上で音声入力ツール（OSの標準音声入力機能等）を起動し、「このプロジェクトでやりたいこと」を話しながらrequests.mdに書き起こす（5分）。
ステップ2. 音声認識されたテキストをそのままrequests.mdに保存し、整形せずにClaude Codeに渡す（1分）。
ステップ3. Claude Codeに「この内容から実装仕様書を作成してください」と指示し、構造化された仕様書を生成させる（4分）。
【コツと理由】: 「思考の断片を音声で書き起こしてそのまま渡す」方が効果的です。Claude Codeはテキストの文体や構造ではなく意味・意図を解釈するため、口語・箇条書き・思考の断片でも問題ありません。きれいに書こうとすることで「書くのに疲れて仕様書が中途半端になる」という問題を回避できます。
【注意点】: 音声入力特有の誤変換（固有名詞・英語混じりの技術用語）はrequests.mdに渡す前に軽く確認してください。プロジェクト名・クライアント名・技術名の誤変換はClaude Codeが意図を誤解する原因になります。
ハック5: PlanモードとDevモードの切り替えで確認コストを下げる
【対象】: Claude Codeに指示したら意図と違うコードが生成され、修正に時間がかかっているデザイナー
【手順】:
ステップ1. 新しいタスクはかならずPlanモードで始め、「以下の実装をどのように進めるか計画を立ててください」と指示する（5分）。
ステップ2. 生成された計画を確認し、意図と異なる点があれば「〇〇の部分は△△に変更してください」と修正指示を出す（5分）。
ステップ3. 計画が確定したらDevモードに切り替えて「計画に従って実装してください」と指示し、コードを生成させる（10分）。
【コツと理由】: 「全タスクをPlanモードから開始する」ことで、いきなりDevモードで実行したときに生じる「意図と違う実装の修正」にかかる時間を削減できます。PlanモードはDevモードと比べてトークン消費が少なく、コスト面でも有利です（Claude Code公式ドキュメント）。
【注意点】: Planモードで確認中に「少しだけ試してみたい」という理由でDevモードを使うのは避けてください。確認用コードと本番コードが混在してプロジェクトが複雑になります。
ChatGPTとClaudeの使い分け方を理解しておくと、各ツールの強みを活かしたワークフロー設計がしやすくなります。
CHECK
▶ 今すぐやること: ハック1の手順に従い、過去の案件資料1件をrequests.mdに貼り付けてPlanモードで要件定義書の初稿を生成する（30分）
Q: 5つのハックを一度に全部試す必要がありますか？
A： 不要です。まずハック1（要件定義書の自動生成）とハック5（PlanモードとDevモードの切り替え）の2つから始めてください。この2つで日常業務の効率化効果を実感できてから、ハック2〜4を追加していく順序がおすすめです。
Q： 生成されたコードをそのまま使っていいですか？
A： 静的HTMLであれば問題ありません。JavaScriptが含まれる場合は、生成されたコードにエラーがないかブラウザの開発者ツールで確認してから使用してください。Claude Code自体に「このコードをレビューしてください」と依頼すると、潜在的な問題を指摘してもらえます。
Claude Codeはデザインと実装を1日で完結させる
フリーランスデザイナーにとってClaude Codeは「外注していた実装を自分の手に取り戻すツール」です。Claude DesignのハンドオフバンドルをClaude Codeに渡すワークフローが確立できれば、デザイン確定から静的HTMLの納品までを1日で完結できます。初期設定はFigma連携込みで30分、/initでCLAUDE.mdを作成してrequests.mdに仕様を記載するだけで、翌日から実務投入できます。
Claude Codeの活用は「完璧に使いこなしてから始める」ものではありません。まずclaudeコマンドを起動して/initを実行するだけで、今日から少しずつ実務に取り込めます。デザイナーとしての強みはそのままに、実装という新しい手段が増えることで、フリーランスとしての提案幅が広がります。
| 状況 | 次の一歩 | 所要時間 |
| まず試してみたい | claudeコマンドを起動し/initを実行してCLAUDE.mdを作成 | 15分 |
| Figma連携を設定したい | ClaudeアプリのConnectors→Figmaを有効化 | 10分 |
| 既存案件に使いたい | 過去の案件資料をrequests.mdに貼り付けて要件定義書を生成 | 30分 |
| デザインから実装まで試したい | Claude Designでプロトタイプ作成→「Claude Code」ボタンを押す | 1時間 |
フリーランスデザイナーとしてポートフォリオサイトを作成して案件獲得力を高める方法と組み合わせることで、実装対応できるデザイナーとしての市場価値をさらに高められます。
Claude Codeデザイナー活用に関するよくある質問
Q: Claude CodeとGitHub Copilotはどう違いますか？
A： GitHub CopilotはVSCode等のエディタ内でコードを補完するツールです。Claude CodeはCLIから動作し、ファイル生成・プロジェクト構造の作成・複数ファイルの一括操作が可能です。デザイナーがゼロからプロジェクトを立ち上げる用途ではClaude Codeが適しています。
Q： Claude Codeに作らせたHTMLをFigmaに戻せますか？
A： 標準的な方法では直接インポートできません。ブラウザでHTMLをプレビューしたスクリーンショットをFigmaに貼り付けて参照する方法が実務では一般的です。コードからFigmaへの逆変換ツール（Anima等）を使う方法もありますが、精度は参考程度に留めることをおすすめします。
Q： 英語が分からなくてもClaude Codeを使えますか？
A： 完全に日本語で使用できます。プロンプト・CLAUDE.md・requests.mdすべて日本語での記載に対応しています。生成されるコードのコメントは英語になる場合がありますが、「コメントは日本語で書いてください」と指示すれば日本語コメントに変更できます。
【出典・参照元】
Claude Designを始める – Anthropicヘルプセンター
Claude Designとは？できること・機能・使い方・料金 – 日本AI
ClaudeCodeの初期設定や使い方を解説（デザイナー向け）
Claude Codeでデザインのワークフローを変えたら、役割の境界が融けていった話 – Goodpatch