Figma×Lucidchartで作る、フロー図【AI自動生成＆高精度】

こんにちは！株式会社ニジボックス　UX・ディレクション室　室長の吉川です。
私は業務でよく論点整理や提案資料用にフロー図を作ることが多いのですが、これが結構面倒なので、簡単かつ高精度にAIで作る方法はないか？
と思い今回実験してみました。

結果、Lucidchartで作り、それをFigmaにエクスポートするという方法が、かなり良い感じになったので今回共有します！

「業務でたまにフロー図良く作るけど、毎回面倒。」「もっとかゆいところまで手が届くフロー図つくりたい。」みたいな方にピッタリだと思うので、是非ご覧ください！

1.LucidChartのAI機能によるフロー図生成

まずはLucidChartにログイン（無料）します。
Lucidchartは、オンラインで利用できる図作成およびダイアグラムツールで、特にビジネスプロセス、フローチャート、ネットワーク図、組織図、ER図などの作成に広く利用されているツールです。

特徴としては、簡単なプロンプトを勝手に強化してくれる。
さらにプロンプトを上書きして、フロー図を修正してくれる。
上記2点が使い勝手がとても良いと思いました！

それでは詳しく説明していきます。

左のツールバーの下から3番目
AI機能のアイコンをクリックするとプロンプト入力エリアがでてきます。

まずはタイプを選択（今回はフローチャート）

そして作りたい図のプロンプトを入力。今回は簡単に「SNSをつかったキャンペーンで賞品が抽選であたるキャンペーン」とだけ入れました。

ここからがLucidchartの真骨頂！（だと思う）
プロンプト入力エリア下部の「プロンプトを強化」のトグルをオンにすると・・・

プロンプトが瞬時に自動で詳細に書き換えられます！
ただ英語で出力されてしまうので、DeepLで翻訳（ブラウザの拡張機能で設定しておくと便利）

日本語で詳細なプロンプトになりました！
そして生成ボタンを押すと・・・

詳細なフロー図が生成成功！
ここから微調整していきます。

この部分を、当選者発表後、サポートチームからユーザーに連絡が入り、ユーザーはフォームで住所を入力、その後商品配布からプロセス完了という図に変更しようと思います。

図をクリックすると、図の下にプロンプト入力エリアがでるので

上記のように追加でプロンプトを入力。
すると・・・

該当箇所だけ、指示通りのフローに変更されました！

このように簡単なプロンプトを入れるだけで、詳細プロンプトに書き換えてくれて、
さらにプロンプトを上書きすることで、修正も可能なのです！

これは本当に便利です！
これでフロー図は完成です。

2.Figmaへフロー図をインポートして編集

ただ自分は業務上Figmaを使うことが多いので、Figmaで編集できると使い勝手がよい。

その場合は左上の「ファイル」→「エクスポート」をクリックし

SVG(透明な背景)を選択しエクスポート
このSVGファイルをfigmaのデザインファイルにドラッグすると・・・

編集可能なFigmaのデザインデータとして使えます！
※ちゃんとグループ化もされている。

これでFigma上で使うなり、最終パワポやコンフルに張り付けるなり、利用に合わせて使えます。

3.最後に

いかがでしたでしょうか？
フローチャート作るのは結構面倒なことが多いので、かなりの業務効率化につながる可能性があるかと思います。
※もちろん、それが十分か最終判断できる能力が必要な前提で。

最近は、「これAIで効率化orクオリティアップできそうじゃないか？」と思ったらChatGTP 4oに最適なやり方を聞くか、Perplexityで検索して、良さそうなやり方を実験してみるという方法を取っています。

基本的には自分の周りの業務をどう変えていけるか？で考えているので、もし参考になる方が一人でもいたらうれしいです。

それではまた次回！