React Native – AI開発実践ラボ https://creativecontentlabtokyo.com AIで、作る力を手に入れる。 Sat, 28 Mar 2026 16:57:56 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 WEALTH CLUB|スマホネイティブアプリ https://creativecontentlabtokyo.com/portfolio/wealth-club-mobile-app/ Sat, 28 Mar 2026 04:17:14 +0000 https://test.creativecontentlabtokyo.com/portfolio/wealth-club%e3%82%b9%e3%83%9e%e3%83%9b%e3%83%8d%e3%82%a4%e3%83%86%e3%82%a3%e3%83%96%e3%82%a2%e3%83%97%e3%83%aa/ プロジェクト概要

WEALTH CLUBのWeb版と同等機能をReact Nativeで構築したスマートフォンアプリ。ダークテーマの高級感あるUIで、ネイティブのスムーズな操作感を実現しています。iOS/Android両対応のクロスプラットフォーム開発です。

システム構成図

WEALTH CLUB アプリ システム構成図
ウェルス会員スマホアプリ — System Architecture

主な機能

ダッシュボード

会員情報・予約状況・ポイント残高を一画面で確認。ゴールドのアクセントカラーでラグジュアリー感を演出。

レストラン予約

検索→詳細→決済→完了の4ステップ。カード決済・ポイント利用・現地決済の3種類に対応。

ラウンジ予約

会員専用ラウンジの空き状況確認と即時予約。時間帯選択やオプション追加に対応。

イベント

会員限定イベントの一覧・詳細・参加申込。カレンダー表示やリマインダー通知にも対応。

会員プロフィール・設定

会員情報の確認・編集、通知設定、セキュリティ設定。プライバシーに配慮した設定画面。

技術的なポイント

  • React Native によるクロスプラットフォーム開発
  • Salesforce REST APIとのリアルタイムデータ同期
  • expo-secure-storeによるセキュアなトークン管理
  • React Navigation（5タブ構成）によるネイティブライクな画面遷移
  • AsyncStorageによるローカルデータキャッシュ
  • カード決済・ポイント利用・現地決済の3種類の決済フロー

開発プロセス

Web版のデザインシステムをモバイルに適用し、AIとの対話でコンポーネントを一気に生成。ダーク＆ゴールドテーマのカスタムUIコンポーネントを約5時間でプロトタイプ完成しました。

]]> Salesforce App|モバイル営業支援ツール https://creativecontentlabtokyo.com/portfolio/salesforce-mobile-app/ Sat, 28 Mar 2026 16:57:56 +0000 https://test.creativecontentlabtokyo.com/portfolio/salesforce-mobile-app/ プロジェクト概要

外出先の営業担当者がSalesforceのデータにモバイルからアクセスし、取引先管理・商談確認・AI支援・名刺登録をワンストップで行えるネイティブアプリです。Salesforce REST APIとの連携により、リアルタイムのデータ同期を実現しています。

システム構成図

Salesforce モバイル営業支援 システム構成図
Salesforce モバイル営業支援 — System Architecture

主な機能

Salesforce認証 + 生体認証

Connected App OAuth認証とデバイスの指紋/Face IDによる二段階のセキュアなログイン。

取引先マップ

現在地周辺の取引先をピン表示。距離フィルタとRating色分けで重要顧客を即座に把握。

取引先・商談管理

Salesforceの取引先・商談データをモバイルで検索・一覧・詳細表示。外出先でもリアルタイムに確認。

AIコンシェルジュ

チャットUIで取引先のネクストベストアクションをAIが提案。音声入力にも対応。

名刺スキャン

カメラまたはファイル選択でAI-OCR読取。取引先・取引先責任者としてSalesforceに自動登録。

技術的なポイント

  • React Nativeによるクロスプラットフォーム開発（iOS/Android対応）
  • Salesforce Connected App OAuthによるセキュアな認証フロー
  • デバイスの生体認証（指紋/Face ID）による二段階認証
  • React Native Mapsで取引先の地理情報を可視化
  • AIエージェントによるネクストベストアクション提案
  • AI-OCRによる名刺読取→取引先自動登録パイプライン
  • Zustand + React Queryによる状態管理とキャッシュ戦略
  • Zodによる入力バリデーション

開発プロセス

AIを活用したVibe Codingアプローチで、認証フロー設計からUI実装・API連携・AI機能統合まで約5日間で完成。Salesforce REST APIの仕様に合わせたデータモデリングと、モバイル特有のUX（マップ操作・カメラ連携・音声入力）をネイティブ品質で実現しました。

]]>