AIが出力するマークダウンが読みづらい。そんな悩みをMarkdownViewerで解決

AIが出力するマークダウン形式のテキストを、コピペするだけでブラウザ上で整形表示できる無料ツール「Markdown Viewer」を自社で開発・公開しました。インストール不要・会員登録不要・データ送信なしで利用できます。

背景

Future Studioにプログラマーはいません。ChatGPTやClaudeでテキスト生成を行うようになって、初めてマークダウン（Markdown）というものに出会いました。

マークダウンのテキストは、「#」や「**」や「-」といった記号が文章の中に直接入ってくるため、読みづらい。記号に意味があるのはわかるのですが、それが視覚的に反映されないまま文章の中に混ざってくるので、とてもタチが悪い感じでした。

「マークダウン 変換」「Markdown プレビュー 無料」といろいろ検索してみましたが、出てきたのは開発者向けの多機能エディターや、インストールしないといけないもの、ファイル単位でのアップロード型ビューアーがほとんどでした。「コピーして貼り付けるだけで、すぐに整形されたかたちで見られる」シンプルなツールが、日本語対応でほとんど見つかりませんでした。

AI利用者は急速に増えており、そのほとんどは私と同じようにプログラミングとは無縁の方々です。同じ悩みを持つ人が増えるだろうと考えて、自社で開発することを決めました。

AIを使った開発

2026年6月現在、こういったツールを作るためにコーディングの知識は必要ありません。必要なのは、課題に気づく力と、それをAIに伝える言葉です。どんなところに問題があって、それをどう解決すべきか——そこを整理してAIに渡せば、あとは勝手に形にしてくれます。私が主に使っているのはGeminiです。

設計上のこだわり

機能より先に決めた条件がひとつあります。「入力したテキストをどこにも送らないこと」です。

クライアントとのやり取りの中でこのツールを使うシーンも想定していました。下書き段階の提案文や、まだ公開されていない情報がマークダウンで書かれているケースがあります。そのテキストが外部に送信されるのは困る、とGeminiに伝えました。

Geminiはその条件を聞いて、「ブラウザの中だけで処理が完結するようにしましょう」と提案してきました。私にはその技術的な詳細はわかりませんが。「それでいきましょう」と許可と実装指示を出しました。

結果として、インストール不要・外部サーバーへのデータ送信なし・完全無料、という今のかたちになっています。

また、プレビューを見るだけでなく、フォントの種類・余白・見出しの装飾をスライダーで直感的に調整し、「CSSコピー」「HTMLコピー」のボタンで整形済みのHTMLとスタイルシートを取り出す機能も追加しています。はてなブログやWordPressに貼り付けたい方にも使っていただいています。

Future Studioについて

弊社の業務領域は、建築・店舗設計施工からクラフトドリンクの製造販売、映像制作、Webシステム開発まで非常に多岐にわたります。その分、さまざまな業種・現場の課題に直接触れる機会が多くあります。このMarkdown Viewerも、そうした現場の実感から生まれたツールの一つです。今後もそのような課題を起点に、解決できるサービスを作り続けていきます。

https://markdown-viewer.net/ にて公開中です。完全無料・登録不要。英語版（/en/）も提供しています。