HTMLよりはるかに簡単！マークダウンを活用して記事を読みやすくしよう

オウンドメディアや企業ブログで初めて記事を書く時、どう工夫すれば読みやすい記事になるか悩む方も多いのではないでしょうか。インターネット上にある大量の情報の中で最後まで読んでもらうには、内容はもちろんのこと、視覚的にも読み進めやすい記事に仕上げることが重要です。

記事を読みやすくするためには、強調したい部分を太字にしたり、複数の項目を箇条書きにしたりする工夫が考えられます。こういった工夫は、本来だとHTMLのような「マークアップ言語」を使うのですが、表記が複雑で使いづらいと感じる方も少なくありません。

そこで、マークアップ言語を簡単にした「マークダウン」という記法があります。マークダウン記法を使えば、前述の工夫が手軽に実現でき、文書を読みやすくできます。

今回は、ライティングに便利なマークダウン記法を10個ご紹介します。

マークダウンとは

マークダウンとは、文書を構造化したり装飾したりするために使うHTMLなどのマークアップ言語を、簡単な記号や改行で使えるようにしたものです。

マークアップ言語

マークアップ言語とは、文書を構造化するための言語です。「タグ」という要素を使って、意味付けを行います。具体的には、「この文がタイトル、この語句は太字、ここからここまでが引用箇所」などと指示していきます。

マークアップ言語には前述した「HTML」の他にも「SGML」「XHTML」「XML」などがあります。中でも最もよく使われており、認知度も高い言語がHTMLです。

マークダウンとマークアップの違い

マークアップ言語を簡単にしたものが、マークダウンだと考えると分かりやすいでしょう。この関係性から、マークダウンは「軽量マークアップ言語」と呼ばれることもあります。

マークダウン記法

今回は、基本的なマークダウン記法を10個ご紹介します。

【1】見出し
【2】強調
【3】斜体
【4】改行
【5】水平線
【6】箇条書き
【7】ナンバリング
【8】リンク
【9】画像
【10】引用

【1】見出し

表記例

「#」の数で見出しの大きさが変わります。

表示例

【2】強調

表記例

文字をアスタリスク2個ずつで囲むことで、太字になります。

表示例

【3】斜体

表記例

文字をアスタリスク1個で囲むことで、斜体になります。

表示例

引用：
マークダウン記法 一覧表・チートシート|Qiita

【4】改行

表記例

行末で半角スペースを2個入力すると、改行します。

表示例

【5】水平線

表記例

アスタリスク・ハイフン・アンダーバーを3つ以上並べると水平線を表示します。

表示例

【6】箇条書き

表記例

文字の前にアスタリスクをつけると「・」がついた箇条書きになります。

表示例

【7】ナンバリング

表記例

文字の前に数字とピリオドをつけることで、自動で順番がつきます。

表示例

【8】リンク

表記例

上のように表記することで、文字をクリックすることで指定したURLに遷移できるようになります。

表示例

ferret

上のリンクは、下図のように表記して表示させています。

【9】画像

表記例

上のように表記することで、画像を表示できます。

表示例

【10】引用

表記例

引用文の前に「>」をつけることで、引用表記になります。

表示例

まとめ

マークダウン記法を使えば、少しの手間をかけるだけで読者に伝えたいことを強調できたり、長い文章でも視覚的に読み進めてもらいやすくできたりします。

書く側にとっても、編集中の文書構造がはっきりと見え、思考を整理しやすくなります。HTMLほど複雑な記述ではなく覚えやすいので、使いこなせれば効率的に執筆を進めることができるでしょう。

まずは簡単な記法から試してみてはいかがでしょうか。