有料からフリーまで！WindowsやMacで使えるオススメのHTMLエディタ・Webオーサリングツール5選

• WEB

2021年10月28日 02:44

こんにちはENGI MAG編集部です！

Webデザイナーになりたい人が、いざHTMLやCSS、JavaScriptなどの言語を書こうと思うと、まず用意する必要があるのがHTMLエディタ、もしくはWebオーサリングツールです。

どちらも同じようなソフトですが、そもそもテキストエディタ、Webオーサリングツールとは何か、「色々あるっぽいけど結局どれがオススメなの？」といったところまで詳しく解説いたしますので、是非ご覧ください。

有料のものだけでなく、無料のソフトもご紹介しますので、学生さんや、ちょっとだけWeb制作に興味を持った方などにもおすすめの記事となっております！

HTMLやCSSは独学で学べる？実際の勉強方法や体験談、HTMLやCSSとは何かについても解説します

こんにちはENGI MAG編集部です！ Webデザイナーになりたい人が必ず目にする、HTMLやCSSという言語。 学…

HTMLエディタ・Webオーサリングツールとは

そもそもHTMLエディタやWebオーサリングツールとはどういったものなのでしょうか。

HTMLエディタは実際にHTMLやCSSを記入していくパソコン上の紙のこと。Webオーサリングツールは視覚的に編集ができるWebページを作るためのソフトです。

厳密に言うとHTMLエディタとWebオーサリングツールは異なりますが、どちらもコードを書くためのツールで機能が異なる、と思っていただければと思います。

『HTMLエディタ』『Webオーサリングツール』の他には『テキストエディタ』『Web制作ソフト（アプリ）』『ホームページエディタ』『コードエディタ』などとも呼ばれます。

最近ではそれぞれ進化して同じようなことができるようになったので、どれも同じようなものを指しますが、念の為それぞれ簡単に解説しますと、以下のようになります。

テキストエディタ

読んで字の如く、テキストを編集するソフト。

次項のHTMLエディタをテキストエディタと呼ぶこともありますが、基本的には単純なメモ帳などをテキストエディタと呼び、視覚的な編集はできないものが多いです。

HTMLエディタ／ホームページエディタ／コードエディタ

テキストエディタのHTML編集に特化したソフトをHTMLエディタまたはホームページエディタ、コードエディタと呼びます。

コードに色がついたり、HTMLやCSSを編集しやすくなっています。

一部ライブ・プレビューを使えるソフトもありますが、基本的には視覚的にビジュアルを確認する機能はないことが多いです。

Webオーサリングツール／Web制作ソフト・アプリ

HTMLエディタの進化版…とも一概には言えませんが、ライブ・プレビュー機能などがついていて、コードを書きながら実際の表示を確認することができます。

余談ですが、以前

「ウチはDreamweaver（後述するWebオーサリングツール）を使う人間は誰もいない。テキストエディタでWeb作れちゃう。」

と仰っていた超ツワモノWEB制作会社の社長さんにお会いしたこともありますが、要は頭の中でどう表示されているかが見えているということなので、筆者には真似できないスゴ技です。

なぜHTMLエディタ・Webオーサリングツールを使うのか

HTMLやCSSを記入するいわゆるコーディングという作業は、パソコンに入っている「メモ帳（Macだと「メモ」や「テキストエディット」など）」でもできなくはないのですが、メモ帳だと記号の羅列になってしまい、とても作業がしにくいです。

▼Macのテキストエディタで書かれたコード

白と黒だけなので記入に間違いがあっても、発見するのも一苦労。

上記画像では「　“　」の記入を忘れているのですが、どこにあるか探しにくいですよね。

▼DreamWeaverで書かれたコード

上記画像はWebオーサリングツールであるAdobe「Dreamweaver（ドリームウィーバー）」で記入したものです。

色がついていて記述を間違えると発見もしやすくなります。

加えて、Webオーサリングツールの場合は実際のサイトの表示を確認できるというのが最大の利点かなと思います。

オススメのテキストエディタ・Webオーサリングツール

テキストエディタやWebオーサリングツールの重要性についておわかりいただいたところで、オススメのHTMLエディタとWebオーサリングツールをお伝えします！

①Adobe（アドビ）『Dreamweaver（ドリームウィーバー）』

有料ですが、Webデザインまで行うなら行き着く先はDreamweaverなのでは、とも思えるWebオーサリングツール。

ライブ機能で実際の見え方を確認しながらコーディングができたり、初心者〜プロのWEB制作者まで幅広く使えるアプリで、当社でも使用しています。

料金は、契約するプランや、月払いか年払いか、学生かどうかなどによって異なりますが、Dreamweaver単体プランの場合は月額2,728 円 (税込)。

Webデザインまでする場合は結局PhotoshopやIllustrator、XDまで入った全部入りのCreative Cloudコンプリートプラン（月額6,248 円 (税込)）が必要になるかなと思います。

安い出費ではありませんが、常に最新のアプリを使用できるのでソフトを買い替える必要がないのは嬉しいところ。

また、コンプリートプランはAdobeの全アプリが使えるようになりますので、これを機にPremiere Proまで覚えて、動画編集者デビューを飾っても良いかもしれません。

Adobeアプリの使い方も学べる通信講座でコンプリートプランをオトクに使える場合もありますので是非ご確認ください。

②GitHub（ギットハブ）『Atom(アトム)』

Windows、Mac、Linuxで使える無料のテキストエディタで、拡張機能が豊富に入っているので、使い勝手がよくオススメです。

対応するタグを自動で入力してくれる機能もあるので、忘れがちな「閉じタグ」にも有効です。

Atomは英語表記ですので、はじめは拡張機能を使って日本語表示にしておきましょう。

「file」→「setting」→「install」から検索窓に「japanese-menu」として、検索結果に表示されたものをインストールします。

③サクラエディタ

日本語の無料のテキストエディタです。

HTMLやCSSをはじめJavaなどの他言語もカラー表示がされます。

パソコン初心者であれば、日本語表示が最初からされているのでサクラエディタから始めても良いでしょう。

④マイクロソフト『Visual studio Code（ビジュアル・スタジオ・コード）』

マイクロソフト社が開発した無料のコードエディタで、プログラマーにはVSCode（ブイエスコード）と略して呼ばれることもあります。

Webサイト作成の様々なプログラム言語に対応しています。

一番のポイントは、特定の文字を入力すると対する文字を自動で入力してくれる機能でしょう。

初心者の人でも使いやすい高機能コードエディタです。

⑤ジャストシステム『ホームページ・ビルダー』

筆者は使用したことがありませんが、Web制作ソフトといえばDreamweaverかホームページ・ビルダーか、というくらい有名なソフトです。

特に50代以降くらいのWebデザイナーさんにお会いすると、「昔はホームページ・ビルダーを使っていた」という話をよく聞きます。

「昔は」と聞くと不安になるかもしれませんが、無論現代に合わせて調整され続けていますのでご安心ください。

Dreamweaverは魅力的だけど、ずっとお金がかかるのはちょっと…という方にはちょうどいい選択肢かもしれません。

ちなみにホームページ・ビルダースタンダードとビジネスプレミアムの違いは、公式サイトのこちらのページにまとまっています。

まとめ

ご自身の探しているようなHTMLエディタ、Webオーサリングツールは見つかりましたでしょうか。

仕事としてWeb制作をするようになると筆者と同じくDreamweaverに行き着く方が多いのではないかと思いますので、最初からDreamweaverに慣れておくと楽なのは間違いありませんが、金額や機能など、それぞれに魅力がありますので是非熟考してみてください。

それでは快適なWeb制作ライフを！