Markdown Editor 操作ガイド

このドキュメントでは、本エディタの画面構成、リアルタイムプレビュー、バージョン履歴管理(コミット&差分比較)、Word / Markdown 出力などの全機能をスクリーンショット付きでわかりやすく解説します。

1

画面構成と基本レイアウト

エディタ画面は、ビジネスでの集中した執筆と直感的な操作性を両立する3ペイン構成になっています。

アプリ全体画面
photo 画面全景: 左に「文書・コミット管理」、中央に「Markdownエディタとプレビュー」、右に「目次アウトライン」
A
トップバー(上部)

現在の文書名、新規文書作成、コミット記録、ファイル入出力(エクスポート・インポート)、サイドバー開閉ボタンが集約されています。

B
文書管理サイドバー(左ペイン)

保存されている文書の一覧と、選択中文書のコミット履歴(過去のバージョン)を管理します。

C
エディタ&プレビュー領域(中央)

左側に入力エリア、右側にリアルタイム描画プレビューを配置。スプリッターで比率を自由に変更できます。

D
アウトライン(右ペイン)

Markdownの見出し構造から目次を自動生成し、目的の箇所へ1クリックでジャンプできます。

2

文書作成とリアルタイムプレビュー

編集エリアに入力した Markdown テキストは、タイピングと同時に右側のプレビュー領域に即座に反映されます。

エディタとプレビュー
photo 左に入力(GFM対応)、右側にスタイリングされたHTMLプレビューが即時表示される

文書タイトルと自動保存

Markdown の最上位見出し(例: # コミット ce39c8b の変更内容)を記述すると、それが自動的に文書タイトルとして認識され、画面上部および左サイドバーのリストに反映されます。

save
安全な自動保存機能:
入力内容はブラウザ内データベース(IndexedDB)へリアルタイムに自動保存されます。ブラウザを誤って閉じたりリロードしてもデータが失われる心配はありません。
3

表示モードの切り替え

エディタ上部のツールバーにあるセグメントボタンから、作業状況に応じて3つの表示モードを切り替えることができます。

表示モード切替ツールバー
photo 「編集」「分割」「プレビュー」の3モードを瞬時に切り替え可能
1
編集モード

Markdownの入力欄のみを全幅で表示します。長文執筆に集中したい場合に最適です。

2
分割モード(デフォルト)

入力エリアとプレビューを左右に並べて表示します。中央の境界線をドラッグして分割比率を調整できます。

3
プレビューモード

レンダリング結果のみを全幅で表示します。完成した文書の通読や確認に適しています。

4

コミット履歴と差分比較 (Diff)

Git のようなバージョン管理機能を備えています。文章の節目ごとにスナップショットを「コミット」として記録し、過去の任意のバージョンと比較できます。

文書管理サイドバーとコミット履歴
photo 文書一覧と、選択した文書に紐づく過去のコミット履歴

コミットの作成手順

1
「コミット」ボタンを押す

トップバーにある青い commitコミット ボタンをクリックします。

2
変更内容のメッセージを入力

ダイアログが表示されるので、「〇〇章を追加」「タイポ修正」などのメッセージを入力して保存します。

3
履歴の比較(Diff)

コミット一覧から2つのチェックボックスを選択すると、compare選択 2 件の差分 ボタンが有効になります。クリックすると追加(緑)/削除(赤)をハイライトした差分画面が表示されます。

5

エクスポートとインポート

社内共有、報告書作成、バックアップ用途など、多彩なファイル形式に対応しています。

トップバーの入出力アクションボタン
photo エクスポートメニュー・インポートボタン・サイドバー開閉操作
機能名 形式 利用用途・メリット
Markdown (.md) テキスト形式 標準的なマークダウンファイルとして書き出します。GitHubや社内Wiki等への再利用に便利です。
Word (.docx) Wordドキュメント 見出し・太字・箇条書き・表組みなどをMicrosoft Word文書へ自動変換して出力します。ビジネス提出用に最適です。
バックアップ (JSON) JSONファイル 文書本文だけでなく、すべての「コミット履歴」を含めた完全なバックアップを保存します。
インポート .md / .txt / .json PC内のMarkdownファイルや、保存しておいたバックアップJSONを読み込み、エディタに復元します。
6

目次(アウトライン)自動生成

Markdown本文内の見出し(#, ##, ###, ####)を解析し、右サイドバーに目次ツリーを自動構築します。

アウトライン目次ナビゲーション
photo 見出しが階層表示され、クリックするとプレビュー内の該当位置へスムーズにジャンプ
visibility
作業エリアの最大化:
トップバー右上の menu文書管理 や tocアウトライン ボタンを押すことで、左右のサイドバーを折りたたんで執筆領域を広く使えます。
7

Markdown 記法チートシート

本エディタは、業界標準の GitHub Flavored Markdown (GFM) および便利な拡張記法(脚注・タスクリスト・自動リンク)をサポートしています。

format_size見出し (Headings)
editMarkdown入力例
# 見出し 1 (文書タイトル) ## 見出し 2 (大見出し) ### 見出し 3 (中見出し)
previewプレビュー表示

見出し 1 (文書タイトル)

見出し 2 (大見出し)

見出し 3 (中見出し)

info
最上位の # 見出し 1 は文書タイトルとして自動認識され、各見出しは右サイドバーの「アウトライン目次」に自動登録されます。
format_bold文字の装飾 (Text Formatting)
editMarkdown入力例
**太字 (Bold)** *斜体 (Italic)* ~~打ち消し線 (Strikethrough)~~ `インラインコード (Code)`
previewプレビュー表示

太字 (Bold)

斜体 (Italic)

打ち消し線 (Strikethrough)

インラインコード (Code)

format_list_bulletedリストとタスクリスト (Lists & Tasks)
editMarkdown入力例
- 箇条書き項目 1 - ネストした項目 - 箇条書き項目 2 1. 番号付き項目 1 2. 番号付き項目 2 - [ ] 未完了タスク - [x] 完了したタスク
previewプレビュー表示
  • 箇条書き項目 1
    • ネストした項目
  • 箇条書き項目 2
  1. 番号付き項目 1
  2. 番号付き項目 2
  • 未完了タスク
  • 完了したタスク
format_quote引用 (Blockquotes)
editMarkdown入力例
> これは引用テキストです。 > 複数行にわたって引用できます。 >> 入れ子の引用文
previewプレビュー表示

これは引用テキストです。
複数行にわたって引用できます。

入れ子の引用文

codeコードブロック (Code Blocks)
editMarkdown入力例
```ts function greet(name: string): string { return `Hello, ${name}!`; } ```
previewプレビュー表示
function greet(name: string): string {
  return `Hello, ${name}!`;
}
table_chart表組み (Tables)
editMarkdown入力例
| 項目 | 状態 | 担当者 | | :--- | :---: | ---: | | 要件定義 | 完了 | 田中 | | 設計 | 進行中 | 佐藤 |
previewプレビュー表示
項目 状態 担当者
要件定義 完了 田中
設計 進行中 佐藤
linkリンク・水平線・脚注 (Links, Rules & Footnotes)
editMarkdown入力例
[公式サイト](https://example.com) https://example.com (自動リンク) --- 重要な注記[^1]があります。 [^1]: 脚注の詳細説明テキスト
previewプレビュー表示

公式サイト

https://example.com


重要な注記[1]があります。

[1] 脚注の詳細説明テキスト
security
セキュリティ設計 (XSS対策):
本エディタでは安全性を最優先するため、生のHTMLタグ(<script> や <div> など)は無効化(自動エスケープ)されます。社外から持ち込んだMarkdownファイルも安全にプレビューできます。
8

キーボードショートカット一覧

キーボードのみで効率的に操作するためのショートカットキーが用意されています。

ショートカット 機能説明
Alt + 1 左側「文書管理サイドバー」の表示/非表示を切り替えます
Alt + 2 右側「アウトライン(目次)」の表示/非表示を切り替えます
Ctrl + S / Cmd + S 文書を即座に手動保存します(自動保存も常時行われます)
Esc 開いているダイアログ(差分表示や確認画面)やドロップダウンメニューを閉じます