この記事では、Webデザイナーに必要な
・ツール・ソフト
・環境
・勉強
の具体的な内容と最低限かかる費用について、解説します。
この記事はWebデザイナー歴18年のフリーランスが書いています
未経験からWebデザイナーを目指すには、初期投資が必要です。
具体的には、パソコンやデザインソフト、ネット環境、そしてデザインの勉強のための費用がかかります。
Webデザイナーになるためには、就職前に最低限のWebスキルを勉強する必要があります。未学習のままで就職や開業することはほぼ不可能なんですね。そしてその学習のために、ソフトや環境を整える必要もあります。
辛いところですが、どうしても必要なお金なのです…
必要な道具・環境とその費用（概算）
概算費用は以下になります。
- 【パソコン】15万円〜30万円
- 【デザインソフト】0円〜39,800円/年額
- 【インターネット環境】月額4,000円程〜
- 【テキストエディタ】無料
- 【その他勉強代】スクール（20万〜80万※補助金制度有り）、独学（5,000円〜）
順を追って説明していきますね。
パソコンの費用について
まず必要なのはパソコンです。
MacでもWindowsでもOK。Webデザイン作業にはパソコンが必須です。
すでにパソコンとインターネット環境を持っている場合、初期費用はぐっと抑えられます。
Webデザイナー志望なら、Macをおすすめしたいですが、高額なので無理ない範囲で選んでくださいね。
次に、スペックについてですが、最低でもデザインソフトがスムーズに動くレベルを選ぶことが大切です。
Webデザインで使うデザインソフトは、基本的にクソ重いです。さらに完成したデザインデータもクソ重いので、重さ2倍です。
安すぎるパソコンだとフリーズしてしまうかもしれません。デザインソフトが動かなければ宝の持ちぐされです。
必要なスペックをちゃんと調べて、パソコンを選びましょう。
以下のWebデザインに必要なスペックを参考に、パソコンを選びましょう。
| Mac | Windows | |
|---|---|---|
| CPU | M1チップ以上 | intel Core5以上 AMD Ryzen5以上 |
| メモリ | 16GB以上 | |
| ストレージ | SSD512GB以上 | |
| 画面サイズ | 15インチ以上 | |
専門用語がわからなくても、購入したいパソコンのWebサイトを見ると、必ず[CPU][メモリ]といった項目があります。その数字を見て、上記のスペック表と照らし合わせてみてください。
ちなみに、条件を満たすのは、
・Windowsのノートパソコン型で15万円〜20万円程
・Macのノートパソコン型だと20万円〜30万円程
これらの価格帯のパソコンがおすすめです。
新品が高いようであれば、アウトレットや認定整備済製品(新古品）も検討してみてください
おすすめモデルと、パソコンのスペックの詳細については以下の記事にまとめています。
Macで心が決まっている人へ。Macパソコン選びの参考になる記事です。
デザイナーはMacを買うべきなのか？Windowsでも良い理由などについてもまとめています。
Webデザイン向けパソコンを選ぶポイント
- ノートパソコンが便利、ただしデスクトップより高価
- デザイナーならできればMacがおすすめ
- 安すぎるパソコンはNG、デザインソフトがスムーズに動くスペックを選ぶ
デザインソフトの費用について
- パソコンでデザインするには、何を用意すればいいの？
-
グラフィックデザインソフトを使います
Webデザイン制作で必要なのは、デザインができるグラフィックソフトです。
今、Webデザインで主流のデザインソフトは、以下の2つになります。
- Photoshop(フォトショップ/通称フォトショ)：有料
デザインソフトの王様。写真加工ができるのは基本このソフトだけなので超重要。 - Figma(フィグマ)：無料
Webデザインに特化したデザインソフト。
初心者向けのデザインスクールでも、大体この2つのどちらか、もしくは両方を学びます。
初期費用を考えると、Photoshopは有料であるのに対し、Figmaは無料で使えるのが大きいです。
今のWeb制作現場の流行としては、Figmaをメインで使いつつ、写真加工・画像加工にPhotoshopを使っている人が多い印象です。というのも、Figmaでは高度な写真加工はできないため、Photoshopで綺麗な画像を作る必要があるんですね。
ここでは、デザインソフトの３つの購入パターンを提案しますね。
Figmaのみの場合（ソフトにお金をかけたくない人用）
勉強の段階ではデザインソフトには極力費用をかけたくない、という人もいると思います。
Figmaは基本料金が無料。といっても、プロの現場で今一番ホットに使われているデザインツールなので安心してください。
初心者にとって、Figmaはとてもおすすめのソフトです。バナー作成やWebサイトデザインなど、基本的なWebデザインは十分にこなせます。また、最近ではFigmaを推奨するWebデザインスクールも増えてきました。
Figmaの弱点は、写真加工など高度なデザイン処理ができない点…。写真加工にはPhotoshopが必要ですが、初心者のうちはそこまでの高度な加工は不要です。
FigmaでWebデザインの基本を学び、必要に応じてPhotoshopを購入するのが効率的な学習方法かなと思います。
Figmaで始めるWebデザインについては、詳しくは以下の記事で。
Photoshop＋Figmaの場合
PhotoshopはAdobe（アドビ）という世界的に有名なデザインソフト会社のソフトです。
Adobeはデザインをやっていると100万回くらい耳にしますので、覚えておいてくださいね
アメリカの企業で、世界中のデザイナーが使っているデザインソフトを作っている会社。写真の編集、イラスト作成、Webサイトのデザイン作成、動画編集などのソフトを販売。世界中のデザイナーにとって欠かせない存在。
公式サイト：https://www.adobe.com/jp
Photoshopひとつあれば、Webデザインに必要な作業はすべてこなてしまいます。逆に他のソフトでは全てを賄うことはできない…。
最初はFigmaで良くても、いずれPhotoshopは必要になりますので、初期費用に入れてもいいかもしれません。
特に、Photoshopの優れている点は写真加工です。デザイナーにとって、写真の加工や演出は必須のスキルですが、Photoshopが最もきれい、かつ簡単に行えます。
Photoshopの素晴らしさについては、こちらの記事でも初心者向けに説明しています。
単体プランよりフォトプランというプランの方が料金が安くなりますので、フォトプランを契約しましょう。ややこしいですが、たぶんAdobeの事情。
| Photoshop単体 | フォトプラン （Photoshop＋Lightroom) | |
|---|---|---|
| 月額プラン（月々払い） | 4,980円/月(税込) | なし |
| 年間プラン（月々払い） | 3,280円/月(税込) | 2,380円/月(税込) |
| 年間プラン（一括払い） | 34,680円/年(税込) 1ヶ月あたり2,890円 | 28,480円/年(税込) 1ヶ月あたり2,370円 おすすめ！ |
フォトプランに入っているLightroomとは、膨大な数の写真を管理するソフトです。主にプロカメラマンが使うのでデザイナーはあまり使わないかも
フォトプランの方がお得ですが月額プランがなく年間縛りとなるので、そこだけ注意してください。数ヶ月だけ使用したいのであれば、単体購入でOK。
また、フォトプランには１TBのストレージサービスも付いてきます。
Adobe Creative Cloudの場合
Adobe Creative Cloud（通称AdobeCC）とは、Photoshopだけでなく、動画編集、紙や書籍のデザイン、その他クリエイティブに特化したソフトが20種類以上入ったAdobeのコンプリートプランです。
一般的には3つ以上のAdobeソフトを使うならAdobeCCを契約した方がお得と言われていて、プロはこのAdobeCCを契約するパターンがほとんどです。
仮にAdobeCCを契約した場合は、年間契約一括払いで86,880 円/年、月あたりだと7,240円です。
年間8万円は…ちょっと…いやかなり高いっす
| Photoshop単体 | AdobeCC (複数ソフトのセットプラン) | Figma | |
|---|---|---|---|
| 月額プラン | 4,980 円/月 (税込) | 12,280 円/月 (税込) | 無料 |
| 年間プラン (月払い) | 3,280円/月 (税込) | 7,780 円/月 (税込) | 無料 |
| 年間プラン (一括払い) | 34,680 円/年 (税込) 1ヶ月あたり2,890円 | 86,880 円/年 (税込) 1ヶ月あたり7,240円 | 無料 |
初心者がいきなりAdobeCCを買う必要は必ずしもないのですが、AdobeはAdobeCC契約者対象に初心者向けの講座を行なっているので、仮にコストに余裕があって本格的にデザインを学びたいというのであれば、AdobeCCを選ぶのはありです。
例えば、AdobeCCユーザーなら無料で受講できる「ことはじめクリエイティブカレッジ」は、初心者の学びの場にぴったりです。
AdobeCCの夢のようなソフト内容や特典については、以下の記事でまとめてます。
AdobeCCは必要か？という疑問についてはこちらの記事に書いていますので、よかったら参考にしてみてくださいね。
Figma購入：0円
Photoshop購入：28,480円/年
AdobeCC購入：86,880円/年
パソコンとデザインソフトがあれば、とりあえず一番大事なデザインを作ることができます！
コーディングの費用について
デザイン作業はデザインソフトがあれば可能ですが、その後はデザイン画をHTMLというコードに起こす作業に入ります。
※HTMLをWebデザイナーの範疇とするかどうかは人それぞれなので、HTMLはやらないって人は飛ばしてくださいね。ちなみに、HTML周りの費用は基本無料です（結論）
HTMLやCSSはどのツールで書けばいいの？
コーディングには「テキストエディタ」というソフトを使います。
デザインソフトで作ったデザインは、HTML/CSSというプログラミングコードに変換してWebサイトとして公開されます。このコーディング作業があって初めて、Webサイトが形になります。
詳しくは、以下の記事で解説していますので、ぜひ参考にしてくださいね。
テキストエディタにはさまざまな種類がありますが、基本自分に合うものを自由に選んでOKです。
なぜならグラフィックソフトと違って、テキストエディタは基本無料。有料版もありますが、主にプログラマー向けなので、初心者しかもWebデザイナーは無料のもので十分です。
使い勝手がよければそのまま使い、合わなければ別のものを試してみるのもアリですね。
おすすめなのは、マイクロソフトの「Visual Studio Code」。シェア率No.1の無料のテキストエディタです。
Visual Studio Codeダウンロード：https://azure.microsoft.com/ja-jp/products/visual-studio-code/
最近はずっとVisual Studio Codeにお世話になっていますが、テキストエディタはいろいろ浮気しました！
最初にも書きましたが、HTMLはやらないという人もいます。WebデザイナーってHTMLを学ぶべきなの？と疑問に思う方にはこちらの記事をご参考までに。
インターネット環境について
インターネット環境はすでに整っている人も多いと思いますが、もしモバイルのみの契約であれば、自宅に光回線のWi-Fiを導入しましょう。デザインデータは容量が大きいため、モバイル回線ではうまく送れない場合があります。
光回線の中でも、コストパフォーマンスが良いのは「NURO光」。
公式サイトでは10Gbpsが月額4,400円〜となっていますが、キャンペーンによってはさらに安くなることもあります。
NURO光公式サイト：https://www.nuro.jp/
インターネット環境については、携帯キャリアでのセット契約で料金が割引される場合もあるので、自分にとって最もお得な回線を選ぶと良いです。
Webデザインの勉強代について
ここがみなさん未知数だと思います
デザインの勉強代というのは本当にピンからキリまであって、どこまでお金をかければプロになれるのかは一概には言えません。
ただし、スキルがゼロのままではWebデザイナーとして採用されないため、初心者は独学で勉強するか、デザインスクールに入ることをおすすめします。
デザインスクールにかかる費用
Webデザインスクールの受講料は、
20万円〜80万円程度
と、かなり幅があります。
なぜこれほどの金額差があるのか。
理由は、受講期間や受講内容、スクールの規模によるところが大きいです。
安いスクールでは、受講内容が基礎のみ、受講期間が短い、就職支援などのサポートが少ないといった特徴があります。ただし、「基礎だけ学んだらあとは独学で十分」「とにかく学習のきっかけが欲しい」という人にとっては、コストを抑えられるためアリな選択肢だと思います。
一方で、「プロとしてのスキルを確実に身につけたい」「就職までしっかりサポートしてほしい」「じっくりと半年以上は学びたい」という人は、多少高額でもカリキュラムが充実したスクールを選ぶと、最良の環境を得ることができます。
受講費用が安くなるリスキリング・給付金制度について
そういってもスクールはやっぱり高額です。
実は、国の給付金を活用して受講費用が安くできる方法があります！
現在、IT人材の不足は深刻な問題となっており、多くの人材確保のために厚生労働省や経済産業省が補助金制度を設けています。
Web業界への転職を目的としてWebスクールを受講した場合、受講費用が大幅に割引（最大70%）されたりと、大きな恩恵があります。例えば、受講費用が30万円だとしても実質の支払いは10万円以下になるケースもあるので、条件に合う方は、ぜひ活用してみてください。
詳しくは以下の2つの記事にまとめてます。
ひとり親の場合は、こちらの制度をチェック！
次に独学で学んだ場合にいくらくらいかかるかをみていきましょう
独学でWebデザインを学ぶのにかかる費用
独学はスクールよりは費用を抑えられます。しかし、全くお金をかけずに勉強することは厳しい…。
勉強に必要な書籍や有料動画などのコストがかかります。
- オンライン学習サイト：月1,100円〜
- 書籍：1,000円〜3,000円程度
- 動画学習：1,500円〜
デザインの専門書籍
Webデザインの書籍はおすすめしたいものがたくさんありますが、ちょっと高価なので、月に1〜2冊と決めて購入するのも良いかもしれません。
HTMLはオンライン学習で十分に勉強できるので、書籍はデザイン系のものを購入するのがおすすめです。
月額980円で読み放題となるAmazonの【Kindle Unlimited
】でも、Webデザイン関連の書籍が充実していますよ。
動画学習サイト
Udemy
動画学習サイト【Udemy 】では、世界中の専門分野の講師が提供する学習動画を買い切りで購入できます。特にWeb・IT系の動画は人気が高く、初心者向けの動画も多数アップされています。
セール時には、1本1,600円程度で購入可能です。
Webデザインスクールの中には、ビデオ視聴のみのスクールもあります。そのようなスクールに高額な費用を払うなら、Udemyで1,800円程度の動画を購入した方が、ずっとコストを抑えられると思います。
Youtubeもいいのですが、Udemyは有料だけあって講座のレベルが高いです
Schoo
Udemyと併せておすすめなのが、【Schoo（スクー）】です。Schooは、無料の範囲でも優良講座が多数視聴できます。また、生放送（LIVE配信）にも無料で参加可能です。
さらに、アーカイブ講座は 月額980円で見放題。控えめに言ってコスパが良すぎ。
デザインの講座も充実。
オンライン学習サイト
オンライン学習サイトは、HTML/CSSなどのコードを学ぶのに最適なツール です。
自分で実際にコードを書きながら学習できるので、手を動かしながら理解を深められる のが大きなメリット。
特に有名なのが以下の2つのサイトです。有料ではありますが、月額1,000円程度と手頃な価格 で、どちらも超初心者向けの丁寧な解説付きなのでおすすめです。
費用ゼロでとりあえず試してみたい人は
Webデザインを学ぶ前に、「本当に自分に合っているのか試したい」という人も多いでしょう。
無料の範囲で試してみたいという気持ちはごもっともです。
そこで、まずは 無料でWebデザインを試せる方法 を2つ紹介します。
方法1：Adobeソフトを無料体験で使ってみる
PHotoshopには7日間の無料体験がついてきます。
さらに、Adobe公式サイトには各ソフトの無料チュートリアルも用意されています。これを活用しながら実際にソフトを操作してみると、デザインのイメージがつかめるでしょう。
Photoshop チュートリアル
https://helpx.adobe.com/jp/photoshop/tutorials.html
方法2：無料デザインツールのFigmaを使う
Figmaは 無料 で利用でき、プロの現場でも使われているデザインツールです。
また、ブラウザ上で動作するため、パソコンにインストールする必要がありません。
使い方・チュートリアルは、YouTubeにたくさんありますよ。
こちらの記事も参考にしてみてください。
まとめ
ここまで長文を読んでくださり、ありがとうございました！参考になれば幸いです。
最後に、Webデザインの初期費用をまとめます！
- 【パソコン】15万円〜30万円
- 【デザインソフト】0円〜39,800円/年額
- 【インターネット環境】月額4,000円程〜
- 【テキストエディタ】無料
- 【その他勉強代】スクール（20万〜80万※補助金制度有り）、独学（5,000円〜）
少しでもたくさんの方がWebデザインの世界に来てくれると嬉しいです！
Webデザイナーの仕事を詳しく解説した記事です。
スクール選びについては、いくつか記事を書いていますので、参考にしてください。
