Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. マークダウンを使いこなすならコレ!テキストエディタ8選+ジェネレーター4選
  1. action
  2. URLをコピーしました

マークダウンを使いこなすならコレ!テキストエディタ8選+ジェネレーター4選

  • 2017年10月24日
  • ニュース

文章の書き方の1つ「マークダウン」はWebメディアの記事を作成する方にとって親しみ深いものでしょう。
今回はマークダウンに対応した テキスト エディタとマークダウンを自動で生成するジェネレーターを紹介します。

マークダウン対応の テキスト エディタを利用すれば、自分の記述しているマークダウンでホームページに公開した時に、どのような見え方になるのかリアルタイムでチェックできます。

また、ジェネレーターを使えば作成したい図をテーブルに変換したり、ホーム ページ そのものをマークダウン記法に変換したりといった作業の効率化が図れます。

マークダウンとは

マークダウンとは、文章の構造をWeb上でわかりやすいように記載するための文書の書き方を指します。2004年にジョン・グルーバー(John Gruber)によって開発され、その後多くの開発者の手が加わって現在の形式となっています。

文章の構造とは、例えば記事のタイトルや見出し、箇条書きといった構造を指します。
マークダウンでは記事の見出しは「## 見出し」と記載し、箇条書きは「- 箇条書き」というように構造に合わせた記述をするのが特徴です。

参考:
Markdownとは | 日本語Markdownユーザー会

マークダウン対応の テキスト エディタ10選

テキスト エディタの中には、マークダウンで記述した内容をプレビュー画面でリアルタイムに確認できる機能を持ったものがあります。
自分が書いている記事の見え方を確認する際に役に立つので、ぜひ活用してみましょう。

1.Atom

Atom.png Atom

「Atom」はGitHubが開発した テキスト エディタです。
マークダウンで記載した テキスト のプレビュー画面をリアルタイムで確認することができます。
プレビュー画面の起動も「Ctrl(Command)+Shift+M」というショートカットキーで立ち上げられるので、確認作業を素早く行えます。

2.Visual Studio Code

Visual_Studio_Code___Visual_Studio.png Visual Studio IDE、コード エディター、Team Services、Mobile Center

「Visual Studio Code」はWindowsで知られるMicrosoftが開発した テキスト エディタです。
上部のタブをクリックし、「Open Preview」を選択すると、マークダウンで記述した内容のプレビュー画面が確認できます。

3.Brackets

Brackets___A_modern__open_source_code_editor_that_understands_web_design..png Brackets - Web デザインを認識する最新のオープンソースコードエディター

「Brackets」はIllustratorやPhotShopで知られるAdobeが開発した テキスト エディタです。
標準機能ではマークダウンには対応していませんが。「Markdown Preview」という拡張機能を使うとマークダウンで記載した テキスト のプレビュー画面が確認できるようになります。

4.Markable.in

Markable.in.png Markable.in

「Markable.in」は ブラウザ 上で起動するマークダウン対応の テキスト エディタです。
マークダウンを利用して記述した内容がリアルタイムでプレビュー画面に表示され、見え方を確認できます。なお、登録にあたっては会員登録が必要となるので注意してください。

5.Dillinger

Online_Markdown_Editor___Dillinger__the_Last_Markdown_Editor_ever..png Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

「Dillinger」は ブラウザ 上で起動する テキスト エディタです。
左側の画面にマークダウンで記述した テキスト を入れると、リアルタイムで右側にプレビュー画面が表示されます。インストールや会員登録は不要なので、まずは気軽にマークダウンのプレビュー画面をチェックしたいという方は活用してみてください。

6. Byword

byword.png Byword

Bywordは、Mac OS で使えるシンプルなマークダウンエディタです。

Bywordは、一見すると普通の テキスト エディタのように見えますが、マークダウンを打ち込む際に入力補助をしてくれます。例えば、リストを打つ時に「-」を打ち込んである項目を入力し、エンターボタンを押すと、次のアイテムを入力できるように「-」を自動でつけてくれます。

また、マークダウンで書いたものを HTML 構造で保持してコピーする機能もついています。もちろんハイライト機能もバッチリです。

7. Sublime Text

sublimetext.png Sublime Text

Sublime TextもAtomやVisual Studio Codeに似た テキスト エディタです。デフォルトではプレビューやマークダウンのシンタックスハイライトはついてきませんが、下記のパッケージを導入することでそうした機能を追加することができます。

OmniMarkupPreview
マークダウンで書いた文書にプレビューを表示する機能

Markdown Extended
マークダウンのコード部分へのシンタックスハイライト機能

Sublime Textは、他のマークダウンエディタと比べると起動の速度は一番早く、入力支援も充実しています。プレビュー機能が標準でついてこないのは難点ですが、速度を求めるのであればこちらが便利です。

8. MWeb

mweb.png MWeb

今まで出てきたマークダウンエディタのメリットを全て取り入れたといえるのが、MWebというMac用のマークダウンエディタです。画面のように、リアルタイムでプレビューも見つつ、フォルダの中身も確認でき、 HTML はもちろんPDFやリッチ テキスト 、Word形式でも出力できます。

マークダウンでは、画像を貼り付けるのにファイルパスを書かなければならず、面倒な作業になります。しかし、MWebでは画像をコピーしてエディタにペーストすると、ファイルパスが絶対パスで貼り付けられます。さらに、 Google Photosから画像を持ってくることもできます。

そのほかにも、 WordPress やBlogger、Mediumに直接投稿したり、Evernoteに書いたノートを同期させることもできます。バックアップ機能やテーマの色のカスタマイズもでき、スタイルシートでオリジナルのテーマを作ることも可能です。

マークダウンを使うのに役立つジェネレーター4選

見出しを表現する「##」や太字を表現する「**」といったシンプルな記述方法だけでなく、マークダウンでは表(テーブル)のような複雑な表現もあります。
ジェネレーターを使えば、自動マークダウンを生成する事ができるので、作業の短縮化につながるでしょう。

1.Tables Generator

Markdown_Tables_generator___TablesGenerator.com.png Markdown Tables generator - TablesGenerator.com

「Tables Generator」はマークダウンの表(テーブル)を自動で生成する ツール です。
表の中に文字を入力し「Ganerate」をクリックするだけで、マークダウンのテーブルが下のボックスに生成されます。

2.Mark It Down

Mark_It_Down__convert_rich_text_to_Markdown.png Mark It Down: convert rich text to Markdown

「Mark It Down」はコピーしたホームページの文章を、構造はそのままマークダウンに変換する ツール です。
例えば上記の画像では黒の背景に白文字で表示されている「まずは、Qiitaに登録してみよう!」文章が、見出しを示す「### まずは、Qiitaに登録してみよう!」という変換がされています。
他のメディアの記事がどのような構造になっているか調査する際などに活用できるでしょう。

3.to-markdown

to_markdown___an_HTML_to_Markdown_converter_written_in_javascript.png Turndown Demo

「to-markdown」はホームページを表現する記述方法である HTML を、マークダウンへ自動変換する ツール です。
過去に HTML で作成した記事をマークダウンとして書き直したい場合などに活用できるでしょう。

4.Heck Yes Markdown

Heck_Yes_Markdown.png Heck Yes Markdown

「Heck Yes Markdown」は URL で指定したホームページを自動でマークダウンに変換する ツール です。
HTML によるプレビュー画面も合わせて確認でき、 ページ 内でどのように見出しや太字が使われているかを確認できます。

まとめ:マークダウンエディタで業務効率化

マークダウンはシンプルな符号を追加するだけで、見出しや太字といった装飾効果を与えられるので比較的扱いやすいのが特徴です。

ですが、ちょっとした記号の違いで見出しの内容が変わってしまったり、スペースの数を間違えると図が崩れてしまったりといった難点もあります。そのため、常に テキスト の見え方を確認できるマークダウン対応のエディタや自動の変換 ツール を活用して、業務の効率化をはかるようにしましょう。

関連記事

  • これは便利!コンテンツライティングに役立つテキストエディタ10選
  • Apple Design Awards 2017に選ばれたテキストアプリ「Bear」の使い方を解説
  • HTMLよりはるかに簡単!マークダウンを活用して記事を読みやすくしよう

関連記事

  • これは便利!コンテンツライティングに役立つテキストエディタ10選
  • Apple Design Awards 2017に選ばれたテキストアプリ「Bear」の使い方を解説
  • HTMLよりはるかに簡単!マークダウンを活用して記事を読みやすくしよう

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

この記事を書いた人

ferret編集部

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します!
  
>> 著者詳細はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

【CMS】WordPressとは?特徴・機能・導入方法・プラグインをまとめて解説

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

急成長するInstagramの動画と動画広告

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

現会員425,245人

ログインはこちら

おすすめ記事

これは便利!コンテンツライティングに役立つテキストエディタ10選

Apple Design Awards 2017に選ばれたテキストアプリ「Bear」の使い方を解説

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

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら