こんにちは。ぽつです。
Webデザイナーを目指している方で、
こんな方がいるのではないでしょうか。
プロのWebデザイナーはどんなツールを使ってるの？
定番のソフトってなに？
今回はこんな疑問にわかりやすくお答えしていきます！
これからWebデザイナーを目指す方はぜひ参考にしてください。
目次
Webデザインの工程ごとに違うソフトを使う
Webデザインは工程ごとに別のソフトを使います。
作業の工程は以下に分類されます。
1．企画
2．デザイン
3．コーディング
4．公開
今回は作業工程ごとに分けて解説していきます。
それでは見ていきましょう！
Webデザインの「企画」で必要なソフト
企画では、制作するWebサイトのざっくりしたアイデアをまとめた文章やイメージ図を作成します。
文章でまとめる作業には
・Google ドキュメント
・Microsoft Word
などを利用し、ワイヤーフレーム（イメージ図）やサイトマップを制作する際は、
・Adobe XD
・cacoo
・figma
を使うことが多いです。
文章作成ソフトはみなさんご存じだと思うので、今回はワイヤーフレームのデザインに使用するソフトを紹介していきます。
Adobe XD（アドビ・エックスディー）
最初に紹介するのは「Adobe XD」です。
「Adobe」で最近実装された比較的新しいツールです。
特にWebデザインの企画とデザインを両方こなすツールとして注目されています。
ワイヤーフレームに始まり、Webページの完成見本としての「デザインカンプ」も制作することができます。
次章で紹介するAdobe Illustrator、Photoshopなどのグラフィックソフトを使うのが一般的でしたが、最近ではAdobe XDを活用して、ワイヤーフレームからアニメーション・プロトタイプを作成するデザイナーも少なくありません。
cacoo（カクー）
次に紹介するのは「cacoo（カクー）」です。
「アイデアをすぐに形にできる圧倒的な使いやすさ」をコンセプトに、Webサイトのワイヤーフレーム、サイトマップの制作をすることができます。
リアルタイムで複数人と共同作業ができ、メンバーの編集履歴を残すことも可能です。
複数人で作成する企業には特におすすめのソフトです。
figma（フィグマ）
次に紹介するのは「figma」です。
ブラウザ上で簡単にデザインができるツールで、インターフェースのデザインを場所を選ばずブラウザ上で起動ができるため、利便性が高くチーム体制での作業にも向いています。
フリープランがあり無料で利用できるので、誰にでも簡単に導入できることから、デザイナーでない人でもちょっとした用途に役立つでしょう。
Webデザインの「デザイン」で使うソフト
次に、「デザイン」で使うソフトを紹介していきましょう。
先ほどの「企画」の内容と若干被るところもありますが、使うソフトは以下の通りです。
現在主流のソフト
・Adobe Photoshop
・Adobe Illustrator
こちらはできればどちらも用意しましょう。Web業界で働く上で定番と言って良いでしょう。
それぞれ単体で購入することも可能ですが、
Adobe製品が全て使い放題の「Adobe CC（クリエイティブクラウド）」で契約することがおすすめです。
一般的になりつつあるソフト
・Adobe XD
・Sketch
Sketchが先発なだけにUIデザインツールの定番として使用されていましたが、現在はAdobe XDのシェアが圧倒的に増えており、以下のメリットを考えてもAdobe XDが一般的と言えるでしょう。
Adobe XDを使うメリット
・Adobe XDがAdobe CCにも含まれている点
・SketchがMacにしか対応していない点（Adobe XDはWindows・Mac両方対応）
Adobe Photoshop（フォトショップ）
Photoshopでは写真の加工の他にさまざまな用途で使用します。
Web制作における用途は以下の通りです。
✔️Webサイトのデザイン制作
✔️デザインから画像素材（jpeg、png）への書き出し
✔️Webサイトに掲載する写真の加工やサイズ圧縮
画像加工の印象が強いですが、Webのデザインに欠かせないツールです！
Adobe Illustrator（イラストレーター）
Illustratorはデザインを1から制作するときによく使用されます。
特にWebデザインにおける用途は以下の通りです。
✔️Webサイトのデザイン制作
✔️デザインカンプからの画像素材（jpg、png）への書き出し
✔️アイコンフォントの加工やSVGデータの出力
主役として使用する機会は少ないですが、必須ツールと言えます。
Adobe XD（アドビ・エックスディー）
先ほど紹介しましたが、XDは現在利用する方が増えているWebデザインツールです。
用途は以下の通りです。
✔️Webサイトのワイヤーフレームやデザインの制作
✔️デザインカンプからの画像素材（jpg、png）への書き出し
✔️プロトタイプの作成や検証、チームやクライアントへの共有
Adobe CCを契約していれば、以上の3つは全て使い放題です！
Sketch（スケッチ）
Sketchはここ数年で急激にシェアを伸ばしてきたUIデザインに特化したソフトウェアです。
アプリやレスポンシブサイトなどが作りやすく軽快に作動しますが、対応OSは現在ではMacの英語版のみとなります。
Windowsでは使うことができません…
ソフトの料金は団体向けで買い切り99ドルで、法人だと月額9ドルもしくは年間99ドルの定期購入を選ぶことができます。
いずれも1ヶ月間の無料トライアルができます。
Sketchの特徴は動作の速さです。
Adobeソフトの動作はもっさりしがちですが、SketchはUIデザインを快適に行える超高速起動です。
重い画像ファイルでも動作が重くならず、効率的に作業ができます。
Webデザインの「コーディング」で使うソフト
Webサイトの作成で最も重要なのがHTML・CSSなどの構築である「コーディング」です。
プロが愛用しているテキストエディタを紹介していきます。
Adobe Dreamweaver（ドリームウィーバー）
構築作業の定番ツールは「Adobe Dreamweaver」です。
これもAdobe CCに含まれていますので、契約した方は使い放題です。
構築をしながら適宜反映状況を確認できるレイアウト表示、効率的な編集機能、ファイル管理など、すぐに使える便利な機能が充実しています。
もちろんプラグインの導入で自分好みにカスタマイズも可能。
また、このDreanweaverも「Adobe CC」で利用可能です。
Visual Studio Code（通称「VSCode」）
Visual Studio CodeはMicrosoft社が提供する無料のコードエディタです。
Microsoft提供ではありますが、Macでも使用可能です。
「VSCode」と呼ばれています。
拡張機能と呼ばれるプラグインを導入し、機能を充実させることができます。
また、クラウド環境との接続も可能なので、連携が簡単で利用者もたくさんいます。
Atom（アトム）
Atomは完全無料のコードエディターです。
便利なプラグインを多数追加することで、より自分好みの環境で作業することができます。
インターフェースも見やすく、日本語対応していることから、初心者にはよりオススメできます。
同時に複数人での編集が可能なので、グループでの作業にも対応しています。
Sublime Text（サブライムテキスト）
Sublime Textは安価で動作の軽い機能的なソフトフェアです。
通常はライセンス版として購入版が必要ですが、試用版として無料で使い続けることが可能なため、無料ユーザーが多数います。
ただし「購入してね」メッセージが頻繁に表示されます。
英語版ですが、日本語化できるプラグインがあります。
エラーチェック、HTML5の構文チェック、スニペット集、自動保管機能などを追加できるプラグインを自由に追加してカスタマイズすることができます。
Webデザインの「公開」で使うソフト
Webサイトの設置先であるサーバーに足して、ファイルをアップロード・ダウンロードするにはFTPソフトを使用します。
FTPソフト
：FTP（File Transfer Protocol）という通信を利用して、PCとサーバー間でのファイルの送受信（ダウンロード・アップロード）をするソフト
一般的なFTPソフトは以下の通りです。
これからFTPソフトを導入する場合、Windowsの場合は「WinSCP」が、Macは「FileZilla」がオススメです。
ホームページ作成サービスおすすめ3選
さて、ここからは「ホームページ作成サービス」を紹介していきます。
ご存じでない方に説明しておくと、
「ホームページ作成サービス」：専用ソフトをダウンロードしなくてもホームページが作れるツール
ホームページに必要なシステムやサーバーは全てサービスに含まれています。
必要なのはインターネットだけです！
オススメのホームページ作成サービスを3つ紹介します。
①ジンドゥー
②Wix
③Ameba Owned
ジンドゥー（Jimdo）
最初にオススメしたいのは「ジンドゥー」です。
国内では170万人が使用している最大級のホームページ作成サービスです。
ジンドゥーには難易度の異なる2つのサービスがあります。
「ジンドゥーAIビルダー」：作成アシスタント付きで初心者向け
「ジンドゥークリエイター」：コーディング可能で中級者・上級者向け
通常、ホームページ作成サービスではテキストエディターで行うようなコーディングはできませんが、それを可能にしています。
これからWebデザイナーを目指す方には満足できるサービスです。
ジンドゥーの特徴
・難易度の違う2つのサービスがある
・初心者から中級者まで満足度の高いサービス
・無料プランあり（サーバー容量500MBまで）
・有料プランは1ヶ月あたり990円〜
こんな人にオススメ
・無料でホームページを作りたい
・有名な定番サービスを利用したい
・コーディングの経験を積みたい
・初心者から上級者まで扱えるサービスを利用したい
Wix（ウィックス）
次にオススメするのは「Wix」です。
Wixとジンドゥーは世界的に有名なホームページ作成2大サービスです。
Wixの魅力は、600以上もの豊富なテンプレートがあること。
眺めるだけで楽しくなるほど、おしゃれでクリエイティブなテンプレートから選ぶことができます。
「今っぽい尖ったデザインを作りたい」
「他のホームページと被らないデザインにしたい」
という人にオススメです。
Wixの特徴
・テンプレートの特徴
・無料プランあり（サーバ容量500MBまで）
・有料プランは月額990円〜
こんな人におすすめ
・テンプレートの数が多いサービスを利用したい
・今っぽいおしゃれなデザインにしたい
Ameba Owned（アメバオウンド）
「Ameba Owned」はAmebaブログを手がけるサイバーエージェントが展開するサービスです。
記事中心のメディア型ホームページを作成するのに最適なサービスです。
ブロガーにオススメのサービスと言えるでしょう。
「おしゃれ、今時、スタイリッシュ」な雰囲気もAmeba Ownedの魅力です。
InstagramなどのSNSとの連携相性もバッチリです。
「アメブロのブログサービスよりワンランク上を目指したい」
「おしゃれなインフルエンサーとして活躍したい」
という人にオススメのサービスです。
Ameba Ownedの特徴
・シンプルでおしゃれなテンプレートが多い
・無料プランあり（サーバー容量1024MBまで）
・有料プランは月額960円〜
こんな人にオススメ
・おしゃれでスタイリッシュなホームページを作りたい
・ブログやSNSとの連携を重視している
まとめ
いかがでしたか？
今回はWebデザインで使うソフトと、ソフトなしでWebサイトが作れるホームページ作成サービスを紹介してきました。
Webデザインで必要なツールを簡単に手にする方法は、「Adobe CC」を購入することです。
これは断言できます。PhotoshopやIllustratorはWeb以外でも活用できます。
使いこなせるようになれば、就職などにも役立つ自分のスキルにつながります。
これを機にさらにWebデザインに興味を持っていただけると嬉しいです。