A子Webデザインに必要な定番ソフトって何？
あとパソコンはどんなのがいいのかな？
というあなたのための記事です！
このページでは「Webデザイナーとしてこれから活躍していきたい！」というあなたのために、現役15年目ならではの目線で、今の時代に必要な制作環境についてしっかり解説していきたいと思います。
目次でもサクッと触れていますが、内容は前半・後半で以下のように分けられています
このページの内容
- 前半：必要なソフトウェア
- 後半：パソコンなどの制作環境
アドバイザーソフトはおよそ半額で買える方法も合わせてご紹介していますので、ぜひご覧ください！
執筆者紹介
Web／UIデザイナー歴17年目のフリーランス。これまで数々のWebデザインスクール取材＆体験を行ってきた経験をもとにしたWebメディアを運営。多数の大手企業Webサイト制作経験あり。» 詳細はこちら
Webデザイン全体の作業工程から必要なソフトをご紹介
ここからは以下のようにWeb制作全体の流れに沿ったうえで、必要なソフトについてご紹介していきたいと思います
Web制作のおおまかな流れ
01. Webデザインの「企画」で使うソフト
企画の中にはどんなサイトを作るか文章ベースでまとめたり、アイデアを考えてざっくりとしたイメージ図（ワイヤーフレーム）を作ったりする作業があります。
文章ベースでまとめる作業は
などを利用する場合が多く、ワイヤーフレームやサイトマップなどを作る際は
など色々と使うソフト（ツール）があります。
企画においてはどのソフトが定番か？でいうと、一昔前まではMicrosoft系のワード・エクセル・パワポが主流でしたが、現代では様々なツールが増えてきたためにどれが主流というものは存在しません。
ただ、比較的Google系のサービス（Googleドキュメント・Google スライド）が主流になりつつあるのかなという気もします。理由としては無料で使える上に、クラウド上で他者と共有できる利便性が高いためです。
自分ひとりで制作する場合はどのツールでもいいですが、他社と協業するWeb業界ではやはり「だれでも使える共通ツール」が主流になる傾向があります。
02. Web制作の「デザイン作業」で使う現在主流のソフト
次にWeb制作の「デザイン作業」で現在一般的に使われているソフトをご紹介します。
デザインはやらないよ！という方はスキップして引き続きご覧ください。
現代では、デザイン制作に使うソフトは以下の製品が主流です。
現在主流のデザインツール
Web業界で働く上では定番のソフトです。それぞれ単体で購入することも可能ですが、Adobe製品が全て使い放題のAdobe CC
で契約することが一般的です。
また、現在ではこれに加えてアプリ開発やレスポンシブサイト制作に強いFigmaやAdobe XDが登場し、こちらでデザインを行う機会も増えてきました。
一般的になりつつあるデザインツール
Sketchが先発だけにUIデザインツールの定番として使用されてきましたが、現在はAdobe XD・Figmaのシェアが圧倒的に増えています。
アドバイザーとはいえ、現代ではまだまだPhotoshopとIlustratorが主流ですのでこちらを優先的に習得しましょう。
一方で使われなくなったソフト達・・・
使われなくなったソフト
- Adobe Fireworks
- Adobe Flash
聞いたことがある方もいらっしゃるかもしれませんが、これらソフトは現在ではほとんど使われていません。
特にFlashは、サイトのアニメーションを作る役割として多くのユーザーに愛されてきましたが、セキュリティの問題やメモリーを大量に消費するなどの理由から現在ではほとんど使われていません。
後継として登場したAdobe Animateを使う手もありますが、現代ではアニメーションはCSSやJavaScriptなどを利用して表現することが一般的となっていますので、そちらを優先的に習得しましょう。
アドバイザーこのあとは、Photoshopなどのデザインソフトについて、それぞれもう少し詳しく解説していきます。
Adobe Photoshop（アドビフォトショップ）
画像編集ソフトとして有名なAdobe社のPhotoshopは、ホームページの完成イメージやバナー等を制作するツールとして昔から使われてきた老舗ソフトウェアです。
全体のレイアウトから細かい装飾・写真加工までオールラウンドに使われます。
以前は一度購入すれば半永久的に使えるパッケージ版が売られていましたが、現在では月額制のみの販売となります。
Photoshopのみ購入の場合はAdobe公式ページからの「フォトプラン – 12,936円（税込）／年」が最もお得ですが、Illustrator等も合わせて使いたい場合は後ほどご紹介するAdobe CCがおよそ半額で買えるオトクな方法がおすすめです。
Adobe Illustrator（アドビイラストレーター）
IllustratorもPhotoshopと同じAdobe社のソフトウェアで、Photoshopと合わせて使用されてきた老舗ソフトウェアです。
印刷物をデザインする際に利用されることが多いIllustratorですが、Photoshopでは苦手なイラストやロゴなどの図形デザインはIllustratorの方が利用しやすいという理由で普及してきました。
たまにAmazonで最大47％オフ！などのセールが行われているようですが、通常はAdobe公式サイトから「単体プラン – 28,776円（税込）／年」で購入するのがお得です。
ただし、こちらもPhotoshopと同時購入する場合は後ほどご紹介するAdobe CCがおよそ半額で買える方法がおすすめです。
Figma（フィグマ）
FigmaはWebブラウザ上で簡単にデザインができるツールで、無料で利用できるサービスです。
その手軽さと使いやすで現在急激にシェアを伸ばしています。
共同作業が特にしやすく、デザインツールのみならずプロジェクト全体で利用価値が高いツールです。
一方、このあとご紹介するAdobeから買収提案を受けていることから、今後Adobeブランドになるのではと噂されている状態でもあります。
参考
Adobe XD（アドビエックスディー）
UIデザインに特化したAdobeのデザインツール。
これまでシェアを拡大してきましたが、2023年に突如販売ページを閉鎖し、一方でFigmaを買収 すると発表したことでもしかするとFigmaと統一されるのではという噂がある状態。（2023年7月時点）
現在単体での販売はされていませんが、後ほどご紹介するAdobe CCに含まれているため、利用したい場合はそちらの契約が必須です。
参考
- Udemy：Adobe XD 手を動かして覚えるプロトタイピング
- Amazon：Adobe XDではじめるWebデザイン&プロトタイピング
Sketch（スケッチ）
SketchはUIデザインに特化した先行ツールとして多く利用されてきましたが、現在はXDユーザーが多くを占めます。
ソフトの料金は初回1年目は99ドル（約10,800円）で、翌年より1年ごとのライセンス料79ドル（約8,600円）が必要です。ライセンスは切れてもそのまま使えますが、ソフトのアップグレードは行われなくなります。
アプリやWebサービスを開発する企業では、現段階ではこのソフトを利用して制作する会社が多いため、Sketchのスキルがあれば就職にも有利です。企業への就職を目指す方はぜひ習得しましょう。
参考
- Udemy：Webやアプリの最新デザインツール Sketch3
- Amazon：UIデザイナーのためのSketch入門&実践ガイド
Adobe CC（アドビクリエイティブクラウド）
Adobe CCは、これまでご紹介したPhotoshopやIllustrator、Adobe XDを含め、様々なAdobe製品がすべて使い放題のセットになった商品です。
デザインツールはもちろん、構築、動画編集、アニメーション制作などおよそ15種類のAdobe製品がすべて利用可能で、価格は1年で72,336円（税込）となっています。
※学生・教職員の方は26,136円／年で購入可能です。
1年でこの価格！？と目玉が飛び出す方もいらっしゃると思います。
数年前まで販売されていたパッケージ版でこれらソフトを揃えると100万円は超えますが、それが全て使い放題でこの価格になったので、手に入れやすくなったといえばそうですが。
A子それにしてもハードル高いですよね・・・
ところが実はこのソフト、なんと半額近くの39,980円（税込）で購入する方法があるのです！もちろん社会人のあなたでも購入可能。
詳しくは以下の記事で解説していますのでぜひご覧ください
アドバイザーこのあとはWebの構築作業に必要なソフトについて解説します。
デザイン以外興味がない方はスキップしていただいても構いません。
03. HTML・CSSなどの構築（コーディング）に使うソフト
構築作業はパソコンに始めから入っているメモ帳などでも制作が可能ですが、専用のソフトウェア（テキストエディタ）を利用することでより効率的な作業を行うことができます。
ここでは多くのプロが利用している以下のソフトウェアをご紹介します
プロ愛用のテキストエディタ
Adobe Dreamweaver（アドビ ドリームウィーバー）
構築作業の定番のツールはAdobe社のDreamweaverです。
単体で購入する場合は1年で28,776円（税込）となりますが、デザインの項目でご紹介したAodebe CCにも含まれていますので、お得な方法で購入された方はわざわざ改めて買う必要はありません。
Photoshopと同じく老舗ソフトウェアとしてプロのWebデザイナーに使用されてきました。事実上の業界標準となっておりましたが、最近では次からご紹介する、より安価で軽快なソフトも出てきておりそちらをメインで使用するユーザーも多いです。
さまざまな編集機能・レイアウト表示・ファイル管理などの機能がひとまとめになって高品質なページを効率的に作成することができます。
- Adobe Dreamweaver ※Adobe CCユーザーは利用可
Visual Studio Code
Visual Studio CodeはMicrosoftから提供されている無料のコードエディタです。Microsoft提供とはいえMacでも使用可能。「VSCode（ブイエスコード）」とも呼ばれています。
「拡張機能」と呼ばれる仕組みで機能を増やすことが可能で、様々な開発環境を構築することができます。
またクラウド環境との接続も可能なので色々と連携もしやすく、ここ数年で急速に利用者が増えてきました。現在は多くの制作会社で定番ツールになりつつあります。
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台を用意しておきましょう
ポチップ
※補足
メインのマシンを購入する場合はメモリは16GB以上がストレスなく作業できるのでおすすめです。ハードディスクは256GB以上が価格バランス的にも良いのではないでしょうか。
デスクトップPC？それともノートPC？
個人的なおすすめとしては、MacBook Proをメインで使用しつつ、自宅では外部ディスプレイと接続して使う方法があります。私自身もこのタイプです。
ポチップ
ノートパソコン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デザインに必要なソフトと制作環境のご紹介でした。
色々とお金がかかって大変な部分もありますが、ソフトウェアがあることで様々なクリエイティブを作り出せる魅力は何ものにも代えがたい楽しさがあります。
是非この楽しさを経験してみてくださいね。
アドバイザーこのページが参考になればとても嬉しいです！
