現在の言語: 日本語JA EnglishEN
お問い合わせ

Markdownをブラウザだけでプレビューする方法(インストール不要)

2026.08.28 公開 2026.10.01 更新 使い方ガイド 約12分で読めます

Markdownを確認するだけなら、専用アプリは必須ではありません。ブラウザで今すぐプレビューする最短手順と、GitHub・ローカルエディタとの使い分け、外部送信を避ける確認ポイントを整理します。

目次(10)

Markdownの見た目を確認するだけなら、専用アプリをインストールする必要はありません。単発の確認なら、ブラウザ型のMarkdown Viewerで.mdファイルを開くか、Markdownテキストを貼り付けてプレビューするのが最短です。

ただし、GitHubへ公開するREADMEならGitHub上の表示、日常的に編集するならローカルエディタの方が向いています。目的に合わせて使い分けるのが重要です。

最短3手順:ブラウザだけでMarkdownをプレビューする

oka-projectのMarkdown Viewerを使う場合は、次の3段階です。

  1. Markdown Viewerを開く
  2. .mdファイルを選ぶ、またはMarkdownテキストを貼り付ける
  3. プレビューで見出し・表・コードなどを確認する

Markdown Viewerは無料・登録不要で、入力したMarkdownをブラウザ内で処理します。本文やファイルをプレビューのためにサーバーへ送信・保存しない構成です。

「1ファイルだけ見たい」「インストール権限のないPCで確認したい」「READMEを公開前にざっと見たい」といった場面では、この方法が手軽です。

プレビューが正しく見えても、そのまま公開してよいとは限らない

Markdownのプレビューは主に見出しやリスト等の文書構造の一次確認です。同じ原稿でも、公開先の拡張記法・スタイル・リンク基準パスで結果が変わることがあります。

プレビューで確認するもの 公開先で追加確認するもの
見出し階層・段落・リスト CMSの実ページでの改行・見出しスタイル
表の行列とコードブロック GitHub等の拡張記法への対応
Markdownリンクの表記 相対パスが実際の公開URLで正しく解決するか
画像記法 画像ファイルの保存場所と読み込み権限

初めてのREADMEならGitHubで、ブログ記事なら公開先のプレビューで、最終的に読者が見る画面を確認する作業を省かないことが重要です。

Markdownを扱う方法は、目的別に4つある

Markdownを扱う方法は、ブラウザ型Viewer、ブラウザ型エディタ、公開先そのもの、ローカルエディタの4つに分けると整理しやすくなります。

方法 向いている場面 強み 注意点
ブラウザ型Viewer 単発確認、共有PC、インストール不可 すぐ開いて確認できる 編集や公開先別の変換には向かない
ブラウザ型エディタ AI原稿の修正、note・WordPress・Wordへの変換 編集から書き出しまで続けられる 複数原稿の管理や共同編集は別の道具が必要
GitHubなどの公開先 READMEなど最終表示の確認 実際の公開結果に近い 公開先固有の仕様がある
ローカルエディタ 継続的な執筆・修正、複数ファイル管理 編集環境を作り込める 初期セットアップが必要

完成済みのMarkdownを一度見るだけならViewerが最短です。ChatGPTやClaudeで作った原稿を修正し、note・WordPress・はてなブログ・Wordなどへ持っていくなら、ブラウザ型エディタの方が作業をつなげやすくなります。

どれか1つが常に優れているわけではありません。「見るだけか」「原稿を仕上げるか」「公開先で最終確認するか」で選ぶ方法が変わります。

1. 単発ならブラウザ型Viewer

手元にあるMarkdownを一度だけ確認したい場合は、ブラウザ型Viewerが最も手軽です。

たとえば、次のような用途です。

  • AIが生成したMarkdownの見出し構造を確認する
  • .mdで渡されたメモを読む
  • READMEの表やコードブロックが崩れていないか見る
  • インストールできない端末で内容を確認する

ブラウザには、利用者が選んだローカルファイルをJavaScriptから読み取るためのFile APIがあります。FileReader.readAsText()を使えば、選択したFileやBlobを文字列としてブラウザ内で読み取れます。

ただし、ブラウザで動くツールだからといって、必ずローカル処理とは限りません。 読み込んだデータをAPIへ送る実装もできるため、重要なファイルでは処理方式まで確認する必要があります。

2. AI原稿を直して公開先へ持っていくならブラウザ型エディタ

ChatGPTやClaudeが作ったMarkdownを確認するだけでなく、文章を修正して公開先へ移したい場合は、Viewerよりエディタが向いています。

Yomuは、Markdownの編集とライブプレビューに加え、note・WordPress・はてなブログ・Zenn / Qiita向けのコピー、Word(.docx)・PDF・HTMLの書き出しに対応しています。

たとえば、次のような作業です。

  • ChatGPTの回答を読みながら言い回しを直す
  • 見出し・箇条書き・表の崩れをプレビューで確認する
  • note向けに見出し階層や表を調整する
  • WordPressのGutenbergブロック形式へ変換する
  • MarkdownをWordやPDFとして保存する

ただし、Yomuの自動保存はブラウザ内の1原稿だけで、履歴・複数原稿管理・端末間同期はありません。日常的な原稿管理まで必要なら、ローカルエディタや文書管理サービスと使い分けてください。

3. GitHubへ出すREADMEはGitHubで最終確認する

READMEをGitHubへ公開する場合は、ブラウザ型Viewerだけで確認を終えず、最終的にはGitHub自身の表示も確認した方が確実です。

GitHubではGitHub Flavored Markdown(GFM)が使われており、表やタスクリストなどを含む独自の拡張があります。別のMarkdownレンダラーで問題なく見えても、GitHubでは細部が異なる場合があります。

つまり、ブラウザ型Viewerは公開前の一次確認に向き、GitHubは公開先での最終確認に向きます。

READMEの確認手順は、README.mdを公開前にプレビューする方法で詳しく整理しています。

4. 日常的に書くならローカルエディタ

Markdownを毎日のように編集するなら、VS CodeやMarkdown対応エディタのように、編集画面とプレビューを往復できる環境の方が効率的です。

一方、1ファイルを見るためだけにアプリや拡張機能を用意するのは手間になります。

「見るだけ」と「継続的に書く」は別の用途として考えた方が、ツールを選びやすくなります。

Markdownはどこでも同じ表示になるわけではない

Markdownには複数の仕様や実装があります。

CommonMarkはMarkdownの曖昧さを減らすための仕様を定めていますが、GitHubのGFMのように拡張構文を持つ環境もあります。そのため、同じMarkdownでもレンダラーによって表示が少し変わることがあります。

特に確認したいのは、表、タスクリスト、改行、コードブロック、HTMLを直接書いた部分、外部画像です。

重要なのは、「Markdownとして解釈できるか」と「公開先で意図どおりに見えるか」を分けることです。

表だけ崩れる場合は、Markdownの表が崩れる・表示されない原因で、記法の問題とレンダラー差を切り分けています。

「オンラインで使える」と「ファイルを送信しない」は別

オンラインツールを使うときは、ページ上で動いているというだけで「ファイルは端末から出ない」と判断しない方が安全です。

確認したいのは、ファイルをサーバーへアップロードするか、読み込み後にAPI通信が発生するか、外部画像や外部スクリプトを取得するか、通信先を制限しているかです。

oka-projectのMarkdown Viewerは、入力内容をブラウザ内で処理し、サーバーへ送信・保存しない構成にしています。また、Content Security Policy(CSP)で外向き通信を制限しています。

この設計については、ブラウザ完結ツールの「送信しない」を、約束ではなく構造にするで、実装上の考え方を説明しています。

重要なファイルを扱う前の判断基準は、オンラインツールにアップロードしてはいけないファイルとはで整理しています。

プレビュー後に何をしたいかで、ViewerとYomuを使い分ける

Markdownを表示したあとに何をしたいかで、次に使う道具は変わります。

  • 内容と見た目を確認するだけなら、Markdown Viewer
  • 原稿を修正してnote・WordPress・はてなブログ・Wordなどへ持っていくなら、Yomu
  • 実際の公開画面を確認したいなら、GitHubや投稿先自身のプレビュー
  • 複数ファイルを継続的に管理したいなら、ローカルエディタ

.mdファイルの開き方自体を知りたい場合は、mdファイルを開く方法を参照してください。

表示したMarkdownをPDFとして残したい場合は、MarkdownをPDFにする方法で、ブラウザ印刷とPandocを比較しています。

Viewerは「開く・見る・確認する」、Yomuは「書く・整える・公開先へ変換する」ための道具です。見るだけの用事でYomuを開く必要はなく、反対に原稿を仕上げたい場合はViewerだけで作業を完結させようとしない方が分かりやすくなります。

よくある質問

Markdownを見るだけなのに、アプリのインストールは必要?

必要ありません。単発の確認なら、ブラウザ型のMarkdown Viewerで.mdファイルを開くか、Markdownテキストを貼り付けてプレビューするのが最短です。

Markdown Viewerで正しく見えたのに、GitHubでは表示が違うのはなぜ?

GitHubではGFMという独自の拡張を含むMarkdownが使われているためです。ブラウザ型Viewerは公開前の一次確認に使い、READMEの最終確認はGitHub自身の表示で行います。

Markdown ViewerとYomuはどう使い分ける?

内容と見た目を確認するだけならMarkdown Viewer、原稿を修正してnote・WordPress・はてなブログ・Wordなどへ持っていくならYomuです。見るだけの用事でYomuを開く必要はありません。

ブラウザで動くツールなら、ファイルは外部に送られない?

そうとは限りません。ブラウザで動くツールでも読み込んだデータをAPIへ送る実装はできるため、重要なファイルではサーバーへのアップロードや読み込み後の通信の有無まで確認します。

まとめ

Markdownを一度だけ確認するなら、ブラウザ型Viewerで開くのが最短です。インストール不要で、.mdファイルやMarkdownテキストをすぐプレビューできます。

確認後に文章を修正し、note・WordPress・はてなブログ・Wordなどへ持っていく場合は、ブラウザ型エディタのYomuを使うと、編集から公開先別の変換までを続けて行えます。

ただし、GitHubへ公開するREADMEはGitHub自身の表示を最後に確認し、複数ファイルを日常的に管理するならローカルエディタを使う方が効率的です。

また、重要なファイルでは「オンラインで使えるか」だけでなく、ファイルがどこで処理され、どこへ通信するのかまで確認して選ぶ必要があります。

参考

← ブログ一覧へ