ホームページ制作でパソコンに入れておきたいソフト
ホームページを制作する上で、必要なソフトをご紹介します。
副業でホームページ制作を考えている人や在宅ワーク・リモートワークで子育てしながらホームページ制作に挑戦してみたい人は、まず何からすればいいのかわからない方が多いと思います。
そういった方に、ホームページ制作に必要なソフトを作業ごとにご紹介していきます。ご紹介するソフトは必須のものから、あれば役に立つものまでご紹介しますが、必ずすべて必要だということではないです。ご自身に合ったものを使うことがスキル上達の近道になります。
ホームページのデザインやバナー制作に必要なソフト
Adobe Photoshop（アドビ フォトショップ）
このソフトはホームページを制作するのには必須ソフトです。グラフィック系のソフトになります。ほとんどのホームページはこのソフトを使ってデザインされている方が多いと思います。通称「フォトショ」と呼ばれています。
主に、写真の加工やリサイズが簡単にでき、写真・画像に特化したソフトです。また、ワイヤーフレームなどを作成する際に使う人もいます。
ホームページは、画像とテキストで構成されているため、画像や写真をよりキレイに見せる事によりホームページの完成度が格段にあがります。また、ホームページのトップページや下層ページ（その他のページ）のデザインし、画像をスライス（切り抜き）することによってデザインと同じホームページを公開することが簡単にできます。
このソフトは有料ソフトになります。ただし、無料体験版があるので初心者の方は、まず無料で期間中にしっかりと勉強をして有料版を使うか決めた方がいいです。ただし、ホームページ制作をやっていこうと考えている人は必須ソフトだということを覚えておいてください。
Adobe Illustrator（アドビ イラストレーター）
このソフトはホームページを制作するのに必須ではないですが、ホームページにイラストなどを入れる場合に役に立ちます。特徴としてベクトル画像を作成することができます。通称「イラレ」と呼ばれています。
ベクトル画像を簡単に言うと、通常の写真などは拡大すると画像が粗くてモザイクっぽくガタガタになるのに対してベクトル画像でイラストを制作すると線や色などをリアルタイムで計算しているため拡大をしても粗くなったりガタガタになったりしません。
フリー素材でイラスト画像をダウンロードしてきてサイズが小さい場合、拡大すると粗くなります。ですが、aiデータ（イラレデータ）でダウンロードすることでベクトルデータになっているため、拡大して使うことができます。
また、ホームページ以外にも紙媒体（名刺やチラシ等）を制作するときは必須のソフトになります。
イラストレーターはフォトショップと違い画像の加工には不向きになります。
このソフトもフォトショップと同じく有料になります。また、無料体験版もあるので初心者はフォトショップを使ってどうしても使いたい時に始めるのがいいと思います。
Photoshop（フォトショップ）とIllustrator（イラストレーター）の使い分け
webデザイナーによってメインで使うソフトは違いますが、ほとんどの方がフォトショップをメインで使い、ロゴや地図・イラストを使う時はイラストレーターを併用して使っていると思います。
初心者・未経験者や副業・在宅ワーク・リモートワークでホームページ制作を考えている人には、まずPhotoshop（フォトショップ）のみを使う事をオススメします。フォトショップに慣れてくれば、イラストを使いたい場面がどんどん出てきます。そういった状況になってからでもイラレを使うのは遅くないです。
イラレの基本操作は、フォトショップと似ているためフォトショップが使えるようになればイラストレーターはすぐに使いこなせます。
ホームページのコーディングに必要なソフト
ホームページのコーディングに関しては、そこまで必要なソフトはないです。自分の知識量やタイピングミスなどを補助してくれるソフトが多く、有料のソフトを使う必要はないです。
TeraPad（テラパット）
このソフトは、メモ帳をプログラミングようにしたようなソフトで、一般的なエディタソフトです。パソコンにインストールしても軽量でコーディングの他にもメモ帳などとして使っても問題ないです。もちろん無料になります。
設定を変更することで、コーディングするときのテキストやコードに自動で色を変えれるため、コーディング中に見やすいようになっています。
ただ、コードやタグの補助機能はないので、タイピングミスをするとどこが間違っているのかわからない時があります。コーディングに慣れている人はこのソフトを使う方もいます。パソコンにインストールしても軽量で、立ち上がりが早いです。私もコーディングにはこのソフトを使っています。
基本コードやタグ名などを覚えていない人は、始めはテラパットではなく補助機能のあるソフトを使うことでホームページ制作をしていて挫折することが減ります。
Atom（アトム）
2015年に登場し比較的新しいエディタソフトです。
特徴としては、１つのファイルを画面分割して表示することができます。また、タグを折りたたむことができるため、開始タグや終了タグが抜けているなどのミスが減ります。
いろいろパッケージを組み合わせることで自分に最適なソフト環境を構築することができます。パッケージの中にはタグの補助機能などもあるため使いやすくカスタマイズでいます。もちろん、無料で使用できパッケージも無料のものがあります。
ただし、パッケージをたくさん入れることで起動時の動作が重くなり起動スピードも落ちていきます。このソフトを使用する方は中級者向けだと思います。
Visual Studio Code（ビジュアルスタジオコード）
とにかく軽量で起動が早いエディタソフトです。こちらもカスタマイズができ、Atom（アトム）と雰囲気が似ています。
サイドバーがあり、ファイル一覧表示ができサイト構造が分かりやすくなります。標準でタグの補助機能が付いているためインストールしてすぐに使う事ができます。初心者の方にオススメのソフトです。
Brackets（ブラケッツ）
このエディタソフトは、ホームページ制作に特化しているんじゃないかと思うようなソフトで、Adobeが提供している無料ソフトです。
また、挙動が軽く、拡張機能を追加することで自分なりのソフトにカスタマイズすることができます。インストール時から日本語対応しており、初心者の方でも気軽に使いこなせます。
cssを作成するときはカラーピッカーも使用でき、ライブビュー機能がありコーディングが目で見てデザインできるので視覚的に操作ができます。
ホームページ制作ソフトについて
デザインやコーディングによって使用するソフトはちがいます。もちろん有料や無料などもあり、どれから使えばいいのかと悩むことが多いと思います。
デザインに関しては、フォトショップは必須になりますが、コーディングに関しては自分に合ったものやレベル・スキルに合わせてソフトを変えていくのもいいと思います。
簡単に扱えて、自分のスキルが向上するソフトをその都度、使い分けていくことをオススメします。