本格的なWEBサイトを制作するのに絶対必要なツール３選

WEBサイトを作るときに必要なものってなにがあるんだろ？

バリバリ、WEBサイトを作っています。現役WEBエンジニアのきなこです。

「これからWEBサイトを作っていこうと思っています」「WEBサイト作るときって何が必要なの？」と、WEBサイトを作るために必要なものが分かっていない人。

この記事では、これからWEBサイトを制作しようと思っている人に向けて

どんなツールが必要になってくるのか
どういったときに使われるツールなのか
まったくWEBサイト作ったことがない人でもわかるように

WEBサイトを作るときに必要になってくるツールをご紹介いたします。

WEBサイトを作るのに必要なツールって？

WEBサイトってパソコンさえあれば作れるんじゃないの？

もちろん、パソコンさえあればWEBサイトを作ることはできます。

ただ、パソコンのみ使用して作ったWEBサイトは、1990年代によくみられた画像とテキストがただ配置された質素なWEBサイトになってしまいます。

「【初心者向け】WEBサイトを制作するときの流れ〜必要な知識はたったの３つ〜」という記事で紹介している、WEBサイトを作る手順をより本格的なものにしていくためには、絶対に使用すべきツールがあるのです。

まだ、WEBサイトを作る手順を分かっていない人は、下記の記事を読んでから、読み進めていくようにしてください。

【初心者向け】WEBサイトを制作するときの流れ、必要な知識はたったの３つ

WEBサイトの質を求めていけば、より多くのツールが必要になってきますが、今回は最低限これだけあれば高品質なWEB制作が行えますよといった、ツールを３つご紹介いたします。

WEB制作に必要なツール

FTPソフト
AdobeCC
ブラウザ

以上の3つのツールを使用して、WEB制作が行われています。

この3つのツールを理解して使いこなしているころには、あなたもWEB制作の職人になっていることでしょう。

本格的なWEBサイト作成に必要なツール３選

さっそく、WEB制作の現場でつかわれているツールの実力とやらを見せてもらおうじゃないの！

それぞれ、WEB制作のどういった場面で使われて、どういった役割をするのか詳しくみていきましょう。

ツール1：エディタ&FTPソフト

ちょっと待って！？なんか、いきなり2つ出てきてない？？

その通りです。いきなり、2つ出てきました！

この「エディタ」と「FTPソフト」が一体となったアプリケーションがあるので、まとめて紹介してしまいます。

とはいえ、そもそも「エディタ」と「FTPソフト」ってなんなの？と思われる人もいると思うので、それぞれ詳しくみていきましょう。

エディタ

まずは、エディタを見ていきましょう。

エディタとは、WEBサイトを作る手順の「構築する」で必要になってくるツールです。

具体的には、コーディングでHTML/CSSを書いていく際に使用し、テキストを入力していくものです。

もちろんHTML/CSSだけでなく、様々なプログラミング言語を書くことができます。

テキストを入力するだけなら、メモ帳でもよくない？

では、なぜエディタを使用するのが良いのかポイントを押さえておきましょう。

エディタを使用するメリット

HTML/CSSを入力するとき、補助してくれる機能がある
自動的に色分けされるのでコードが見やすい
エディタでコード書いてるとハッカーみたいでかっこいい

エディタを使用することで、HTML/CSSを書く際に補助してくれる機能が付いています。

例えば、HTMLはタグと呼ばれるもので「ここからここまでは、見出しですよ〜」と開始タグと終了タグを使って、囲ってあげる必要があります。

コードにすると下記のような形です。

HTMLタグ参考例

<h1>ここが見出しのテキストになります</h1>

エディタには、開始タグ(<h1>)を入力すると、自動的に終了タグ(</h1>)を書いてくれる機能が備わっています。

その他にもコードを書いていると予測して、コードの候補を出してくれるなど機能がもりだくさんです。

これによって、記述の手間がはぶけるので、作業スピードが圧倒的に早くなります。

WEBサイトを作るときは、必ずエディタを使用するようにしましょう。

FTPソフト

続いて、FTPソフトを見ていきましょう。

FTPソフトとは、WEBサイトのファイルが置いてあるWEBサーバーに接続して、簡単にファイルのやりとりができるようになるソフトです。

例えば、「WEBサイトに画像を表示させたい！」と思ったときに画像ファイルをWEBサーバーに置いておく必要があります。

このFTPソフトを使うことで、画像ファイルをドラッグアンドドロップで簡単にWEBサーバーにおくことができるようになるのです。

WEB制作において「FTPソフト」は必須中の必須ツールになるので、かならず使用するようにしましょう！

別方法でWEBサーバーとのやりとりを行う方法もありますが、かなりの時間がかかってしまうため、おすすめできません。

エディタとFTPソフト一体型「nova」

WEBサイトを作っている人には夢のようなアプリ！

現役WEBエンジニアきなこも使用している「nova」をおすすめしています。

novaは、エディタとFTPソフトが一体化しており、一目みただけで操作方法が直感的にわかるような見た目になっているので、初心者の人にもおすすめです。

また、WEBサーバーごとや案件ごとにも接続先を分けておくことができるので、複数のWEBサイトを管理している人には、便利な機能が備わっています。

ただし、有料アプリになってしまうのでお金がかかってしまいます。

参考
nova製品ページ「nova」Panic.inc

無料ソフトなら「Atom」と「FileZilla」

まずは、お金をかけずにどんなものか体感してみたいと思われた人向けに、無料ソフトなら「Atom」と「FileZilla」をおすすめしています。

さすがに、「nova」みたいにエディタとFTPソフト一体型とまではいきませんが、エディタは「Atom」FTPソフトは「FileZilla」といった形で使い分けをするひつようがあります。

どちらも、無料で使えるわりには充実した機能が備わっており、WEB制作の勉強がしたいといった場合は、手始めにatomとFileZillaを使用するのが良いと思います。

参考
Atom製品ページ「Atom」GitHub

参考
FileZilla製品ページ「FileZilla」GNU GPL

しかし、効率的な面をみるとエディタとFTPソフト一体型のほうが良いです。

いずれ、WEB制作でお金が稼げるようになってから、有料ソフトを検討してみましょう。

ツール2：AdobeCC(Adobe Creative Cloud)

WEB制作において、Adobe製品はなくてはならない！！

続いては、「AdobeCC」です。

WEB制作の現場では、必須中の必須なツールがAdobeCCです。

一般的にみなさんが目にする機会といえば、PDFを閲覧するときに開かれるアプリケーションがAdobe製品ではないでしょうか？

AdobeCCというのは、製品の名前ではなく、たくさんあるAdobe製品が使用できるサービスの名称です。

AdobeCCというサービスを契約すれば、「Photoshop」や「illustrator」「AdobeXD」などのグラフィックソフトを使用することができるようになります。

他にも動画編集ソフトや「Dreamweaver」という有名なWEB制作ソフトなど、超優良アプリが使い放題になります。

WEBサイトを作る手順の「デザインする」で必要になってくるツールです。

AdobeCCを使用するメリット

よりデザイン性の優れたWEBサイトを作ることができる
動画編集ソフトなどWEBに関わるコンテンツがつくれる
Adobe使いこなせるってクリエイターっぽくてかっこいい

WEB制作に関わる人は、Adobe製品とくに「Photoshop」「illustrator」「AdobeXD」は、使いこなせるようにならないといけません。

使いこなせるのは、基礎中の基礎であり、ほぼ当たり前だと思ってください。

AdobeCCを定価のほぼ半額で使用する方法

AdobeCCを契約するときは、公式のホームページから契約すると年額74,976円(税込)かかってしまいます。

しかし、プログラミングスクールのデジハリオンラインから「Adobeマスター講座」という講座を受講すると、39,980円(税込)で1年分のAdobeCCを手に入れることができます。

さらに、「マスター講座」という学習講座なので、Adobe製品の基礎を学ぶことが可能です。

WEB制作にこれからチャレンジしようとしている方は、絶対にデジハリオンラインの「Adobeマスター講座」を受講してAdobeCCを契約してください。

AdobeCCを手に入れ、基礎学習もできる。まさに一石二鳥！いや、半額になるから一石三鳥！？

\ デジハリオンラインをチェック！ /

Adobeマスター講座をチェックする

ツール3：ブラウザ

ブラウザってなんだっけ？

最後は「ブラウザ」です。

ブラウザとは、今このページを読んでいるときに使用しているWEBサイトを閲覧するためのソフトのことです。

一般的に使用されているブラウザはこれくらいです。

Google Chrome（グーグルクローム）
Firefox（ファイヤーフォックス）
Microsoft Edge（マイクロソフトエッジ）
Internet Explorer（インターネットエクスプローラー）
Safari（サファリ）

みなさんもこの中に、今使っているブラウザがあるのではないでしょうか。

ん？でも、なんでWEBサイトを作るのにブラウザが必要なの？

WEBサイトを作るとき、実際に作っているサイトの表示がちゃんとできているか、確認しないといけないですよね。

そういったときに、「ブラウザでの確認」を行わなくてはいけません。

全てのブラウザで表示がしっかりとできているか確認するという「品質管理」もWEBサイトを作ることのひとつです。

実は、一般的にブラウザを使っている人は知らない機能が、ブラウザには隠されています。

その名も「開発者ツール」です。

開発者ツール

開発者ツールとは、その名の通り、WEBサイトを開発する人のためのツールです。

開発者ツールを使うことで、表示しているWEBサイトのソースコードを見ることができるようになります。

例えば、「ここのリンクどうやって書いてあるんだろ？？」と思ったら、開発者ツールを見ることで、HTML/CSSの書き方を見ることができます。

ブラウザによって、開発者ツールの開き方が異なるので、「ブラウザ名開発者ツール」で調べてみましょう。

これからWEB制作を勉強するという方は、絶対に開発者ツールは覚えてください！開発者ツールは必ず使用します。

もっといえば、開発者ツールで勉強してください。

かっこいいWEBサイトを見つけたら、開発者ツールでみてみるのが一番勉強になると思います。

３つのツールがあれば本格的なWEBサイトが作れる

エディタ＆FTPソフト
AdobeCC
ブラウザ

この3つがあれば、本格的なWEBサイトを作ることが可能となります。

もちろん、より便利に効率的にしていくには、必要となってくるツールも出てくると思いますが、この3つがあれば仕事を受けて稼いでいくことが可能となります。

WEB制作を通じて、必要に応じて設備投資を行なっていきましょう。

あえて、初めから買う必要はありません。

さいごに

今回は、これから本格的にWEB制作を行う人に向けて、必要なツールを3つ紹介させていただきました。

WordPressなどの有料テーマを使えば、誰でも簡単に本格的なWEBサイトを作ることはできますが、お客さんの要望をかなえることはできません。

WEB制作を行う上で、柔軟な対応ができるよう、この3つのツールは必ず押さえておくようにしましょう。