コーディング環境

2022.03.09

Web制作（コーディング）に必要なソフトウェアのご紹介。

エディター（無料のモノのみご紹介）

コーディングはパソコンに付属のエディタ…
・メモ帳（Windows）
・テキストエディット（MacOS）
でも作成・編集することができますが、下記のエディターやWeb作成ソフトを利用した方が作業効率が良いです。

Windows / MacOS 共通

●Atom（https://atom.io/）
※プラグイン（パッケージ）を追加することで、FTP（ファイル転送）機能を利用することも可能。
《参考サイト：AtomからFTP接続する》

●Visual Studio Code（https://code.visualstudio.com/Download）
※プラグイン（拡張機能）を追加することで、FTP（ファイル転送）機能を利用することも可能。
《参考サイト：簡単！VS CodeでFTPアップ》

※上記2種類はデフォルトで英語表示のため、日本語環境で利用したい場合は、日本語化（プラグインの追加）か必要。
《参考サイト：Atomエディタのインストールと日本語化…》
《参考サイト：Visual Studio Codeを日本語化する》
個人的な感想としては「Visual Studio Code」のほうが日本語化が容易だと思います。

現在の「Visual Studio Code」では、インストールして最初に起動した際、日本語化を促すリンクボタンが表示されます。
そちらをクリックして進み、指示に従って再起動すれば、次回起動時から日本語表示になります。
（2022.03 MacOS版のみで確認）

Windows版

●TeraPad（https://tera-net.com/library/tpad.html）
※FTP 無し。必要な場合は下記「FTPソフト」と併用します。

MacOS版

●mi（https://www.mimikaki.net/）
※FTPの一部機能（リモートファイルの操作・編集）は有り。

画像編集ソフト（有料のモノのみご紹介）

●Adobe Photoshop（https://www.adobe.com/jp/products/photoshop.html）

主に写真（ビットマップ画像）を加工すためのソフトウェア。

●Adobe Illustrator（https://www.adobe.com/jp/products/illustrator.html）

パス描画でのベクター画像（ロゴ・アイコン・SVG画像など）の作成に使用。
Webのデザインカンプ（デザイン見本）・バナー広告の作成にも利用されます。

●Adobe XD［プロトタイプ作成］（https://www.adobe.com/jp/products/xd.html）

Webのプロトタイプ（試作品）作成に使用。
プロトタイプとは…デザイン見本としてだけでなく、リンク移動やクリック時の動きなどサイトの動作も確認させることができる試作品のこと。

※上記の３種類は全てAdobe社の「Creative Cloud コンプリートプラン」に含まれます。
３種を単体で契約するよりも同プランのほうがお得です。

※学生・教職員の方は、z教育機関向けの安価なプランを利用することも可能。
一般の方でも学習機関に通われている場合、学割プランを利用できるスクールもあります。
詳しくは各スクールの事務局にお問い合わせください。

FTPソフト（ファイル転送／無料のモノのみご紹介）

●FileZilla（https://filezilla-project.org/）

●FFFTP（https://forest.watch.impress.co.jp/library/software/ffftp/）

Web作成ソフト（有料のモノのみご紹介）

●Adobe Dreamweaver（https://www.adobe.com/jp/products/dreamweaver.html）

上述のエディタやFTPの機能が予め準備されており、プラグイン等の追加はほぼ必要ありません。
また、Git/GitHub との連携や SASS（SCSS）/ LESS の自動コンパイルなど、中級・上級者向けの機能も予め備わっています。
有料にはなりますが、Adobe社の「Creative Cloud コンプリートプラン」に含まれるため、同社の Illustrator・Photoshop や XD 等を利用するために同プランを契約されているなら、こちらの利用もオススメします。