メモ・資料作成に便利な「マークダウン記法」
～詳しい書き方と便利なツールをご紹介～


メモ・文書・ウェブサイト等の作成に応用できる手軽で便利なフォーマット、「マークダウン記法」をご存じでしょうか。とても覚えやすく、また構造化・閲覧が容易なので、実はLUCA自身、この記法を日常的に使っています。

一度ルールに沿って書いてしまえば、専用アプリ・ブラウザなどでウェブページのようにきれいにレイアウトされた状態で表示することができるフォーマットなので、視覚障碍者ユーザの皆さんにとってもとても使いやすい仕組みなのではないかと思います。

そこで今回の記事ではそんなマークダウン記法の概要、基本的な書き方、そして便利なツールなどについてご紹介していきたいと思います。

✏ 今回もご紹介しているツール・アプリケーションなどは基本的にスクリーンリーダーで操作できることを確認してから掲載しています。


デスクトップPCのキーボードを打っている茶色いうさぎのイラスト。

Ⅰ マークダウンの概要

それでは「マークダウン記法」の具体的な書き方や便利なツールについてご紹介する前に、まずはマークダウンの概要から見ていきたいと思います。なお、概要について既にご存知の方は次項の内容から御覧ください。

「マークダウン」とは、アメリカ合衆国、フィラデルフィア出身のライター・コラムニストであるジョン・グルーバー（John Gruber）によって、2004年に開発されたフォーマット(記法)の一種で、デジタル文章を作る時に使用するHTML（HyperText Markup Language）などのマークアップ言語を簡略化するためにプログラムされました。

「日本語マークダウンユーザー会」では、下記4点をマークダウンの特徴としています。

1つ目の特徴でいう「構造」とは文章を構成する「見出し」・「段落」・「箇条書き」・「表」などの部品のことで、マークダウンではこういった構造がしっかりと定義されていることで、全体の内容が読みやすくなっているんです。

そしてこのような構造化された文章を実装するためには、通常HTML・XMLなどの「マークアップ言語」という複雑な記法を使う必要があるのですが、マークダウンでは専門的な知識を必要とすることなく、簡単に構造の作成が可能となっています。

...と言葉で説明してもわかりづらいかと思いますので、よければ下記ボタンからコンテンツを展開してみてください。こちらはMD（マークダウン）ファイルをそのままページ中に埋め込んだものなので、イメージが掴みやすいかと思います。

埋め込みマークダウンサンプルを表示

このように、マークダウンではただ文字を羅列しただけのテキストファイルとは違い、わかりやすい「構造」を作っていくことができるんです。


Ⅱ マークダウンの書き方

さて、マークダウンの概要について簡単に解説したところで、ここからは本題1つ目、マークダウン記法の基本的な書き方についてご紹介します。なおマークダウンを書くための「MDファイル」は任意のテキストエディタでテキストファイルを作成後、拡張子の「.txt」を「.md」に変えるだけで作ることができますので、ぜひ読みながら実際に書いてみてください。

マークダウンでは基本的に入力した文字がそのまま表示されるため、日本語を入力する場合でもエンコードする必要なく、直接記載することが可能です。

ただ改行をはさみたい場合には実際に行を変える前に半角スペースを2つ入力しなければならない、段落を変える場合には空行を挟まなければならないというように細かなルールがありますので、見た目通りの結果にはならないという点には注意する必要があります。

なお段落や改行だけでなく、マークダウンではウェブサイトで表示できるものであれば、ほとんどの要素を実装することができるようになっています。画像、表、見出し等自由に設置できますので、ぜひ基本的なルールを覚えていただければと思います。

下記、一般的に利用する要素・フォーマットの書き方をまとめてみました。ご参考にどうぞ👇

※注: マークダウンで使う下記の記号・スペースは全て半角で入力してください


○見出し
・書き方: #(シャープ)1つ～6つ(見出しレベル1～6）の後にスペース
・記載例： 
### 混みだし
○箇条書き（順序なし）
・書き方: +(プラス)または-(ハイフン)の後にスペース
※入れ子構造にする場合は+・-の前にタブでインデント
・記載例: 

- 項目1
	+ 項目A
	+ 項目B
- 項目2
○箇条書き（順序付き）
・書き方: 数字の後に.(ピリオド)とスペース
・記載例: 

1. 項目1
	1. 項目A
	2. 項目B
2. 項目2
○空行/改行
・書き方: スペース2つの後に改行
・記載例: 

1行目  
2行目
○段落
・書き方: テキストの前後に空行
・記載例: 
段落1

段落2
○インライン表示
・書き方: テキストの前後に｀（バッククウォート)
・記載例: 
`インラインテキスト`
○複数行のソースコード・テキスト
・書き方: テキストの前後に`(バッククォート)3つ
・記載例: 
```
<h1>タイトル</h1>
<p>テキスト</p>
```
○テキストリンク
・書き方: [と](角括弧)の間にリンクテキスト、その後続けて(と)の間にURL
・記載例： 
[リンクタイトル](https://example.com)
○引用文
・書き方: テキストの前に>(大なり)とスペース
※引用レベルを増やす場合はレベルの数だけ>を記載
・記載例: 

> 引用レベル1
>> 引用レベル2
○画像
・書き方: !(感嘆符)に続けて[と](角括弧)の間にAltテキストを記載、それに続けて(と)の間に画像のパス/URLを記載
※タイトルを付ける場合にはURLの後にスペースを挟み、"(引用ふ)で囲んで記載する
※画像のサイズを指定する場合にはHTMLのIMG要素を利用する
・記載例: 
![代替テキスト](https://example.com/img.jpg "タイトル")
○表・テーブル
・書き方: 縦線を|(縦棒)、横線を:--(左端のセル)、-:-(間のセル)、または--:(右端のセル)で表現して記載する
・記載例: 

| 列見出し1 | 列見出し2 | 列見出し3 |
| :-- | :-: | --: |
| セル1 | セル2 | セル3 |
○太字
・書き方: テキストの前後に*(アスタリスク)2つ
・記載例: 
**テキスト**
○斜体
・書き方: テキストの前後に*(アスタリスク)
・記載例: 
*テキスト*
○打ち消し線
・書き方: テキストの前後に~(チルダ)2つ
・記載例: 
~~打ち消すテキスト~~
○水平線
・書き方: *(アスタリスク)3つ
・記載例: ***
○注釈
・書き方: 注釈するテキストの直後に続けて[と](角括弧)で囲んだ^(キャロット)と注釈番号を記載、その後[と](角括弧)で囲んだ^(キャロット)と注釈番号の後に:(コロン)、スペース、注釈内容を記載
・記載例: 

注釈1[^1]
[^1]: 注釈1の内容

マークダウンの書き方については以上です。入力が終わったら、「.md」の拡張子のまま、ファイルを保存して閉じましょう。


Ⅲ 記述・閲覧に便利なツール

続いては本題2つ目、マークダウンの読み書きに便利なツールのご紹介です。どれも使いやすくアクセシブルなものが多いので、ぜひお試しください。

ⅰ 1TapでマークダウンをプレビューできるiPhone/iPad用エディタ「シンプル・マークダウン」

最初にご紹介するのは、マークダウンの記述・閲覧モードを1Tapで切り替えられる便利なエディタアプリ、「シンプルマークダウン」です。

こちらのアプリは日本のデベロッパさんにより開発されたということもあり、外国のアプリと違いUIが全て日本語で利用できるようになっています。また起動時に表示されるトップ画面は非常にシンプルなレイアウトになっているほか、必要なボタン類は全てVoiceOverにより問題なく読み上げられるようになっています。

新規マークダウンファイルはトップ画面左下の＋ボタン(VoiceOverでは「新規作成」と読まれます)から、保存済みの文書はメイン画面中央のファイル一覧から開くことができます。

文書編集画面では直接マークダウンを書き込めるだけでなく、キーボード上部に好きなフォーマットを1タップで挿入することができるボタンが複数用意されていて、記法に慣れていない方でも使いやすいように設計されているのもこのアプリの強みです。

そしてシンプル・マークダウンの最大の特徴である記述・閲覧モードの切り替えは編集画面上部から切り替えられるようになっていて、「プレビュー」を押すと構造化が反映された閲覧モードに、「編集」を押すと元の編集画面に切り替えることができます。書いている途中でも見出し・表・画像等がどのように出力されるかを確かめながら文書を作成できるため、とても使いやすい設計になっているんです。


ⅱ ブラウザで簡単にマークダウンを閲覧できちゃう拡張機能「Markdown Viewer」

2つ目はPC向け、ウェブブラウザのGoogle Chromeに追加できる拡張機能、「Markdown Viewer」です。

使い方はとても簡単です。まずはChrome Webストアから拡張機能をダウンロード・追加しましょう。

無事ChromeにMarkdown Viewerを追加できたら、続いてChromeのメニューバー内「拡張機能」⇒Markdown Viewerの「...」ボタン(スクリーンリーダーでは「More options for Markdown Viewer」と読み上げられます)⇒「オプション」と進み、「File Access」欄の「ALLOW ACCESS」ボタンからファイル読み取りの権限を与えます。

ここまで設定できたら、後はExplorer等でMDファイルを右クリックし、「プログラムから開く」⇒「Google Chrome」を選ぶことでいつでも自由にマークダウンのプレビューを閲覧することができるようになります。

※マークダウンのプレビューではなく中身が直接表示されてしまう場合には一度F5キーでページを再読み込みしてください。

唯一の弱点として「見出しの直前にエンコードされた文字列のリンクが追加されてしまう」という点がありますが、それでもマークダウンの構造を確かめる上でそれほど影響はないかと思います。


ⅲ マークダウンをどんな書類にでも変換できちゃう万能ツール「Pandoc」

最後にご紹介するツールは、以前に本サイトでも取り上げたことのある変換ツール、「Pandoc」です。

PandocはWindows/Mac/Linuxのターミナルから実行できる文書変換ソフトなのですが、実は構造化されたフォーマットであるマークダウンはあらゆるファイル形式への変換が可能となっているんです。

詳しい使い方については上記リンク先でご説明しているため詳しくは記載しませんが、Word/PowerPoint/HTML/XMLなど、数多くの変換先を選ぶことができます。特にHTMLへの変換オプションを使うと専門的な知識を要することなく、簡単にWebページを作ることができるので、非常にお勧めっです。


Ⅳ まとめ

さて、今回は少しマニアックな内容になってしまいましたが、めも・文書作成にとても便利なフォーマット、「マークダウン記法」についてご紹介しました。

記事中に掲載したサンプルの通り、Webページのように綺麗に構造化した文書を容易に作ることができるほか、便利なツールを活用すればスマートホン・パソコンで簡単に読み書きを行うこともできるので、視覚障害者にとってもお勧めの記法となっています。

ぜひ本記事をご参考にマークダウンの作成・閲覧に挑戦してみてください。


*本ページの記載内容に誤りがあれば、メール、TwitterのDMなどでお知らせください。


メールお問い合わせ
Twitter: @naokiluca
↑ホームに戻る