ホームページ制作の開発環境は、少しずつですが変化しています。
10年前と比べるとjavascriptやphpの編集は当たり前になりましたし、MySQLやMariaDBなどのデーターベースを直接編集する事も多くなりました。
そうなると開発環境も変わり、Dreamweaverでの編集が難しくなりテキストエディターへシフトしました。
ホームページのデザインも、モバイルデバイス上で作業結果を直接プレビューすることが簡単に出来るAdobe XDに移行したりと環境が変わってきています。
今回は、久しぶりに開発環境についてまとめてみました。
目次
テキストエディター
ホームページ制作のコーディング作業で必要なソフトウェアです。
10年ぐらい前は、下でも紹介しているAdobe Dreamweaver等のソフトでコーディングする事が多かったのですが、HTML、CSS、JavaScriptのほかにPHPなどを編集する事もおおくなり、テキストエディターへシフトしていきました。
私は、macのcoda、Atom、Bracketsを経て現在はVisual Studio Codeを使用しています。
coda2、Atom、Brackets、Visual Studio Code等は拡張機能（プラグイン）を導入する事で作業効率を上げる事ができるのでおすすめです。
後は気分で、テキストエディターを変えたりする事があります。今日は久しぶりにBracketsで編集してみるか、なんてこともありますがメインはVisual Studio Codeです。
Brackets
Bracketsは、Web開発を目的にしたソースコードエディタです。
アドビシステムズが作成したもので、MITライセンスでライセンスされたフリーのオープンソース・ソフトウェアで、現在はアドビをはじめとするオープンソースの開発者によってGitHub上でメンテナンスされています。
JavaScript、HTML、CSSで書かれています。
Brackets はクロスプラットフォームで、macOS、Windows、そしてほとんどの Linux ディストリビューションで利用できます。Bracketsは、HTML、CSS、JavaScriptのライブ編集機能が便利です。
拡張機能を追加する事も可能です。
Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Visual Studio Codeは、MicrosoftがWindows、Linux、macOS向けに開発したフリーのソースコードエディタです。
ユーザーはテーマ、キーボードショートカット、環境設定を変更したり、追加機能を追加する拡張機能をインストールしたりすることができます。
Visual Studio Code のソースコードは、Expat Licenseの下でリリースされています。
Microsoft のフリーでオープンソースのソフトウェア VSCode プロジェクトから来ていますが、コンパイルされたバイナリはどのような用途でもフリーウェアとなっています。
Atom
Atomは、macOS、Linux、Microsoft Windows用のフリーのオープンソース テキスト・ソースコードエディタ であり、Node.jsで書かれたプラグインや、GitHubによって開発された埋め込み型のGit Controlをサポートしている。
AtomはWeb技術を利用して構築されたデスクトップアプリケーションで、 拡張パッケージのほとんどはフリーソフトウェアライセンスを持ち、コミュニティで構築・保守されている AtomはElectron（旧称Atom Shell）をベースにしており、ChromiumとNode.jsを利用したクロスプラットフォームのデスクトップアプリケーションを可能にするフレームワークです。
拡張機能を追加する事も可能です。
Sublime Text
Sublime Text は、Python アプリケーション・プログラミング・インターフェース (API) を持つ、シェアウェアのクロスプラットフォーム・ソースコードエディタです。
多くのプログラミング言語やマークアップ言語をネイティブにサポートしており、ユーザーはプラグインを使って機能を追加することができます。
coda2
Codaは、Panic社が開発したmacOS用の商用プロプライエタリなWeb開発アプリケーションです。
2007年4月23日にリリースされ、2007年のApple Design AwardでBest User Experienceを受賞しました。2012年5月24日にCodaバージョン2.0がリリースされ、iPad版「ダイエットCoda」もリリースされました。
以前はMac App Storeでも配信されていましたが、2014年5月14日にCoda 2.5へのアップデートがサンドボックスの制限によりMac App Storeでは利用できなくなっています。
- 買い切り 9,800円（税込）
画像編集ソフト(デザイン)
ホームページ制作のデザイン面で必要なソフトウェアです。
UI・UXの設計、デザイン、画像加工、イラストなどホームページの見た目の部分を制作するのに必要なソフトです。
弊社では、Adobe Photoshop、Adobe XD、Adobe Illustratorをメインで使用しています。
Adobe Photoshop
https://www.adobe.com/jp/products/photoshop.html
Adobe Photoshopは、Adobe社が開発・公開しているWindowsとmacOS用のラスターグラフィックエディタです。
写真や画像加工を中心に使用しています。
- adobe Creative Cloudコンプリートプラン 5,680 円/月 （税別）
- フォトプラン 980 円/月 （税別）
Adobe XD
https://www.adobe.com/jp/products/xd.html
Adobe XDは、Adobe社が開発・公開しているWebアプリやモバイルアプリ用のデザインツールです。
macOSとWindowsに対応していますが、iOSとAndroid用のバージョンもあり、モバイルデバイス上で作業結果を直接プレビューすることができます。
Adobe XDは、Webサイトのワイヤーフレームやクリックスループロトタイプ、UI・UX設計の作成をサポートしています。
弊社ではホームページのデザインもAdobe XDをメインで使用しています。
- adobe Creative Cloudコンプリートプラン 5,680 円/月 （税別）
- XD単体プラン 1,180円/月 （税別）
- 無料プラン有り
Adobe Illustrator
https://www.adobe.com/jp/products/illustrator.html
Adobe Illustratorは、アドビ社が開発・販売しているベクターグラフィックエディタ・デザインプログラムのソフトウェアです。
バナーデザイン等に使用する事が多いです。
- adobe Creative Cloudコンプリートプラン 5,680 円/月 （税別）
- Illustrator単体プラン 2,480 円/月 （税別）
AFFINITY PHOTO
https://affinity.serif.com/ja-jp/photo/
Affinity Photoは、Serif社が開発したmacOS、iOS、 Windows用のラスターグラフィックエディタです。
Affinity Designer、Affinity Publisherと並ぶ「Affinity三位一体」の一つです。Affinity PhotoはmacOS App Store、iOS App Store、Microsoft Storeで購入できます。
買い切りのソフトなので、Adobe Photoshopの代わりに購入するデザイナーが多いです。
- 買い切り 6100円
AFFINITY DESIGNER
https://affinity.serif.com/ja-jp/designer/
Affinity Designerは、Serif社が開発したmacOS、iOS、Microsoft Windows用のベクターグラフィックエディタです。
Affinity Designerは、同社のウェブサイトから直接購入できるほか、Mac App Store、iOS App Store、Microsoft Storeでも購入できます。
買い切りのソフトなので、Adobe Illustratorの代わりに購入するデザイナーが多いです。
- 買い切り 6100円
Gimp
GIMPは、フリーでオープンソースのラスターグラフィックエディタであり、画像操作（レタッチ）や画像編集、自由形式描画、異なる画像ファイル形式間のトランスコードなどの作業に使用される。
- 無料
仮想サーバー
Local by Flywheel
WordPressのローカルサイトを簡単に作成できるので、自分で設定する必要はありません。
ワンクリックでサイトの準備ができ、SSLも含まれています。
環境の変更が簡単にできるので、PHP 5.6、PHP 7.3、7.4 をホットスワップ、ローカルから最新バージョンの MySQL を試すことができるので簡単にテスト環境を構築する事ができます。
番外編
これからホームページ制作を学ぶ時に名前が出て来るソフトだと思います。
プロを目指すのであれば、テキストエディターでのコーディングをおすすめしますが下記のソフトを活用して勉強しても良いかとおもいます。
Adobe Dreamweaver
https://www.adobe.com/jp/products/dreamweaver.html
Adobe Dreamweaverは、アドビ社のプロプライエタリなWeb開発ツールである。1997年にMacromedia社によって作成され[1]、2005年にMacromedia社がAdobe Systems社に買収されました。
macOSとWindowsのオペレーティングシステムで利用できます。
W3C標準に準拠したものになっています。最近のバージョンでは、CSS、JavaScript、ASP（ASP JavaScript、ASP VBScript、ASP.NET C#、ASP.NET VB）、ColdFusion、Scriptlet、PHPなどのさまざまなサーバーサイドスクリプト言語やフレームワークなどのWeb技術のサポートが改善されています。
- adobe Creative Cloudコンプリートプラン 5,680 円/月 （税別）
- Dreamweaver単体プラン 2,480 円/月 （税別）
ホームページ・ビルダー
https://www.justsystems.com/jp/products/hpb/
ホームページ・ビルダーはジャストシステムが開発している、Webページ及び、Webサイトを作成することができるソフトウェアです。
HTMLの知識が無くても簡単にホームページを作成できるソフトとして人気があります。
- 買い切り 9,900円（税込）～
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。
板浪雅樹
経歴： 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当
