v0.2.0 → 次のリリース向け設計書

Mercury Editor Lite
LP & Tutorial 実装案

ランディングページの訴求力を高め、初めてのユーザーが迷わず執筆を始められるチュートリアル導線を設計する。

implementation-plan.md
# 思考を、途切れさせない。
Mercury Editor Lite は、Markdownの柔軟性と
リッチキスト編集の手軽さをひとつにした、
ローカルファーストの執筆環境です。
→ /editor で今すぐ試す
§00 OVERVIEW

プロジェクトの現在地

v0.2.0 では、ランディングページ（/）と編集画面（/editor）の分離、保存状態の可視化、初回ガイド、アクセシビリティ改善が行われた。次のリリースでは「導入率」と「初回体験の定着率」を上げるため、LP の訴求構造とチュートリアルの深さを強化する。

領域v0.2.0 状態次の改善目標
LP 価値・デモ・機能・手順を伝える基本構成 エモーショナルな訴求、Pain→Gain の対比、ライブデモ埋め込み
初回体験 「案内文から始める / 新規文書」ガイド ステップツアー、サンプル文書、いつでも開けるヘルプ
コンポーネント Landing/ Editor/ Settings/ Sidebar/ Toolbar/ Onboarding/ HelpModal/ Tutorial/ LPセクション群の追加
§01 LANDING PAGE

LP リニューアル案

現在の LP は情報を網羅的に並べているが、訪問者が「このツールで自分の課題が解決する」と感じるまでの感情移入がもう一段階必要。スクロールスパイ型の1ページに再構成し、視覚的な対比と実際の UI を交えて訴求する。

セクション構成

#セクション役割主要要素
1Hero0秒で価値を伝えるキャッチコピー、擬似エディタ UI、2つの CTA
2Pain → Gain共感と解決の対比課題リスト ↔ Mercury の対応、ビフォーアフター
3Feature Cards機能の具体化スクリーンショット付き4カード、実際の UI
4Live Demo使う前から体験軽量デモ or /editor への誘導 iframe
5Export出力形式の信頼性Markdown/HTML/PDF/DOCX/Modelfile アイコン一覧
6Getting Started導入摩擦の低減コピペ可能な3ステップのコードブロック
7FAQ不安の先取り保存先、クラウド同期、セキュリティ
8Footer信頼の補強GitHub、謝辞、ライセンス

ファイル構成案

Landing/
├── LandingPage.tsx　　　　# 全体レイアウト・スクロールスパイ
├── HeroSection.tsx　　　# キャッチコピー + CTA + 擬似エディタ
├── PainGainSection.tsx　# 課題と解決の対比
├── FeatureGrid.tsx　　　# 4機能カード
├── DemoEmbed.tsx　　　　# /editor 誘導 or 軽量デモ
├── GettingStartedSection.tsx # クイックスタート
├── FAQSection.tsx　　　 # 折りたたみ式 Q&A
└── LandingFooter.tsx　　# フッター

HeroSection の実装イメージ

背景にぼかしたエディタスクリーンショット（public/hero-bg.jpg）を配置し、中央に大きなタイポグラフィ。「思考を、途切れさせない。」の下に2つのボタンを配置する。

  • Primary CTA: 「Web で試す」→ /editor へ遷移
  • Secondary CTA: 「デスクトップ版をダウンロード」→ GitHub Releases へ

擬似エディタ UI（Hero 内に表示する軽量な CSS コンポーネント）は、実際のエディタの雰囲気を即座に伝え、技術的な信頼感を醸成する。

PainGainSection のコピー案

執筆時の課題（Before）Mercury Editor Lite（After）
ツールの切替で思考が止まる書く・整える・確認する・保存するが同一空間
Markdown の書式が思い通りにならないリッチテキストと Markdown を即座に切り替え
保存されているか不安保存状態を常に表示、失敗時は再試行
クラウドに預けるのが気になるIndexedDB / ローカルファイルで完結
AI やノートブックは別アプリ同一ワークスペースから Hermes / Marimo を起動
§02 TUTORIAL

チュートリアル導入案

「初回ガイド」だけでは、ユーザーがエディタの可能性を十分に把握できない。3本柱で定着率を上げる。

A. 初回オンボーディング（インタラクティブツアー）

/editor を初めて開いたユーザーに対し、ステップバイステップで UI を案内する。Zustand で hasCompletedOnboarding を永続化し、再訪時には自動でスキップ。

Step内容ハイライト
1サイドバーで書の作成・切替・削除ができますSidebar
2リッチテキストと Markdown を切り替えられますモード切替ボタン
3プレビューを並べて確認できますプレビュー切替
4Ctrl+S で保存。状態はステータスバーに表示StatusBar
5では最初の文書を書いてみましょうEditor 領域

実装: react-joyride を使うか、独自の Overlay + Spotlight コンポーネント（packages/editor/src/components/Onboarding/）を作成。軽量さを重視するなら後者。

B. サンプル文書「チュートリアル」

v0.2.0 の「案内文から始める」を発展させ、チュートリアル専用のサンプル文書を1つ用意する。ユーザーが実際にカーソルを動かしながら学べる。

文書タイトル: 🎓 Mercury Editor Lite を使いこなす

含める内容:

  • 見出し・リスト・引用の書き方（リッチテキスト / Markdown 両方）
  • プレビュー確認の流れ
  • ショートカット一覧（エディタ内チートシートとして機能）
  • AI チャットの開き方（設定済みの場合のみ表示）
  • エクスポートの試し方

C. いつでも開ける「ヘルプ & ショートカット」モーダル

? キーまたはツールバーの ? アイコンで即座に開く。初回だけでなく、使っている途中でも参照できる。

HelpModal/
├── HelpModal.tsx　　　　# タブ切り替えコンテナ
├── ShortcutTable.tsx　　# キーボードショートカット一覧
├── QuickStartTab.tsx　　# 3ステップクイックスタート
├── MarkdownCheatsheet.tsx # Markdown 記法早見表
└── FAQTab.tsx　　　　　 # よくある質問
§03 STATE DESIGN

Zustand への追加設計

既存の stores/ に以下の2つのストアを追加する。

onboardingStore.ts

interface OnboardingState {
  hasCompletedOnboarding: boolean;
  isOnboardingActive: boolean;
  currentStep: number;
  completeOnboarding: () => void;
  restartOnboarding: () => void;
  setStep: (step: number) => void;
}

tutorialStore.ts

interface TutorialState {
  showHelpModal: boolean;
  toggleHelpModal: () => void;
  activeTutorialDocId: string | null;
  setActiveTutorialDoc: (id: string | null) => void;
}

両ストアとも persist ミドルウェアで localStorage に保存し、ブラウザ更新後も状態を復元する。

§04 ROADMAP

実装ロードマップ

01

Phase 1 — 設計と原稿（今すぐできる）

  • LP 各セクションのコピー（日本語テキスト）を確定
  • サンプルチュートリアル文書を Markdown で作成
  • ヘルプモーダルの UI モックのみ実装（中身は後から）
02

Phase 2 — コンポーネント実装

  • Landing/ コンポーネント群の実装（スクリーンショットは仮画像で可）
  • Onboarding/ ツアーコンポーネントの実装
  • Zustand ストアに onboarding / tutorial 状態を追加
  • HelpModal/ のタブ実装
03

Phase 3 — 磨きと検証

  • 実際のスクリーンショット・GIF を撮影して LP に差し替え
  • モバイル表示の確認（375px 幅でのレイアウト崩れ）
  • アクセシビリティ：フォーカストラップ、aria-label、色のコントラスト
  • Tauri 版でも LP とチュートリアルが正常に動作するか検証
§05 NEXT STEP

次に決めること

  1. LP のトーン: エンジニア向けの技術的な信頼感を重視するか、ライター向けのシンプルさ・美しさを重視するか。
  2. ツアー実装方式: react-joyride を使うか、独自実装で軽量化するか。
  3. サンプル文書の内容: チュートリアル文書に含める Markdown サンプルを具体化する。
  4. スクリーンショット: Feature Cards 用の実際の UI キャプチャを用意する。

この HTML は設計書としてブラウザで開くか、印刷 → PDF 保存して共有できます。