本文へ移動
うぇぶ、ひゃっくり|Webサイト100選
  • ホーム
  • はじめまして
  • サイトについて
  • お問い合わせ
うぇぶ、ひゃっくり|Webサイト100選
  • ホーム
  • はじめまして
  • サイトについて
  • お問い合わせ

カテゴリー

  • Webデザイン分析 (26)
  • 考えごと (17)
  • 学んだこと (13)
  • 学習ログ (10)
  • AI活用ログ (4)
  • 制作記録 (3)
ホームプログラミングMarkdownとは?AIに伝わりやすい書き方と、私がブログで使っている方法

Markdownとは?AIに伝わりやすい書き方と、私がブログで使っている方法

プログラミング | HTML・CSS・JavaScriptから、Python・Markdown・Scratchまで、コードを書いてWebページや作業を形にする方法を、実際に使ってみた体験と一緒にまとめています。 つまずいたところや乗り越え方も書いています。

2026/06/25 プログラミング 学習ログ 約10分
Markdownとは?AIに伝わりやすい書き方と、私がブログで使っている方法

GitHub(プログラムを保存・公開するサービス)やNotion(メモアプリ)で書いたことがある人は見たことがあるかもしれない、あの「#」や「-」で書く形式——それがMarkdownです。最初に見たとき「なんか記号が多いな」と思っていたのですが、使ってみると文章の構造が一気に整理されて驚きました。

はじめに

ひゃっくり君
ひゃっくり君

Markdownって普通の文章とどう違うの?

記号で構造を表す軽量な書き方だよ。#で見出し、-で箇条書きになる。HTMLよりシンプルで、AIとも相性が良いと言われている。
AIMI.
AIMI.

この記事でわかること

  • Markdownの基本の書き方(見出し・箇条書き・強調)
  • AIの時代にMarkdownが注目される理由
  • 使えるサービスと気をつけたい点
  • 私がブログで使うようになったきっかけ

結論

Markdown(記号で見出しや箇条書きを書く書き方)は、少ない決まりで文章の組み立てを表せるので、AIにも人にも伝わりやすい書き方です。まずはメモやブログの下書きで「#」と「-」から使ってみるのがおすすめです。

ノートパソコンに向かって作業する人

Photo by Christin Hume on Unsplash

Markdownとは何か

Markdownは2004年に、アメリカのジョン・グルーバー(John Gruber)さんが作った、記号で文章の組み立てを表す簡単な書き方です。シンプルな記号で文章に見出しや箇条書きなどの組み立てを付け、そのあとHTMLに変換して表示されます。

例えば「# 見出し」で大見出し、「## 小見出し」で小見出し、「- 項目」で箇条書きになります。

Markdownの基本的な書き方

Markdown記法とHTML出力の対応図

見出しの書き方


# 大見出し(H1)
## 中見出し(H2)
### 小見出し(H3)

箇条書きと番号リスト


- 項目1
- 項目2
- 項目3

1. 手順1
2. 手順2
3. 手順3

強調・リンク・画像


**太字**
*斜体*
[リンク](URL)
![画像](URL)

なぜAI時代にMarkdownが注目されるのか

ChatGPTなどのAIはMarkdown形式で出力することが多く、構造化されたテキストとして扱いやすいのが理由です。

プロンプト(AIへの指示文)をMarkdownで整理すると、AIが意図を理解しやすくなるとも言われています。

  • 背景
  • 依頼内容
  • 守ってほしい条件

このように分けると、AIが意図をくみ取りやすくなり、求めていた答えが返ってきやすくなります。

Markdownが使える主なサービス

  • GitHub(README.md=作品の説明書のファイル)
  • Notion
  • Obsidian(メモどうしをつなげて管理するアプリ)
  • Zenn・Qiita(プログラミングの記事を投稿できるサイト)
  • ChatGPT / Claude
  • VS Code

Markdownのよい点と気をつけたい点

よい点

  • シンプルで覚えやすい
  • どこでも書ける
  • HTMLに変換しやすい
  • AIとの相性が良い
  • 管理しやすい

気をつけたい点

  • サービスごとに書き方の違いがある
  • 複雑なレイアウトは苦手
  • 表(テーブル)がやや書きにくい

Webデザイン学習への活用

Markdownは学習メモやドキュメント整理に非常に便利です。NotionやObsidianで管理すれば復習もしやすくなります。

GitHubに作品を置くときの説明書(README)もMarkdownで書くので、作品集(ポートフォリオ)づくりにも役立ちます。

Markdownの種類(方言)

Markdownには標準仕様のほかに、GitHubで使われる書き方(GitHub Flavored Markdown)や、Notion独自の書き方などがあります。

基本的な記法は共通していますが、テーブルやコードブロックなど一部の書き方が異なるため注意が必要です。

私がMarkdownを使うようになったきっかけ

ここからは、私自身がどのようにMarkdownと出会い、どう使っているかを書いてみます。

AIで構成をまとめていたときに出会った

Markdownを意識するようになったのは、生成AIのClaudeを使って、記事やサイトの構成をまとめていたときでした。
AIの回答の中に、「#」や「-」で整理された文章がよく出てきたのです。
最初は「この記号は何だろう」と思っていましたが、調べてみるとそれがMarkdownという書き方でした。

見出しや箇条書きがひと目で分かる形になっていて、内容の構造が自然と見えてきます。
そこから、自分でもメモや構成案をMarkdownで書くようになりました。

情報をシンプルに整理できるようになった

Markdownで書くようになっていちばん変わったのは、情報をシンプルに整理できるようになったことです。

ひゃっくり君
ひゃっくり君
Markdownって、飾りが少なくて不便じゃない?
使える書き方が少ないからこそ、何が大事で何が補足かを考えるようになったよ。
AIMI.
AIMI.

見出し、箇条書き、強調という限られた書き方しか使わないため、自然と「何が大事で、何が補足なのか」を考えるようになりました。

装飾に迷う時間が減った分、内容そのものに集中できるようになったと感じています。
Webデザインの学習でも、ページ構成を考えるときに見出しの階層を意識しやすくなりました。

AIとのやりとりでも便利だった

チャット画面のノートパソコン

Photo by Icons8 Team on Unsplash

AIに指示を出すときにも、Markdownは役に立っています。
ひとつは、トークン数を節約できることです。
トークンとは、AIが文章を処理するときの単位のようなもので、使える量に上限があったり、使った量に応じて料金がかかったりすることがあります。

Markdownは記号が少なくシンプルなので、同じ内容でも余計な装飾を含む形式より短く書ける場合があります。
もうひとつは、情報を分かりやすく整理して伝えられることです。
見出しや箇条書きで条件を分けて書くと、AIにも人にも意図が伝わりやすくなるように感じています。

ひゃっくり君
ひゃっくり君
AIにお願いするときも、書き方で変わるんだね。
整理して伝えると、自分の頭の中も整理されるのがうれしいところだよ。
AIMI.
AIMI.

AIを使う機会が増えた今、Markdownは「人とAIの両方に伝わる共通の書き方」として、覚えておいて損のない形式だと考えています。

ブログの下書きやメモをAIに読ませるようになってから、見出しを「#」で書くだけで、まとめてもらう内容がずっと分かりやすくなったと感じました。

AIを何から学べばいいかは「AI時代に何から学ぶ?専用AI・GPTs・MCPを整理する5つの段階」でくわしく書いています。

この記事のまとめ

Markdownは、記号で文章の組み立てをシンプルに表せる書き方です。AI時代との相性も良く、今後さらに使用機会は増えていくと考えられます。

まずはGitHubのREADMEやNotionのメモから触れてみるのがおすすめです。

よくある質問

Q. MarkdownとHTMLはどちらを学ぶべきですか?

A. 目的によって使い分けます。ブラウザに表示するWebページを作るならHTMLが必須です。一方、ブログの下書きやドキュメント、GitHubのREADMEなど「文章を素早く構造化したい」場面ではMarkdownの方が圧倒的に速く書けます。実務では両方使うケースがほとんどです。

Q. WordPressでも使えますか?

A. 今のWordPressの編集画面(ブロックエディター)では、行の先頭に「#」や「-」を打つと、自動で見出しや箇条書きに変わります。記事全体をMarkdownで書きたい場合は、プラグインを使う方法もあります。

Q. AIと相性が良い理由は?

A. 見出しや箇条書きで「どこまでが一つのまとまりか」がはっきりするので、AIが内容の区切りを読み取りやすいからです。ChatGPTなどのAI自身も、答えをMarkdownの形で返すことが多くあります。

参考文献

  • Markdown公式サイト
  • CommonMark

あわせて読みたい記事

  • HTMLとは何か?Web制作の基礎
  • CSSとは?デザインの基本
  • JavaScriptとは?動きをつける仕組み

うぇぶ、ひゃっくり|Webサイト100選

この記事をシェア

X(Twitter) LINE Facebook
#AI活用 #初心者向け

この記事が役に立ったら、他の学習記事もチェック!

学習記事一覧へ →
‹ 前の記事 プログラミング教育で育つものは?パパートの考えと教室で見た子どもの変化 プログラミング教育で育つものは?パパートの考えと教室で見た子どもの変化 次の記事 › AIで勉強するときの落とし穴|考える力を失わない5つの使い方 AIで勉強するときの落とし穴|考える力を失わない5つの使い方

関連記事

JavaScriptとは?HTML・CSSとの違いと、つまずきの乗り越え方

JavaScriptとは?HTML・CSSとの違いと、つまずきの乗り越え方

はじめに この記事では、JavaScriptとはどんな言語なのか、Javaとの違...

2026.06.16 12分で読める
Scratchとは?子ども向けプログラミングの始め方と、教えてみて気づいたこと

Scratchとは?子ども向けプログラミングの始め方と、教えてみて気づいたこと

Scratchとは? Scratchは、子どもから初心者まで幅広く使われているビ...

2026.09.14 9分で読める
Pythonとは?AIで使われる理由と、作業の自動化に使ってみた話

Pythonとは?AIで使われる理由と、作業の自動化に使ってみた話

Pythonとは?初心者でもわかる基本 Pythonは世界中で利用されているプロ...

2026.07.29 8分で読める

Webデザイン100選まで

残り 74 サイト

26 / 100 件

プロフィール

AIMI.

AIMI.

Web制作と学びの記録

Webデザインと子どもに関わる仕事をしながら、 日々の「気づき」や「なぜ?」を大切にしています。 仕事のこと、学んだこと、子どもの成長や教育について考えたことを、 自分なりに整理しながら記録しています。

カテゴリー

  • Webデザイン分析 (26) ›
  • 学習ログ (10) ›
  • Webデザイン (2) ›
  • プログラミング (6) ›
  • 参考書 (2) ›
  • AI活用ログ (4) ›
  • 制作記録 (3) ›
  • 学んだこと (13) ›
  • 考えごと (17) ›

人気の記事

  1. 1 HTMLとは?ゼロからWebページを作る基本と、私が最初に作ったページ
    HTMLとは?ゼロからWebページを作る基本と、私が最初に作ったページ

    2026.06.30

  2. 2 Webデザイン初心者におすすめの参考書は?図解の本が合った私の選び方
    Webデザイン初心者におすすめの参考書は?図解の本が合った私の選び方

    2026.10.05

  3. 3 CSSとは?できること・書き方の基本と、余白でつまずいた私の練習法
    CSSとは?できること・書き方の基本と、余白でつまずいた私の練習法

    2026.07.15

アーカイブ

  • 2026年10月 (10)
  • 2026年9月 (10)
  • 2026年8月 (11)
  • 2026年7月 (10)
  • 2026年6月 (11)
  • 2026年5月 (10)
  • 2026年4月 (11)

タグ

  • #Webデザイン分析26
  • #心理学16
  • #Webデザイン学習15
  • #初心者向け12
  • #子育て・教育12
  • #AI活用9
  • #プログラミング教育6
  • #職業訓練校5
  • #効率化・タイパ5
  • #ポートフォリオ制作5
  • #歴史・思想4
うぇぶ、ひゃっくり|Webサイト100選

一度見たら、止まらない。Webデザインの連鎖。 実在するWebサイトの分析と、子ども向けプログラミング教室で教える経験から、「わかりやすく伝える」工夫を言葉にしています。

カテゴリー

AI活用ログ Webデザイン分析 制作記録 学んだこと 学習ログ 考えごと

サイト情報

ホーム はじめまして サイトについて お問い合わせ

© 2026 うぇぶ、ひゃっくり|Webサイト100選.