こんにちは。麗です。

Markdownで書いた文章をHTMLへ変換し、変換後のコードと実際の見た目を並べて確認できるツールを作りました。

HTMLが必要なときに使えるのはもちろん、**「Markdownで書いた記号が、裏側ではどのようなコードになっているのか」**を眺めて楽しめるツールでもあります。

今回は、ツールの使い方と、公開後に考え始めた今後の発展について紹介します。

Markdown → HTML 変換ツール

作品紹介ページを見る

MarkdownをHTMLへ変換するツールです

「そもそもMarkdownって何？」「HTMLとは？」という方もいると思うので、簡単な説明から始めますね。

Markdownは、文章に記号を加えることで、見出しや太字、リンクなどを表現できる書き方です。

AIが出力した文章やブログの編集画面などでもよく使われているので、「見たことがある」という方も多いかと思います。

たとえば、文章の先頭に##を付けると見出しになります。

## MarkdownをHTMLへ変換するツールです

Markdownそのものを知らない人でも感覚的に文章を読めますし、覚えることも少ないので、比較的書きやすい記法です。

一方、Webページでは、HTMLという言語が使われています。

HTMLで見出しを書く場合は、次のようになります。

<h2>MarkdownをHTMLへ変換するツールです</h2>

学校の授業などで習ったことがある方も多いのではないでしょうか。

知名度の高い言語ではありますが、自分で書いたり内容を理解したりするためには、少し勉強が必要です。

それに、ちょっと面倒くさい。

MarkdownとHTMLを比べてみると、

## 見出し
<h2>見出し</h2>

圧倒的にMarkdownのほうが、人間にやさしいことが分かるかと思います。

文章がどう変換されたのかを確認できます

今回作った「Markdown → HTML 変換ツール」は、次のような記法の変換に対応しています。

  • 見出し
  • 太字
  • リンク
  • 箇条書き
  • 引用
  • コード
  • 表

変換されたHTMLコードは、見やすいように色分けして表示されます。

さらに、HTMLが実際にどのような見た目になるのか、プレビューも同時に確認できます。

Markdown→HTML変換ツール
Markdown・HTML・プレビューが横並びで見れます

プレビューの最終的なデザインは、HTMLを使用するサイトやサービスによって変わります。

それでも、MarkdownがHTMLへ変換され、そのHTMLが画面上に表示されるまでの流れを、一つの画面で確認できるようにしました。

HTMLコードが必要なときにも使えます

変換したHTMLは、ボタンひとつでコピーできるようになっているため、そのまますぐに使えます。

たとえば、次のような場面で活用できます。

  • 自作のWebサイトやブログへ記事を掲載する
  • HTML入力にしか対応していない管理画面を使う
  • WordPressのHTMLブロックへ文章を貼る
  • Markdownで作った原稿を別のシステムへ移す
  • AIが生成したMarkdownをHTMLとして使う

「普段はMarkdownで文章を書いているけれど、掲載先ではHTMLが必要」という場面は、意外とあります。

このブログも、そのうちの一つです。

私は、Markdownで書いた文章をHTMLへ変換して、ブログとして公開する仕組みを使っています。

現在は自動で変換されるようにしていますが、以前はHTMLコードを直接書いたり、Markdownで書いた記事をAIに変換してもらったりしていました。

そんな私自身が感じていた「ちょっと面倒くさい」を解決するために作ったのが、この「Markdown → HTML 変換ツールなんです。

Markdown → HTML 変換ツール

作品紹介ページを見る

小さなこだわりポイント

実はこのツール、表向きは**「変換ツール」**なのですが、ほんの少しだけ学習ツールの要素を取り入れています。

コード内のHTMLタグへマウスカーソルを重ねると、そのタグが何を表しているのか、簡単な説明が表示されます。

スクリーンショット 2026-08-05 093510.png

HTMLタグにカーソルあてた画像
HTMLタグ(h2)にカーソルあてると見出しタグとわかる

たとえば、<h2>へカーソルを重ねると、それが見出しを表すタグであることを確認できます。

HTMLに慣れていないと、コードを見ても、最初は記号の集まりに見えてしまうかと思います。

<blockquote>
  <p>将来の夢は消防士です</p>
</blockquote>

ですが、Markdownの入力内容やプレビューと一緒に眺めることで、「このコードが引用を表しているのか」と、少しずつ関係が見えてくるのではないかと考えました。

ブラックボックスを少しだけ半透明にしたい

MarkdownやHTMLを日常的に使っている人は、IT関連の仕事をしている方が多いと思います。

しかし、最初に書いたとおり、MarkdownはAIツールの中でもよく使われており、IT関連以外の方が目にする機会も増えました。

Claude CodeのようなAI開発ツールを触り始めると、目にする機会はさらに増えていくと思います。

自分でサイトを管理したり、AIを使ってWebサイトを作ったりする方も、今後ますます増えていくのではないでしょうか。

そして、私自身がMarkdownからHTMLへの変換を自動化しているように、利用者がHTMLへ直接触れなくても更新できる仕組みは、今後さらに増えていくと思います。

便利になる一方で、そのぶん中で何が起きているのか分からない**「ブラックボックス」**も増えていきます。

そのブラックボックスを完全に透明にするのは難しいかもしれません。

それでも、少しだけ半透明にできたらいいなと思ったことが、このツールの開発に込めた想いです。

公開後、発展の可能性を考え始めました

このツールを公開をしてから、今後追加できそうな機能について考え始めました。

（今もずっと考えています。）

Xでアドバイスを募ると、フォロワーさんからは、次のようなアイデアをいただきました。

  • Mermaid形式への対応
  • CSSを含めたファイルのダウンロード

Mermaidは、テキストからフローチャートなどの図を作れる記法で、CSSは、文字の大きさや色、余白など、Webページの見た目を整えるための仕組みです。

こうした機能まで加われば、変換したHTMLをコピーするだけではなく、そのままWebページとして使えるツールに近づいていきます。

どちらも、とても面白いアイデアです。

ただし、思いつくまま機能を追加すると、想像以上に実装が大がかりになったり、機能が多すぎて使いにくいツールになったりする可能性があります。

MarkdownをHTMLへ変換したい人は意外と多い

そこで、そもそもMarkdownをHTMLへ変換するのは、どのような人なのかをあらためて整理してみました。

大きく分けると、

  • 結果のHTMLが欲しい人

  • 変換結果を検証したい人

  • 変換の仕組みを理解したい人

の3種類に分かれます。

HTMLを「使いたい人」

  • HTML入力しかできない古いCMSを使う人
  • 独自の管理画面に記事を貼る人
  • WordPressなどのHTMLブロックへ貼る人
  • メールマガジン用のHTMLを作る人
  • 小規模なWebページを手作業で更新する人
  • Markdown原稿をWeb掲載用コードに変えたい人
  • AIが生成したMarkdownをHTMLとして納品したい人
  • HTML形式を求められる業務資料を作る人

HTMLを「確認したい人」

  • Markdownが何に変換されるか知りたい人
  • 見出しやリストのHTML構造を確認したい人
  • 意図したタグが出力されているか確かめたい人
  • 表やコードブロックの変換結果を試したい人
  • Markdown変換ライブラリごとの差を確認したい人
  • ブログ投稿前に表示崩れを確認したい人
  • AIが生成したコードをそのまま信用したくない人
  • HTMLを少しずつ理解したい非開発者

MarkdownやHTMLを「学びたい人」

  • Markdownを初めて使う人
  • HTMLを初めて勉強する人
  • Markdownは使えるが、HTMLは分からない人
  • HTMLタグと実際の見た目を結びつけたい人
  • プログラミング学習を始めた人
  • バイブコーディングで中身がブラックボックスになっている人
  • Web制作に興味はあるが、教材は重く感じる人
  • 子どもや学生にWebの仕組みを見せたい人
  • 講師として変換の流れを実演したい人

文章を書く人

  • ブロガー
  • ライター
  • 編集者
  • 技術記事を書く人
  • READMEを書く人
  • マニュアルや手順書を書く人
  • 社内ドキュメントを作る人
  • NotionやObsidianなどで原稿を書く人
  • ChatGPTにMarkdownで文章を作らせる人
  • 複数の媒体へ同じ原稿を展開したい人

開発や制作をする人

  • Markdownエディタを作っている人
  • Markdownパーサーを実装している人
  • 静的サイトを作っている人
  • CMSを開発している人
  • ブログシステムを作っている人
  • プレビュー機能を実装している人
  • Markdownライブラリを選定している人
  • サニタイズ後のHTMLを確認したい人
  • CSSを当てる前のHTML構造を見たい人
  • テスト用HTMLを手早く生成したい人

移行や変換をする人

  • Markdown原稿を古いシステムへ移したい人
  • Markdown対応サービスから非対応サービスへ移る人
  • GitHub上の文書をWebページへ移したい人
  • 過去のMarkdown資料をHTMLで保存したい人
  • Markdownで作った文章を別のシステムへ投入したい人
  • 納品形式としてHTMLを求められた人

単発で困って検索する人

  • 「MarkdownをHTMLにする方法」が急に必要になった人
  • AIからMarkdownで返ってきて扱いに困った人
  • 貼り付けたら記号のまま表示されてしまった人
  • Markdownプレビューと実際のHTMLの違いが気になった人
  • <h2>や<strong>の意味をその場で知りたい人
  • インストールせずに一度だけ変換したい人

これらは愛用しているAIに書き出してもらいましたが、想像以上に利用者や用途が多岐にわたっており、驚きました。

たとえば、一度だけ使いたい人にとっては、ダウンロードやインストールが必要なツールは重荷です。

反対に、HTMLコードだけが欲しい人にとって、言語の説明が何度も表示されるとノイズになります。

全員に良いと思ってもらえるツールにするのは難しく、発展させるのであれば、誰に、どのように使ってほしいのか絞る必要があると感じました。

実用ツールか、体験ツールか

今後の発展には、いくつかの方向が候補にあります。

一つは、実務で使いやすいツールにする方向です。

HTMLやCSSをまとめてダウンロードできるようにしたり、さまざまな掲載先に合わせた形式を選べるようにしたりすれば、仕事やサイト運営で使いやすくなります。

ただし、HTMLが必要になる場面は幅広く、それぞれの用途で必要な機能も異なるのが難しいところです。

もう一つは、MarkdownとHTMLの関係を気軽に体験できるツールにする方向です。

入力したMarkdownのどの部分が、どのHTMLタグになったのか。

そのHTMLが、画面上ではどのように表示されるのか。

難しい説明を最初から読むのではなく、文章を書いたりカーソルを動かしたりしながら、自然に仕組みが見えてくる場所です。

利用者は少し限られるかもしれませんが、私が考えている**「ブラックボックスの半透明化」**に近いのは、こちらの方向だと思います。

何より、MarkdownからHTMLへ変換するツール自体は、すでに数多く存在しています。

このツールならではの違いを作るという意味でも、体験ツールとして発展させるのはよいのではないかと思いました。

小さな変換ツールの、その先へ

今は、MarkdownをHTMLへ変換するだけの、とてもシンプルなツールです。

しかし、公開してから使う人や用途について考えてみると、変換、確認、学習という複数の可能性が見えてきました。

まだ、今後どの方向へ育てるかは決めていません。

実用性を高めるのか。

MarkdownとHTMLのつながりを楽しむ体験を深めるのか。

あるいは、両方を無理なくつなげる方法があるのか。

そのあたりを、もう少し考えていきたいところです。

Markdown → HTML 変換ツール

作品紹介ページを見る