| カテゴリ | 作業内容 | 下限 | 上限 |
|---|---|---|---|
| デザイン | UI/UXデザイン・全セクション ワイヤーフレーム作成（10セクション） | ¥80,000 | ¥150,000 |
| デザイン | デザインカンプ（LandingPage / AdminDashboard） | ¥120,000 | ¥220,000 |
| デザイン | デザイントークン設計・ブランドカラー（ゴールド #C8960A / グリーン #1E7A3C）統一 | ¥30,000 | ¥60,000 |
| フロント | NavBar（スクロール追従・言語切替 JP/EN・モバイルメニュー） | ¥40,000 | ¥70,000 |
| フロント | HeroSection（リアルタイム残枠表示・グラデーション進捗バー・CTA） | ¥80,000 | ¥150,000 |
| フロント | LeadSection（クロシン5価値訴求・研究データ表示） | ¥30,000 | ¥55,000 |
| フロント | TechnologySection（特許抽出フロー図・数値比較） | ¥50,000 | ¥90,000 |
| フロント | BusinessLogicSection（利益構造フロー・競合優位性） | ¥40,000 | ¥75,000 |
| フロント | BackgroundSection（事業背景・証明ドキュメント表示） | ¥35,000 | ¥65,000 |
| フロント | TimelineSection（3フェーズロードマップ + 収益化フローアニメーション） | ¥60,000 | ¥110,000 |
| フロント | RiskSection（3つのセーフティネット・返還タイムライン図解） | ¥60,000 | ¥100,000 |
| フロント | SimulatorSection（口数スライダー・抽出率スライダー・リアルタイム収益計算・棒グラフ・円グラフ） | ¥100,000 | ¥180,000 |
| フロント | FAQSection（アコーディオン Q&A・投資後フロー・解約ポリシー） | ¥25,000 | ¥45,000 |
| フロント | ContactFooter（問い合わせフォーム・口数→kg自動換算・リアルタイム残枠同期） | ¥70,000 | ¥120,000 |
| フロント | 多言語対応（日本語・英語 全セクション LanguageContext 一元管理） | ¥60,000 | ¥100,000 |
| フロント | Framer Motion アニメーション全実装（スクロール・フェード・数値カウントアップ） | ¥50,000 | ¥90,000 |
| フロント | レスポンシブ対応（モバイル・タブレット・デスクトップ全最適化） | ¥50,000 | ¥80,000 |
| フロント | ScrollToTop・アンカーナビゲーション制御 | ¥5,000 | ¥15,000 |
| バックエンド | ContactInquiry エンティティ設計（氏名・会社名・代理店名・メール・電話・口数・kg・ステータス） | ¥20,000 | ¥35,000 |
| バックエンド | 問い合わせ送信フォーム バリデーション・DB保存処理・リアルタイム購読 | ¥40,000 | ¥70,000 |
| バックエンド | メール自動送信 バックエンド関数（管理者通知 + 申込者確認メール） | ¥30,000 | ¥55,000 |
| バックエンド | 管理画面（AdminDashboard）：一覧・ステータス変更（申し込み/着金/NG）・削除 | ¥50,000 | ¥90,000 |
| バックエンド | 管理者専用ログイン（AdminLogin）・ProtectedRoute認証ガード | ¥25,000 | ¥45,000 |
| インフラ | ホスティング環境構築・デプロイ設定（Base44プラットフォーム） | ¥10,000 | ¥30,000 |
| インフラ | カスタムドメイン取得・SSL設定 | ¥10,000 | ¥20,000 |
| その他 | テスト・QA（クロスブラウザ・レスポンシブ・フォーム動作検証） | ¥30,000 | ¥60,000 |
| その他 | プロジェクト管理・ディレクション | ¥50,000 | ¥100,000 |
| その他 | 納品・ドキュメント・マニュアル作成（本書を含む） | ¥20,000 | ¥40,000 |
ファーストビューに最大インパクトを与えるメインセクション。DB から리アルタイムで残り枠数を取得し、進捗バー（グリーン→ゴールドグラデーション）でビジュアル表示。申し込み枠の緊急性を可視化し、CTA（申し込みへスクロール・シミュレーターへスクロール）を配置。日本語/英語切替に対応。
クロシン5の医療的価値・希少性・市場背景を解説するセクション。研究ハイライトデータ（単価・純度・需要）をカード形式で表示。
特許申請中の抽出技術を図解で説明。原料→抽出→製品の製造フローと、原料価値の倍率計算を視覚化。
なぜこの事業が成立するか、利益構造を分かりやすく説明。3つの出口戦略と利益分配の仕組みを解説。
事業の信頼性を高める背景情報。特許・検査機関・原料品質のエビデンスを並べ、出資判断の根拠を提供。
6月〜9月の3フェーズロードマップを縦カード形式で表示。さらに「収益化フロー図」（抽出→売却→入金→配当）を自動ハイライトアニメーションで可視化。
万が一の際の3つのセーフティネットを解説。「返還タイムライン図解」でどのように100%回収するかを相対月ベース（1ヶ月目・2ヶ月目…）で視覚化。
出資者が自分の投資額をシミュレーションできるインタラクティブ計算機。口数スライダー・抽出率スライダーでリアルタイム計算。
アコーディオン式Q&Aセクション。投資プロセス・返還方針・解約ポリシー等を網羅。
問い合わせ・申し込みフォーム。口数入力でkg・金額をリアルタイム換算表示。DBへの保存とメール自動送信を実行。右カラムにプロジェクトサマリーとLIVEステータスボックスを配置。
管理者専用のお問い合わせ管理画面。/admin-login から専用認証でアクセス。ProtectedRouteでガード。
| ルート | コンポーネント | 説明 | 認証 |
|---|---|---|---|
| / | LandingPage | 投資家向けメインLP（10セクション構成） | 不要 |
| /admin-login | AdminLogin | 管理者専用ログイン画面 | 不要 |
| /admin | AdminDashboard | お問い合わせ管理・ステータス更新 | 必要（管理者のみ） |
| /login | Login | 一般ユーザーログイン（汎用） | 不要 |
本サイト「CROCIN 5 INITIATIVE」は、高純度サフラン成分（クロシン5）の国際共同抽出・供給プロジェクトへの出資者を募集するための、投資家向けランディングページ（LP）です。 事業の背景・技術・収益モデル・リスク管理・タイムラインを10のセクションにわたり体系的に説明し、見込み出資者がその場で申し込みを完結できるように設計されています。
サイト全体は日本語・英語の2言語に対応しており、ナビゲーションバー右上のトグルボタンで即座に切り替えられます。 投資判断をサポートするインタラクティブなROIシミュレーターを備え、出資口数・クロシン5抽出率をスライダーで操作することで、合計利益・出資者配当・最低保証返還額をリアルタイムで計算・表示します。
バックエンドには Base44 BaaS（Backend as a Service）を採用し、申し込みフォームのデータはクラウドDBに安全に保存されます。 フォーム送信と同時に管理者への通知メールおよび申込者への確認メールが自動送信されます。 管理者は専用の管理画面（/admin）から申し込み状況をリアルタイムで確認し、ステータス（申し込み／着金／NG）を管理できます。
LPを閲覧し、シミュレーターで収益を試算。申し込みフォームから問い合わせ・出資意向を送信。認証不要でアクセス可能。
代理店名を入力欄に記入して申し込みを送信。紹介経由の管理が可能。
/admin-login から専用ログインし、管理画面で申し込み一覧・ステータス管理・削除を実施。role="admin" のユーザーのみアクセス可能。
HeroSection および ContactFooter のLIVEステータスボックスでは、ContactInquiry エンティティをリアルタイム購読しており、 DB への変更が即座にUI に反映されます。残枠の計算式は以下の通りです。