屈指のコスパで習得可能！デザイン現場でも役立つMarkdownをマスターしよう！

2023.08.17 Thu

屈指のコスパで習得可能！デザイン現場でも役立つMarkdownをマスターしよう！

文・画像：塚本建未

日頃、スキルアップしたいと考えていても、仕事に追われる中でなかなか時間が取れないと悩む人は多いでしょう。

私自身もそんな思いを抱えながら、毎日原稿の締切に追われていますが「これではいけない」と思い、先日ノンデザイナー向けの無料オンラインセミナーに参加してみました。そのセミナーはノンデザイナーを対象としたものでしたが、デザイン関係者も数多く参加されていたようです。その中で印象的だったのが、コーディネーターの方の「デザイナーであまりMarkdownを使っている方はいないようですけど、マスターしておくと便利ですよ」という趣旨の発言です。

私は以前、エンジニアが主催する小さなプロジェクトにライターとして参加したことがあるのですが、その際に主催者に「Markdownは簡単だし、使えるようになると便利なので覚えておくと良いですよ」と勧められ、基本的な記法を覚えたことで、その後何度か役立ったことがあります。

今回、デザイナーをはじめとしたクリエイターの方々にもMarkdownは有用であると再認識できたので、本連載でもぜひMarkdownを紹介したいと思いました。屈指のコストパフォーマンスで習得でき、作業効率アップにも役立つMarkdownの使い方を早速学んでいきましょう！

Markdown（マークダウン）とは？
恩恵も大きい Markdownのメリット
意外と簡単！ Markdownの記法（使い方）
無料で使えるおすすめのMarkdown専用エディタ
便利で賢いMarkdownの活用方法
まとめ

Markdown（マークダウン）とは？

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語の一つです。
プレーンテキスト（コンピューター上で文書を扱うための一般的なファイルフォーマット）で書いた文書から手軽にHTMLを生成するために開発された文書フォーマットなので、その記法も簡素化され非常にシンプルなのが大きな特徴です。

その使い勝手の良さから、Markdownで多くの文書を作成するエンジニア・プログラマーが数多くいます。特にテキストベースのコンテンツを記述するのに適しており、コードエディタで文書を作成するのにも便利です。Markdownの特徴を以下にまとめます。

1. シンプルな記法なので簡単に覚えられる
Markdownはシンプルな記法を持っており、HTMLなどのような複雑な記述が不要です。見出し、リスト、リンク、画像などを簡単な構文で記述できます。

2. プレーンテキスト形式である
Markdownはプレーンテキストで書かれるため、どのテキストエディタでも編集が可能です。専用のエディタも存在しますが、特別なツールやソフトウェアをインストールしなくても利用可能です。

3. さまざまな用途で利用できる
MarkdownはWebページの作成だけでなく、ブログサービスや情報共有プラットフォームでの記事作成、Markdown記法に対応したツールでの活用など、様々な用途で利用できます。

4. 作業環境を選ばない
Markdownはプレーンテキストなので、どのプラットフォームやデバイスでも同じように表示されます。これにより、情報の共有や移動が容易に行えます。

5. バージョン管理と統合が容易である
MarkdownファイルはGitHubなどのバージョン管理ツールとの統合が容易です。ソースコードと同じリポジトリ内で文書を管理できます。

6. ネット上に数多くの情報が提供されている
Markdownは広く利用されており、多くのオンラインコミュニティでサポートや情報が提供されています。疑問点が生じた場合、解決策を見つけるのが比較的容易なのも便利なポイントです。

マスターするまでに要する時間や手間など、コストパフォーマンスという観点から見ると、Markdownは非常に優れたITスキルです。技術的なドキュメントを作成する際や、プロジェクトの説明をウェブ上でシンプルに表現する際などにも役立ちます。ただし、HTMLやCSSといったマークアップ言語のように、高度なレイアウトや対話的な要素の表現はできません。したがって、ブログの下書き、ノートやメモといった簡易的な文書に用いることがメインの用途となるでしょう。

恩恵も大きい Markdownのメリット

以下に、Markdownを使用する主なメリットをいくつか示します。

1. 学習が簡単である
Markdownは、HTMLやCSSよりも簡単に学習できるマークアップ言語です。Markdownの基本的な構文は、テキストエディタでテキストを入力する方法と似ており、すぐに使い始められます。ITスキル初学者が覚えやすい言語の一つですが、すでにHTMLやCSSをマスターしているデザイナーの方にとっても、短時間で使いこなせるようになるという点が非常に大きなメリットになります。

2. テキストベースで編集が容易
Markdownはテキストベースであるため、OSに標準搭載されているテキストエディタなどでも編集できます。その他にもVS codeやDreamweaverといった人気のエディタでも、Markdown記法で文書を作成することができます。

3. コード記法に似ている
Markdownはコード記法に似ているため、エンジニアとのコミュニケーションにも役立つスキルです。Markdownを使用することで、エンジニアが理解しやすいコードを生成できます。デザイナー以外のクリエイターの方でも、例えば、フリーランスのライターや編集者がMarkdownを身につけておけば、ITベンチャーのエンジニアやプログラマーといった職種の方と共同作業する際にも役立つでしょう。

4. オープンソースである
Markdownはオープンソースであるため、無料で使用できます。また、Markdownは世界中の開発者によって継続的に開発・改良されており知見が蓄積されています。

このように、Markdownはコンテンツを作成・編集・共有するための強力なツールとなるので、デザイン系の職種の方にも非常に有益なスキルの一つであると言えます。

意外と簡単！ Markdownの記法（使い方）

ここからは、実際にMarkdownの記法について説明します。

※エディタによってプレビュー表示が異なるため、それぞれで出力結果が確認しやすい表示例のエディタで紹介しています。複数のエディタが混在していますが、記述法自体は同じです。

1. 見出し
Markdownでは、記号の#を行頭に挿入することで見出しを作成できます（※行頭に挿入する記号の場合は記号の後に半角スペースが入ります）。#を## ◯◯、### ◯◯というように重ねることで、見出しのレベルが変更できます。HTMLタグのように開始タグ<h1>と終了タグ</h1>によってテキストを囲む必要がないので、素早く見出しを生成できます。以下が見出しの記述例です。

記述例

【見出しの記法】
   # 見出し1
   ## 見出し2
   ### 見出し3
   #### 見出し4
   ##### 見出し5
   ###### 見出し6

以下が見出しの表示例です。プレーンテキストがHTMLに変換されていることがわかると思います。

2. テキストスタイル（太文字・斜体・下線・訂正線）
Markdownでは、テキストスタイルも変更できます。記号の**、もしくは__でテキストを囲うことで太字のテキストスタイルになります。また、記号の*、もしくは_でテキストを囲うことで斜体のテキストスタイルになります。この他にも、記号の~~でテキストを囲えば、テキストに訂正線（打ち消し線）を加えることもできます。記法は太字が**太字**、__太字__、斜体が*斜体*、_斜体_、訂正線が~~訂正線~~のように記述します。

記述例

【テキストスタイルの記法】
   これは **太字** のサンプルです。
   これは __太字__ のサンプルです。
   これは *斜体* のサンプルです。
   これは _斜体_ のサンプルです。
   これは ~~訂正線~~のサンプルです。

以下がテキストスタイルの表示例です。

3. リスト（箇条書きリスト・番号付きリスト・チェックリスト）
Markdownでは、記号の- 、* を行頭に挿入することで箇条書きリストを作成できます。また、1. を行頭に挿入することで番号リストを作成できます。さらに、- [ ] を行頭に挿入することでチェックリストの作成も可能です。記法は箇条書きリストが- ◯◯、もしくは* ◯◯といった表記、番号リストが1. ◯◯といった表記、チェックリストが- [ ] ◯◯といった表記になります。以下がリストの記述例です。

記述例

【リストの記法】
   - リスト１
   - リスト２

    * リスト１
    * リスト２

    1. 番号リストA
    1. 番号リストB

    - [ ] タスク1
    - [x] タスク2

以下がリストの表示例です。

4. 引用
Markdownでは、記号の> を行頭に挿入することで引用を表現できます。> の数を増やすことで、二重引用、三重引用のように引用を重ねられます。記法は引用が>◯◯、二重引用が>>◯◯といった表記です。以下が引用の記述例です。

記述例

【引用の記法】
   > これは引用サンプルです。
   > これは引用サンプルです。
        
   >>これは二重引用サンプルです。
   >>これは二重引用サンプルです。
        
   >>>これは三重引用サンプルです。
   >>>これは三重引用サンプルです。

以下が引用の表示例です。

5. コード（コードブロック・インラインコード）
Markdownでは、コードブロックやインラインコードも記述できます。記法はコードブロックが```◯◯```、インラインコードが`◯◯`といった表記で、◯○にはコードやテキストを入力します。以下がコードブロックの記述例です。

記述例

【コードブロックの記法】
     ```
     body {
         font-size: 14px;
         color: #000;
          -webkit-text-size-adjust: inherit;
       }
     ```

以下がインラインコードの記述例です。

記述例

【インラインコードの記法】
   これは `<font color="red">`のサンプルです

以下がコードブロックとインラインコードの表示例です。

6. リンク（URLリンク・画像リンク）
Markdownでは、URLリンクや画像リンクも設定できます。記法はURLリンクが[リンク先タイトル](https://www.◯◯◯◯/ "◯◯")、画像リンクが![画像](https://◯◯◯◯)といった表記で、◯○にはHTMLのカラーコード、カラーネーム、RGB値を入力します。以下がURLリンクの記述例です。

記述例

【リンクの記法】
   [MdN](https://www.mdn.co.jp/ "MdN")

以下が画像リンクの記述例です。

記述例

【画像リンクの記法】
   ![画像](https://img.ips.co.jp/mdn/21/3221303007/3221303007-514x.jpg)

以下がURLリンクと画像リンクの表示例です。

7. テキストカラー
Markdownでは、テキストカラーも設定できます。記法は<span style="color: ◯◯; ">テキスト</span>といった表記で、◯◯にはHTMLのカラーネーム、カラーコード、RGB値を入力します。以下がテキストカラーの記述例です。

記述例

【テキストカラーの記法】
   <span style="color: red; ">MdN</span>
   <span style="color: #00FFFF; ">MdN</span>
   <span style="color: rgb(128,0,128); ">MdN</span>

以下がテキストカラーの表示例です。

8. 表
Markdown記法では、簡単なものであれば表（Table）を作成することもできます。|テキスト|というように、|の記号で文字を囲うことでセルになります。以下が表の記述例です。

記述例

【表の記法】
    | Left align | Right align | Center align |
    |:-----------|------------:|:------------:|
    | セル1        | セル2        | セル3         |
    | セル4        | セル5       | セル6         |
    | セル7        | セル8       | セル9         |
    | セル10      | セル11      | セル12        |

以下が表の表示例です。ヘッダーとなる下の行に|:----|、|----:|、|:----:|といった記号を入力することで同列セルの中の文字を右寄せ、左寄せ、中央寄せにすることもできます。

【Markdown記法一覧表】
ここまで紹介した記法を覚えるだけでも、メモやノートに利用できるMarkdownは使えるようになるでしょう。この他にも、いくつか記法の種類がありますので、以下に一覧表をまとめます。

種類	表記法	表記例
見出し	行頭に# を挿入（#の数によってh1〜h6まで表現可能）	#見出し1 ##見出し2
太文字	文字を**、または__で囲む	太字 __太字__
斜体	文字を*、または_で囲む	斜体 __斜体__
訂正線	文字を~~で囲む	~~訂正線~~
箇条書きリスト	行頭に- 、または* を挿入	- リスト1 - リスト2 - リスト3 リスト1 リスト2 *リスト3
番号リスト	行頭に1. を挿入	1.番号リストA 1.番号リストB 1.番号リストC
チェックリスト	行頭に- [ ] を挿入	- [ ] タスク1 - [×] タスク1
引用	行頭に> を挿入（#の数によって引用レベルを増やせる）	>引用 >>二重引用
コードブロック	文字を```で囲む	``` body { font-size: 14px; color: #000; -webkit-text-size-adjust: inherit; } ```
インラインコード	文字を`で囲む	`<font color="red">`
リンク	[リンク先タイトル](https://www.◯◯◯◯/ "◯◯")	[MdN](https://www.mdn.co.jp/ "MdN")
画像リンク	![画像](https://◯◯◯◯)	![画像](https://img.ips.co.jp/mdn/21/3221303007/3221303007-514x.jpg)
画像の挿入（サイズ指定）	<img width="数値" alt="代替テキスト" src="URL">	<img width="200px" alt="表紙" src="https://img.ips.co.jp/mdn/21/3221303007/3221303007-514x.jpg">
テキストカラー	<span style="color: ◯◯; ">テキスト</span>	<span style="color: red; ">MdN</span>
表	表組のMarkdownを入力	\| Left align \| Right align \| Center align \| \|:-----------\|------------:\|:------------:\| \| This \| This \| This \|
空行・改行	半角スペース2つ、<br>など	<br>
水平線	***を入力する	***
注釈	[^1] を入力	テキスト[^1] [^1]: 注釈内容
マークダウンのエスケープ	\を入力する	（特殊文字をエスケープできる）

上記の一覧表にある記法を覚えてしまえば、Markdownの基本はほぼマスターできたことになります。

無料で使えるおすすめのMarkdown専用エディタ

Markdownは、OSに標準搭載されたエディタやVS codeやDreamweaverなどのコードエディタでも編集可能ですが、Markdownに特化した専用エディタも数多く開発・提供されています。ここでは、無料でアカウント登録なしでも利用できるツールを4つピックアップして紹介します。

※ここで、紹介するツールは無料で利用可能なものをピックアップしていますが、ライセンス規約やサービス規約については変更される可能性もあります。利用規約は必ず自分の目でも確認しておきましょう。

1. MacDown

名前からも分かるようにmacOS用のMarkdown専用エディタです。公式サイトからダウンロードしてインストールすれば、アカウントの登録なしですぐに利用できます。機能はシンプルで、軽量なエディタなのでサクサク動きます。日本語対応しているので、設定や操作も安心して利用できます。

DATA: https://macdown.uranusjr.com/
対応OS：macOS
日本語化：対応済
価格：無料
FAQのページ

2. Joplin

無料で利用できるMarkdownに対応したオープンソースのメモ＆ToDo管理アプリです。こちらも、公式サイトからダウンロードしてインストールすれば、アカウントの登録なしですぐに利用できます。非常に機能が豊富で、数式表現、Fountain構文、Mermaid（作図機能）、Typographer（記号文字）などにも対応しています。さらに、Google ChromeやFirefoxといったブラウザに拡張機能をインストールすることもできます。加えて、モバイル端末用にiOS版とAndroid版のアプリも提供しています。より高度でマニアックなMarkdown記法による記述を実現可能なので、Markdown上級者におすすめのアプリです。

DATA: https://joplinapp.org/
対応OS：macOS、Windows、Linux、iOS、Android
日本語化：対応済
価格：基本機能は無料で利用可能。オプションの有料サービスあり
利用規約のページ

3. Zettlr

無料で利用できるオープンソースのMarkdown専用エディタです。こちらも公式サイトからダウンロードしてインストールすれば、アカウントの登録なしですぐに利用できます。左右の分割画面でプレビューするのではなく、記述するとすぐにHTMLに出力された状態で表示される（ディスプレイ画面と処理内容が一致する）WYSIWYG（What You See Is What You Getの略）形式のエディタです。クロスプラットフォーム対応で、macOS（intelとAppleシリコンの両方に対応）とWindows、Linuxなど複数のOS環境で利用可能です。

DATA: https://www.zettlr.com/
対応OS：macOS、Windows、Linux
日本語化：対応済
価格：無料
FAQのページ

4. Markdown Editor

macOSのApp StoreからダウンロードできるMarkdown専用エディタです。Appleから認証された公式アプリなので安心して端末にインストールできます。Satoshi Iwaki氏という開発者名から、おそらく日本人ディベロッパーによって開発されたエディタであるということがわかるので、日本語対応もしっかりしているように思います。機能はシンプルな軽量のエディタですが、詳細なMarkdown記法にも対応しています。

DATA: https://apps.apple.com/us/app/markdown-editor/id1458220908?l=ja&ls=1&mt=12
対応OS：macOS
日本語化：対応済
価格：無料

便利で賢いMarkdownの活用方法

最後にMarkdownの活用法について説明します。使い方次第で様々な可能性を発揮できる言語なので、下記の事例を参考にして自分なりの活用方法を考えてみましょう。

1. Markdownに対応したサービスでの作業効率化

Slack、Notion、GitHub、Google ドキュメントなど、Markdown記法による記述が機能に組み込まれているツールが多数存在します。上の画像は、Googleドキュメントのツールにある設定というメニュー項目から「Markdownを自動検出する」をONにする方法です。このように、普段使っているツールが実はMarkdownに対応しているといったケースは少なくありません。

また、Markdownに対応したWebサイト作成サービスでは、Markdownで記述したテキストをそのままWebページとして作成できます。WordPressでも、プラグインを追加することでMarkdown記法を利用できるようになります。その他にも、noteなどのブログサービスQiitaやZennといった情報共有プラットフォームでも、Markdownで記述したテキストをそのままブログ記事として投稿できます。

2. テキストエディタを使った原稿作成のパフォーマンスアップ

Markdownでは、見出しや箇条書き、リンク、画像など、さまざまな要素を簡単に記述することができるので、テキストエディタを使って原稿を作成するときの作業効率アップできます。

3. Markdownで数式も記述可能

Markdownでは、テキストエディタに拡張機能などを追加インストールすることで数式を記述できます。数式を記述するには、$で囲んで記述します。例えば、微分関数のf(x)=x²+1という数式を記述したい場合は$f(x) = x^2 + 1$と記述すると、上の画像のように数学の特殊記号や2乗などの特殊表記も表現できるようになります（VS Codeでの事例）。

4. 議事録をリアルタイムで作成できる
Markdownは、議事録をリアルタイムで作成するのにも便利です。議事録をMarkdownで作成するには、議事録の項目を箇条書きで記述します。また、議事録の要約を記述したり、議事録の参加者をリストで記述したりすることもできます。

ここまで、Markdownは覚えるのが簡単であると再三述べてきましたが、実は覚えなくても簡単に利用できる方法もあります。例えば、コードスニペットとしてクリップボードアプリにMarkdownの記法を登録しておけば、さらに効率良くリアルタイムで議事録を記録できるでしょう。

5. ちょっとしたメモやブログの下書きに便利
Markdownは、ちょっとしたメモやブログの下書きに便利です。Markdownでメモを作成するには、テキストエディタでMarkdownを記述できます。

6. 説明資料やプレゼンテーションファイルに変換もできる
Markdownで記述したテキストを説明資料やプレゼンテーションファイルに変換することもできます。Markdownで記述したテキストをPDFに変換する場合はMarkdownコンバーターMarkdownで記述したテキストをPowerPointに変換する場合はMarkdown to PowerPointといったツールを使用することで対応可能です。

まとめ

本記事を書くにあたって、改めてMarkdownについて調査してみましたが、エディタの拡張機能などを追加することにより数式や作図などにも対応可能で、思った以上に奥が深い言語であることがわかりました。当初はシンプルなMarkdownなので、説明もサクッと簡単にまとめられるものと高を括っていたのですが、結局のところ説明内容が増えてしまいました。それでも、ここでは紹介しきれなかった記法も沢山ありますので、気になる方は他の記事などもチェックしてみるとよいでしょう。

Markdownは「夏休み期間はプライベートも充実させたいけど、何か少しでもスキルアップしたい！」といったニーズにも応えてくれるはずです。もちろん、得意満面でアピールできる類の知識や技術ではありませんが、一度覚えてしまえば一生使えるITスキルであることは間違いありません。興味のある方は本記事を参考にして、ぜひマスターしてみてください。

著者プロフィール

塚本建未: ライター・編集者・イラストレーター; フリーランスのライター・編集者・イラストレーター。高校はデザイン科を卒業し、大学は、文学部とスポーツ科学部の２つの学部を卒業。フィットネス・トレーニング関連の専門誌で編集者・ライターとしてキャリアを積む。メインの活動の場をWebメディアに移行してからは、ITツール紹介やWebマーケティング分野などを得意領域として活動を続けている。