・Web制作を始めるのに学習費用（学費とか本とか）以外に買わないといけないものって何？
・それぞれ何にどれくらいの費用がかかるの？
- Web制作をするために最低限必要なツール（道具）6個とそれにかかる費用がわかる
実体験をベースに記事を作成していますので参考になれば幸いです。
Web制作を始めるために最低限必要なツール６選
まず、Web制作をするにはツールつまり道具が必要です。始めるにあたって最低限必要なものを6個あげてみます。
Web制作で請け負える案件ごとに必要なモノをあげます。
ツールその１：全案件に共通して必要
- パソコン→デスクトップパソコンでもいいけれどノートパソコンそしてMacだとオシャレノマドワーカーぽくなれる。
ツールその２：Adobe製品（主にデザイン案件に必要）
- Adobe Photoshop（有料製品） →Webサイトデザイン制作に必要
- Adobe Illustrator（有料製品） →Webサイトに挿入する図やイラスト制作に必要、名刺デザインや年賀状も作れる
※PhotoshopだけでもWebデザインはできる
ツールその３：コーディングするために必要な必須ツール
- エディタ →コーディングするためのツール、Adobe Dreamweaver、Visual Studio Codeなど有料無料色々ある
ツールその４：データをアップロードしてWebサイトとして表示させる
- レンタルサーバー →コーディングデータをアップする場所。Webサイトで表示させるため。ツールではないですけど費用かかるのでこの記事で紹介します。
ツールその５：データをサーバーにアップロードするためのツール
- FTPソフト →ファイル転送ソフト、無料で色々なツールがある
ツールその6：サイトマップ、ワイヤーフレーム制作ツール
- AdobeXD、Cacoo、エクセル、パワーポイント等から選ぶ →オススメはAdobeXD
それぞれ説明します。
ツールその１：全案件に必要なモノはやっぱり「パソコン」
全案件に必要なモノは「パソコン」です。かっこいいノートパソコン持ってたらスタバでノマドワーカー気分味わえます。
WindowsでもMacでもコーディング、デザインできます。僕はオンラインスクール（テックアカデミー）受講時は数年使っていたWindowsパソコンでコーディングしてました。テックアカデミーではデザイン制作（Photoshop,Illustratorを使ってデザインをすること）はカリキュラムに入っていなかったのでスペック（メモリとかCPUとかの性能）が低いパソコンでも大丈夫でした。
そして僕は今「MacBook Pro 13インチ」を使っています。持ち運びも軽いし機能性高いしで便利！
僕が購入したMacのスペックは、CPU2.3GHzクアッドコアIntel Core i5プロセッサ／メモリ 8GB／ストレージ 256GBです。僕はデジハリLIGに入学してから購入したのでデジハリストアの学生向けセットで購入しました（AdobeCC12ヶ月版付きのセットで学生しか買えないプラン）。
マウスはデジハリLIG同期が使ってたのを見てかっちょええな、と思い後日ビックカメラで買いました。
13インチだと持ち運びは便利だけれども画面が少し小さい。家では大きなモニタを利用したい！
なので別モニタで拡張させています。
あとMacbookProはRetinaディスプレイという高画質なディスプレイを使っています。ただ、インターネットを閲覧している人は普通のモニタを使っている場合の方が多いです。なので、制作したWebサイトを普通の画面で確認するためにに拡張モニタはRetinaディスプレイを使っていない普通の安価なモニタを使うといい、とデジハリLIGの講師の方に言われました。モニタは安くて大きいので大丈夫。
参考：Retinaディスプレイとは（Apple サポートサイト）
人生はじめてのMacだったので使い慣れるのに時間がかかったけれど今はWindowsよりMac! カッコイイし持ち運びやすいのが利点かと最初思ってたら、使いやすさの方が際立ってきた。マウス無しでもスイスイ使える心地よさ。家ではもうWindowsは使いたくない。
別の記事でMacがWeb制作に便利な理由を書いてみます。
ツールその２：デザインするならAdobe「Photoshop」「Illustrator」
デザインするならAdobe。制作会社と仕事をするときは、Adobeのデータでやりとりをします。制作業界のスタンダード（普通に使われている）製品です。デジタルハリウッドSTUDIO by LIGでもAdobe Photoshop、Adobe Illustratorの使い方を学習します。
Web画面のデザイン、バナーデザインをするなら
Photoshop（フォトショップ →フォトショと略したりする）
ロゴデザインや図やイラスト制作、名刺デザインなら
Illustrator（イラストレーター →イラレと略したりする）
という切り分けで僕は使っています。どちらがよく使うかというとPhotoshopです。PhotoshopがあればWebデザインもバナー制作もできます。
具体的な違いは
PhotoshopとIllustratorの違い：8つの具体例で比較（サルワカ）
というサイトがとても分かりやすいです。「サルワカ」というサルでもわかるというコンセプトでWeb制作の初心者向けに書かれた見やすく分かりやすいサイトです。よくお世話になります。
費用は、通常価格で
フォトプラン 980円/月（税別）
→Adobe PhotoshopとLightroom、Lightroom Classicの３つのソフト使える
単体プラン 2,480/月（税別）
→Adobe Photoshop、Adobe Illustratorそれぞれ単体でこの価格
コンプリートプラン 5,680/月（税別）
→Photoshop、Illustrator、Dreamweaver、Adobe XDなどAdobe製品使い放題プラン
photoshopだけ利用なら、フォトプランがベストですがPhotoshop、Illustrator、Dreamweaver、Adobe XDも一通り使うとなるとコンプリートプランになります。コンプリートプランは年契約して¥71,020/年になるので高い！だけど最初は色々使ってみたい、となれば学割で買うのが安値で買うベストな方法。
詳しくはこちらの記事で整理しました。
Adobe CCはデジハリが最安値？他の3スクールと徹底比較！
ツールその３：コーディングするためにはまず「エディタ」を用意する
コーディングをするために道具が必要。「エディタ」と言います。コードを書くためのメモ帳みたいなモノです。サルワカではSublime Textを勧めています。HTMLとCSSの勉強に必要なツールを用意しよう
LIGもSublime Text勧めてました。Web制作者向け便利ツール・参考デザインなどLIGブログ記事まとめ
僕は、Adobe Dreamweaverを使っています。AdobeコンプリートプランでダウンロードできるAdobeのエディタ製品。デジハリLIGの授業はこれで進めていたから使い続けてます。でもデジハリLIG講師の人からDreamweaverは使いづらいところがあるから制作会社では他のエディタを使っている、ということ。無料でオススメはVisual Studio Codeと言われました。エディタは無料のでいいと思います。
ツールその４：コーディングデータをアップロードする場所はレンタルサーバー
ブラウザに制作したWebサイトを表示させるにはサーバーが必要です。ツールではないですね、レンタルサーバーです。月額利用料金で借りれます。費用がかかるのでこの記事に混ぜました。
Webサイトの仕組みは？Webページの作成〜公開までの流れ：サルワカ
にサーバーの仕組が分かりやすく書かれています。
サーバーはレンタルできます。
ツールその５：サーバーにデータをアップしたりダウンロードしたりするためにFTP
Webサイトに表示させるためにはコーディングデータをサーバーにアップしないといけません。そのために、FTPソフトというファイルをサーバーに転送させるソフトが必要。（FTPはFile Transfer Protocolの略）
サルワカから引用します。
FTPクライアントソフト（FTPソフト）とは、サーバーに置いてあるファイルを手元のパソコンにダウンロードしたり、逆に手元のパソコンからアップロードしたりするためのソフトです。
ここで紹介されているFTPソフト「FileZilla」は僕も利用しています。他にも色々ソフトあるけれどこれで問題なしです。無料ダウンロードできます。
ツールその６：サイトマップ、ワイヤーフレーム制作ツールのオススメはAdobeXD
設計段階でサイトマップやワイヤーフレームを作成することになります。
サイトマップ
ワイヤーフレーム
を作るために必要なツールは何か、ということ。
エクセル、パワーポイントでも作れます。最初僕はエクセルで作ってました。
しかしながら、Adobeコンプリートプランを使っているとしたらAdobeXDがオススメ。photoshopを使ってたらなおさら、使ってなくても簡単に使えるadobe製品。Adobe XDについて（Adobe公式サイトより）
Adobe社が2017年秋にリリースしたUI/UXデザインツール。操作方法もシンプルで直感的な操作ができるというphotoshopの簡易版みたいなイメージ。テストで作ったワイヤーフレームがこちら。
枠を決めたら写真画像がスポッと収まるという便利さ。使いやすさも抜群です。
LIGブログでもオススメされてます。
まだAdobe XD使ってないの？はじめての人もこれを読めばすぐに使えるAdobe XDのトリセツ：LIGブログ
まとめ：Web制作はじめるためには「パソコン」「Adobe製品」があればOK
- Webデザインをしようと思うなら、「パソコン」と「AdobePhotoshop（フォトショップ）」があればOK。
- コーディングをしようと思うなら、「パソコン」と「エディタ」があればOK。（とりあえずフォトショップはいらない）
・必要と思うなら、Adobe Illustrator（イラストレーター）を使ってみる。
・WordPressを使ってみる、ブラウザに制作物を表示させてみる、となればレンタルサーバーを借りてみる。
・ワイヤーフレームを作るために効率いいツールを探し始めたらAdobeXDを使ってみる。
こんな感じでいいと思います。
パソコンは最初はWindowsパソコンで大丈夫。最初は僕もそうでした。続けていける！と思ったらMacbookオススメ。使いやすいしカッコいい。
実際どうやって独学してみるかは以下の記事で書きましたのでそれを見て必要なモノを用意してみてください。
スクール受講経験者がまとめる独学でWeb制作できる手順【企画から説明】
この記事はここまでです。