【お得情報あり】Webデザインに必要なソフトウェア＆制作環境
Webデザインに必要な定番ソフトって何？
あとパソコンはどんなのがいいのかな？
というあなたのための記事です！
目次
このページでは「Webデザイナーとしてこれから活躍していきたい！」というあなたのために、現役15年目ならではの目線で、今の時代に必要な制作環境についてしっかり解説していきたいと思います。
目次でもサクッと触れていますが、内容は前半・後半で以下のように分けられています。
このページの内容
- 前半：必要なソフトウェア
- 後半：パソコンなどの制作環境
ソフトはおよそ半額で買える方法も合わせてご紹介していますので、ぜひご覧ください！
Web／UIデザイナー歴15年目のフリーランス。数々の実績を作りつつ北欧やスイスなどで現地のデザイナーと共に最先端のデザインに触れる。現在はこれまでの経験を元にしたWebメディアを運営。こんなフォントも作っています。
スポンサードサーチ
Webデザイン全体の作業工程から必要なソフトをご紹介
ここからは以下のようにWeb制作全体の流れに沿ったうえで、必要なソフトについてご紹介していきたいと思います。
Web制作のおおまかな流れ
01. Webデザインの「企画」で使うソフト
企画の中にはどんなサイトを作るか文章ベースでまとめたり、アイデアを考えてざっくりとしたイメージ図（ワイヤーフレーム）を作ったりする作業があります。
文章ベースでまとめる作業は
などを利用する場合が多く、ワイヤーフレームやサイトマップなどを作る際は
など色々と使うソフト（ツール）があります。
企画においてはどのソフトが定番か？でいうと、一昔前まではMicrosoft系のワード・エクセル・パワポが主流でしたが、現代では様々なツールが増えてきたためにどれが主流というものは存在しません。（統計を取ればはっきりするかもしれませんが。）
ただ、比較的Google系のサービス（Googleドキュメント・Google スライド）が主流になりつつあるのかなという気もします。理由としては無料で使える上に、クラウド上で他者と共有できる利便性が高いためです。
自分ひとりで制作する場合はどのツールでもいいですが、他社と協業するWeb業界ではやはり「だれでも使える共通ツール」が主流になる傾向があります。
スポンサードサーチ
02. Web制作の「デザイン作業」で使う現在主流のソフト
次にWeb制作の「デザイン作業」で現在一般的に使われているソフトをご紹介します。
デザインはやらないよ！という方はスキップして引き続きご覧ください。
現代では、デザイン制作に使うソフトは以下の製品が主流です。
現在主流のデザインソフト
※各ソフトの料金などの詳細は後ほど解説します。
こちらはできればどちらも用意しましょう。Web業界で働く上では定番のソフトです。それぞれ単体で購入することも可能ですが、Adobe製品が全て使い放題のAdobe CCで契約することが一般的です。
また、現在ではこれに加えてアプリ開発やレスポンシブサイト制作に強いSketchやAdobe XDが登場し、こちらでデザインを行う機会も増えてきました。
一般的になりつつあるデザインソフト
一昔前までのようにPCサイトを作るのみであればPhotoshopやIllustratorで十分でしたが、現代のようにスマホやタブレットなどの端末が増え、さらにアプリやWebサービスなどの「使う」サービスが増えたことで、より使い勝手（UI／ユーザーインタフェース）を重視した効率的なデザインができるSketchとAdobe XDのシェアが増えつつあります。
どちらの利用がいいかは悩みどころですが、現代ではSketchが先発だけに有力です。
ただし、今後はAdobe XDのシェアがSketchを超えていくのではないかなと個人的には思います。理由としては以下のとおりです。
理由
- Adobe XDがAdobe CCにも含まれている点
- SketchがMacにしか対応していない点（Adobe XDはWindows・Mac両対応）
とはいえ、現代ではまだまだPhotoshopとIlustratorが主流ですのでこちらを優先的に習得しましょう。
一方で使われなくなったソフト達・・・
使われなくなったソフト
- Adobe Fireworks
- Adobe Flash
聞いたことがある方もいらっしゃるかもしれませんが、これらソフトは現在ではほとんど使われていません。
特にFlashは、サイトのアニメーションを作る役割として多くのユーザーに愛されてきましたが、セキュリティの問題やメモリーを大量に消費するなどの理由から現在ではほとんど使われていません。
後継として登場したAdobe Animateを使う手もありますが、現代ではアニメーションはCSSやJavaScriptなどを利用して表現することが一般的となっていますので、そちらを優先的に習得しましょう。
このあとは、Photoshopなどのデザインソフトについて、それぞれもう少し詳しく解説していきます。
Adobe Photoshop（アドビフォトショップ）
画像編集ソフトとして有名なAdobe社のPhotoshopは、ホームページの完成イメージやバナー等を制作するツールとして昔から使われてきた老舗ソフトウェアです。
全体のレイアウトから細かい装飾・写真加工までオールラウンドに使われます。
以前は一度購入すれば半永久的に使えるパッケージ版が売られていましたが、現在では月額制のみの販売となります。
Photoshopのみ購入の場合はAdobe公式ページからの「フォトプラン – 12,936円（税込）／年」が最もお得ですが、Illustrator等も合わせて使いたい場合は後ほどご紹介するAdobe CCがおよそ半額で買えるオトクな方法がおすすめです。
Adobe公式ページ
Adobe Illustrator（アドビイラストレーター）
IllustratorもPhotoshopと同じAdobe社のソフトウェアで、Photoshopと合わせて使用されてきた老舗ソフトウェアです。
印刷物をデザインする際に利用されることが多いIllustratorですが、Photoshopでは苦手なイラストやロゴなどの図形デザインはIllustratorの方が利用しやすいという理由で普及してきました。
たまにAmazonで最大47％オフ！などのセールが行われているようですが、通常はAdobe公式サイトから「単体プラン – 28,776円（税込）／年」で購入するのがお得です。
ただし、こちらもPhotoshopと同時購入する場合は後ほどご紹介するAdobe CCがおよそ半額で買える方法がおすすめです。
Adobe公式ページ
Sketch（スケッチ）
Sketchはここ数年で急激にシェアを伸ばしてきたUIデザインに特化したソフトウェアです。アプリやレスポンシブサイトなどが作りやすく軽快に動きますが、対応OSは現在ではMacの英語版のみとなります。
ソフトの料金は初回1年目は99ドル（約10,600円）で、翌年より1年ごとのライセンス料69ドル（約7,400円）が必要です。ライセンスは切れてもそのまま使えますが、ソフトのアップグレードは行われなくなります。
アプリやWebサービスを開発する企業では、現段階ではこのソフトを利用して制作する会社が多いため、Sketchのスキルがあれば就職にも有利です。企業への就職を目指す方はぜひ習得しましょう。
参考
Adobe XD（アドビエックスディー）
Sketchにつづき、AdobeでもUIデザインに特化したソフトウェア、Adobe XDを2017年に発表しました。
こちらもSketchと似たような使い方ですが、軽快な動作と細かい点で違いがあります。どんどんアップデートされていきますので1年後には今以上に便利になっている可能性大です。
こちらはMacとWindows両方へ対応しているのもポイントです。Photoshopと同じく月額販売制で年間15,576円（税込）ですが、後ほどご紹介するAdobe CCを契約すればそれに含まれているため追加購入などは必要ありません。
はじめにご紹介した通り、今後はAdobe XDのユーザーが増えることが予想されます。
- Adobe XD
※Adobe CCユーザーは利用可
参考
Adobe CC（アドビクリエイティブクラウド）
Adobe CCは、これまでご紹介したPhotoshopやIllustrator、Adobe XDを含め、様々なAdobe製品がすべて使い放題のセットになった商品です。
- Adobe CC ※すべてのAdobe製品が使える
デザインツールはもちろん、構築、動画編集、アニメーション制作などおよそ15種類のAdobe製品がすべて利用可能で、価格は1年で72,336円（税込）となっています。
1年でこの価格！？と目が飛び出す方もいらっしゃると思います。
数年前まで販売されていたパッケージ版でこれらソフトを揃えると100万円は超えますが、それが全て使い放題でこの価格になったので、手に入れやすくなったといえばそうですが。
それにしてもハードル高いですよね・・・
そこでご紹介するのが、ヒューマンアカデミーの「たのまなアドビトレーニング講座」で講座とセットでAdobe CCを購入することです。
スポンサードサーチ
Adobe CCをお得に安く購入する方法
ヒューマンアカデミーのたのまなアドビトレーニング講座は「通信講座1ヶ月分」と「Adobe CCアカデミック版1年版」がセットになって39,980円（税込）で購入可能です。
- たのまなアドビトレーニング講座
※Adobe CCがお得に購入可！
アカデミック版というのはつまり「学生価格」といえば分かりやすいと思います。
一般的にこのアカデミック版は学生または教育機関で働く従業員しか購入することができません。
しかしこの「たのまな」は社会人のあなたでも購入可能です。こう聞くと怪しいですが、もちろん合法的な購入方法です。
実はこの商品は、Adobeの動画トレーニング講座とセットにすることで、誰でもAdobe CCアカデミック版を購入できるようにしたAdobe認定の通信講座なのです。
アカデミック版といえど機能的には通常版と変わりなく、仕事として商用利用も可能です。
Adobe CC1年版はもちろん、各ソフトの使い方を解説した映像講座が1ヶ月学び放題！しかも質問無制限のサービスが付いて39,980円（税込）なのでかなりお得に購入可能です。PhotoshopとIllustrator単体購入よりも断然お得ですよ！
※ただしこちらは2020年9月30日（水）までの限定キャンペーン商品となります！
- たのまなアドビトレーニング講座
※Adobe CCがお得に購入可
より詳しくはこちらの記事でも解説していますのでご覧ください。
【Adobe CCを安く買う方法】2020年最新版まとめ＜社会人可！講座付き＞
Adobe CCは税込72,336円／年もします。学生版なら安く買えますがそれ以外の方は厳しいのが現実。ところが現在ではなんと社会人のあなたでもおよそ半額で買える方法があるのです！しかもAdobe製品の講座付！今回はそんな格安購入方法を2020年最新版としてまとめてご紹介します。
このあとはWebの構築作業に必要なソフトについて解説します。デザイン以外興味がない方はスキップしていただいても構いません。
03. HTML・CSSなどの構築（コーディング）に使うソフト
構築作業はパソコンに始めから入っているメモ帳などでも制作が可能ですが、専用のソフトウェア（テキストエディタ）を利用することでより効率的な作業を行うことができます。
ここでは多くのプロが利用している以下4種類のソフトウェアをご紹介します。
プロ愛用のテキストエディタ
Adobe Dreamweaver（アドビ ドリームウィーバー）
構築作業を行うソフトとして有名なDreamweaverもAdobe社のソフトウェアです。
単体で購入する場合は1年で28,776円（税込）となりますが、デザインの項目でご紹介したAodebe CCにも含まれていますので、お得な方法で購入された方はわざわざ改めて買う必要はありません。
Photoshopと同じく老舗ソフトウェアとしてプロのWebデザイナーに使用されてきました。事実上の業界標準となっておりましたが、最近では次からご紹介する、より安価で軽快なソフトも出てきておりそちらをメインで使用するユーザーも多いです。
さまざまな編集機能・レイアウト表示・ファイル管理などの機能がひとまとめになって高品質なページを効率的に作成することができます。
- Adobe Dreamweaver
※Adobe CCユーザーは利用可
Sublime Text（サブライムテキスト）
Sublime Textは安価で機能的で動作が軽いソフトウェアです。英語版ですが日本語化できるプラグインもあります。
通常はライセンス版として購入が必要ですが、試用版として無料で使い続けることが可能なため無料ユーザーが多くを締めます。※ただし「購入してね」メッセージがよく現れます。
エラーチェックやHTML5の構文チェック、スニペット集、自動補完機能などが追加できるプラグインを自由に追加してオリジナルにカスタマイズすることができます。Windows・Mac共に対応です。
Atom（アトム）
Atomは完全無料のソフトウェアです。
無料なのにとにかく便利なプラグインが追加でき、インターフェースも見やすく機能的なテキストエディタとして有名です。
こちらは始めから日本語対応なのでより初心者向きかもしれません。
Brackets（ブラケッツ）
BracketsはAdobeが提供する無料テキストエディタです。
最大の特徴は構築をしながらどのように構築されているかリアルタイムに画面上で確認ができることです。
Adobeならではの使いやすさと、各種機能、そしてはじめから日本語にも対応している点などが評価され、愛用者はかなり増えてきています。
初心者向けとしてはこちらが最もおすすめです。
スポンサードサーチ
04. Webデザイン・構築が完了したら、最後に公開するソフト
企画 → デザイン → 構築が完了したらあとは公開のみ！
以下無料ソフトを利用して作ったサイトを公開しましょう。
番外編：よく聞くWordPressって何？
WordPressはWeb上でブログを書くサーバーインストール型の無料ソフトです。現在ではブログ以外にも一般的な企業サイトや公共機関のサイトでもよく利用されています。
よくあるアメブロやエキサイトブログなどは会員登録するとそのままブログを書くことができますが、このWordPressは自分で用意したレンタルサーバーにインストールする形で利用します。
HTML・CSS・PHPのスキルがあれば自由に作ることができ、さらにブログツールだけに更新管理も容易なため、今や世界の26.5%のサイトはこのWordPressで作られています。
- WordPress ※無料で本格的なサイト構築可能
最後に、Webデザイナーに必要な制作環境について解説します。興味がない方はスキップしていただいても構いません。
Webデザインに必要な制作環境
Webデザインに必要な以下3つの制作環境について解説します。
制作環境
01. パソコン
パソコンはWindowsかMacかで分かれますが、Webサイト制作はどちらがいい？に対する答えはこの業界にはありません。どちらも半々くらいのシェアで使われています。
デザインをベースに行う方の場合はMacが主流です。一方で構築やプログラミングをベースに行う場合はWindows派もMac派もそれぞれ存在します。
しかし実際は両方のパソコンを用意しておくことが必要です。
理由は、作ったWebサイトがWindowsとMacの各インターネットソフトで多少見え方が異なるため、完成したサイトの表示が問題ないか両方のパソコンで確認する必要があるためです。
確認用のWindowsとしてはWindows10が入っているPCであればどれでも大丈夫ですので、安い1台を用意しておきましょう。
デスクトップPC？それともノートPC？
個人的なおすすめとしては、MacBook Proをメインで用意し外出先でも利用しつつ、自宅では外部ディスプレイと接続して使う方法があります。私自身もこのタイプです。
EIZO FlexScan 23.8インチ ディスプレイ モニター (フルHD/IPSパネル/ノングレア/ブラック/5年間保証&無輝...
ノートパソコン1台でも良いのですが、やはり大きいモニターがあれば作業の進みが全く違います。ノートパソコンとデスクトップパソコンの2台を用意するよりもコストも掛からず、いちいちデータの共有が必要なくなるのでだいぶ効率的ですよ。
02. スマートフォン
スマートフォンが必要な理由は上記同様、表示の確認を行うためです。できればAndroidとiPhoneの2種類があれば理想ですが、どちらか一方の場合はiPhoneにしましょう。
海外では圧倒的にAndroidユーザーが多いですが、日本国内においてはiPhoneユーザーがAndroidの2倍です。
昔はパソコンだけで充分でしたが今ではスマートフォンのシェアが半分以上を占めていますので、こちらは必ず用意しましょう。
03. タブレット
タブレットも表示確認用に必要ですが、こちらは必ずしも必須というわけではありません。タブレットでの表示のされ方は基本的にはPCでも簡易的に確認する方法があります。（ただ本業でWebをやっていくならやはり必要ではないでしょうか）
Webデザインに必要なソフト＆制作環境 まとめ
ここまで、ホームページ制作を行うために必要なソフトウェア・制作環境をご紹介してまいりましたがいかがでしたでしょうか。
だいぶ長くなってしまったので簡単にまとめますと、Webデザインで購入するソフトはAdobe CCのみで十分です。
これ一つを購入しておけば以下の主流ソフトが1年間全て使い放題です。
デザイン作業
構築作業
そして、購入するならヒューマンアカデミーのたのまなアドビトレーニング講座で購入しましょう。通信講座とAdobe CCアカデミック版（1年）がセットになって39,980円（税込）で断然お得に購入可能です。
以上！Webデザインに必要なソフトと制作環境のご紹介でした。
色々とお金がかかって大変な部分もありますが、ソフトウェアがあることで様々なクリエイティブを作り出せる魅力は何ものにも代えがたい楽しさがあります。
是非この楽しさを経験してみてくださいね。
このページが参考になればとても嬉しいです！
【2019年版】未経験からWebデザイナーになるには？徹底解説！
「Webデザイナーになって就職・転職したい！」「在宅ワーク・フリーランスでしっかり稼ぎたい！」このページはそんなWebデザイン業界を目指すあなたのためのWeb業界講座です。