Rork でデジタル名刺アプリを作る方法【2026年版】QRコード・シェア機能付き

デジタル名刺アプリとは？Rork で作るメリット

日本では今もリアルな名刺交換が根強い文化として残っていますが、2026年現在、スマートフォンでQRコードをスキャンするだけでプロフィールを共有できる「デジタル名刺アプリ」が急速に普及しています。自作のデジタル名刺アプリを持つことで、自分だけのブランドを表現しながら、名刺切れや印刷コストの心配もなくなります。

Rork は、プロンプトを入力するだけでiOS・Androidアプリを自動生成できるAIアプリ開発ツールです。コーディング経験がゼロでも、本記事のステップに沿って操作するだけで、QRコード表示・シェア機能・プロフィール編集を備えたデジタル名刺アプリが完成します。

ここでは以下の機能を実装します。

プロフィール表示画面（名前・役職・SNSリンク）
QRコードの自動生成と表示
iOS標準シェアシートを使った名刺共有
プロフィール情報の編集・保存

「ノーコードアプリ開発」「デジタル名刺アプリ作り方」と検索している方にも、Rork は最速の選択肢です。

事前準備：必要なもの

アプリ開発を始める前に、以下を用意してください。

Rork アカウント（rork.com で無料登録可能、週5回まで無料）
スマートフォン（iOS または Android、動作確認用）
掲載したいプロフィール情報（氏名・メールアドレス・SNSのURL など）

Rork の無料プランでも今回のアプリは十分に作成できます。有料の Rork Max プランを使うと、ネイティブ Swift での生成や Apple Watch 対応も可能ですが、ここでは無料プランで完結する手順を紹介します。

Step 1：Rork でプロジェクトを作成する

Rork にログインしたら、「New App」をクリックして新しいプロジェクトを作成します。

プロンプト入力欄に以下のような指示を入力してみましょう。

デジタル名刺アプリを作ってください。
機能：
- プロフィール表示画面（名前、役職、会社名、メールアドレス、SNSリンク）
- プロフィール情報からQRコードを自動生成して表示する機能
- iOSのシェアシートを使って名刺情報をテキストで共有する機能
- プロフィール情報を編集・保存できる設定画面

デザインはシンプルでプロフェッショナルな白黒ベース。
QRコードは大きく中央に表示。

Rork がコードを自動生成するまで数十秒待つと、プレビューが表示されます。

Step 2：プロフィール表示画面の確認と調整

Rork が生成したアプリのプレビューを確認します。プロフィール表示画面には以下の要素が自動的に含まれているはずです。

名前（フルネーム）
役職・会社名
メールアドレス
SNSリンク（LinkedIn・X・Instagram など）

もしレイアウトが気に入らない場合は、チャット欄でフィードバックを伝えるだけで Rork が修正してくれます。

名前を画面上部に大きく表示してください。
アバター画像を丸型で名前の上に表示してください。
SNSアイコンはボタン形式で横並びに配置してください。

Rork はプロンプトでのフィードバックに対応しており、何度でも修正できます。気に入ったデザインになるまで試行してみてください。

Step 3：QRコードの実装を確認する

Rork が生成したコードでは、QRコードライブラリが自動的に組み込まれます。プロフィールのURL（または vCard 形式のテキスト）を元に QRコードが動的に生成される仕組みです。

生成されたコードのQRコード部分はおおよそ以下のような実装になっています。

// QRCodeコンポーネントの例（Rork 自動生成コード）
import QRCode from 'react-native-qrcode-svg';
 
const profileData = {
  name: "山田 太郎",
  title: "エンジニア",
  company: "株式会社サンプル",
  email: "yamada@example.com",
  twitter: "https://x.com/yamada_taro",
};
 
// vCard形式に変換してQRコードに埋め込む
const vCardString = `BEGIN:VCARD
VERSION:3.0
FN:${profileData.name}
TITLE:${profileData.title}
ORG:${profileData.company}
EMAIL:${profileData.email}
URL:${profileData.twitter}
END:VCARD`;
 
// 出力: QRコードスキャン後にiPhone連絡先へ直接保存可能

vCard 形式でQRコードを生成すると、スキャンした相手がiPhoneの連絡先にワンタップで保存できるようになります。これはデジタル名刺として非常に実用的な機能です。

Step 4：シェア機能の追加

名刺情報を共有する機能は、iOSの標準シェアシートを使うのが最も汎用的です。Rork では react-native-share または Expo の Share API が自動的に使われることが多いです。

プロンプトで以下を追加指示しましょう。

「名刺をシェア」ボタンを押すと、
プロフィール情報をテキスト形式でiOSのシェアシートに渡してください。
テキスト形式：
名前：[名前]
役職：[役職] / [会社名]
メール：[メール]
SNS：[SNS URL]

Rork がシェア機能のコードを自動追加します。実装後の動作確認用コードの例を以下に示します。

import { Share } from 'react-native';
 
const handleShare = async () => {
  const profileText = `【デジタル名刺】
名前：山田 太郎
役職：エンジニア / 株式会社サンプル
メール：yamada@example.com
SNS：https://x.com/yamada_taro`;
 
  await Share.share({
    message: profileText,
    title: '山田 太郎の名刺',
  });
  // 期待する出力: iOSシェアシートが表示され、LINEやメールなどで送信可能
};

シェアシートの詳しい使い方については、Rork でシェアシートを実装する方法も参考にしてください。

Step 5：プロフィール編集画面の実装

デジタル名刺アプリとして実用性を高めるには、プロフィール情報を自由に編集できる画面が必要です。Rork での実装方針をプロンプトで指示します。

設定画面を追加してください。
- 名前・役職・会社名・メールアドレス・SNSリンクを入力できるフォーム
- 「保存」ボタンで AsyncStorage にデータを保存する
- 保存後、プロフィール表示画面とQRコードに即座に反映される

AsyncStorage はRork が自動的に組み込むローカルストレージで、アプリを閉じてもデータが保持されます。実装例は以下の通りです。

import AsyncStorage from '@react-native-async-storage/async-storage';
 
// プロフィールの保存
const saveProfile = async (profileData) => {
  await AsyncStorage.setItem('userProfile', JSON.stringify(profileData));
  // 期待する出力: データが端末にローカル保存される
};
 
// プロフィールの読み込み
const loadProfile = async () => {
  const saved = await AsyncStorage.getItem('userProfile');
  return saved ? JSON.parse(saved) : null;
};

Step 6：アプリのテストと動作確認

プレビューで一通りの機能を確認したら、実機でのテストを行いましょう。

Rork でのテスト手順

まず、Rork の画面右上にある「Preview」ボタンからQRコードを表示します。このQRコードをスマートフォンで読み取ると、Expo Go アプリを経由してリアルタイムでアプリを確認できます。

テストで確認すべきポイントは次の通りです。

プロフィール情報が正しく表示されているか
QRコードが生成され、スキャンできるか（別のスマートフォンで確認）
シェアボタンでシェアシートが開くか
編集画面で変更した内容が保存・反映されるか

不具合があればチャット欄でフィードバックを送るだけで、Rork が自動的に修正します。

全体を振り返って：Rork でデジタル名刺アプリを作ろう

ここではRork を使ってデジタル名刺アプリを30分程度で作成する手順を解説しました。

プロフィール表示・QRコード生成・シェア機能・編集画面という4つの機能
プロンプトだけで実装できる Rork の強み
vCard 形式で連絡先保存に対応したQRコードの作り方

デジタル名刺アプリは機能がシンプルなため、Rork 入門の最初のプロジェクトとして非常に適しています。ぜひ本記事のステップに沿って、あなただけの名刺アプリを作ってみてください。