WEBデザイン学習に必要なアイテム4選と満足感を得られる選び方

webデザイナーの勉強に必要なもの

WEBデザインの勉強を始めたいんだけど、何を用意すればいいの?

WEBデザイナーになるには、まず何を用意すれば良いか、気になりますよね。

  • 勉強には何が必要?
  • パソコンはどんなものを選ぶべき?
  • デザインソフトって最初から全部必要?
  • コーディングに必要はものは?
  • 総額いくらかかる?

こんな疑問に答えていきます。

つまり、WEBデザインの勉強を始める際に、最低限必要なものと、その選び方がわかります。

この記事で紹介する4つのアイテムをゲットすれば、あなたのWEBデザイナーキャリアを即スタートできますよ〜。

やぁみんな!僕が現役WEBデザイナーの松崎だ!執筆者情報

現役視点で勉強に必要なものを厳選したから、参考にしてね♪

「スキルを身につけるだけじゃダメって…マジ?」
未経験から採用されるには「高品質なオリジナル作品」の提出が必須です。
採用を勝ち取るための、プロによる厳しい添削つきスクール爆誕。
しかも低価格。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼
web食いオンラインスクール
※未経験からの転職成功者、増えてます!

WEBデザイン学習に必須の4つの神器。選び方とおすすめも深掘り

WEBデザインに必要なもの4選

まず結論をお伝えしますが、WEBデザイン学習に必須の4アイテムは、以下の通りです。

【WEBデザイン学習は以下4つを用意すればOKです】

  • パソコン
  • デザインソフト
  • テキストエディタ
  • Wi-Fi環境

上記4アイテムさえあればすぐに学習スタートできます。

とはいえ、どんなものを選べば良いかも気になると思うので、それぞれ深掘りしていきましょう!

1.パソコン – 失敗しない選び方までわかりやすく解説

WEBデザイン学習には、当然パソコンを用意する必要があります。

ただ、新しく買う人も、すでに持っている人も、「どんなものを買えばいいの?」「私のパソコンじゃ能力不足かな?」と迷うはず。

そこで、WEBデザインに必須のスペック(性能)や、OS(WindowsかMacか)、デスクトップかノートPCかなど、パソコン選びのポイントを見ていきましょう!

WEBデザイン用のPCに必須のスペック

最低限必要なパソコンのスペック

WEBデザイン用パソコンのスペックは、ズバリ「デザインソフトがサクサク動くか?」を基準に選ぶのがおすすめです。

というのも、WEBデザイン業務で1番重いソフトがデザインソフトだから。

デザインソフトさえサクサク動いてしまえば、日常使いやメール・ビデオチャット、コーディングもできるのです。

なので、難しいことは考えず、「デザインソフトがサクサク動くか?」を基準に選ぶと良いでしょう。

具体的なスペックについては以下の通りです。

【デザインソフトがサクサク動くスペック】

  • CPU:インテル Core i5 以上
  • メモリ:8GB以上(できれば16GB)
  • 液晶:フルHD以上の解像度
  • ストレージ:SSD搭載
  • 容量:色々なデータ保存を考慮すると数百GB(できれば256GB以上)

ちょっと言葉が難しいかもしれませんが、家電量販店などで「このスペックのパソコンありますか?」と聞けば案内してもらえます。

すでに持っているPCを使いたい方は、メモリなどは増設できるので、家電量販店で相談してみましょう。

上記のスペックだけ知っておけば、ネットでも買えそうだね!

ゲーミングPCみたいな超ハイスペックのPCは必要ないぜ!

ここでは割愛するけど、動画編集もやりたい人は、もう少し良いスペックが必要だから注意してね。

WindowsかMacか問題(OSの選択)

windows-or-mac_optimized

スペック以外によく議題に上がるのが「IT職ならMac?Windowsじゃダメ?」という永遠の質問。

結論、どちらでもOKです。

MacだろうがWindowsだろうが、できることに大差はなく、当然WEBデザインで支障はありません。

安く揃えたい、使い慣れたものが良いならWindows、見た目やグラフィックの美しさも重要ならMacといった選び方で良いでしょう。

WindowsならマイクロソフトのSurfaceや、DELL、LENOVO、NECなどの人気企業のPCから選ぶと安心ですね。

MacはiMacでもMacBook ProでもAirでも問題ありません。

僕はWindowsを10年以上愛用しているよ。

WEBデザインとプログラミングで使用してきたけど、困ったことはないから安心してね◎

中古でも大丈夫か

なるべく費用を抑えたいという方は、中古PCも検討されていると思います。

結論、中古でも問題ございません。

  1. スペックを満たしている
  2. 壊れていない

この2つを満たしていれば問題なくWEBデザインはできるからです。

実際、弊社のPCもほとんど中古のものを使っています。

中古なのですぐ壊れる可能性はありますが、3~5万円など通常の半額以下で買えるのは大きいです。

デスクトップPCかノートPCか

デスクトップかノートPCか

デスクトップPCかノートPCかは、好みで選んでいただいてOKです。

それぞれのメリット・デメリットは以下の通り。

デスクトップPC

【メリット】

  • 画面が大きく作業しやすい
  • ノートPCより安い傾向にある

【デメリット】

  • 持ち運べない
ノートPC

【メリット】

  • どこでも仕事できる

【デメリット】

  • 画面が小さいため作業効率が悪くなりがち
  • デスクトップPCより高い傾向

私は家だと長時間集中が難しいから、カフェでも勉強できるノートかな。

キャバコみたいに、学習スタイルに合わせるのもいいね!

ちなみに、モニターを2台にしたり、トラックパットからマウスに変更すると、より作業効率が上がるからおすすめだよ!

2.デザインソフト – 1つでOK!無駄なお金は払いません

デザインソフト

2つ目に必要なものはデザインソフトです。

具体的には、Adobe社のPhotoshop(フォトショップ)、Illustrator(イラストレーター)、Adobe XD(エックスディー)の3つ。

Figma(フィグマ)などのツールを使う会社もありますが、Adobe社の3つがデファクトスタンダード(業界標準)と言えるでしょう。

実務ではどのデザインソフトも使うことになるので、就活を始める前までには用意し、身につけておきたいスキルですね。

Photoshopとは

Photoshopとは、WEBデザイン制作で最も使われているデザインソフトです。

写真加工がメインなので全ての機能を覚える必要はありませんが、最低限の操作スキルは必須となります。

Photoshopの公式サイトはこちら

Illustratorとは

Illustratorとは、WEBサイトで使うロゴやイラスト、チラシデザインデータの作成などに使うソフトです。

企業によりますが、WEBデザイナーもロゴデータの作成/書き出しや、イラスト・チラシ作成に使うことがあるため、ある程度使える必要があります。

Illustratorの公式サイトはこちら

Adobe XDとは

Adobe XDとは、デザイン、ワイヤーフレーム(WEBサイトの設計図)、UI/UX、プロトタイプ(操作感や動きまでつけたデザイン)の作成に使うソフトです。

近年のWEBデザイン作成では、XDの利用が爆発的に増えているので、今から勉強する人はぜひ身につけたいところです。

Photoshopの公式サイトはこちら

 


 

ただ、デザインソフトは初めから3つ揃える必要はありません。

WEBデザイン学習初期は「Photoshop」1つだけを揃えれば良いでしょう。

なぜかというと、Illustratorは学習初期で使う機会はほぼないですし、Adobe XDの操作はPhotoshopに近いためすぐ使えるようになるからです。

一方Photoshopは、企業に最も導入されているデザインソフトなので、極論Photoshopをメインに勉強すれば、採用面接の土俵に立てます。

また、デザインソフト3種類を一括購入できる「コンプリートプラン」だと月6,028円~ですが、Photoshopのみの「フォトプラン」だと月1,078円~と料金面でもお得

「最初は初期費用は抑えたい…」こんな風に考える方にはリスクヘッジにもなりますよね。

初めは勉強することが山ほどあるので、Photoshopのみに注力するのが合理的とも言えるでしょう。

Illustratorは、必要になったら追加購入すればOKですよ。

フォトプラン(20GB)はこちらから | Adobe 公式サイト

たしかに、挫折するかもわからない段階で、いきなり月6,000円以上はハードル高めだね。。

お金は問題なく、学習時間を多めに取れる人は同時並行で勉強してもOKだ!

Illustratorも一緒に購入するなら、ヒューマンアカデミーから提供している「Adobeベーシック講座」を購入すると、通常より3万円以上安く買えるからおすすめだよ◎

【Photoshop + Illustratorセットを安く買って学習リスクを減らそう!】
Adobeベーシック講座はこちら
※ Adobe Creative Cloudコンプリートプランが年間価格7万2,336円 → 3万9,980円~に!学習講座付き。

※ Adobe XDは基本無料で利用できます。

3.テキストエディタ – 人気No.1を選ぼう

用意するもの3つ目は、テキストエディタです。

テキストエディタとは、コーディングする際に使うアプリケーションのことで、黒い画面で文字ばかりの画面をイメージしてもらうとわかりやすいと思います。

テキストエディタ

最近のWEBデザイナーはコーディングスキルがほぼ必須のため、必ず用意しましょう!(無料です)

とはいえ、テキストエディタにもたくさんの種類があり、どれを選べば良いかわからないのが普通です。

そこでおすすめなのが、マイクロソフトが提供している全世界人気No.1の「Visual Studio Code」というエディタ。

日本語にも対応していますし、超大手テック企業が提供しているため数年後に無くなることもないので、とりあえずVSCodeをインストールすれば問題ないでしょう。

Visual Studio Codeの公式サイトはこちら

4. Wi-Fi環境 – 特別速いものでなくてOK

Wi-Fi

4つ目はWi-Fi環境で、こちらは自宅にWi-Fi環境がない方に限ります。

WEBデザイン学習する際は、たくさん検索することがあったり、画像素材を大量にダウンロードするため、ネット環境は必須です。

特別速いWi-Fiは必要はありませんが、自宅で自由にYouTubeを見られるくらいの環境はぜひ用意しておきましょう。

ポケットWi-Fiみたいに10GBで3,000円~みたいな、制限があるものはおすすめしないぜ〜。

 


 

【WEBデザイン学習に必要なものまとめ】

  • パソコン
  • デザインソフト(PhotoshopのみでOK)
  • テキストエディタ
  • Wi-Fi環境

上記4つを揃えれば、WEBデザイナーになる準備は整います。

環境、購入するパソコンにもよりますが、全部で1,000円~15万円で揃えられるでしょう。

人によっては数万円となるため、躊躇しちゃうのは当然ですが、理想の未来への投資だと割り切り、思い切って購入するのがおすすめです。

国家資格が必要な看護師とかだと、学校代だけで数百万円だから、WEBデザイナーの初期投資はかなり安いと言えるね。

もちろん投資は勇気がいることだけど、このくらいは就職したら確実に回収できるよ。

まだ買わないで!実は後から購入でOKなもの

後から揃えれば良いもの

WEBデザイナーになるために必要なものはご理解いただけたと思います。

ただ、他のWEBサイトを見た方の中には、「これだけ?他のサイトには他にも必要なものが書いてあったけど…」と思った方もいるかもしれません。

私が確認した限り、不要なものもいくつかあったので、混乱しないようここで整理しておきます。

サーバーとドメイン

サーバー:WEBサイトをWEB上に置いておくための土地のようなもの

ドメイン:WEBサイトがどのサーバーにあるかを示す、WEBサイトの住所のようなもの

サーバーとドメインは、学習初期から取得する必要はありません。

というのも、サーバーとドメインは、基本はWEBサイトを他人に見てもらう時に必要なものだからです。

つまり、学習初期のスキル習得段階で使う機会はありません。

サーバーの維持費だけでも、年間3,000円くらいは必要なので、最初から買うともったいないですね。

サーバーとドメインは、採用面接を受けるための「ポートフォリオサイト※」を作成してから用意すれば十分ですよ◎

※ ポートフォリオサイトとは、自分で作った作品集のこと。面接時に実績やスキルを証明するための最強の武器となる。

どうしてもサーバーを用意したい人は、Xfreeなど無料のものがあるから、初めはそっちを使うのがおすすめだ!

フォント

フォントをあらかじめ用意する必要はありません。

「高品質な有料フォントを用意した方が良い」という記事も見かけますが、学習初期に必要となることはまずないでしょう。

最近は、無料で使える高品質なフォントが増えてきたので、まずはその辺りを使い込んでいけば OKです。

Photoshopを購入すればAdobe社の「Adobe Fonts」が使い放題だったり、Googleが提供している「Google Fonts」にも高品質なフォントが多いので、色々探してみてはいかがでしょうか?

初めから全て揃えようとするとお金が無限にかかるので、完璧を求めず、必要なものだけ揃えるのがおすすめです。

デザインスキルがガンガンアップしてから、高品質なフォントを購入すればOKさ!

スキル習熟度大幅アップ!学習環境が整ったら必ず用意したい2つのもの

学習環境が整ったら用意したいもの

パソコン、デザインソフト、テキストエディタ、Wi-Fi環境を用意したらWEBデザインの勉強をスタートできます。

とはいえ「何から始めればいいの?」とフリーズすると思うので、その先のことも事前に解説しておきますね。

スクール入会予定の方も、事前に用意することをおすすめいたします。

具体的には、「学習教材」と「添削環境」を用意すればOKです。

完全未経験者から初心者へ!基礎を学べる無料のおすすめ学習教材

独学でスキル習得を目指す方は当然ですが、「スクールの教材を使う予定」という方も、基礎を学べる教材は用意しておきましょう!

というのも、知識ゼロの状態でスクールに入ると、単語調べから始める必要があり、受講期間が超無駄になるからです。

最悪の場合、何も身に付かずに30万円失った…なんてことに。

一方、事前にある程度の基礎知識を身につけておけば、スクールの旨みを余すとこなく吸収できます。

それではさっそく、完全未経験者におすすめの教材を見ていきましょう!(無料で使えるWEB教材です)

chot.design

chot.design

chot.designは、WEBデザインの知識を網羅的に、無料で提供してくれているWEBサービスです。(2022/11月時点)

デザインの考え方やデザインソフトの使い方、コーディングテクニックなどをタダで吸収し放題。

市販の参考書に載っていることなど、かなり深いところまで学べるので、chot.designだけでもWEBサイトを作れるレベルになれるでしょう。

テキスト教材なので苦手意識がある方もいるかと思いますが、隙間時間に学べるなど、使わない理由が見つかりません。

chot.designの公式サイトはこちら

Progate

progate,プロゲート

Progateは、ブラウザ上で手を動かしながらコーディング学習ができる、超人気ツールです。

スライドで基礎を学び、学んだことをすぐアウトプットできる効率の良さが魅力。

「コーディングのイメージがわかない…」と感じている方は、無料なので触ってみるのがおすすめです。

ある程度学習が進んでいくと、月額1,078円のプランに切り替える必要がありますが、安い上にお値段以上の学びを得られるでしょう。

Progateの公式サイトはこちら

※ HTML&CSSのコースを選んでみましょう

chot.designとProgateをやるだけで、基礎知識は十分身につくよ!

独学の人は有料プランまでやり込めばいいし、スクールに通う予定の人は無料プランをやるだけでも、完全初心者の人と圧倒的な差がつくはずだ。

【参考書で学びたい方は以下の記事がおすすめ】
【スクール教材超え】WEBデザインの独学で絶対に読むべきおすすめ本17冊

転職を成功させるなら、添削環境を用意しよう!

基礎知識が身に付いたら、プロに添削してもらえる環境を用意するのがおすすめです。

というのも、作って終わりじゃ成長できないから。

作る→プロに添削を受ける→ダメなところを確認→修正する…この流れが1番、デザインがブラッシュアップされます。

実際、現場でも同じ流れで成長していきますね。

例えばですが、以下画像のように添削を受けると、プロが何を意識しているのか気づけるので、とても勉強になります。

添削環境を用意しよう

また、WEBデザイナーとして転職するなら、実力を証明できる「高品質な実績」が不可欠です。

高品質な実績を作るには、プロに手直ししてもらうことが一番の近道となります。

 


 

このように、学習効率が上がる、転職しやすくなるの2点から、添削環境は非常に大切です。

独学の方は、以下のサービスで添削を受けることを検討しましょう。

※スクール利用予定の方は、オリジナル実績を添削してもらえるスクールを意識して選びましょう!課題を作って終わりだと採用されにくいです。

プラスレビュー

プラスレビュー

プラスレビューは、自分で作ったWEBサイト・バナー・チラシをプロに添削してもらえるサービスです。

プロにオリジナル作品を添削をしてもらうことで、どこがを直した方が良いか知れたり、自分の課題にも気づけます。

画面共有しながら添削をしてもらえるので非常にわかりやすいのも魅力ですね。

プラスレビューの公式サイトはこちら

クラウドソーシングサービス

ココナラ

クラウドワークスやランサーズ、ココナラなどでも添削を依頼できます。

レビューが良さそうな方を探して、添削してもらうのもありですね。

プラスレビューやスクールよりは、費用を少し抑えられると思います。

ココナラの公式サイトはこちら

周りにデザインを相談できる人がいない場合、ぜひ使いたいサービスたちだね!

ウチに面接に来る人も、添削を受けて作品を作った人の方がクオリティが高く、採用意欲が刺激されるね。

作品はスキルを証明する最強の武器だから、お金を惜しまず添削してもらおう!

必ず結果で返ってくるぜ!

まとめ:WEBデザインに必要なものはサクッと用意し、素早く勉強に進むのが正解

最後に、WEBデザイン学習初期に必要なもの、不要なものをまとめますね!

【学習初期に必ず用意すべきもの】

  • パソコン(5万円~)
  • デザインソフト(Photoshopのみで1,078円)
  • テキストエディタ(無料)
  • Wi-Fi環境(ない人は月5,000円程度)

【学習初期には不要なもの】

  • ドメイン・サーバー
  • フォント

【学習環境が整ったら用意したいもの】

  • 学習教材(chot.design、Progate)
  • 添削環境(プラスレビュー、クラウドソーシングサービス、スクール)

ここで紹介したものさえ用意すれば、WEBデザイナーとしてのキャリアを無駄なくスタートできるでしょう。

ある程度の自己投資は必要ですが、諦めなければ必ず結果で返ってきて、投資額くらいは回収可能です。

本気でWEBデザイナーになると決意した方は、即必要なものを買い揃えてみましょう!

初めから全て揃える必要はないので、気楽に勉強を始めてみてはいかがでしょうか?

「スキルを身につけるだけじゃダメって…マジ?」
未経験から採用されるには「高品質なオリジナル作品」の提出が必須です。
採用を勝ち取るための、プロによる厳しい添削つきスクール爆誕。
しかも低価格。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼
web食いオンラインスクール
※未経験からの転職成功者、増えてます!

メニューを閉じる