生成AI（OCR）×ノーコードで「名刺管理アプリ」を作ってみた｜活用・運用のポイント（前編）

本記事でわかること

• 生成AI(OCR)を活用した名刺管理アプリの全体像
• Platio Canvasでの具体的なアプリ画面設計・データベース構築方法
• OpenAI APIを使った文字起こし設定の流れ
• ノーコードでAI連携を実装するポイント

はじめに

みなさん、こんにちは。マーケティング部のタクミンです。

名刺管理は、日々の業務の中で「やらなければ」と思いつつ、つい後回しになりがちな作業ではないでしょうか。紙の名刺は気づくと溜まってしまい、いざ必要になったときに見つからない。Excelや既存ツールで管理しようとしても、入力の手間が負担になり、結局使われなくなるケースも少なくありません。

よくある名刺管理の悩み

• 名刺をもらったまま整理できていない
• 手入力が面倒で管理が続かない
• 社内で情報を共有できていない
• 自社の業務フローに合うツールが見つからない

こうした状況を見て、「それなら自分たちの業務に合った名刺管理アプリを作れないだろうか」と考えたのが、今回Platio Canvas（プラティオ キャンバス）でアプリを作ってみたきっかけです。目指したのは、高機能なシステムではなく、名刺を登録・検索できて、無理なく使い続けられるアプリ。

今回紹介する方法は、「名刺管理アプリの作り方」「名刺 OCR ノーコード」「生成AI 名刺管理」などのテーマに関心のある方にとって、具体的な実装イメージを持てる内容です。
OCR機能を活用した名刺データ化を、Platio Canvasと生成AIを使って名刺管理アプリを作ってみた過程や気づきを、初めて触る方にも分かりやすく紹介していきます。

「Platio Canvas（プラティオ キャンバス）」とは

Platio Canvas（プラティオ キャンバス）とは、エンタープライズ向けノーコードアプリ開発プラットフォームです。システム開発におけるスピード、柔軟性、セキュリティ、デザイン性を高次元で両立し、社内業務からBtoC向けのアプリ開発まで幅広く対応できるのが特長です。
ぜひPlatio Canvasの無料トライアルで一緒に試しながら見てみてくださいね。

今回作った名刺管理アプリの概要

今回作ってみたのは、生成AIと連携した名刺管理アプリです。名刺画像をアップロードして、名刺情報の文字起こしから登録〜検索までの一連の流れをモバイルアプリから行えるようにします。

このアプリでできること

• 名刺画像をアップロード
• 生成AIを活用し名刺情報を文字起こし
• 文字起こし結果をもとに、名刺情報（氏名／会社名／部署／電話番号／メールアドレスなど）をデータベースへ登録
• 登録済みの名刺データを一覧表示・検索（氏名や会社名など）

手入力の負担を減らし、名刺管理が「続かない」「後回しになる」といった課題を解消できるのが特長です。モバイルアプリでの活用を前提としているため、外出先で受け取った名刺もその場で登録できるようにしました。

生成AI（OCR）を使った文字起こしの仕組み

また、今回の構成では、OpenAIのAPIキーを取得してPlatio Canvasに設定しています。
ただし設定作業は、Platio Canvasの画面上で「AI機能」を選び、キーと命令文を入力するだけ。いわゆる“外部システム連携の開発”は不要で、ノーコードのまま実装できました。

名刺管理アプリの構成設計ポイント

アプリ構成を考える際に意識したのは、最初から作り込みすぎないことです。名刺管理に必要な機能を洗い出し、まずは最低限の構成から始めました。

管理項目の整理

• 管理したい名刺情報は何か
  （氏名、会社名、部署、電話番号、メールアドレスなど）
• 登録・確認・検索がシンプルに行えること

シンプルな画面設計

• 名刺画像のアップロード画面
• 名刺情報の文字起こし結果を確認する画面
• 名刺一覧・検索画面

Platio Canvasは後から項目や画面を簡単に追加できるため、まずは「使える形」を作り、運用しながら改善していく方針にします。

構成イメージはこんな感じ。

名刺管理アプリの作り方

ここからは、Platio Canvasで名刺管理アプリを作成した際の開発手順を紹介します。
以下のStepでアプリ作成を進めていきます。

• Step1.アプリ画面設計（機能の配置など）
• Step2.データベースの準備
• Step3.生成AI（OCR）設定方法
• Step4.一覧表示・検索機能の実装
• Step5.動作確認

Step1.アプリ画面設計（機能の配置など）

まず、Platio Canvasで新規アプリを作成します。
画面中央に「ホーム」というアプリ画面が用意されているので、この画面を起点にアプリ作成を始めます。左側には機能の部品（エレメント）が豊富にそろっているので、必要な部品をドラッグ＆ドロップでアプリ画面に配置していきます。

「ホーム」画面には名刺画像をアップロードするページと登録した名刺一覧を確認できるページに遷移するためのボタンをそれぞれ配置します。
「ボタン」エレメントをホーム画面中央に配置し、それぞれのテキストを右パネルから編集します。

続いて新規ページを追加し、「名刺画像アップロード」する画面を作成します。
左のパネルから「テキスト（説明文）」「画像インプット（名刺画像のアップロード）」「インプット（文字起こしAIに対する指示文）」「ボタン（文字起こしを実行）」のエレメントをそれぞれ配置します。それぞれのテキストを編集します。

文字起こしの内容を確認するためのページを新規で追加します。
左のパネルから「テキスト」を2つ、「インプット」「ボタン」を配置します。エレメントのテキストをそれぞれ編集します。右パネルからフォントサイズや色なども変更できます。

「この内容で登録する」ボタンを押下したときに、「登録が完了しました」というモーダルが出るように設定します。
新規ページを追加する際、タイトル下の「モーダル」を選択してください。

モーダルにあらかじめ設定されているエレメントのテキストを編集して完成です。

最後に、登録した名刺情報を一覧で確認できるページを作成します。
新規ページを追加し、トップから「テキスト」「インプット」「アイコン」「カスタム」を配置します。「カスタム」エレメントにデータベースのテーブルを設定し、名刺データを一覧で確認できるようにします。

これでアプリ画面の実装は終わりました。しかし、今の状態は枠が用意されているだけで実際には機能しません。次に、アプリとして機能するようにデータベースの準備とそれぞれのエレメントの詳細や「アクション」を設定していきます。

Step2.データベースの準備

名刺情報を登録・管理するためのデータベースのテーブルを作成します。
今回は「登録者」と「名刺情報（文字起こし結果）」の2つの項目を用意しました。「ID」「作成日時」「更新日時」の項目は新規のテーブルを作成する際にデフォルトで設定されています。

これでデータベースの準備は完了しました。

※今回は検証として、名刺情報をまず「テキスト全文」で保存しました。
本番運用を想定する場合は、氏名／会社名／電話番号などを項目で分けると検索性が大きく向上します。

Step3.生成AI（OCR）設定方法

画面遷移や各エレメントの設定を行います。
まず、ホーム画面に配置した2つのボタンを押下したときにそれぞれのページに遷移するアクションを設定します。対象のボタンを選択し、右パネルの「アクション」タブから「アクションを追加する」を設定します。

画面遷移する対象のページを選択するとページ同士をつなぐ矢印が表示されます。

次に、「名刺画像アップロード」ページでアップロードされた画像の文字起こしを生成AIで行うための設定をします。
今回は「文字起こしを確認する」ボタンを押下すると以下の動作が行なわれるように3つのアクションを設定します。

• １）アップロードされた名刺画像の文字起こし
• ２）文字起こし結果を表示
• ３）文字起こし結果を確認するページへの画面遷移

---

１）アップロードされた名刺画像の文字起こし

まず「アップロードされた名刺画像の文字起こし」のアクションです。「ボタン（文字起こしを確認する）」エレメントを選択し、右パネルのアクションタブから「AI機能」＞「画像分析（GPT-4o）」というアクションを追加します。

追加したアクションを開いて「APIキー」「命令文」「画像URL」を以下のようにそれぞれ設定します。

• 1-1）APIキー：Open AIで取得したAPIキーを入力
• 1-2）命令文：「変数を追加」を選択し「名刺画像アップロード」ページの文字起こしのための指示文を入力した「インプット1」
• 1-3）画像URL（画像オレンジ枠）：「変数を追加」を選択し、「Image-picker1」＞「URL」

これで、文字起こしのための生成AIに必要な設定は完了しました。

---

２）文字起こし結果を表示

次に、文字起こし結果を「内容確認」のページに表示させるためのアクションを設定します。「ボタン（文字起こしを確認する）」を選択し、「その他」＞「エレメント値の変更」のアクションを追加します。

「エレメント値変更」を開いて、文字起こし結果を表示させる対象の「インプット」を選択します。今回は「内容確認」ページにある「インプット」エレメントなので、「全てのページ」＞「内容確認」＞「インプット2」を設定します。

そして「値」には文字起こし結果を指定するため、「文字起こしAI（GPT-4o）」（先ほど設定した生成AI）＞「choices.message.content」を選択します。

※ここはOpenAIの出力結果のうち「本文テキスト」にあたる部分を選択しています。Platio Canvasではプルダウンから選ぶだけでOKです。

---

３）文字起こし結果を確認するページへの画面遷移

最後に、内容確認のページに遷移するアクションを追加します。
先ほどホーム画面からそれぞれのページに遷移するアクションを設定したときと同様にアクションを設定します。今回の遷移先は「内容確認」です。

これで、名刺画像から文字起こしした結果が「内容確認」のページに表示されるようになりました。

---

４）文字起こしした結果をデータベースのテーブルへ登録

続いて、文字起こしした結果をデータベースのテーブルへ登録するアクションを追加します。
まず、「内容確認」ページにある「この内容で登録する」ボタンを選択し、「作成」＞「名刺情報」のテーブルを設定します。

---

次に、テーブルに設定した項目に登録する内容をそれぞれ設定します。「登録者」項目には「Logged In User」（現在ログインしているユーザー）＞「Username」、「名刺情報」項目には文字起こし結果を表示していた内容確認ページの「インプット2」の変数を設定します。

そしてデータベースへ登録ができたら、「登録完了」のモーダルに遷移するように、「ページ移動」のアクションを追加します。これで、名刺画像のアップロードからデータベースへの登録までの一連の流れを実装できました。

Step4.一覧表示・検索機能の実装

５）名刺一覧画面でデータベース項目を表示

最後に、名刺一覧画面で登録したデータベースの項目が表示されるように設定を行います。
まず、「カスタム」エレメントを選択し、右パネルの「エレメント」タブの「カスタム」＞「データベースの選択」のプルダウンから「名刺情報」を選択します。

次に、「カスタム」エレメント内の「テキスト」に対しそれぞれ「登録者」「名刺情報」を変数で選択します。これで、データベースに登録した名刺情報が一覧で表示されるようになりました。

さらに、名刺一覧をフリーワードで検索するための設定を行います。設定方法などの詳細はこちらからご確認いただけます。

Step5.動作確認

最後に、実際に名刺画像を登録して動作確認を行い、必要に応じて項目や表示を微調整しました。Platio Canvasでは修正や改善も簡単に行えるため、まずは一通り動く状態を作ることを意識しています。
ここまでの名刺管理アプリ開発の一連の流れはこちらのデモ動画でご確認いただけます。

まとめ―作ってみた正直な感想―

実際に名刺管理アプリを作ってみて感じたのは、「思っていたよりずっとシンプルに進められた」という点です。生成AIと聞くと難しそうな印象がありますが、Platio Canvas上では部品を組み合わせる感覚で進められました。

作ってみた正直な感想

• プログラミングなしでも形にできた
• 名刺管理に必要な機能は短時間で揃えられた
• 「まず作って、使いながら直す」進め方が現実的

アプリ作成のハードルが下がり、「これなら他の業務アプリも作れそう」と感じられたのが大きな収穫です。今回は初めて触る状態から、画面作成〜登録までで約6時間、検索機能の実装や最終調整なども含めて約2日で形にできました。

1ヶ月の無料トライアルで、ぜひみなさんも名刺管理アプリ、作ってみてはいかがでしょう。

名刺管理アプリ（操作・メリット編）では、実際にこのアプリを使ってみた感想や、Platio Canvasならではのメリットをご紹介します。