---
title: Claude Code×Stitchでワイヤーフレーム・UIデザインを自動生成
description: Stitchは、テキスト指示だけでワイヤーフレームやUIデザインを生成するAIツールです。Claude Codeと組み合わせ、要件記述から実装・反復修正までを一連の流れで進める方法、プロンプトの5要素、Figma連携との使い分け、向かないケースと仕組み化の進め方を解説します。
image: https://start-link.jp/hubfs/blog-kv-images/stitch-design-ja.png
---

[![StartLink](https://start-link.jp/hs-fs/hubfs/logo/%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png?width=130&height=39&name=%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png "StartLink")](https://start-link.jp)

- [会社情報About](https://start-link.jp/about)
- [サービスService](https://start-link.jp/service)
- [プロダクトProducts](https://start-link.jp/sync)
- [YoutubeYoutube](https://start-link.jp/about/sns)
- [ブログBlog](https://start-link.jp/hubspot-ai)
- [業界別ガイドIndustry guides](https://start-link.jp/case)
- [採用情報Recruit](https://start-link.jp/recruit)

[資料DL](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)

[会社情報](https://start-link.jp/about) [サービス](https://start-link.jp/service) [プロダクト](https://start-link.jp/sync) [Youtube](https://start-link.jp/about/sns) [ブログ](https://start-link.jp/hubspot-ai) [業界別ガイド](https://start-link.jp/case) [採用情報](https://start-link.jp/recruit)

[資料ダウンロード](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)

- [トップ](https://start-link.jp)
- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [Youtube](https://start-link.jp/about/sns)
- [ブログ](https://start-link.jp/hubspot-ai)
- [Contact](https://start-link.jp/contact)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)

[ホーム](https://start-link.jp) › [ブログ](https://start-link.jp/hubspot-ai) ›[AI活用](https://start-link.jp/hubspot-ai/ai) ›[Claude Code実践](https://start-link.jp/hubspot-ai/ai/claude-code-practice) ›Claude Code×Stitchでワイヤーフレーム・UIデザインを自動生成

# Claude Code×Stitchでワイヤーフレーム・UIデザインを自動生成

- 2026年3月25日
- 最終更新: 2026年10月12日

![Claude Code × StitchのUIデザイン自動生成インターフェース](https://start-link.jp/hubfs/blog-kv-images/stitch-design-ja.png)

この記事の結論

Stitchは、テキスト指示だけでワイヤーフレームやUIデザインを自動生成するAIツールです。Claude Codeと組み合わせれば、デザインから実装までを一気通貫で進められます。

ブログ目次

もっと見る ▼

**Stitchは、テキスト指示だけでワイヤーフレームやUIデザインを自動生成するAIツールです。Claude Codeと組み合わせれば、デザインから実装までを一気通貫で進められます。**

本記事は2026年8月時点の情報です。

「デザイナーが採用できるまで、UIの叩き台すら作れない」「エンジニアだけでプロトタイプを形にしたいが、Figmaを触れるメンバーがいない」「仕様書を何度も直しているうちに、肝心の実装が後ろ倒しになっている」——こうした声は、デザイナーが常駐していない開発チームやスタートアップの現場でよく聞かれます。

Stitchとは、自然言語の指示だけでUIコンポーネントやページレイアウトを生成するAIツールのことです。Claude Codeと連携させることで、「要件定義→ワイヤーフレーム生成→コード実装→反復修正」までをAI主導で進められます。デザイナーがいない少数精鋭チームにとって、有力な選択肢になり得ます。

本記事は「[Claude Code実践ガイド｜AI開発の生産性を高める運用設計](https://start-link.jp/hubspot-ai/ai/claude-code-practice)」シリーズの一部です。

## この記事でわかること

デザイナーがいない開発チームや、プロトタイプ・MVPを素早く形にしたいエンジニア・起業家の方に向けて、Stitchの使い方と運用の考え方をまとめました。

- **Stitchの基本機能と仕組み** — テキスト指示からUIコンポーネントやページレイアウトを自動生成する仕組みを解説します。
- **Claude Codeと組み合わせた設計→実装フロー** — 要件定義からワイヤーフレーム生成、コード実装、反復修正までの一連の流れを紹介します。
- **効果的なプロンプトの書き方** — 質の高いUIを生成するための構成要素と、避けるべき指示のパターンを整理します。
- **Figma連携との使い分け判断基準** — デザイナーの有無やプロジェクトのフェーズに応じた選択基準を、比較表で示します。
- **導入時に押さえておきたい限界と運用の仕組み化** — Stitchが向かないケースと、属人化させずに運用に乗せる考え方を解説します。

## Stitchとは何か——テキスト指示でUIを自動生成する仕組み

Stitchは、自然言語の指示からUIコンポーネントやページレイアウトを生成するデザインツールです。「ダッシュボードページ。左サイドバーにナビゲーション、メインエリアにKPIカード4つとグラフ」のようにテキストで記述するだけで、対応するUIデザインが出力されます。従来はデザイナーが手作業で行っていた工程の一部を、AIが代替できる点が大きな特徴です。

### 「まず動くものを見せる」アプローチの価値

Stitchの価値は、デザイナーがいなくてもUIプロトタイプを形にできる点にあると考えています。テキストで要件を伝えるだけでレイアウトが生成されるため、エンジニアやビジネスサイドのメンバーだけでも「まず動くものを見せる」進め方が可能になります。

経営判断の場では、完成度の高いモックアップよりも、早い段階で触れられる叩き台がある方が議論が前に進みやすいケースも多いのではないでしょうか。仕様書を読み合わせるよりも、実際の画面に近いものを見ながら議論する方が、認識のズレに早く気づけるという利点もあります。

### 従来のデザインプロセスとの比較

従来のUI設計では、ワイヤーフレームからコード変換までの各工程で担当者が手作業を重ねていました。Stitchを使うと、そのうち「形にする」工程をテキスト指示で置き換えられます。

| 工程 | 従来 | Stitch活用 |
| --- | --- | --- |
| ワイヤーフレーム作成 | デザイナーがFigmaで手作業 | テキスト指示で自動生成 |
| UIモックアップ | デザイナーがコンポーネントを配置 | Stitchが構成を提案 |
| デザインレビュー | 画像ベースのフィードバック | テキストで修正指示 |
| コード変換 | エンジニアが手動実装 | Claude Codeで自動生成 |

次の画像は、本記事で扱うClaude CodeとStitchによるUIデザイン生成のイメージです。

![Claude Code StitchのUIデザイン自動生成画面](https://start-link.jp/hubfs/blog-kv-images/stitch-design.png)

### StitchとClaude Codeの役割の違い

ここでいうUIは、Claude Codeで生成するアプリケーション側の画面を指しており、Claude Code自体の見た目の設定とは別物です。Claude Code自体のテーマやステータスラインの設定は[Claude Codeの見た目カスタマイズ](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-ui-customization)をご覧ください。

役割を分けて捉えると、次のようになります。

- **Stitch** ── 「画面の構成を決める」ツール
- **Claude Code** ── 「その構成を動くコードにする」ツール

Claude Codeは、ターミナル上で動作し、コードベースを理解しながらファイルの編集やコマンドの実行を行うエージェント型のコーディングツールです（出典：[Claude Code overview](https://docs.anthropic.com/en/docs/claude-code/overview)）。レイアウトの検討はStitch、実装と修正はClaude Codeと役割を分けておくと、どちらの出力を直せばよいかで迷いにくくなります。

## なぜデザイナー不在でもUI設計が回るのか——ビジネス背景

デザイナー不在でもUI設計を前に進められる理由は、ツールの性能だけではなく、意思決定の進め方そのものが変わる点にあります。重要なのは、Stitchを万能な代替ツールとして扱うのではなく、自社の状況に応じて使いどころを見極めることです。ここでは、叩き台優先の考え方、文書中心の進め方からの脱却、自社に合わせた設計の3つの観点で整理します。

### 意思決定のスピードを上げる「叩き台優先」の考え方

要件を言葉にして、AIにレイアウトへ変換させ、関係者に見せて反応をもらう——このサイクルを高速で回せることが、Stitch活用の一番の利点です。完璧な仕様書を作り込んでから着手するよりも、粗くても形のあるものを早く見せる方が、経営層や現場からのフィードバックを集めやすくなります。

フィードバックを受けて修正する回数が増えても、1回あたりの往復にかかる時間そのものが短くなるため、トータルの意思決定スピードは上がりやすいと考えられます。叩き台の段階では「構成が要件に合っているか」だけを議論の対象にし、色や細部の装飾は後工程に回すと、会議の論点がぶれにくくなります。

### ExcelやWordの仕様書中心の進め方から抜け出す

UI要件をExcelやWordの仕様書に書き起こし、レビューのたびに文書を往復させるという進め方は、今も多くの現場で行われています。文章だけのやり取りでは、書き手が思い描いている画面と、読み手が想像する画面がずれやすく、認識合わせに時間がかかりがちです。

さらに、仕様書のファイルが複数のバージョンに分かれると、どれが最新の要件なのかが分からなくなり、差分の確認だけで時間が取られるケースもあります。Stitchを使えば、要件を書いた直後に画面の形で確認できるため、文書ベースのすり合わせに時間をかけるよりも早く合意形成に進めます。仕様書がまったく不要になるわけではありませんが、往復の回数を減らす手段として位置づけると使いやすくなります。

| 観点 | 仕様書中心の進め方 | Stitchで叩き台を先に作る進め方 |
| --- | --- | --- |
| 認識合わせ | 文章から各自が画面を想像する | 同じ画面を見ながら議論する |
| 修正の単位 | 文書の版を重ねる | テキスト指示で画面を更新する |
| 合意の判断材料 | 文章の解釈 | 画面の構成そのもの |

### 自社に最適な形で設計する視点

UIの正解は事業内容やユーザー層によって異なります。汎用的なテンプレートをそのまま採用するのではなく、自社の業務フローや利用シーンに合わせてプロンプトを調整することが重要です。

企業様によって最適な形は異なりますので、まずは自社の代表的な画面（社内ダッシュボードや申込みフォームなど）から試していただくことをおすすめします。慣れてきたら、顧客向け画面や複数ページへと段階的に対象を広げていくアプローチが現実的です。

## Claude Codeと連携したデザイン→実装ワークフロー

Stitch単体では、生成されるのはレイアウト情報までです。実際に動くプロダクトにするには、Claude Codeによるコード実装と組み合わせる流れを組んでおくと進めやすくなります。ここでは、要件記述からコード実装、反復修正までの一連の流れを4ステップで整理します。個々の機能単体で語るのではなく、一連の流れとして捉えることがポイントです。

| ステップ | 担当 | 次へ進む目安 |
| --- | --- | --- |
| Step1 要件記述 | 人（Claude Codeで整理） | エリアごとの構成要素が書き出せている |
| Step2 UI構造生成 | Stitch | 関係者が構成に合意している |
| Step3 コード実装 | Claude Code | 画面が技術スタック上で表示できる |
| Step4 反復修正 | 人の判断＋AIの修正 | 意図どおりの画面になっている |

### Step1: 要件をテキストで記述

まず、作りたい画面の要件をClaude Codeに伝えます。この段階でエリアごとの構成要素まで書き出しておくと、後工程での手戻りを減らせます。要件の整理と設計はOpus、実装はSonnetに任せる[/model opusplanのハイブリッド運用](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-opusplan-hybrid)を併用すると、品質とコストのバランスを取りやすくなります。

指示の例は次のとおりです。

> 営業ダッシュボードのワイヤーフレームを作成してほしい。
> 
> - ヘッダー: 会社ロゴ、ユーザーアバター、通知アイコン
> - サイドバー: ダッシュボード、取引、コンタクト、レポートのナビ
> - メインエリア上部: 月次売上、新規商談数、受注率、平均取引額のKPIカード
> - メインエリア下部: パイプラインファネルチャートと月次推移グラフを横並び

### Step2: StitchでUI構造を生成

Stitchがテキスト指示をもとにUI構造を生成します。出力は、コンポーネントの配置・サイズ・間隔を含むレイアウト情報であり、実際に画面上で操作できるコードそのものではありません。

この段階ではデザインの完成度よりも、全体の構成が要件と合っているかを見ることがポイントになります。関係者に共有して「イメージと違う」「ここは要らない」といった反応をこの時点で集めておくと、後工程での手戻りを抑えやすくなります。構成に対する指摘が出尽くし、残っている意見が色や余白などの細部だけになったら、Step3へ進む目安です。

### Step3: Claude Codeでコード実装

生成されたUI構造をもとに、Claude Codeがプロジェクトの技術スタック（React + Tailwind CSS等）に合わせたコンポーネントコードを生成します。既存のコンポーネントを再利用するよう指示に含めると、画面ごとに似た部品が乱立するのを防げます。

> 指示例: `claude "Stitchで生成したダッシュボードレイアウトをReact + Tailwind CSSで実装して。既存のKPICardコンポーネント（src/components/KPICard.tsx）を再利用して。"`

コンポーネントを大量に生成する場面では、都度の承認を省ける[Claude Codeのautoモード](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-auto-mode)を設定しておくと作業が止まりません。

### Step4: 反復的な修正

生成されたUIに対してテキストで修正指示を出し、デザインとコードを同時に更新します。AIが出した修正案をそのまま反映するのではなく、意図どおりになっているかを人が見てから次の指示に進む流れにすると、手戻りが少なくなります。

> 修正指示の例: KPIカードの配置を2×2グリッドから4列横並びに変更。グラフエリアの高さをもう少し大きく。

複数のデザイン案を並行して試す場合は、[Git Worktreeによるブランチ分離](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-git-worktree)で案ごとに作業ディレクトリを分けると比較がしやすくなります。

## 効果的なプロンプトの書き方

Stitchで質の高いUIを生成できるかどうかは、プロンプトの書き方に大きく左右されます。曖昧な指示では期待どおりのレイアウトが返ってこないため、伝える情報の粒度を意識することが重要です。ここでは、含めるべき要素、避けたいパターン、改善前後の比較を順に整理します。

### 良いプロンプトの構成要素

プロンプトには、次の5つの要素を含めておくと出力の精度が安定しやすくなります。

| 要素 | 例 |
| --- | --- |
| ページの目的 | 「営業マネージャーが日次で確認するダッシュボード」 |
| レイアウト構成 | 「ヘッダー + サイドバー + メインエリア（2カラム）」 |
| 各エリアの内容 | 「メイン上部にKPIカード4つ、下部にグラフ2つ」 |
| デザインの参考 | 「HubSpotのダッシュボードに近いスタイル」 |
| 技術的制約 | 「Tailwind CSSのユーティリティクラスで実装可能な範囲」 |

特に「ページの目的」は見落とされやすい要素です。誰がどの頻度で見る画面なのかが伝わると、情報の優先順位がレイアウトに反映されやすくなります。

### 避けるべきプロンプトの特徴

抽象的な指示は、Stitchにとって解釈の幅が広すぎるため、期待した構成が返ってこない原因になります。

- 抽象的すぎる指示: 「かっこいいダッシュボードを作って」——目的やレイアウトが伝わらず、AIが独自解釈で構成を決めてしまいます
- デザイン用語なしの指示: 「いい感じにして」——修正の方向性が定まらず、何度もやり取りが発生しがちです
- 一度に多すぎる要求: 10ページ分をまとめて指示——各ページの要件が薄まり、確認の負荷も一気に増えます

一度に指示する範囲は1画面を基本にし、その画面の構成が固まってから次の画面に進むと、確認の負荷を抑えられます。

### Before/Afterで見るプロンプトの違い

同じ「営業ダッシュボードが欲しい」という要望でも、伝え方によって出力の精度は変わります。

| Before（避けたい指示） | After（改善した指示） |
| --- | --- |
| かっこいいダッシュボードを作って | 営業マネージャーが日次で確認するダッシュボード。ヘッダーにロゴ・アバター・通知アイコン、サイドバーにダッシュボード/取引/コンタクト/レポートのナビ |
| いい感じにして | メインエリア上部にKPIカード4つ、下部にパイプラインファネルと月次推移グラフを横並びで配置 |

Afterの指示は、先ほどの5要素のうち「目的」「レイアウト構成」「各エリアの内容」を具体化したものです。修正指示でも同じように「どのエリアを」「どう変えるか」を書くと、やり取りの回数を減らせます。

## Figma連携との使い分け

[Figma連携](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-figma-design)とStitchは、異なるシーンで力を発揮するツールです。どちらか一方を選ぶのではなく、プロジェクトのフェーズに応じて組み合わせる発想が実務では有効だと考えています。ここでは判断基準、組み合わせ方、役割分担の3点を整理します。

### 判断基準

どちらを使うかは、デザイナーの有無と、求める仕上がりの精度で分かれます。

| 判断基準 | Figma連携 | Stitch |
| --- | --- | --- |
| デザイナーの有無 | デザイナーがFigmaで作成済み | デザイナーなし・エンジニア主導 |
| デザインの精度 | ピクセルパーフェクトな実装 | ラピッドプロトタイピング |
| ワークフロー | デザイン完成後にコード変換 | デザインとコードを同時に生成 |
| 適したフェーズ | 本番UI実装 | MVP・PoC・社内ツール |

判断に迷う場合は、「その画面を顧客が見るか」「ブランドガイドラインに沿う必要があるか」の2点を見てください。どちらかに該当すればFigma連携を軸に、どちらにも該当しなければStitchを軸に考えると整理しやすくなります。

### 組み合わせパターン

1. **Stitchでワイヤーフレーム作成** → デザイナーがFigmaでリファイン → **Figma MCPでコード変換**
2. **Stitchで社内ツールのUIを直接生成** → Claude Codeで実装（デザイナー不要）

パターン1で使うFigma MCPは、Claude Codeが外部ツールとつながる仕組みを利用したものです。Claude Codeは、MCP（Model Context Protocol）を通じて外部のツールやデータソースに接続できます（出典：[Connect Claude Code to tools via MCP](https://docs.anthropic.com/en/docs/claude-code/mcp)）。

いずれのパターンでも、最初にStitchで叩き台を作ってから人が判断する順序は共通しています。デザイナーが途中から加わるプロジェクトでも、この順序を崩さない方が手戻りは少なくなります。

### デザイナーとエンジニアの役割分担を明確にする

Stitchを導入するときにありがちな誤解は、「デザイナーの仕事を丸ごと代替するツール」という捉え方です。実際には、Stitchが担うのは叩き台づくりまでで、ブランドの一貫性や細部の使い勝手を判断するのはデザイナーの役割として残ります。

| AIに任せる領域 | 人が判断する領域 |
| --- | --- |
| 要件テキストからのレイアウト生成 | 画面の目的と優先順位の決定 |
| コンポーネントコードの生成 | ブランドの一貫性の判断 |
| テキスト指示に基づく修正 | 細部の使い勝手の評価 |
| 複数案の並行作成 | どの案を採用するかの意思決定 |

この役割分担をチームで明文化しておくと、Figma連携との併用もスムーズになり、デザイナーが後から参加する場合の橋渡しもしやすくなります。

## HubSpotのデータ可視化を中心とした実務での活用パターン

Stitchは特定の業種や用途に限定されるツールではありません。ここでは、実務で活用しやすい3つの場面を紹介します。いずれも、まずは小さく試して手応えを見てから対象を広げる進め方が向いています。

### パターン1: 社内CRMダッシュボードのプロトタイプ

HubSpotのデータを表示するカスタムダッシュボードを、Stitchでデザインし、Claude Codeで実装します。経営データの可視化において、「こんな画面が欲しい」をテキストで伝えるだけでプロトタイプが完成します。

CRMダッシュボードのように経営データを可視化する画面は、要件を一言で伝えるだけでは仕上がりのイメージが揃いにくい領域です。ここでStitchのような叩き台生成の仕組みを挟むと、「一元管理・自動化・可視化」というHubSpot活用の柱のうち、可視化の検討にかかる初期段階を短縮しやすくなります。

画面を設計するときは、その画面がコンタクト→取引→顧客→請求という全体の流れのどこを見るためのものかを先に決めておくと、載せる指標がぶれません。例えば次のように、流れの中の位置で画面の目的を分けて考えます。

- **営業マネージャー向け** ── 取引のパイプラインと受注率
- **経営層向け** ── 顧客化と売上の推移

HubSpotのコンタクト・取引データを可視化する画面を内製で試作したい場合に適した使い方で、社内向けの限定公開画面から始めればリスクを抑えて試せます。経営層に見せる前に、社内の関係者だけで先行して触ってみることで、本番導入前に使い勝手の課題を洗い出せます。

### パターン2: ランディングページの初期デザイン

コンテンツマーケティングで使うLPの構成を、Stitchでワイヤーフレーム化します。ヒーローセクション、特徴紹介、CTA配置といったLP構成をテキストで定義し、即座にビジュアル化できます。

ただし、この段階の出力はあくまで構成案です。構成案の段階では「情報の並び順」と「CTAの位置」だけを決め、配色やタイポグラフィは公開用デザインを仕上げる工程で詰める、と分けて進めると判断がしやすくなります。構成案の段階で複数のパターンをチームに見せておくと、公開前の合意形成がスムーズになります。

### パターン3: モバイルアプリのUI設計

スマートフォン向けのUI（ボトムナビ、カード型リスト、詳細画面）を、画面サイズの制約とともにテキストで指定し、レスポンシブなコンポーネントを生成します。

画面数が多いアプリほど、最初にプロンプトの型を決めておくことで、画面ごとの表現のばらつきを抑えやすくなります。例えば「ボトムナビの項目」「1画面あたりのカードの要素」を共通の書き方で固定し、画面ごとに変えるのは中身の部分だけにする、という進め方です。

## 導入で注意したい限界と向かないケース

Stitchは便利なツールですが、どんな場面にも適しているわけではありません。導入前に、向かないケースを正直に把握しておくことが失敗を防ぐポイントになります。ここでは、向かないケース、向いているケース、品質を保つためのレビュー体制を整理します。

### こんなケースでは向いていない

ブランドガイドラインに厳密に沿う必要がある顧客向けプロダクトや、ピクセルパーフェクトな仕上がりが求められるLPには、Stitchの出力だけでは不十分な場合があります。複雑なインタラクションやアニメーションを伴う画面設計も、テキスト指示だけでは意図が伝わりにくく、人による調整が入りやすい領域です。

### 向いているケースに共通する条件

逆に、Stitchが力を発揮しやすいのは、機能性や情報の見やすさが評価軸になる画面です。社内向けの管理画面やダッシュボード、MVPのように「まず動く形にして反応を見る」ことが目的の画面では、ブランドの厳密さよりも構成のわかりやすさが優先されるため、生成結果をそのまま実装に近い形で使えるケースも多くあります。

| 画面の条件 | Stitchの出力の扱い方 |
| --- | --- |
| 社内向け・機能性重視 | そのまま実装に近い形で使う |
| 顧客向け・構成検討段階 | 叩き台として使い、デザイナーがリファインする |
| ブランド厳守・細かな動きが多い | Figmaでのデザインを起点にする |

### 品質を担保するためのレビュー体制

Stitchが得意なのは、要件をレイアウトの形に素早く変換することです。一方で、ブランドの一貫性や細部の使い勝手の判断は、人が担うべき領域として残ります。AIに叩き台を作らせ、デザイナーやプロダクトオーナーが見直してリファインするという役割分担を明確にしておくと、品質のばらつきを抑えやすくなります。

レビューの観点は、「画面の目的に対して必要な情報が揃っているか」「不要な要素が載っていないか」「既存画面と操作の作法が揃っているか」の3点に絞っておくと、誰が見ても同じ基準で判断できます。この役割分担は、担当者が変わっても同じ手順で見直せるという意味で、属人化を防ぐ仕組みとしても機能します。

## 仕組み化して運用に乗せる——スモールスタートの進め方

Stitchを一時的な便利ツールで終わらせず、チームの運用に組み込むには、個人のセンスに頼らない仕組みがあると進めやすくなります。特定のメンバーがいないと使えない状態は、属人化のリスクを抱えたままになってしまいます。ここでは、テンプレート化、段階的な拡張、HubSpotの可視化施策との接続の3つを整理します。

### プロンプトのテンプレート化で属人化を防ぐ

良いプロンプトの5要素（目的・レイアウト構成・各エリアの内容・参考スタイル・技術的制約）を社内テンプレートとして共有しておくと、誰が指示を出しても一定の品質でUIを生成できるようになります。新しくチームに加わったメンバーへの引き継ぎもしやすくなり、特定の担当者の経験値に依存しない運用に近づきます。

テンプレートは、5要素を見出しにした空欄のフォーマットとして置いておき、うまくいった指示を実例として追記していく形がおすすめです。実例が増えるほど、新人でも過去の指示を参考に同じ水準のプロンプトを書けるようになります。

### 段階的な拡張ロードマップ

いきなり全社のUI設計をStitchに置き換えるのではなく、影響範囲の小さいところから対象を広げていく進め方をおすすめします。

| 段階 | 対象 | ねらい | 次の段階へ進む目安 |
| --- | --- | --- | --- |
| 第1段階 | 社内ツールの1画面（ダッシュボード等） | 使い勝手と生成品質の見極め | 叩き台から実装まで一通り回せた |
| 第2段階 | 社内向けの複数画面・MVP全体 | プロンプトテンプレートの定着 | 担当者が変わっても同じ品質で生成できる |
| 第3段階 | 顧客向け画面・LP | デザイナーによるリファインを前提に展開 | ― |

社内ダッシュボードやMVPで手応えを掴んだうえで、顧客向け画面やLPへと段階的に展開すると、リスクを抑えながら活用範囲を広げられます。

### HubSpotの経営データ可視化との接続を意識する

StitchでプロトタイプするCRMダッシュボードが、最終的にHubSpotのレポート機能と役割分担されるのか、あるいは内製ツールとして独立させるのかは、企業様によって最適な形が異なります。

判断の分かれ目は、表示したい指標がHubSpotのダッシュボード・レポートで表現できるかどうかです。

- **表現できる指標** ── HubSpot側に置きます
- **HubSpotの外にあるデータとの組み合わせや独自の画面構成が求められる部分** ── 内製ツールで補います

このように切り分けると二重管理を避けやすくなります。どちらを選ぶ場合でも、Stitchで作った叩き台を土台に、実装後の運用まで見据えて設計しておくと、後から作り直す手間を減らせます。他の可視化施策との連携を最初から意識しておくことが、経営データBIの一環として位置づける上でのポイントになります。

## よくある質問

回答の要点は次のとおりです。

- **StitchとFigmaの導入順** ── デザイナーがいればFigma連携、いない場合やMVP・PoCの段階ではStitchが適し、両者の組み合わせも有効です。
- **生成UIの品質** ── ラピッドプロトタイピングに強い一方、ピクセルパーフェクトな仕上がりやブランドガイドラインへの準拠にはデザイナーによる調整が入るケースがあります。
- **質の高いUIを生成するコツ** ── 5要素を含め、各エリアの要素を具体的に書き、一度に指示する範囲を1画面に絞ります。
- **本番環境での利用** ── 機能性を重視するUIならそのまま実装に使えるケースがあり、顧客向けではデザイナーによるリファインをおすすめします。

### Q1. StitchとFigmaはどちらを先に導入すべきですか？

チームにデザイナーがいる場合はFigma連携を先に導入し、デザイナーの成果物をClaude Codeで効率的にコード化するワークフローが適しています。デザイナーがいない場合やMVP・PoCの段階では、Stitchでテキスト指示からUIを素早く生成するアプローチが効果的です。両者は排他的ではなく、「Stitchでワイヤーフレーム→デザイナーがFigmaでリファイン→Figma MCPでコード変換」という組み合わせも有効です。

### Q2. Stitchで生成したUIの品質はどの程度ですか？

Stitchはラピッドプロトタイピングに強く、レイアウト構成やコンポーネント配置の精度は実用的なレベルです。ただし、ピクセルパーフェクトなデザインやブランドガイドラインに厳密に沿った仕上がりには、デザイナーによる調整が入るケースがあります。社内ツールやダッシュボードのように機能性を重視するUIでは、Stitchの出力をそのまま実装に使える場合も多くあります。

### Q3. Stitchで質の高いUIを生成するコツは何ですか？

プロンプトに「ページの目的」「レイアウト構成」「各エリアの具体的な内容」「参考にしたいデザインのスタイル」「技術的制約」の5要素を含めることが重要です。「かっこいいダッシュボードを作って」のような抽象的な指示ではなく、各エリアに配置する要素を具体的に記述してください。一度に指示する範囲を1画面に絞ることも、出力を安定させるうえで効果的です。

### Q4. Stitchで生成したUIをそのまま本番環境に使えますか？

社内ツールやダッシュボードなど、機能性を重視するUIであればStitchの出力をそのまま実装に使えるケースがあります。ただし、ブランドガイドラインに厳密に沿う必要がある顧客向けプロダクトや、ピクセルパーフェクトな仕上がりが求められるLPなどでは、デザイナーによるリファインを挟むことをおすすめします。

## まとめ

Stitchは、テキスト指示だけでUIコンポーネントやページレイアウトを自動生成するツールで、デザイナーがいないチームでもUIプロトタイプを素早く作成できます。「テキストで要件記述→StitchでUI構造生成→Claude Codeでコード実装→テキストで反復修正」という一連のワークフローをAI主導で進められる点が大きな強みです。使い分けは、プロジェクトのフェーズに応じて考えることが重要になります。

- **Figma連携** ── デザイナーがいる場面やピクセルパーフェクトな実装に適しています
- **Stitch** ── デザイナー不在のMVP・PoC・社内ツール開発に適しています

まずは影響範囲の小さい社内ダッシュボードの1画面など、小さな範囲でStitchを試してみることをおすすめします。具体的には、次の3ステップで進めると取り組みやすくなります。

1. 良いプロンプトの5要素をもとに要件を書き出す
2. Stitchでレイアウトを生成しチームに共有する
3. Claude Codeで実装しフィードバックをもとに反復修正する

Claude Codeの全コマンド一覧は[Claude Codeチートシート](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-cheatsheet)をご覧ください。AI活用の全体像は[AI活用完全ガイド](https://start-link.jp/hubspot-ai/ai)で解説しています。

CRMを活用した業務効率化やAIとの連携に関するご相談は、StartLinkまでお気軽にお問い合わせください。

## あわせて読みたい

- [Claude Code MCP連携の始め方｜HubSpot・freee・Slackを接続する設定手順](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-mcp-integration)
- [Claude Codeマルチエージェント開発の実践ガイド｜並列開発・タスク分割・同期設計](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-multi-agent-development)
- [Manus My Computerとは？AIがローカルPCで直接作業する新機能の全貌と活用法](https://start-link.jp/hubspot-ai/ai/ai-tools/manus-my-computer)

記事の内容を、そのまま実務に落とし込みたい方向け

HubSpotゴールドパートナーのStartLinkが、HubSpot導入・AI活用・CRM整備・業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。

[サービス概要を見る](https://start-link.jp/service/hubspot-ai) [無料で相談する](https://start-link.jp/contact)

## 次に読む

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-61_fast_mode_model_support.png) Claude Codeのfast mode（/fast）｜対応モデル・料金・使いどころの判断基準](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-fast-mode)

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-60_agent_view_session_states.png) Claude Code agent viewの使い方｜全セッションを1画面で管理](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-agent-view)

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-58_goal_evaluation_loop.png) Claude Codeの/goalコマンド｜完了条件でAIを自律実行させる方法](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-goal-command)

## あわせて読みたいAI実践ガイド

### [Setup Claude Coworkの使い方と初期設定 導入直後にやるべき設定、CLAUDE.md、スキル設計、運用の型をまとめています。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-cowork-setup-guide)

### [Team Claude Codeでチーム開発を効率化する方法 レビュー、権限管理、共有ルールまで踏み込んだ実践的なチーム利用ガイドです。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-team-development)

### [MCP Claude Code × MCP連携ガイド 社内システムとつなぎ、実業務でAIエージェントを動かす方法を整理しています。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-mcp-integration)

### [Service HubSpot × AIの支援サービス 導入設計から内製化、ワークフロー自動化までの支援内容を確認できます。](https://start-link.jp/service/hubspot-ai)

## 記事の内容を、そのまま実務に落とし込みたい方向け

[無料で相談する](https://start-link.jp/contact) [資料をダウンロード](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-stitch-design#blog-download)

 株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化（ERP/CRM/SFA/MAの導入）」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、[無料のお問い合わせページ](https://www.start-link.jp/contact)より、お気軽にご連絡くださいませ。

###### 関連キーワード:

[AI](https://start-link.jp/hubspot-ai/tag/ai)

## サービス資料を無料DL

## 著者情報

![7-1](https://start-link.jp/hubfs/7-1.jpg)

### 今枝 / Imaeda

 株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。  
 HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。

[StartLink](https://start-link.jp/)

### Service

- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [プロダクト](https://start-link.jp/sync)
- [採用情報](https://start-link.jp/recruit)
- [コンサルタントの方へ](https://start-link.jp/consultant-platform)

### Contact

- [問い合わせ](https://start-link.jp/contact)
- [資料ダウンロード](https://start-link.jp/download/service)
- [Syncナレッジベース](https://start-link.jp/sync/knowledge-base)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)

(c) 2026 All Rights Reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "今枝 拓海",
    "url" : "https://start-link.jp/hubspot-ai/author/imaeda"
  },
  "datePublished" : "2026-03-25T14:54:55.000Z",
  "headline" : "Claude Code×Stitchでワイヤーフレーム・UIデザインを自動生成",
  "image" : [ "https://start-link.jp/hubfs/blog-kv-images/stitch-design-ja.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-stitch-design",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://start-link.jp/hubfs/Start%20Link%20(1500%20x%20600%20px)%20(5)-1.png"
    },
    "name" : "株式会社StartLink"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "FAQPage",
  "mainEntity" : [ {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "チームにデザイナーがいる場合はFigma連携を先に導入し、デザイナーの成果物をClaude Codeで効率的にコード化するワークフローが適しています。デザイナーがいない場合やMVP・PoCの段階では、Stitchでテキスト指示からUIを素早く生成するアプローチが効果的です。両者は排他的ではなく、「Stitchでワイヤーフレーム→デザイナーがFigmaでリファイン→Figma MCPでコード変換」という組み合わせも有効です。"
    },
    "name" : "StitchとFigmaはどちらを先に導入すべきですか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Stitchはラピッドプロトタイピングに強く、レイアウト構成やコンポーネント配置の精度は実用的なレベルです。ただし、ピクセルパーフェクトなデザインやブランドガイドラインに厳密に沿った仕上がりには、デザイナーによる調整が入るケースがあります。社内ツールやダッシュボードのように機能性を重視するUIでは、Stitchの出力をそのまま実装に使える場合も多くあります。"
    },
    "name" : "Stitchで生成したUIの品質はどの程度ですか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "プロンプトに「ページの目的」「レイアウト構成」「各エリアの具体的な内容」「参考にしたいデザインのスタイル」「技術的制約」の5要素を含めることが重要です。「かっこいいダッシュボードを作って」のような抽象的な指示ではなく、各エリアに配置する要素を具体的に記述してください。一度に指示する範囲を1画面に絞ることも、出力を安定させるうえで効果的です。"
    },
    "name" : "Stitchで質の高いUIを生成するコツは何ですか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "社内ツールやダッシュボードなど、機能性を重視するUIであればStitchの出力をそのまま実装に使えるケースがあります。ただし、ブランドガイドラインに厳密に沿う必要がある顧客向けプロダクトや、ピクセルパーフェクトな仕上がりが求められるLPなどでは、デザイナーによるリファインを挟むことをおすすめします。"
    },
    "name" : "Stitchで生成したUIをそのまま本番環境に使えますか？"
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-stitch-design#article",
  "@type" : "BlogPosting",
  "author" : {
    "@id" : "https://start-link.jp/#founder"
  },
  "dateModified" : "2026-10-12T05:20:11+09:00",
  "datePublished" : "2026-03-25T14:54:55+09:00",
  "headline" : "Claude Code×Stitchでワイヤーフレーム・UIデザインを自動生成",
  "image" : "https://start-link.jp/hubfs/blog-kv-images/stitch-design-ja.png",
  "isPartOf" : {
    "@id" : "https://start-link.jp/#website"
  },
  "mainEntityOfPage" : {
    "@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-stitch-design",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "speakable" : {
    "@type" : "SpeakableSpecification",
    "cssSelector" : [ ".blog-section h2", ".blog-section p:first-of-type", ".blog-section blockquote" ]
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://start-link.jp",
    "name" : "ホーム",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai",
    "name" : "ブログ",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai/ai",
    "name" : "AI活用",
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice",
    "name" : "Claude Code実践",
    "position" : 4
  }, {
    "@type" : "ListItem",
    "name" : "Claude Code×Stitchでワイヤーフレーム・UIデザインを自動生成",
    "position" : 5
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#organization",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "JP",
    "addressLocality" : "中央区",
    "addressRegion" : "東京都",
    "postalCode" : "104-0061",
    "streetAddress" : "銀座1丁目12番4号 N&E BLD.6F"
  },
  "alternateName" : "StartLink Inc.",
  "award" : [ "HubSpot Gold Solutions Partner（HubSpotゴールドパートナー、2026年4月認定）" ],
  "contactPoint" : [ {
    "@type" : "ContactPoint",
    "availableLanguage" : [ "ja" ],
    "contactType" : "customer support",
    "url" : "https://start-link.jp/contact"
  }, {
    "@type" : "ContactPoint",
    "availableLanguage" : [ "ja", "en" ],
    "contactType" : "sales",
    "url" : "https://start-link.jp/contact"
  } ],
  "description" : "「AI × HubSpot」をコンセプトに掲げるHubSpotゴールドパートナー（Gold Solutions Partner、2026年4月認定）。HubSpotマーケットプレイスに自社アプリ（Sync for freee / Notion / Money Forward / Chatwork）を公開するアプリ開発企業であり、HubSpot/Salesforce知見とAI活用を組み合わせたCRM構築・移行・最適化・AIエージェント/PoC支援まで一貫して提供する。",
  "founder" : {
    "@id" : "https://start-link.jp/#founder",
    "@type" : "Person",
    "jobTitle" : "代表取締役",
    "name" : "今枝 拓海",
    "sameAs" : [ "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.facebook.com/takumiIma" ]
  },
  "foundingDate" : "2024-09-04",
  "hasCredential" : {
    "@type" : "EducationalOccupationalCredential",
    "credentialCategory" : "certification",
    "name" : "HubSpot Gold Solutions Partner",
    "recognizedBy" : {
      "@type" : "Organization",
      "name" : "HubSpot, Inc.",
      "url" : "https://www.hubspot.com/"
    }
  },
  "image" : [ "https://start-link.jp/hubfs/startlink-ai-agent.jpg", "https://start-link.jp/hubfs/startlink-aiorg.jpg" ],
  "knowsAbout" : [ "HubSpot CRM", "HubSpot Implementation", "HubSpot導入支援", "CRM構築", "AI活用", "HubSpot連携アプリ開発", "Salesforce to HubSpot Migration", "Generative AI Integration", "AI Agent Development", "Revenue Operations", "Marketing Automation", "freee Integration", "Notion Integration", "Money Forward Integration" ],
  "legalName" : "株式会社StartLink",
  "logo" : "https://start-link.jp/hubfs/startlink-logo.png",
  "mainEntityOfPage" : "https://start-link.jp/",
  "memberOf" : {
    "@type" : "ProgramMembership",
    "hostingOrganization" : {
      "@type" : "Organization",
      "name" : "HubSpot, Inc.",
      "url" : "https://www.hubspot.com/"
    },
    "membershipNumber" : "Gold Tier",
    "programName" : "HubSpot Solutions Partner Program"
  },
  "name" : "株式会社StartLink",
  "sameAs" : [ "https://www.youtube.com/@startlink-hubspot", "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.linkedin.com/company/108100307/", "https://www.facebook.com/takumiIma", "https://www.facebook.com/profile.php?id=61566874764985", "https://prtimes.jp/main/html/searchrlp/company_id/149669", "https://app.hubspot.com/ecosystem/46046172/marketplace/solutions/startlink" ],
  "taxID" : "8010001248134",
  "url" : "https://start-link.jp/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#website",
  "@type" : "WebSite",
  "inLanguage" : "ja",
  "name" : "株式会社StartLink",
  "publisher" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "url" : "https://start-link.jp/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM導入", "HubSpot" ],
  "description" : "150社以上の実績を持つHubSpotゴールドパートナーが、業務フローに合わせた設計から構築・本番稼働まで一貫支援。",
  "name" : "HubSpot導入・構築支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot導入・構築支援",
  "url" : "https://start-link.jp/service/hubspot"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot-ai",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM最適化", "AI活用" ],
  "description" : "HubSpotを軸に業務要件に沿った設計改善とAI連携活用を包括支援。",
  "name" : "HubSpot AIコンサルティング",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot AIコンサルティング",
  "url" : "https://start-link.jp/service/hubspot-ai"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot-training",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "研修", "HubSpot" ],
  "description" : "HubSpotの概念・基本操作からAI活用ノウハウまで、社内浸透のための研修を提供。",
  "name" : "HubSpot研修・レクチャー支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot研修・内製化支援",
  "url" : "https://start-link.jp/service/hubspot-ai/training"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-sf2hs-replace",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM移行", "データ移行" ],
  "description" : "Salesforce/HubSpot双方の思想とデータモデルを理解した移行設計とHubSpot側CRM開発を実行。",
  "name" : "SalesforceからHubSpotへのリプレイス支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "SalesforceからHubSpotへのリプレイス支援",
  "url" : "https://start-link.jp/service/salesforce-hubspot-replace"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-claude-code-bi",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "AI活用", "経営管理" ],
  "description" : "複数システムのデータを統合し、毎朝のAIブリーフィングなど経営の意思決定を加速する仕組みを構築。",
  "name" : "Claude Codeによる経営データ活用支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "AI経営管理支援",
  "url" : "https://start-link.jp/service/claude-code/business-intelligence"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-claude-code-content",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "コンテンツマーケティング", "AI活用" ],
  "description" : "キーワード戦略からSEO記事制作、CMS公開まで、AIを活用したコンテンツマーケティングを自動化。",
  "name" : "Claude Codeによるコンテンツマーケティング支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "AIコンテンツ制作支援",
  "url" : "https://start-link.jp/service/claude-code/content-marketing"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-freee",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとfreee会計・freee請求書をシームレスに連携。取引先の同期から請求書作成まで、バックオフィスの業務を自動化するHubSpotマーケットプレイスアプリ。",
  "featureList" : [ "freee取引先をHubSpotに自動同期", "HubSpotからfreee見積書・請求書を作成", "取引データをfreee会計に自動登録", "月次請求・更新処理に対応", "商品項目・品目・部門・タグ情報の連携" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/apps/sync-for-freee-bystartlink",
  "name" : "Sync for freee",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "請求月5件・見積月20件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "請求月50件・見積月100件まで",
    "name" : "Professional",
    "price" : "4000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "softwareHelp" : {
    "@type" : "WebPage",
    "url" : "https://start-link.jp/sync/knowledge-base/freee/basic-steps"
  },
  "url" : "https://start-link.jp/sync/freee"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-notion",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotのCRMレコードとNotionのページ・データベースを接続。HubSpotの画面から離れずにNotionのすべてにアクセスできるHubSpotマーケットプレイスアプリ。",
  "featureList" : [ "CRMカードからNotionページの作成・閲覧・編集", "NotionデータベースをCRMタブにテーブル表示", "4つのワークフローアクションで自動化", "コンタクト・会社・取引・チケット・サービス・プロジェクト対応" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-notion-bystartlink",
  "name" : "Sync for Notion",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "ページ・DB合計50件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Professional",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/notion"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-moneyforward",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとマネーフォワード クラウドを連携。取引情報から見積書・請求書を自動作成し、取引先・品目の同期や継続請求に対応するHubSpot連携アプリ。",
  "featureList" : [ "取引（Deal）から見積書・請求書を自動作成", "会社情報とマネーフォワード取引先の同期", "商品項目・品目マスタの連携", "月次・固定回数の継続請求に対応（Professionalプラン以上）", "合算請求（Enterpriseプラン限定）", "前受請求（一括請求・月次計上）（Enterpriseプラン限定）", "原価登録（MF会計への仕訳登録）で案件別の原価・粗利を可視化（Enterpriseプラン限定）", "取引レコードにCRMカードで連携ステータスを表示" ],
  "installUrl" : "https://ecosystem.hubspot.com/ja/marketplace/listing/sync-for-moneyforward-bystartlink",
  "name" : "Sync for Money Forward",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "請求月5件・見積月20件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "請求月50件・見積月100件まで",
    "name" : "Professional",
    "price" : "4000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/moneyforward"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-chatwork",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとChatworkを連携。ワークフローからChatworkのルームへ通知を送り、CRMカード上で最新のやり取りの確認と返信ができ、紐付けたルームの新着メッセージをHubSpotのノートとして自動で記録するHubSpot連携アプリ。",
  "featureList" : [ "ワークフローアクション「Chatworkに通知」（取引・会社・コンタクト・チケット対応）", "送信先ルームIDとメッセージ本文にHubSpotのプロパティを差し込み", "取引・会社・コンタクトとChatworkルームの紐付け（全プラン無制限）", "CRMカードにルームの最新100件のメッセージを表示（Professionalプラン以上）", "CRMカードからChatworkへメッセージを送信（Professionalプラン以上）", "紐付けたルームの新着メッセージをHubSpotのノートへ自動記録（Enterpriseプラン限定）", "引用や装飾を、HubSpotのノートでも読みやすい見た目のまま記録", "OAuth接続とAPIトークン接続（SAML/SSO環境向け）に対応" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-chatwork-bystartlink",
  "name" : "Sync for Chatwork",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "通知 月10件まで・ルーム紐付け無制限",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "通知無制限・CRMカードで最新100件の表示とメッセージ送信",
    "name" : "Professional",
    "price" : "3000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "Professionalの全機能＋メッセージ同期（30分ごと）",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/chatwork"
}
```