2020年版 ホームページ制作 で使用するソフトウェア

2020.09.03.

ホームページ制作

便利なツール

株式会社TREVOの月額制ホームページ制作サービス
PR

ホームページ制作の開発環境は、少しずつですが変化しています。
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

http://brackets.io/

Bracketsは、Web開発を目的にしたソースコードエディタです。
アドビシステムズが作成したもので、MITライセンスでライセンスされたフリーのオープンソース・ソフトウェアで、現在はアドビをはじめとするオープンソースの開発者によってGitHub上でメンテナンスされています。
JavaScript、HTML、CSSで書かれています。
Brackets はクロスプラットフォームで、macOS、Windows、そしてほとんどの Linux ディストリビューションで利用できます。Bracketsは、HTML、CSS、JavaScriptのライブ編集機能が便利です。
拡張機能を追加する事も可能です。

Visual Studio Code

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

https://atom.io/

Atomは、macOS、Linux、Microsoft Windows用のフリーのオープンソース テキスト・ソースコードエディタ であり、Node.jsで書かれたプラグインや、GitHubによって開発された埋め込み型のGit Controlをサポートしている。
AtomはWeb技術を利用して構築されたデスクトップアプリケーションで、 拡張パッケージのほとんどはフリーソフトウェアライセンスを持ち、コミュニティで構築・保守されている AtomはElectron(旧称Atom Shell)をベースにしており、ChromiumとNode.jsを利用したクロスプラットフォームのデスクトップアプリケーションを可能にするフレームワークです。
拡張機能を追加する事も可能です。

Sublime Text

Sublime Text

https://www.sublimetext.com/

Sublime Text は、Python アプリケーション・プログラミング・インターフェース (API) を持つ、シェアウェアのクロスプラットフォーム・ソースコードエディタです。
多くのプログラミング言語やマークアップ言語をネイティブにサポートしており、ユーザーはプラグインを使って機能を追加することができます。

coda2

Coda2

https://panic.com/jp/coda/

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

Photo Shop

https://www.adobe.com/jp/products/photoshop.html

Adobe Photoshopは、Adobe社が開発・公開しているWindowsとmacOS用のラスターグラフィックエディタです。
写真や画像加工を中心に使用しています。

  • adobe Creative Cloudコンプリートプラン 5,680 円/月 (税別)
  • フォトプラン 980 円/月 (税別)

Adobe XD

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

Adobe Illustrator

https://www.adobe.com/jp/products/illustrator.html

Adobe Illustratorは、アドビ社が開発・販売しているベクターグラフィックエディタ・デザインプログラムのソフトウェアです。
バナーデザイン等に使用する事が多いです。

  • adobe Creative Cloudコンプリートプラン 5,680 円/月 (税別)
  • Illustrator単体プラン 2,480 円/月 (税別)

AFFINITY PHOTO

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

AFFINITY DSIGNER

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

https://www.gimp.org/

GIMPは、フリーでオープンソースのラスターグラフィックエディタであり、画像操作(レタッチ)や画像編集、自由形式描画、異なる画像ファイル形式間のトランスコードなどの作業に使用される。

  • 無料

仮想サーバー

Local by Flywheel

local WordPress

https://localwp.com/

WordPressのローカルサイトを簡単に作成できるので、自分で設定する必要はありません。
ワンクリックでサイトの準備ができ、SSLも含まれています。
環境の変更が簡単にできるので、PHP 5.6、PHP 7.3、7.4 をホットスワップ、ローカルから最新バージョンの MySQL を試すことができるので簡単にテスト環境を構築する事ができます。

番外編

これからホームページ制作を学ぶ時に名前が出て来るソフトだと思います。
プロを目指すのであれば、テキストエディターでのコーディングをおすすめしますが下記のソフトを活用して勉強しても良いかとおもいます。

Adobe Dreamweaver

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円(税込)~

関連の記事

2015年3月のTREVO SEO対策 の結果
  • SEO

ご報告が遅くなりましたが、TREVOの2015年3月の SEO対策 結果です。 3月は決算の時期もありまして、忙しくブログの更新もペースが落ちてしまいました。 来週ぐらいからブログの更新も今まで通りのペースに戻せそうです。[...]

  • Avatar TREVOWP
読みたくなる文章と読みたくなくなる文章

文章と心理学には深い関係があります。人が小説で感動するように、文章というのは人の心理に大きな影響を与えるのです。 今の時代、インターネット上でいろいろな文章を目にする機会も多いかと思います。その中には、読みたくなる文章と読みたくなくなる文章というものがあるかと思います。 もちろん、書き手の人間性など[...]

  • Avatar TREVOWP
ホームページ制作の為に必要な理想の環境を常に考える

これは私個人だけかもしれませんが、仕事場の環境を良くしたいと常々考えています。 解像度の高いモニタを自費で購入して設置したり、ペンタブレットの導入をしたり、使いやすい高額なマウスを購入したりと、デスク周りの環境を良く出来ないか、色々な機器を購入しては試しています。 最近話題になっているのがAltwo[...]

  • Avatar TREVOWP
ブログの運用と活用方法を考えてみる

このブログを本格的に始めて約1年ぐらいが経ちました。 当初はSEO対策の為に立ち上げたコンテンツの一つで、営業日はほぼ毎日更新を続ける事を目標に運用を頑張ってきました。 チリも積もればという事で、記事数も530を超え着実にコンテンツ量を増やしております。 そこで、このブログも次のステップに持っていき[...]

  • Avatar TREVOWP