第0回｜マークダウンとは何か？書き方と特徴の基礎をおさらい

はじめに

このシリーズ「Markdownをデザインする：文章のUI設計入門」では、文章やドキュメントをどう美しく、読みやすく整えるかを考えていきます。

デザイナーが記事ページのデザインを頼まれた際やエンジニアがよしなに作って欲しいと頼まれた際に作れるよう、

• そもそもMarkdownって何？
• HTMLとどう違う？
• どう設計したら読みやすい？

そんな基本の“地盤”を、この記事で押さえておきましょう。

Markdownとは？

Markdownは、プレーンテキスト（普通の文字入力）で書ける、軽量マークアップ言語です。
2004年にJohn Gruber氏が、「読みやすく、書きやすく、変換しやすい記法」として提案しました。

HTMLではタグで囲む必要があるのに対し、markdownではシンプルな書き方で、見出し・リスト・強調などが表現できます。

▼HTMLでの表現

<h1>見出し1</h1>

<ul>
  <li>箇条書きアイテム</li>
  <li>もうひとつ</li>
</ul>

<p><strong>太字</strong>はこのように表現</p>

▼markdownでの表現

# 見出し1

- 箇条書きアイテム
- もうひとつ

**太字**はこのように表現

このテキストをHTMLやWebドキュメントに変換すると、視覚的に整った文章になります。

Markdownでできること

✅ よく使われる基本構文

これだけで、情報の階層や意味を持った文章が書けるのがMarkdownの強みです。

Markdownでできないこと・制限

⚠️ 限界もあります。Markdownは“構造は書けても、装飾までは書けない”記法です。

つまりMarkdownは、あくまで「構造と意味を持った情報」を書くための記法です。
見た目（装飾・レイアウト）を整えるには、別途CSSやデザインの力が必要になります。

なぜ今、デザイナーがMarkdownを“デザイン”するのか？

今や多くのUI・ドキュメント・WebサービスでMarkdownが活用されており、そこに「読む体験」が存在します。
読まれることを意識しないMarkdownは、整っていないUIと同じです。

たとえば：

• 段落が詰まりすぎて読みにくい
• 情報の階層が不明瞭
• 引用やコードが目立たずスルーされる
• 色や余白が悪くて集中しにくい

こういった課題をUI・タイポグラフィ・情報設計の観点から解決するのが、
**「Markdownをデザインする」**というアプローチです。

このシリーズで扱うのは「文章のUI設計」

Markdownは、HTMLと違って**“読むための最小限の構造”**に特化した記法です。
だからこそ、その読みやすさ・伝わりやすさは「デザイン」によって大きく左右されます。

このシリーズでは、次のようなテーマを扱っていきます：

• 読みやすさを考えた段落・行間・階層設計
• CSSで整えるタイポグラフィやコードスタイル
• UIとして美しいドキュメントページの設計法
• ブランドに沿ったMarkdownのスタイルガイド作成

まとめ

• Markdownは「構造を書く」ための軽量マークアップ
• HTMLよりシンプルだが、できることは限られている
• 見た目・読みやすさはCSSやデザイン設計で整える
• デザイナーにとってMarkdownは、“文章のUI”を設計する素材