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万回くらい耳にしますので、覚えておいてくださいね。

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

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

今のWeb制作現場の流行としては、Xdをメインで使いつつ、ポイントの画像作成にPhotoshopやIllustratorを使っている人が多い印象です。また、FigmaというXdによく似た無料ソフトがあり、XdではなくFigmaとその他2つのソフトを併用している人や、他のソフトは使わずPhotoshop一本でやっている人もいて、本当に好きずきです。

ここでは、3つの購入パターンを説明したいと思います。

AdobeCCを購入するパターン

AdobeCC（アドビシーシー）とは、Adobeの主要ソフトのほとんどが入っているフルパックコンプリートプランです。

プロデザイナーの場合、用途によってデザインソフトを使い分けて連携して使っている人が多いので、このAdobeCCを契約して利用している人が圧倒的に多いです。

さて、気になるデザインソフトのお値段ですが…デザインソフトって本当に高いんですよね。

Adobeのソフトは、有料のサブスクになっていて、契約体系によって金額が変化します。

料金表は以下の通り。仮にAdobeCCを契約した場合は、毎月6, 480円かかる計算になります。(2023年現在）年間だと7万円以上、Webデザイナーを続ける以上これが毎年かかります。

	月額プラン	年間プラン(月払い)	年間プラン（一括払い）
Photoshop単体	3,828 円/月 (税込)	2,728円/月 (税込)	28,776 円/年 (税込) 1ヶ月当たり2,398円
Illustraor単体	3,828 円/月 (税込)	2,728円/月 (税込)	28,776 円/年 (税込) 1ヶ月当たり2,398円
AdobeCC (上記のソフトが入ったフルセットプラン)	10,280 円/月	6,480 円/月 (税込)	72,336  円/年 (税込) 1ヶ月当たり6,028円

上記の価格表を見ての通り、年間プランの一括払いが一番安くなります。一方、月々プランは費用が高くつく反面、いつでも解約がしやすいというメリットがあります。

なお、これは公式価格の料金表で、実はもっとコスパの良いプランがあります。それは、公式の通常プランではなく、デジハリ講座のアカデミックプランを契約することです。月々払いができなくて年額一括払いのみになりますが、年間72,336円のところを→39,800円という半額近い安さでAdobeCCを契約することができます。学割とほぼ同等、ただし社会人でも無職でも契約できます。

デジハリとは、デジタルハリウッドというWebデザイン専門スクールの大手です。有名デザイナーも多数卒業しています。

デジハリはAdobeが公式に認定しているスクールのひとつで、その中のアカデミックプランは、Adobeソフトの年間購入と基礎的なAdobeの学習講座がセットになったプランのことです。

つまり、Adobe公式サイト経由ではなく、「デジタルハリウッド」というAdobeが公式に認定しているWebデザインの専門スクールのサイト経由で「アカデミックプラン」というプランを申し込むことで、AdobeCCを半額近い値段で購入することができるという仕組みです。

公式が認めているお得な方法なので安心して購入でき、誰でも安く手に入れることができます。

デジハリのプランで契約する方法は、以下の記事に詳しく書いていますので参考にしてくださいね。

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

AdobeCCの目安 : 39,800円/年　（デジハリ経由）

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

さて、プロとして最終的にはAdobeCCを契約することにはなるとしても、今勉強中の身でなるべくコストはかけたくない、PCのスペックが低い等の理由でAdobeCCは契約できないという人もいると思います。

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

なぜかというと、PhotoshopひとつでWebデザインに必要なことが全部できるからです。逆に他のソフトでは全部賄うことはできません。

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

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

何よりPhotoshopの優れている点は、写真加工の素晴らしさです。デザイナーにとって写真を加工したり編集したり、演出をつけたりすることは必要不可欠なことですが、Photoshopが一番きれいにかつ簡単に行うことができます。

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

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

※フォトプランには、Lightroomというソフトが付いてきます。このLightroomとは、膨大な数の写真を管理するソフトです。主にプロカメラマンが使うのでデザイナーはあまり使わないかも…。

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

また、フォトプランにはストレージサービスも付いてきますが、ストレージは必要内容であれば、フォトプラン（20GB）が一番お得です。この場合、毎月1,000円程度のコストになります。年間でも12,000円程度です。

Photoshopの目安 : 12,936円/年

Figmaを購入（無料）するパターン（デザインソフトにお金をかけたくない場合）

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

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

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

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

全てのデザイン作業ができるわけではないといっても、バナー作成やWebサイトデザインなどWebデザインの基本的なことは十分すぎるくらいできますし、デザインスクールの中にはFigmaを推して学ばせるところもあります。

Figmaができないのは、高度な写真加工等のデザインだけ（←これをやりたければPhotoshopが必要）

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

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

　Figmaの費用の目安：0円

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

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

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を作るのに使うソフトです。HTMLは勉強しない、デザインだけやりたいと言う方はテキストエディタを揃える必要はありません。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

逆にしっかりプロになるまでのスキルを身につけさせて欲しい、就職までの道筋をサポートして欲しいという人や受講期間は半年以上は欲しいという人は、高額のスクールを選ぶと最良の環境と仲間を得ることができます。

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

　

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

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

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

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

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

独学で勉強したとしても全くお金をかけずに勉強することは厳しいかと思います。勉強に必要な書籍や有料動画などのコストがかかります。そうはいっても、スクールに通う1/10程度で済む場合がほとんどです。

オンライン学習サイト

オンライン学習サイトは、HTMLやデザインを学ぶのに最適なサイトです。しっかりとした基礎を学ぶことができます。スクールと併用して学習ツールとして使っている人も多いですね。

有名かつみんなが使っているのがこの3つ。有料ではありますが、月額1,000円程度と無理のない範囲の金額ですし、どれも初心者向けの丁寧な解説付きなのでおすすめです。

専門書籍

Webデザインの書籍はおすすめしたいものがたくさんあるのですが、少し高いので月１〜2冊と決めて購入するのもいいかもしれません。

HTMLはオンライン学習サイトのprogate等で十分勉強できるので、書籍はデザイン面のものを買うのがおすすめです。

月額980円で読み放題となるAmazonの【Kindle Unlimited】でも、読み放題対象となっているWebデザインの本が何冊もありますよ。（初月は無料なので、一気に勉強してもいいかも）

動画学習サイト

動画学習サイトUdemy では、世界中の専門分野の講師がアップした勉強動画を買い切りで購入することができます。Web・IT系の動画は特に人気が高く、初心者向けの動画が多数アップされています。動画一本の価格はセール時で1,600円程です。

私はこのUdemyが大好きで、いつもセール時に買いすぎてしまうのですが、デザインスクールの講師と遜色ない動画講座もあります。Webデザインのオンラインスクールの中には、LIVE講座ではなくビデオ視聴のみのスクールもあるのですが、そのような中途半端なスクールに安くない費用を払うなら、Udemyの1,500円程度の動画を購入した方がずっと安上がりだと思います。

Udemyの次におすすめしたいのが、Schoo（スクー）です。Schooもまた動画学習サイトですが、Udemyとちがって生放送を聴く分には無料なこと。またアーカイブ講座は、月額980円で見放題です。控えめに言ってコスパが良すぎ。

デザインの講座もこんなにあります。

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

個人的に独学者におすすめしたいオンラインスクールがあります。（独学なのにスクール？という疑問はおいておいて）

独学の1番の弱点はプロの視点でのアドバイスを受けることができないのですが、以下に紹介するオンラインスクールでは基本は自分で勉強を進めつつ、ポイントで出される課題をこなしてプロの指摘を受けながらデザインを学ぶことができます。

このスクールの良いところは、

・費用が安めで独学と並行しながらと学ぶことを想定している点

・使用ツールが無料の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

Xd チュートリアル
https://xdtrail.com/

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

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

Figmaはブラウザ上で動かすことができるので、パソコンにインストールする必要もありません。まず試してみたい等方はこちら。

チュートリアルについては、YouTubeで探すことができます。

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

まとめ

いかがだったでしょうか。もう一度まとますと、こんな感じです。

まずは無料でできる範囲から試して、本気で学べそうならどんどん投資して行ってもいいと思います。