この授業は次のような方に受けていただくことをおすすめします。
・Webデザインに必要なソフトについて知りたい
・デザインソフトは高くて手を出せないので、無料で使えるデザインソフトを知りたい
この授業を受けていただくと、上記の疑問を解決することができます。
また、デザインソフトだけでなく、Webデザインの仕事をする上で必要なツールについても解説しています。
どうぞ最後までご覧になってください。
Webデザインに必須な2つのAdobeソフト

次の2つのソフトはAdobeが提供していて、Webデザインをするのに欠かせません。
・Adobe Photoshop
・Adobe Illustrator
Web業界の会社のWebデザイナーは、Photoshopをメインで使っている人が100%だと言われています。
Illustratorの方は、過去にグラフィックデザイナーだったデザイナーが使っていることがあります。

PhotoshopとIllustratorはどう使い分けるの?

・Photoshop・・・Webサイト全体のデザイン、画像加工、バナーの作成
・Illustrator・・・アイコン、インフォグラフィックの作成
PhotoshopでWebサイト全体のデザインを作りながら、アイコン素材を作ったりアレンジする場合にはIllustratorを使うというふうに使い分けます。
・PhotoshopとIllustratorを同時に開いているとパソコンが重くなる
・互換性はあるが、違うソフトを行き来しながらはデザインがしにくくストレスになる
・アイコンやイラストは、すでに用意されている素材をそのまま使う場合が多い
一つのWebサイトを作っていく上で、PhotoshopとIllustratorの使用頻度の割合は、9:1くらいです。
Adobe Photoshop

まずはAdobe Photoshop。
Photoshopという名前からすると、写真加工のためのソフトという感じがしますが、Photoshopは機能性が高く、あらゆるWebデザインをすることができます。
・画像加工
・マスク
Webデザインを作るためにはPhotoshopであらゆる機能を使いこなせる知識やスキルが必要です。
・年間プラン(月払い)・・・2728円/月(税込)
・年間プラン(一括払い)・・・28776円/年(税込)
・月々プラン・・・3828円/月

Adobe Illustrator

そして、Adobe Illustrator。
Illustratorという名前で想像がつくようにイラストの作成をするときに使われるソフトです。
Webデザインでは
・ロゴの作成
・アイコンの作成
・イラストパーツの作成
などに使われています。
Illustratorのプランと料金は次の通りです。
・年間プラン(月々払い)・・・2728円/月(税込)
・年間プラン(一括払い)・・・28776円/年(税込)
・月々プラン・・・3828円/月
クリエイティブ作成に使える無料の3つのデザインソフト

ここからは、無料で使うことができるWebデザインソフトについてお話ししていきます。
・GIMP
・Inkscape
・Krita
GIMP

・レイヤー機能
・切り抜き
・サイズ変更
・画像の加工
など、色々な機能が使える優れたソフトです。
プラグインや機能拡張を豊富なので、初心者から上級者のデザイナーから広く支持されています。
GIMPが使えるOSについては次の通りだよ。
・使えるOS・・・Windows、Mac
Inkscape

使い心地はIllustratorによく似ています。
オリジナル画像の作成やロゴの作成に向いていて、
・レイヤー機能
・図形の操作・編集
・作成した図形のパスの操作
まで自由自在に扱える高機能なところが魅力です。
・対応OS・・・Windows、Mac、Linux
Krita

Kritaは無料で使える高機能ペイントソフトです。
直感的に使うことができ、高機能で動作がとても軽く、PSDファイルというPhotoshopのファイルでも開くことができるところが便利です。
・対応OS・・・Windows、Mac、Linux
今注目されているUIデザインソフト

UIデザインソフトとは、Webサイトやアプリのユーザーインターフェース(UI)を作るのに特化したデザインソフトです。

・プロトタイプの作成ができる
・複数人の間で同時編集ができる
・ブラウザ上での共有が簡単にできる
プロトタイプとは、
・Webサイトの画面遷移
・スライダーやボタンの動き
などの操作感を表現できるもののことを指します。

・導線設計が複雑であるアプリの開発
・デザインの機能が充実している
・今はシンプルがデザインが流行していているので、Photoshopほど機能が多くなくても制作することが可能
他にも要因はあるのですが、こういうわけで、UIデザインソフトの重要性や利便性が高まってきたのではないのかと言われています。
・Adobe XD
・Sketch
・Figma
Adobe XD

Adobe XDはAdobe社が提供しているUIデザインツールで、Adobe IDを持っているのであれば、無料で使うことができます。
Adobe CCのコンプリートプランを契約していれば、XDもプランの中にあるので使うことができます。
Adobe XDは、
・アプリ画面
・アニメーション
・ボタンなどのパーツ
などを作ることができる優れたソフトです。
Webディレクターがワイヤーフレームを制作するときにこのAdobe XDはよく使われます。

Sketch

Sketchは、オランダのBohemian Coding社が開発して販売しているUIデザインソフトです。
Figma

Figmaは無料で使えるので、インストールしてみて損はしないと思います。
MacとWindowsでは使うデザインソフトが違う

異なってくるのは、使うことができるフォントやショートカットキーなどのOSのデフォルトの設定なので、ソフトの機能に違いはありません。
今後デザインのスキルアップをしてUIデザインソフトやプロトタイピングツールを使っていきたいのであれば、Macを購入しておくことをおすすめします。
Webデザインに必須な7つのソフト

①FTPソフト
②XAMPP
③テキストエディタ
④フォント
⑤Webブラウザ
⑥Microsoft Office
⑦クラウドソフト
①FTPソフト

FTPソフトを使うことで、
・サーバーにファイルをアップロードする
・サーバーからファイルをダウンロードする
といった作業ができるようになります。
そんな場合は、とりあえず
・Webサイトをインターネット常に公開するために、サーバーにデータを置くことが必要になる
・サーバーにデータを置くためにはFTPソフトが必要
ということだけを覚えておけば良いでしょう。
例えば次のようなものがあります。
・FileZilla
・Cyberduck
・FFFTP(Windowsのみ)
・Transmit(Macのみ)
・Fetch(Macのみ)
自分が使いやすいものを選びましょう。
②XAMPP

ローカルサーバーがあれば、コーディングデータの表示をすぐに確認したり検証したりすることができます。
外部のサーバーに接続してアップロードする手間がなくて、便利なソフトです。
WordPressで作ったサイトの場合、PHPやMySQLなどで作られているので、通常のブラウザではプレビューを表示して検証することはできませんが、XAMPPではPHPやMySQLにも対応しているので、WordPressのサイトもブラウザ上での確認や検証することが可能です。
③テキストエディタ

コードを各画面のことで、パソコンに入っているメモ帳などでもコーディングはできなくはありませんが、Webデザインに特化したテキストエディタを使うことで、効率的にコーディングをすることができます。
・Adobe Dreamweaver
・Sublime Text
・Atom
・Brackets
・Visual Studio code
・GitHub


Adobe Dreamweaver

Dreamweaverのおすすめポイントは次の2つです。
・フォルダをまたいで一括で置き換えができる
・独自のテンプレートファイルでコーディングが効率的にできる
色々な編集機能やレイアウト表示、ファイル管理といった機能がひとまとめになっていて、効率的に高品質なページを作成することができます。
しかし、Dreamweaverには欠点も多く、
・動作がかなり重い
・独自のテンプレートを使うとDreamweaver以外のエディタで作業をしにくい
などが挙げられます。
さらに、Dreamweaver独自のデザインプレビューの機能は、実際の仕事では、ほとんど全くといっていいほど使われません。
Dreamweaverを単体で購入するには、1年で28776円(税込)ですが、Adobe CCにもDreamweaverは入っています。
Sublime Text

英語版のソフトですが、日本語化することもできます。
ライセンス版として購入するのが必要ではありますが、試用版として無料で使い続けることができるため、無料ユーザーが多いです。
「購入してね」というメッセージがよく現れますが、無視してOKです。
・エラーチェック
・HTML5の構文チェック
・スニペット集
・自動保管機能
などが追加できるプラグインを自由に追加して、自分が好きなようにカスタマイズすることができます。
Windows、Macのどちらにも対応しています。
Atom

無料でありながら便利なプラグインを追加することができ、インターフェースも見やすくて、機能的なテキストエディタです。
Atomは始めから日本語対応なので、初心者に向いています。
Brackets

構築しながらどのように構築されているかをリアルタイムで画面上で確認できるところが最大の特徴です。
使いやすさや各種機能、そして日本語にも始めから対応されているので、愛用者が多いエディタです。
Visual Studio code

・動作が軽い
・自動保管機能が優秀
・スタイリッシュなビジュアル
・便利なプラグインが充実している
という特徴があり、Web制作では導入することが必須と言われている定番のテキストエディタになっています。
実際にWeb制作スキルが学習できる数多くの教本やオンラインスクールでも、このVisual Studio Codeを前提にされているということからも、Web制作を学びたい方にはぜひ購入してほしいテキストエディタです。
GitHub

GitHubは、自分が書いたHTMLやCSS、JavaScriptなどのコードを管理するためのソフトです。
GitHubを使うことで、バージョン管理ソフト「Git」を使ってポジトリの作成や管理が、簡単にWebブラウザから行うことができます。
作ったWebサイトを公開するソフト

企画からデザインを行い、コーディングまでできたら、あとは公開のみです。
公開するときには、次の無料ソフトを使ってサイトを公開しましょう。
④フォント

Webデザインで使える高品質なフォントをたくさん提供しているサービスがありますので、それを利用しましょう。
Webデザインでは、あらゆるタイプのデザインが求められるので、デザインに合うフォントを用意することが必要です。
フォントには次の2つのサービスがあります。
・Adobe Fonts
・Google Fonts
Adobe Fonts

Adobe Fontsは、Adobeソフトのいずれかを購入していると使うことができます。
和文と欧文ともにたくさんのフォントが揃っています。
Google Fonts

Google Fontsは、Googleが提供しているフォントで、Webデザインでもよく使われています。
Webデザインをするためにも、高品質なフォントをたくさん集めておきましょう。
⑤Webブラウザ

WebページはWebブラウザによって表示の仕方が異なることがあリますので、主要なWebブラウザで確認することが必要です。
2022年現在では主要になっているブラウザは次のようなものです。
・Google Chrome
・Firefox
・Safari(Macのみ)
・Microsoft Edge(Windowsのみ)
・Internet Explorer(Windowsのみ)
OSによって使うことができるWebブラウザが変わってくるので注意が必要です。
ウェブブラウザにはデベロッパーツールがついていて、Webページを修正したり、検証に使うこともあるので、使い方を理解しておきましょう。
⑥Microsoft Office

Webデザインをするときには、次のような作業でMicrosoft Officeのソフトを使います。
・Word(文書作成)
・Excel(表計算)
・PowerPoint(プレゼンテーション)
将来、フリーランスになりたい方は、自分で構成案やサイトマップを作ることになりますので、今のうちから慣れておいた方がいいでしょう。
⑦クラウドソフト

Web業界でよく使われているクラウドソフトは次のようなものです。
・Google系ソフト
・Dropbox
・コミュニケーションツール
Google系ソフト

無料で使えて、クラウド上で共有できるところが、Google系ソフトの便利な点です。
最近では、Google系ソフトを利用するデザイナーが増えてきていますが、主に使用されているのは次の2つです。
・Googleドキュメント(文書ベースでまとめるときに使う)
・Googleスライド(サイトマップやワイヤーフレームを作成するときに使う)
クライアントがMicrosoft Officeを使用していない場合もありますので、 Microsoft OfficeもGoogle系ソフトもどちらとも使えるようにしておきましょう。
Dropbox

原稿や画像素材のやり取りをする際に、Dropboxに素材の保管場所を作ることで、クライアントと製作者の双方で常にやり取りをすることができるので、抜け漏れすることなく管理もしやすい便利なサービスです。
Googleドライブでも教諭できますが、クライアントがGoogleアカウントを持っていないと支えない時もあるので、そんなときにDropboxを使います。
コミュニケーションツール

Webデザイナーは次のコミュニケーションツールをよく使います。
会社によってどちらを使うのかは違いますが、どちらもインストールしておきましょう。
ちなみにどちらも無料で使えます。
Webサイト制作ツール

・WordPressとは
・ローカル開発環境
・WordPressを作成するために必要なスキル
WordPressとは

今ではブログだけでなく、一般的な企業のサイトや公共機関のサイトでもよく使われています。
アメブロやエキサイトブログは、会員登録するとそのままブログを書くことができますが、WordPressの場合は、自分でレンタルサーバーを用意してインストールして使います。
HTML、CSS、PHPのスキルがあれば、自由に使うことができ、今では世界の26.5%のサイトはWordPressで作られています。
ローカル開発環境

WordPressを使ってWebサイトをする際には、ローカル開発環境は欠かせないよ。
ローカル開発環境というのは。自分のパソコンに用意したソフトウェアの実行環境、または作業環境のことです。
自分のパソコンだけで利用できる環境は、「ローカル」という言葉で表現されますが、インターネット上に公開されたWebサイトのことは「本番環境」とも呼ばれます。
WordPressはWebサーバーという環境があって初めて動作するソフトウェアなので、自分のパソコン上で動かすのであれば、まずは、WordPress専用のローカル開発間曲を導入する小音が必要です。
ローカル環境は、Web制作をするときに次のような目的のために利用します。
・WordPressを使ってオリジナルのWebサイトを開発する
・WordPressの「テーマ」や「プラグイン」の動作確認や検証
・本番のWebサイトに影響を与えずに安全に作業を進める
これらのことからも、ローカル開発環境はWordPressを使ってWeb制作をするときにかkせない存在であることがわかります。
WordPressのローカル環境を構築する際には次のツールを使います。
・XAMPP(ザンプ)
・MAMP(マンプ)
・LOCAL(ローカル)
WordPressを作成するために必要なスキル

・HTML、CSS、JavaScriptなどのコーディング
・PHPの基礎知識やコーディング
・WordPressの「テーマ」の作成やカスタマイズ
これらのスキルは本やブログ、またはオンラインスクールで習得することができます。
Web制作に使うサーバー&ドメイン

作ったWebサイトをネット上に公開させるためには、フィルやデータなどの置き場所になる「サーバー」とサーバーにアクセスするための情報になるドメインが必要です。
・レンタルサーバー
・FTPソフト
レンタルサーバー

Webサイトを公開させるために必要なサーバーやドメインは、レンタルサーバーに契約することが必要です。
レンタルサーバーには次のようなサービスがあります。
ConoHa WING(コノハウィング)
★☆★ <国内最速No.1>高性能レンタルサーバー【ConoHa WING】 ★☆★
【ConoHa WING】は、登録アカウント数30万件を突破した「ConoHa」が提供している、
国内最速の高性能レンタルサーバーサービスです。高速・高機能・高安定性に優れたレンタルサーバーで、
初期費用無料、最低利用期間無し、月額880円〜利用できます。
XSERVER(エックスサーバー)
ロリポップ
ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額110円〜ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

FTPソフト

Webサイトを設置するサーバーに対して、ファイルをアップロードしたりダウンロードするためにはFTPソフトを使います。
FTPソフトというのは、FTPという通信を使ってパソコンとサーバーの間でのファイルの送受信(アップロード・ダウンロード)するのに使うソフトのことです。
FTPソフトには次のようなものがあります。
・WinSCP(Windowsのみ)
・FileZilla
・Cyberduck
Webデザインがコーディングなしでできる3つのソフト

Webデザインを作りたいんだけれど、コーディングができないという方もいるかもしれません。
そんな方のために、コーディングをしなくてもWebデザインを作成できるソフトが出ていています。
・STUDIO
・Wix
・ジンドゥー
STUDIO

コーディングなどの知識がなくてもWebサイトのデザインをして公開までできます。
コーディングが必要ないWebサイトの制作ツールの中でも自由度が高く、自分のイメージに合わせて、洗練されたWebサイトを作成することができます。
基本的に無料で使うことができますが、独自ドメインの取得したり、広告を削除したい場合は有料になります。
Wix

マウスによるドラッグ&ドロップだけでWebサイト制作が可能です。
テンプレートがたくさん用意されているので綺麗なWebサイトがすぐに作れます。
そして、Wixエディタを使用すれば、作成したクリエイティブやUIデザインを利用して簡単にWebサイトができます。
全ての機能が基本的に無料ですが、有料のプレミアムプランを契約することで、独自ドメインを取得できたり広告の削除などをすることができます。
ジンドゥー

ジンドゥーでもWixと同様で無料でWebサイトが作ることができます。
Wixと比べて、よりシンプルで使いやすいのが特徴です。
通販サイトやオンラインショップにも対応していて、簡単に作ることができます。
基本的に無料で使えますが、広告を削除したい場合や高度なカスタマイズをしたい場合は、有料プランの契約をすることが必要です。
Webデザインをする際に3つの知っておきたいこと

・優れたWebデザインが揃っているギャラリーサイトを観る
・Webデザインをスキルアップできる方法を知る
・Webデザインを仕事にする方法を知る
優れたWebデザインが揃っているギャラリーサイトを観る
良いWebサイトを作るには、優れたWebデザインのセンスを磨くことが必要です。
センスを磨いて引き出しを増やすためには、優れたWebサイトを見ることが効果的です。
デザインに行き詰まった際にも参考になるサイトがあるとヒントになってとても便利です。
ここで、優れたWebサイトをまとめているサイトをご紹介します。
Webデザインをスキルアップできる方法を知る

Webデザインは、流行の移り変わりが激しので、常に流行のデザインがどんななのかをチェックしたり、Webデザインツールの使い方を勉強したりする必要があります。
また、基礎的なスキルが身についているかどうかでその後の学習効率に大きな差が出ますので、基礎をしっかりと固めておくことが大切です。

Webデザインを仕事にする方法を知る

いくら勉強してさまざまなデザインが作れるようになったり、流行をしっかりチェックしていたとしても、仕事をしてお金が稼げないと意味がありません。
Webデザインの仕事を得るのは難しく思えるかもしれませんが、未経験でも仕事を獲得することはできます。
それにはまずは知り合いから仕事を受注したり、クラウドソーシングにチャレンジして力をつけていくことから始めるのも一つの手です。

まとめ

・Webデザインに必須な2つのAdobeソフト
・PhotoshopとIllustratorはどう使い分けるの?
・Adobe Photoshop
・Adobe Illustrator
・クリエイティブ作成に使える無料の3つのデザインソフト
・GIMP
・Inkscape
・Krita
・今注目されているUIデザインソフト
・Adobe XD
・Sketch
・Figma
・Webデザインに必須な7つのソフト
①FTPソフト
②XAMPP
③テキストエディタ
・Adobe Dreamweaver
・Sublime Text
・Atom
・Brackets
・Visual Studio code
・GitHub
④フォント
・Adobe Fonts
・Google Fonts
⑤Webブラウザ
⑥Microsoft Office
⑦クラウドソフト
・Google系ソフト
・Dropbox
・コミュニケーションツール
Webサイト制作ツール
・WordPressとは
・ローカル開発環境
・WordPressを作成するために必要なスキル
・ WordPressを作成するために必要なスキル
・レンタルサーバー
・FTPソフト
・WinSCP(Windowsのみ)
・FileZilla
・CYerduck
・STUDIO
・Wix
・ジンドゥー
・Webデザインをする際に3つの知っておきたいこと
・優れたWebデザインが揃っているギャラリーサイトを観る
・Webデザインをスキルアップできる方法を知る
・Webデザインを仕事にする方法を知る
Webデザインに使うソフトについて一口に言っても、いろんなソフトがあることがわかりましたね。
必要なソフトはたくさんあるけれど、焦らずにまずはPhotoshopや Illustratorなどのデザインソフトを使えるようになることから始めましょう。
私たちは頑張るあなたを応援しています。