Napkin AIの実例集:文章から図解が生まれる過程を見せます

Web製作

Napkin AIがどのような図解を作ってくれるのか、実例で紹介しています。文章を入力してから図解が出てくるまでの過程を載せているので、自分の用途に合いそうかどうかの参考になると思います。

Napkin AIの概要は別の記事でまとめています。

Napkin AIとは

Napkin AIは、文章を入力するだけで瞬時に図解を作成してくれるAIツールです。百聞は一見に如かずということで、実際の例を紹介します。

例1:プロジェクト管理のフロー図

以下の文章を入力してみました。

「プロジェクト管理は、計画立案から始まり、タスク分配、進捗管理、問題解決、そして最終的な成果物の提出という流れで進みます。各段階でチームメンバーとの密なコミュニケーションが重要です。」

Napkin AIはこの文章を元に、以下のような図解を作成してくれました。

左から右に向かって流れるタイムラインの図

説明文の中に散りばめられたキーワードの順に沿って流れるように図解されています。視覚的・直感的になっています。

タイムライン形式の図解
プロジェクト管理のフロー図 - タイムライン形式(2024年9月時点)

説明対象の要因を分解して説明する図

「効果的なチームワーク」に対して3つの要因に分解している図です。所詮は1対3の関係を説明しているだけなので、真ん中の三角の図は重要な役割を果たすものではありませんが、 「それっぽさ」 は表現されています。

要因分解の図解
チームワークの要因分解図(2024年9月時点)

円形で循環を示す図

進捗管理のPDCAサイクルを説明するような表現に似ています。このような循環を示す表現はよく用いられるので、使い勝手のよい図解です。

循環を示す図解
PDCAサイクル風の循環図(2024年9月時点)

フィッシュボーン(特性要因図)

品質管理分野にてQC7つ道具と呼ばれるもののひとつで、古くから親しまれている図解です。本来の特性要因図は、問題点を洗い出すために要因を事細かく書き出すものなので、この程度の分解レベルでは全く足りていません。とはいえ、この表現があるだけで 「それっぽさ」 が表れる点は魅力的です。

フィッシュボーン図
特性要因図(フィッシュボーン)形式の図解(2024年9月時点)

要素間の流れの説明

左から右に流れる図としては前述のものと似ていますが、こちらは要素ごとに四角い箱が作られていて、よりシンプルな構図になっています。時間軸的な流れというよりも、特定の要素(オブジェクト)の関係性を説明する表現です。シンプルながら、文章だけよりも圧倒的に読みやすいです。

要素間の関係性を示す図解
要素間の流れを示すシンプルな図解(2024年9月時点)

例2:マーケティング戦略のマインドマップ

次に、こんな文章を入力してみました。

「効果的なマーケティング戦略には、ターゲット顧客の分析、競合他社の調査、商品・サービスの差別化、適切な価格設定、効果的なプロモーション、そして顧客フィードバックの収集と分析が含まれます。」

徐々に絞り込まれていく様子を表現する図

時間軸は左から右にかけて流れています。中で説明しているのは各時間軸における行動(アクション)であり、行動を進めるにつれて課題が深堀りされている様子が直感的に読み取れる表現です。

他の例としては、システム開発の業界における「要件定義」→「基本設計」→「詳細設計」→「製造(コーディング)」→「テスト」→「成果物」という時間軸の中での不確定要素の大きさを示す構図にも使えそうです。

ファネル形式の図解
時間軸に沿って絞り込まれる図解(2024年9月時点)

特定の目的に対する関係要素を分解する図

この例では「競合他社を調査(競合分析)」という主目的に対して、行動すべき要素をカテゴリごとに区別し、細部の要素を説明しています。行動の位置づけが直感的に理解できます。

要素分解の図解
競合分析の要素分解図(2024年9月時点)

途中で分岐し最終的に集結する図

単一のものが一方向に流れるだけの描画は先ほどから登場していますが、ここでは途中で4つに枝分かれしています。たった3行の文章の中で、それぞれのキーワードがどのような位置関係にあるのかを一瞬で理解することができるので、文章の読みやすさを向上させています。

分岐・集結型の図解
分岐して集結するフロー図(2024年9月時点)

しっくりこない図解もある

ここまで様々な便利な表現を見てきました。

その一方、当然ながら完璧ではない部分もあります。

しっくりこない図解の例
文章と図解が噛み合わない例(2024年9月時点)

今回の文章だと以下の構図が成り立ちます。

  • 「プロモーション戦略」は「ターゲット顧客に伝えるための手段」である
  • 「手段」には「広告、SNS、イベント、メールマーケティングなど」がある

しかし、この図解だと以下の点が気になります。

  • 「プロモーション戦略」と「ターゲット顧客」という関係性は文章中も図中も一致している
  • ここで「ターゲット顧客」という言葉と同レベルに並ぶ表現が他に見当たらない。「カスタマイズされたコンテンツ」とあるが「コンテンツ」という用語は登場していない
  • 「コミュニケーションチャネル」とは何なのか

このように文章と図解がいまいち合っていないことは度々起こります。

けれど、イマイチだなと思ったら他のデザインを選ぶことが可能です。

別のデザインを選んだ例
別のデザインを選択した結果(2024年9月時点)

「効果的なプロモーション戦略」は図のタイトルになり、手段を示す「広告」「SNS」「イベント」「メールマーケティング」は多様なチャネルである様を表現。それらが中央に向かう方向性を示すことで「活用し、接点を増やす」感じを演出しています。

完璧ではないかもしれませんが、最初の例よりはしっくりきます。このように、複数の図解を見比べながら気に入るものを選ぶことができます。

Napkin AIの出力フォーマット

作成した図はファイルとしてダウンロードすることができます。

マウスを動かして複数の要素(オブジェクト)を選択すると、紫色のメニューボタンが登場します。

オブジェクト選択画面
複数オブジェクトを選択した状態(2024年9月時点)

紫色のボタンをクリックすると、ダウンロード(エクスポート)のメニューに移ります。選べるフォーマットは以下の通りです。

  • フォーマット : PNG または SVG
  • 色設定 : ダークモード または ライトモード
  • 背景色 : 透過 または 塗りつぶし
エクスポート設定画面
エクスポートのフォーマット設定(2024年9月時点)

所感:自分の発想にはない表現が出てくる面白さ

「こういう表現をすると分かりやすいのか」とか、「この表現はあまり意味ないけど映えるから使えるな」という表現レベルの発見もあれば、「この問題ってこのような構図で整理できるのか」という思考整理の観点で貢献することもあり、 「便利」以上に学びを得る ことがあります。

図解は自分で作成するとしても、文章をNapkin AIに投入して図解作成の指示を出して眺めてみるだけでも、新たな表現方法のヒントを得ることができます。

まとめ

Napkin AIを使えば、複雑な情報を視覚的に表現することが手軽になります。この記事で紹介した通り、完璧ではない図解も生成されますが、複数のバリエーションから選べるので実用上は十分です。

図解を作るのが面倒で後回しにしていた方にとって、よいきっかけになるツールだと思います。

Related Posts