AIで進化するアプリ開発：MCP X Figma X Claudeを活用した1時間アプリ作成ガイド

Last updated at 2025-04-24Posted at 2025-04-24

はじめに：AIによるアプリ開発爆発

AI技術の進化は近年著しく、アプリケーション開発の速度やコスト構造に大きな変革をもたらしています。大規模言語モデル（LLM）や、ローコード／ノーコードのAIツール（ChatGPTシリーズ、Microsoft Power Platform、Bubbleなど）の普及により、アイディアをすぐに具現化できる環境が整い始めています。

このトレンドは今後5年でさらに加速し、AIを利用してアプリを創ることが、ますます簡単になるでしょう。

今回のブログ記事では、最近注目を集めているMCP（Model Context Protocol）の使用例として、1時間で資料分析・質疑応答のサポートアプリを構築する方法をご紹介します。Figma AIとClineを組み合わせることで、どなたでもアプリを作成することができます。

1時間で作成した資料分析・質疑応答サポートアプリ

活用するAI機能・ツール

今回は、最新技術を駆使してアプリをデザインから実装まで全面的にAIを活用したプロセスを紹介します。この試みでは、特に以下のツールを活用します。

ツール

Figma AI (builder.io): 初期のアイディア出しからデザイン作成までをカバーし、最終的なデザインはFigmaファイルとしてエクスポート可能です。
Cline: アプリのバックエンド開発に特化したツールです。このツールはMCP（ModelContextProtocol）機能を提供し、Figmaとシームレスに連携することが可能です。

MCPとは？

MCPとは、AIアシスタント（チャットボットや自動化エージェントなど）が、さまざまな外部データやツールにアクセスするための共通のプロトコルを指します。

これらのツールを活用して、シンプルながらも会社のロゴを取り入れた、応答性の高い資料分析・質疑応答サポートアプリを構築したいと考えています。プロジェクトの開始から完成までの各ステップを追いながら、その利便性をQiitaユーザーの皆さんと共有していきます。

ぜひこの冒険を通じてAIがどのようにデジタルプロジェクトを支え、進化させるのかを体験してください！

アプリ実装の流れ

Step1：Figma AI ツール(builder.io)を利用し、欲しいアプリのデザインを作ってもらって、FigmaファイルとしてExport
Step2：ClineのMCP機能でFigma及び社内情報と連携設定
Step3：Clineを利用したアプリ実装

ではSTEP1のデザイン作成のため、FigmaのAI機能を活用してみましょう。

Step1：FigmaのAI(builder.io)機能を活用したアプリのデザイン

Figmaに入って新しいプロジェクトを作成します。
新規プロジェクトの画面下部にあるツールの中で、”Actions”をクリックします。
AI で検索し、Builder.io - AI-Powered Figma to Codeを選択します。
DesignWithAIダブを選択後、プロンプトを入力を入れます。結果物に修正や追加要求事項がある場合にはチャットを続ければOKです。
生成されるデザインを確認し、右上のImport to Figmaボタンを押して、エキスポートします。
筆者が入れたプロンプトは以下にありますので、参考までに。

# builder.io入力プロンプト
全体を右、左に分ける
左上はファイルアップロード機能がある
左したにはファイルに対してQAが可能なようにチャットボットがある
右全体にはファイルに対しての要約説明がある。
全体的なデザイン感は空の色をベースにすること。
一番上には会社のロゴを挿入

6.　完成されたFigmaファイルです！もう少し修正したい所はありますが、後で細かいのは修正しますので、そこまで時間を使わなくてもいいと思います。

ではデザインが完了しましたので、ClineのMCP設定を行いましょう。

Step2：ClineのMCP設定

まずはClineアプリをVS Codeに入れましょう。

VS Codeの左側のExtensionsタブから、Clineを検索し、インストールを行います。
次はClineのMCP機能を登録します。今回のシナリオでは、Figmaとの連携と、社内のプロダクト情報の連携が必要です。まずは右上のMCPServerをクリックします。
MarketPlaceからFigmaを検索し、インストールを行います。Clineの指示に従って、登録を済ませてください。（Figmaのキーを聞かれるので、先に発行しておきましょう）完了されたら、FigmaがInstalledのリストに出るようになります。
(参考)Figmaのキーを発行する方法：Figmaアカウント上のSetting →Securityタブに移動し、Generate new tokenをします。
使いたいMCPサーバーの定義をします。僕は３つくらいのMCPサーバーを利用しました

Figma : 作成したFigmaファイルを認識してもらうため
fetch：特定ページのコードや技術を利用したい場合、URLだけ入れることで導入することが可能
company_information: カスタムMCPサーバー（会社ロゴや社内情報をアプリに載せるため）
（company_informationは利用したい方のみ入れればいいと思います）
その他サーバー構成の詳細は以下の公式GITを参照してください。（
https://github.com/modelcontextprotocol/servers/tree/main?tab=readme-ov-file）

設定方法は、Installedタブの下のConfigure MCP Serversをクリックし、Configファイルを設定すればOKです。

{
  "mcpServers": {
    "github.com/GLips/Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key={発行されたFigmaキー}",
        "--stdio"
      ],
      "timeout": 600
    },
    "company_information": {
      "command": "/Users/unhyunlee/.local/bin/uv",
      "args": [
        "--directory",
        "/Users/unhyunlee/projects/study_project/example_project",
        "run",
        "python",
        "server.py"
      ],
      "transport": "stdio"
    },
    "fetch": {
      "command": "uvx",
      "args": [
        "mcp-server-fetch"
      ]
    }
  }
}

6.　カスタムMCPサーバーを設定する方法
社内プロダクト情報の連携は自社情報なので、サーバを直接作成する必要があります。社内プロダクト情報を提供してくれるサーバーは簡単にexplain_companyとsave_logoの二つのツールで構成しました。（今回はロゴのみ利用します）
explain_company:社内プロダクト情報を格納するツール
save_logo:会社（TC3)のロゴデータを格納するツール

# server.py
from mcp.server.fastmcp import FastMCP
from PIL import Image
mcp = FastMCP("Company Information")

@mcp.tool()
def explain_company() -> str:
   """Explain the company"""
   return """### Tactna説明
Tactnaは、企業が複数のデジタルサービスを効率的に展開するための統合サービスとして紹介されています。以下に、資料のポイントを整理しました。


### Tactnaが作られた背景
一般的に認証基盤を構築する際にAuth0やOkta, AWS Cognitoなどの認証サービスを利用することが多い。
これらのサービスは1アプリケーションに対して1つの認証基盤を提供するため、複数のアプリケーションを持つ企業にとっては、それぞれのアプリケーションに対して認証基盤を構築する必要がある。
なぜなら、ユーザの権限やアクセス権を管理するためには、それぞれのアプリケーションに対して認証基盤を構築する必要があるからである。
しかし、複数の認証基盤を構築することは管理コストの増加やセキュリティリスクの増加を招くため、認証基盤の統合が求められていた。


### Tactnaの特徴
Tactnaは、複数のアプリケーションに対して1つの認証基盤を提供することができるサービスである。
Tactnaを利用することで、複数のアプリケーションに対して1つの認証基盤を提供することができるため、管理コストの削減やセキュリティリスクの低減が期待できる。
また、Tactnaは、認証基盤の統合だけでなく、アクセス権の管理やユーザの権限管理なども提供するため、企業が複数のデジタルサービスを効率的に展開することができる。
このアクセス権の管理やユーザの権限管理は、API的な機能だけではなく、GUIを通じても設定することができるため、非技術者でも簡単に設定することができる。


### Tactnaのユーザへの価値
一番のメリットは、複数のアプリケーションに対して1つの認証基盤をサービスとして提供することができるため、フルスクラッチで認証基盤を構築する必要がなくなり開発コストの削減が期待できることである。
また、アクセス権の管理やユーザの権限管理なども提供するため、企業が複数のデジタルサービスを効率的に展開することができる。

### Tactnaの仕組み
裏では、Auth0やOkta, AWS Cognitoなどの認証サービスを利用しておりこれらは自由に選択できる。
権限管理のDBを持っており、フルマネージドで提供している。


"""
@mcp.tool()
def save_logo(save_path: str) -> str:
   """Save the company's logo to the specified path"""
   logo_image = Image.open("logo.png")
   logo_image.save(save_path)
   return f"Logo saved to {save_path}"

if __name__ == "__main__":
   mcp.run(transport="stdio")

7.　MCPの設定が完了できたら、以下画像のように表示されます。赤字でエラーぽくなっているのは、実際INFOとして動作には影響ありません。（MCPサーバー構成の中で、ツールのみ実装したため）

8.　MCPの設定が完了しましたので、上部の"+"タブを開きます。以下画像みたいな入力欄が出来るようになりますので、ここに命令を入力をする形になります。

Step3：Clineでアプリの実装

MCPの準備を完了したら、アプリの実装は簡単です！作りたいアプリをClineに指示を投げます。今回は、以下のようなプロンプトで指示をなげることにします。最初に作ったFigmaは、作成したページのリンクをそのままコピペするといいです。それとfetch MCPを入れているので、使いたいコードなどがあるURLを適当に入れましょう。

以下Figmaをベースにして、アプリを完成したい。
https://www.figma.com/design/2GPgOuJrqLFqS5muW9eFEp/Untitled?node-id=1-28&t=LZ75wVGVVReZfViT-1

詳細内容は以下
1. デザイン
    1. 基本的にコンポーネント構造はFigmaに従うこと
    2. TC3のロゴも挿入すること。

2. 機能
    1. ファイルアップロード機能
    2. アップロードしたファイルに対してデータを要約してくれる機能
    3. アップロードしたファイルに対してQAチャットボット機能
3. プロジェクト名はsearch_appとしてやってください。
4. Openai keyは.envなどで管理を別途にさせる
5. ファイルアップロードは以下を参照。
https://platform.openai.com/docs/guides/pdf-files?api-mode=chat

Clineの指示通りに、Approveをしていくと、アプリが完成されます。
「使用方法」で記載のある通りにOpenAI APIのキーを入れて、サーバーを起動し、アプリを動かしてみました！会社ロゴも含めて良いデザインで満足しました。
アプリがちゃんと動作しているか確認して見ましょう！

資料をアップロードすれば右側に要約情報を出してくれる機能：OK
資料ベースのQA機能：OK（個人的に使ってもいい感じのクオリティかも）

全般的にデザインと動作が問題なく作れました！

考察＆課題

今回は非常にシンプルなアプリですが、Figmaでのデザインからアプリの起動までものの1時間程度で実現することができました。もう少しデザインを良いものにしたりする場合には何回もやり取りをする必要があると思いますが、従来はこの程度の開発をするのにも1週間程度はかかったでしょう。そのことを考えると生成AIを活用したアプリケーション開発ツールの凄さがわかります。

アプリ作成にかかった時間：1時間程度
実際手を動かした部分：
デザインの壁打ち相談
MCP設定
ClaudeのVSCode設定
アプリに関する情報を伝える

今回の検証を通して、一人が複数のアプリを開発し、展開する世界がくるだろうと実感しました。とはいえ、複数のサービスを展開する際にはいくつか課題が考えられます。

複数サービスのシングルサインオン問題
複数のサービスを展開すると、それぞれでログインやID管理の仕組みが導入されてしまいます。複数のサービスを横断的に利用できるようにシングルサインオンを実装することが重要になってきます。またこれらを束ねるための実装コストが膨大になる可能性があります。
複数サービスのユーザー権限管理
複数のサービスを横断して利用する際には、ユーザーごとに付与される権限を正しく設定し、かつ一貫性を保ちながら管理することが非常に重要です。例えば、Aというサービスで管理者権限を持っているユーザーが、別のBサービスでは多くの操作が許可されていない一般ユーザー権限だった場合、必要な業務に支障が出たり、逆にセキュリティの観点で過剰に権限を与えたりするリスクがあります。
複数サービスの一元管理
ユーザーの利用状況に関するデータがそれぞれのアプリ毎にサイロ化してしまうことで、本来であればサービス間のシナジー効果を生み出すことを目指しますが、データを一元管理できない弊害がでてくるでしょう。例えばマーケティング活動に関してもサイロ化してしまい全体最適化が実施できないなどです。

まとめ

FigmaAIを活用することでアプリデザインが自動で出来る
ClineのMCPを活用することでFigmaとの連携や、社内情報を組み込むことが簡単になる
アプリ作成に1時間程度しかかからない
作成したアプリをサービス化までするにはいくつか課題がある

次回ブログでは？

今回はAIを活用し、アプリ開発がどれくらい爆速で開発できるかの体験が出来ました。
次回はこの技術を利用して複数のアプリを一瞬で開発し、複数のサービスの展開・管理を全部自動化させる方法に関して話します。

終わりに

内容に興味がある方は以下でコンタクトしていただけるとご対応させていただきます。
AIトレンドのフォローアップをしたい方は以下勉強会をご覧ください。

TC3株式会社について

TC3株式会社公式サイト

勉強会情報

URL: https://tc3.connpass.com/event/351598/
勉強会の概要：

話題のMCPを含めた最新AI技術トレンド勉強会
日時：2025年05月14日（水）18:30～21:00
場所：FINOLAB 4F イベント会場
参加費：無料
形式：ミニセッション＋LT＋ディスカッション
持ち物：なし（交流会のための名刺）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up