Webデザイナーになるための初期費用(ソフト・勉強代)と内訳公開

「Webデザイナーに転職したい、副業で稼ぎたい」このサイトはそんな方を応援しています。

Webデザイナーになりたいけど何から始めていいかわからない初心者の方、この記事ではWebデザイナーに必要な道具やソフトについて、また初期費用として最低限かかるお金について、現役デザイナーが丁寧に解説します。

なお、Webデザインの勉強の始め方については以下の記事に基本的なことをまとめていますので、読んでみてくださいね。

Webデザイナーの仕事や勉強方法についてまとめた記事はこちら

Webデザイナーはパソコン・デザインソフト・ネット環境＋αが絶対必要！

Webデザイナーは、手持ちゼロで始めることはできません。

また、Webデザイナーになるためには、就職前に最低限のWebスキルを勉強する必要があります。

Webデザイナーは技術職なので、未学習のままでは面接にすらたどり着くことができません。未経験ならまだしも、全くの知識なしの素人のままでは雇ってくれるところはほぼないと言っていいでしょう。

勉強のためにはソフトや道具が必要なため、ある程度の初期投資は不可欠です。

Webデザイナーに必要な道具・環境等の概算費用は以下になります。

　ひとつひとつ順を追って説明していきますね。

Webデザインを始めるのにまず買うのはパソコン

まず絶対に必要なのはパソコンです。

MacでもWindowsでもいいので、パソコンを用意しましょう。Webデザインはパソコンがないと始まりません。

パソコンとインターネット環境（Wi-Fi）を既に持ってるようであれば、初期費用はかなり抑えられます。

デスクトップパソコンの方が価格が控えめです。しかし移動が多いようであれば、、少々高くついてもノートパソコンの方がおすすめです。デザイナーは移動することもある…。

Webデザイナー志望であれば、Macをおすすめしたいところですが、MacはWindowsより高額なので無理のない範囲で選んでください。

次に、パソコンのスペックについてですが、最低でもデザインソフトがスムーズに動けるレベルでなくてはいけません。

Webデザインではデザインソフトのインストールが必要ですが、このソフトが基本的にクソ重いです。

さらに完成したデザインデータもクソ重いので、重さ2倍です。安すぎるパソコンだとフリーズしてしまう可能性があります。

せっかくパソコンを買ってもデザインソフトが動かなければ宝の持ちぐされです。パソコンを購入する前にしっかり予習しましょう。

パソコン代の目安:15万円〜30万円

　Webデザイン向けパソコンを選ぶポイント　

• ノートパソコンの方が移動に便利なのでおすすめ（デスクトップより高価なのが欠点）
• デザイナーならMacの方がおすすめだけど、最初はWindowsもあり
• 安いパソコンはNG。最低限デザインソフトが軽快に動くものを買うこと

デザイン作業を行うのに必要なパソコンのスペックは以下の通りです。

	Mac	Windows
CPU	M1チップ以上	intel Core5以上 AMD Ryzen5以上
メモリ	16GB以上
ストレージ	SSD512GB以上
画面サイズ	15インチ以上

専門的な用語がわからなくても、購入したいパソコンのwebサイトを見ると[CPU][メモリ]といった表記は必ずあります。そこに書いてある数字と上記の表を見比べてみてください。

このスペック表を参考に条件を満たすパソコンを探すとなると、

・Windowsのノートパソコン型で15万円〜20万円程

・Macのノートパソコン型だと20万円〜30万円程

辺りのパソコンがおすすめです。

具体的なおすすめモデルと、最低限必要なパソコンのスペックの詳細については以下の記事にまとめています。

Macで心が決まっている人へ。Macパソコン選びの参考になる記事です。

デザイナーはMacを買うべきなのか？Windowsでも良い理由などについてもまとめています。

パソコンを用意できたら、デザインソフトを買う

Webデザイン制作で必要なのは、Adobe社のデザインソフトです。

パソコンでデザインするには、どのツールを用意すればいいの？

グラフィックデザインソフトという、いわゆるお絵かきソフトを使います。

パソコンの次にデザイナーに絶対必要なのが、デザインソフトです。

Adobe社という会社が制作している以下の3つのデザインソフトが今の主流です。

• Photoshop(フォトショップ/通称フォトショ)
• Illustrator(イラストレータ/通称イラレ)
• Xd（エックスディー）

Adobeのデザインソフトは、世界中のピンからキリまでのデザイナーが使っているソフトです。

＊Adobe（アドビ）という会社はデザインをやっていると100万回くらい耳にしますので、覚えておいてくださいね。

FigmaとSkecthは、AdobeのXdと同じ機能を持っています。ぶっちゃけXdより人気です。

私もFigmaをよく使いますが、無料で使い勝手が良いので重宝しています。

そうはいっても、デザイン制作の現場では、Photoshop等Adobeのソフトは後々必要になってきますが。

この3つのソフトを全て購入するか、ひとつだけにするかというのは初心者の悩みどころです。

今のWeb制作現場の流行としては、Figma（無料）をメインで使いつつ、ポイントの画像作成にPhotoshopやIllustratorを使っている人が多い印象です。

とはいっても、他のソフトは使わずPhotoshop一本でやっている人もいて、本当に好きずきです。

参考までに、こちらがデザインソフトの値段です。高いですよね…。年間契約の方が割引率が高くなります。

※Xd単体プランは2023年に終了。XdはAdobeCCを契約しないと使えません。

ここでは、学び始めの人のために、3つの購入パターンについて解説します。

• 複数のデザインソフトがセットになったAdobeCCを購入するパターン
• 必要最低限のデザインソフトPhotoshopのみを購入するパターン
• お金をかけずに無料のFigmaを使うパターン

AdobeCCを購入するパターン

AdobeCC（アドビシーシー）とは、デザインや動画編集、写真整理のソフトが複数入ったコンプリートプランです。

プロはこのAdobeCCを契約するパターンが圧倒的に多いです。

仮にAdobeCCを契約した場合は、一番割引率が高い年間契約一括払いで86,880 円/年、月あたりだと7,240円です。

初心者は無理していきなりAdobeCCを購入する必要はない気もするのですが、実は初心者だからこそAdobeCCを購入することでお得になるケースもあるんです。

初心者におすすめのAdobe講座＋AdobeCCセットプラン

アドバンスクールオンラインというオンライン型のWebデザインスクールがあります。

老舗スクールで、Adobeが認定した「プラチナスクールパートナー」のひとつです。このプラチナスクールパートナーはかなり限られたスクールしか認定されていません。

このアドバンスクールオンラインの「WEB/DTPエキスパートコース」（動画視聴型）は39,800円なですが、これに申し込むとAdobeCC1年間分がついてきます。

なので、39,800円/年でAdobeCCが契約でき、初心者向けのWebデザイン講座も受講できるというありがたいコースです。公式が認めているスクールなので安全ですよ。

契約は「アカデミックプラン」となるのですが、本プランの内容と変わりありません。ちなみに2年目以降も更新可能です。

また、アドビCC契約者だけが受講できる、Adobe公式でやっている「ことはじめ講座」も初心者の学びにぴったりの講座です。

AdobeCCは必要か？という疑問については以下の記事でも書いていますので、よかったら参考にしてみてくださいね。

以上がAdobeCCを契約した場合の最低限かかるコストです。

AdobeCC購入の目安 : 39,800円/年　（スクール経由）

Photoshop単体を購入するパターン

勉強中の身でなるべくコストはかけたくない、PCのスペックが低い等の理由でAdobeCCは契約できないという人もいると思います。

少しでもコストを抑えたい場合は、ソフトの数を絞りましょう。一つだけ選ぶなら、Photoshopの単体契約をおすすめします。

なぜかというと、PhotoshopひとつでWebデザインに必要なことが全部できるからです。

逆に他のソフトでは全てを賄うことはできません。

・バナー制作
・Youtube等のサムネイル制作
・写真加工
・Webサイトのデザイン制作＆納品

すべての作業がPhotoshopで可能です。

何よりPhotoshopの優れている点は、写真加工の技術です。デザイナーにとって写真の加工や演出は必要不可欠なことですが、Photoshopが一番きれいにかつ簡単に行うことができます。

フォトショップの写真加工の機能の素晴らしさについては、こちらの記事で初心者向けに説明しています。

Adobeのプランで見ると、Photoshop単体プランより、フォトプランというセットプランの方がなぜか料金が安くなりますので、フォトプランを契約しましょう。ややこしいですが、たぶんAdobeの事情。

	Photoshop単体	フォトプラン （Photoshop＋Lightroom)
月額プラン	4,980円/月(税込)	なし
年間プラン（月払い）	3,280円/月(税込)	2,380円/月(税込)
年間プラン（一括払い）	34,680円/月(税込) 1ヶ月あたり2,890円	28,480円/月(税込) 1ヶ月あたり2,370円

価格表を見ての通り、Photoshopだけ欲しい人は単体プランよりフォトプランの方がお得です。ただし月々プラン契約ができなく年間縛りとなるので、そこだけ注意してください。数ヶ月だけ使用したいのであれば、単体購入でOK。

また、フォトプランには１TBのストレージサービスも付いてきます。

Photoshop購入の目安 : 28,480円/年

Figmaを使うパターン（デザインソフトにお金をかけたくない場合）

そうは言っても勉強の段階ではデザインソフトには絶対金は払いたくない、という人もいると思います。

そんな人におすすめなのは、Figmaというデザインツールです。Figmaは基本料金が無料。

無料と言っても、プロの現場で今一番ホットに使われているデザインツールなので、勉強して損はなし。

Webデザインの取っ掛かりとして初心者におすすめできるソフトです。

バナー作成やWebサイトデザインなどWebデザインの基本的なことは十分すぎるくらいできますし、Webデザインスクールの中にはFigma推しな所もちらほら出てきました。

Figmaが苦手なのは、高度な写真加工等のデザインだけ。←これをやりたければPhotoshopが必要

でも初心者のうちは高度な写真加工なんてやりたくてもどうせできません。それなら無料のFigmaでWebデザインを学んで、後からPhotoshopの購入を検討した方が効率的に学習を進めることができます。

Figmaで始めるWebデザインについては、詳しくは以下の記事で。

　Figmaの費用の目安：0円

以上が、パソコンとデザインソフトにかかる費用の目安でした。

コーディングで必要なのは、テキストエディタというソフト

さてさて、デザイン作業はデザインソフトがあれば可能ですが、その後はデザインしたものをHTMLというコードに起こす作業に入ります。

※HTMLをWebデザイナーの範疇とするかどうかはその人次第なので、HTMLはやらないって人は飛ばしてくださいね。ちなみに、HTML周りの費用は基本無料です（結論）

HTMLやCSSはどのツールで書けばいいの？

テキストエディタと言われるソフトを使って書きます

デザインソフトで作ったデザイン画はHTML/CSSというプログラミングのようなコードの形にされて、Webサイトにアップされます。Webサイトの形になるには、このHTMLにコード化する作業が必要になります。

詳しくは以下の記事を読んでくださいね。

このテキストエディタというソフトはたくさん種類があるのですが、いろいろ試して自分の気に入ったものを使えばOKです。

なぜなら、グラフィックソフトと違ってテキストエディタは基本的に無料です。有料のものもありますが、プログラマ向けなので初心者はまず無料で十分すぎます。使い勝手がよかったらそのまま使えばいいし、飽きたら別のを試してみる。そんな感じでいいと思います。

シェア率が高く個人的にも使いやすくておすすめなのは、マイクロソフトの「Visual Studio Code」という無料のテキストエディタです。

Visual Studio Codeダウンロード：https://azure.microsoft.com/ja-jp/products/visual-studio-code/

最初にも書きましたが、HTMLはやらないという人は読み飛ばしていいです。WebデザイナーってどこまでHTMLを学ぶべきなの？って疑問な方にはこちらの記事をご参考までに…。

HTMLコーディング（テキストエディタ）にかかる費用：無料

インターネット環境について

インターネット環境はすでに整っている人も多いと思いますが、もしモバイルのみの契約であれば、自宅に光回線のwifiをひくようにしましょう。デザインデータは重いので、モバイル契約のデータ転送だとうまく送れない場合があります。

光回線で、コスパがいいのが「NURO光」でしょうか。公式サイトでは10Gbpsが月額4,400円〜となっていますが、よくキャンペーンもやっているので、さらに安くなるかも。

NURO光公式サイト：https://www.nuro.jp/

インターネット環境に関しては、携帯キャリアとの契約で安くなる場合もあるので、自分が一番お得になる回線を契約するといいですよ。

インターネット環境にかかる費用の目安：4,000円〜

Webデザインの勉強代はいくら？

デザインの勉強代というのは本当にピンからキリまであって、どこまでお金をかければプロになれるのかははっきりと言えるものではありません。

ただし、スキルゼロのままだとWebデザイナーには採用されませんので、初心者は必ず独学で勉強するか、またはデザインスクールに入るところから始まります。

デザインスクールにかかる費用

Webデザインスクールの場合、受講料が5万円程度〜80万円程度とかなりの幅があります。

なぜこれだけの金額の幅が出るのか。

理由は、受講期間や受講内容、スクールの規模によるところが大きいです。

安いところは、受講内容が基礎のみ、受講期間が短い、就職支援などのサポートが少ない。等の理由があります。ただし、基礎だけ覚えたらあとは独学でいい、全くの初心者だからとにかくとっかかりが欲しいという人にとっては、コストも抑えられるしアリな選択肢だと思います。

逆にプロになるまでのスキルを確実に身につけたい、就職までサポートして欲しい、受講期間は半年以上は欲しいという人は、少し高めでもカリキュラムが豊富なスクールを選ぶと最良の環境を得ることができます。

受講費用が安くなる！リスキリングや教育給付金制度について

そういってもスクールってやっぱり高額です。

今IT人材の不足は深刻な問題で、国としてもより多くの人材確保のために厚生労働省や経済産業省が補助金を設けています。

web業界への転職や就職目的でWebスクールを受講した場合に、受講費用が大幅（最大70%）割引されたりと、大きな恩恵がありますので、もし条件に合う人はぜひこちらの制度を利用してみてください。

詳しくは以下の2つの記事にまとめてます。

ひとり親の場合は、こちらの制度も絶対使って！

スクール選びについては、いくつか記事を書いていますので、参考にしてください。

転職に強いデザインスクールをリストアップしました。

主婦向けのデザインスクールを比較した記事です。

デザインスクールが多すぎて選べない人のためのポイント記事です。

デザインスクールの目安：5万〜80万円

独学でWebデザインを学ぶのにかかる費用

独学はスクールよりかは費用を抑えることはできると思います。しかし、全くお金をかけずに勉強することは厳しい…。

勉強に必要な書籍や有料動画などのコストがかかります。

独学のためのオンラインスクール

個人的に独学者におすすめしたいオンラインスクールがあります。

独学の弱点はプロ視点でのアドバイスを受けることができないことだと思います。プロのレビューは上達への一番の近道ですからね。

「FullMe」というオンラインスクールでは基本は自分で勉強を進めつつ、ポイントで出される課題をこなしてプロの指摘を受けながらデザインを学ぶことができます。

• 費用が安めで独学と並行しながら学ぶことを想定している点
• 使用ツールが無料のFigmaな点
• 講師が有名デザイナーでかつ今時の流行りを抑えている点

費用ゼロでとりあえずWebデザインを試してみたい人は

Webデザインが費用をかけるに値するかどうか確認してから勉強を始めたいという人も多いと思います。

無料の範囲でどんなものか試してみたいという気持ちはごもっともです。

ここではあえて費用ゼロでまずはWebデザインを試して見たい人に方法を2つ紹介します。

方法1：Adobeソフトを無料体験で使ってみる

Adobe公式サイトでデザインソフトをダウンロードすると7日間の無料体験がついてきます。

Adobe公式サイトには、各ソフトの無料レクチャーがあります。このレクチャーを見ながら、実際にソフトを動かしてみるとイメージが湧いてくると思います。

Photoshop チュートリアル
https://helpx.adobe.com/jp/photoshop/tutorials.html

Illustrator チュートリアル
https://helpx.adobe.com/jp/photoshop/tutorials.html

方法2：無料デザインツールのFigmaを使う

先ほども書きましたが、Figmaは無料でかつプロの現場でも実際に使われることの多いデザインソフトです。

Figmaはブラウザ上で動かすことができるので、パソコンにインストールする必要もありません。

チュートリアルについては、YouTubeにたくさんありますよ。

Figma公式サイト：https://www.figma.com/ja-jp/

こちらの記事も参考にしてみてくださいね。

まとめ

ここまで長文を読んでくださり、ありがとうございました！参考になれば幸いです。

もう一度Webデザインを始めるのにかかる費用をまとめますね。