デザイン学習【初心者】

Webデザイナーを独学で目指す時に必要なもの

当記事では、Webデザイナーを独学で目指す時に必要なものを解説しています。

「Webデザインの勉強をしたいけど、何から揃えたら良いか分からない…」
「必要なものを事前に知っておきたい」

という方は、ぜひ参考にしていただけたらと思います。

 

先に結論を述べますが、独学で学習をする段階であれば、以下4つのツールを用意しておけばOK。

① パソコン
② Photoshop
③ テキストエディタ
④ 教材

 

Webデザインを専業で仕事にするのならもう少し揃えなければならい物もありますが、必要最低限は以上4つのツールです。

でも、せっかくならトータル的にどんなものが必要か知りたいですよね。

本文では、独学でWebデザイナーを目指す時に必要なものをもっと深掘って解説していきますね。

 

この記事を書いている人

4年制美大卒。デザイナー歴14年。

メーカーのインハウスデザイナーを9年経て、現在までフリーランスとして活動。

 

 

Webデザイナーを独学で目指す時に必要なもの

Webデザイナーを独学で目指す場合に必要なもの一覧は、以下の通りです。

  1. パソコン
  2. Adobeソフト(Photoshop・Illustrator・XD・Dreamweaver)
  3. テキストエディタ(Dreamweaverでも可)
  4. 教材
  5. フォント
  6. 素材集
  7. ドメイン
  8. レンタルサーバー

ひとつずつ解説していきますね。

 

パソコン

パソコンはできるだけ高スペックのものを用意しましょう。

デザイン作業は同時に複数ソフトを立ち上げることがほとんどなので、低スペックだと途中でパソコンがフリーズして作業の妨げになってしまいます。

 

参考までに、必要最低限のパソコンスペックをご紹介しておきます。

CPU:インテル Core i5以上
メモリ:16GB以上
ハードディスク:500GB以上

メモリの増設は必須です。(別途料金がかかりますが)

私はメイン機をMac(メモリ16GB)、サブ機をWindows(メモリ8GB)で使っていますが、ソフトのサクサク感がまったく違うのでメモリは16GB以上に増設することをおすすめします。

 

ちなみに私は、以下のスペックのパソコンを使っています。

(6年前のパソコンですが、毎日パソコンを使っているにも関わらず今でもバリバリ動いてくれます!)

正直、16GBでも重たいな…と思うことがあるので、次にパソコンを買い換えるときはもっとグレードアップしようと思っています。

 

Macが良いかWindowsが良いかは、正直「好み」です!

一昔前のWebデザイナーは汎用性の高いWindowsを使っている人が多かったのですが、最近ではMacユーザーの方が増えています。

また理想を言えば、サイトの表示崩れの確認のためにMac・Windowsの両方を持っていた方が良いのですが、勉強をする段階ではそこまでこだわる必要はありません。

パソコンの性能よりも、デザインスキルやコーディング知識を覚えていく方が先決です。

自分が使ってテンションが上がるパソコンを使いましょう!

 

Adobeソフト

Photoshop・Illustrator・Dreamweaver・XDをはじめとしたWebデザインに必要なツールや、動画編集やFlashアニメーション制作など、クリエイティブに関する様々なサービスを提供してくれているAdobe。

簡単に各ソフトの役割をご紹介しますね。

 

Photoshop

Photoshopの編集画面

できることデザイン全般の作業
バナー制作
画像補正・合成
習得期間の目安1〜3ヶ月
ソフト料金有料ソフト(月額2,728円)

※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。

 

Webデザイナーがデザインを組んでいく時は、「Photoshop」というデザイン編集ソフトを使います。

最終的に画像を「jpg」「gif」「png」などの拡張子に書き出せるものならPhotoshopを使わなくても良いのですが、Photoshopを使うデザイナーがほとんどなので、必ずマスターしておきたいソフトです。

Photoshopでは、Webデザインの現場では様々な場面で活躍してくれます。

 

Illustrator

できることグラフィックデザイン
ロゴ制作
イラスト制作
チラシ制作
習得期間の目安1〜3ヶ月
ソフト料金有料ソフト(月額2,728円)

※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。

 

Illustratorは、グラフィック・DTPの世界では必須ソフト。
Webデザイナーでも使える人は多いです。

主にロゴ制作やイラスト、紙媒体の印刷物をデザインする時に使います。

Webデザインの場合は、ロゴ・アイコン・イラスト作成の時に重宝します。

 

ちなみに私は、グラフィックデザイナー→Webデザイナーになったので、PhotoshopよりもIllustratorの方が得意なため、バナーやTOPイメージ画像の制作はいまだにIllustratorで作ることが多いです。

Illustratorは、最初の難易度はPhotoshopよりも難しいのですが、慣れてしまえばPhotoshopよりもインターフェイスの使い勝手が良いと、個人的には思っています。

 

Adobe XD

できることワイヤーフレーム作成
情報共有ツール
UI/UXデザイン
習得期間の目安1〜3ヶ月
ソフト料金有料ソフト(月額1,298円)

※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。

 

UI/UXデザイン用に開発され、最近Web業界でも主流のソフトになりつつある「Adobe XD」。

主に骨子作成(ワイヤーフレーム)に使ったり、情報共有ツールとして使われることが多いです。

Adobe XDは2016年に開発されたツールで、PhotoshopやIllustratorに比べたら歴史も浅いソフトです。

しかし、その使い勝手の良さからここ数年でメキメキと頭角を現してきました。

特にWebデザインは、プロジェクトとして取り組まれることが多いので、「共同作業ツール」として業界に浸透していき、今ではPhotoshopと同時進行で学ぶ人も多いです。

Photoshopが使える人であれば、ある程度のデザインの部分はソフトの機能を覚えれば良いだけなので、難易度自体は高くありません。

今後はもっと需要が伸びていくソフトなので、今からWebデザインを勉強する人は忘れずに学習しておきたいソフトです。

 

Dreamweaver

できることHTML・CSSの入力を補助するソフト
習得期間の目安1ヶ月
ソフト料金有料ソフト(月額2,728円)

※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。

 

Dreamweaverは、HTML・CSS・JavaScriptなどを使ったコーディング入力を補助してくれるソフトです。

 

コーディング自体は言語の羅列なのでメモ帳さえあればできてしまうのですが、

「いちいちコードを覚えてられないし、入力する手間がめんどくさい」といった状況から、これらコーディングソフトを使う人がほとんどです。

 

なお、今回紹介したソフトは「Adobe社」が提供する有料ソフトとなります。

購入は必須ですので、必要経費として捻出するようにしてください。

 

ちなみに、Photoshop・IllustratorなどのAdobeソフト20種類が使い放題の「Adobe Creative Cloud」というプランがあるのですが、誰でも格安で手に入れることができる方法があるので、気になる方は以下の記事を読んでみてくださいね。

こちらもCHECK

更新OK!Adobe CCを安く買う!Adobe歴18年のデザイナーが格安購入方法を解説

続きを見る

 

テキストエディタ

先ほど紹介した「Dreamweaver」のようなコーディング(プログラミング)を補助するソフトのことを「テキストエディタ」というのですが、有料・無料問わずにテキストエディタは世の中にたくさんあります。

代表的なツールは以下の通りです。

Visual Studio Code【価格:無料】
Dreamweaver【価格:2,728円/月】
Sublime Text【価格:USD $80】
Atom【価格:無料】

 

Adobe CCを購入する方は、そのままDreamweaverを導入することをおすすめします。

(私もDreamweaver使ってます!)

Visual Studio Codeは無料で使えるツールとして人気が高いので、こちらもおすすめです。

 

教材

Webデザインを学習する場合、

Webデザイン専門のスクールに通う
独学で学ぶ(教材を購入)

といった2択になると思います。

 

教材費をかけたくない人はネット上で無料情報を集めて独学に励むのですが、手間も時間もかかるし分からないことがあっても聞く人がいないので、挫折してしまう人が多いです。

なので、挫折をせずに最短ルートでスキルの習得が可能な「スクールで学ぶ」方法が、個人的にはおすすめです。

最近はオンラインで完結するスクールも多いので、場所と時間を選ばない学び方ができる点も、学生のみならず社会人・主婦などいろんな層からの人気を呼んでいます。

 

無料でWebデザインを学ぶ方法も紹介しているので、詳しくは以下の記事をチェックしてください。

こちらもCHECK

無料あり!費用が安いWebデザインスクールおすすめ12選

続きを見る

 

フォント

デザイナーにはフォントが必須。

パソコンに元から装備されているフォントもいくつかあるのですが、選択肢が少ない上にダサい(!?)フォントが多いので別途フォントを用意する必要があります。

特にWindowsは、標準装備されているフォントが少ないです…。

 

Adobeを契約すれば「Adobe Fonts」が無料で使えますし、「Googoleフォント」は誰でも無料で使うことができるので、こちら2つを経由してフォントのバリエーションを増やしておきましょう。

なお「モリサワフォント」と言ってプロのデザイナー御用達のフォントがあるのですが、1年間で54,780円の利用料金がかかるので、初心者の場合は「Adobe Fonts」「Googoleフォント」でも十分に対応できます。

 

素材集

Webデザインを行う場合、イラスト・アイコン・画像などの素材集があると便利。

created by Rinker
ソシム
¥2,618 (2022/05/23 13:49:19時点 Amazon調べ-詳細)

書籍を購入しても良いのですが、オンラインからダウンロードできるサービスもあるので、こちらもおすすめです。

ちなみに私は、自宅に20冊近く素材集を所持しています。

他にも「AC写真」などの有料素材サイト(一部無料あり)もおすすめです。

 

ドメインとサーバー

オリジナルのWebサイトを作るには、「ドメイン」「サーバー」の契約が必要です。

ドメインとは、https://〇〇〇〇〇〇.comのようなアドレスのこと。

サーバーとは、サイトデータを格納しておく場所のこと。

インターネット上で、ドメインが「住所」・サーバーが「土地」と表現したら分かりやすいでしょうか。

 

サーバー設定のやり方などは、Webデザイナーになると覚えなければなりません。

ドメインは安いもので1円〜取得することができ、サーバーは月100円〜借りることができます。

自分のポートフォリオサイトを作る際は、実際に自分がドメインやサーバー契約をする機会があるので、こちらは必要経費となります。

(クライアント運営のWebサイトの場合は、費用はクライアント持ちになります。)

 

Webデザイナーを独学で目指す場合に必要なものまとめ

Webデザイナーを独学で目指す場合に必要なもの一覧を、最後にもう一度まとめます。

  1. パソコン
  2. Adobeソフト(Photoshop・Illustrator・XD・Dreamweaver)
  3. テキストエディタ(Dreamweaverでも可)
  4. 教材
  5. フォント
  6. 素材集
  7. ドメイン
  8. レンタルサーバー

 

最初から全部揃える必要はありませんが、

パソコン
Photoshop
テキストエディタ
教材

は必ず用意してからWebデザインの学習をスタートしてくださいね。

当記事を少しでも参考にしていただけると幸いです。

 

こちらもCHECK

Webデザイナーになるために必要最低限のスキルと使うソフト

続きを見る

 

スポンサーリンク



グラフィック・Webデザイナー向けの転職サイト8選はコレ!

グラフィックデザイナー・Webデザイナー向けのおすすめ転職サイト・転職エージェントを比較しながら詳しく解説しています!

記事本編はこちらから

   

学び方〜仕事の探し方まで!未経験からデザイナーになるための完全ガイド

デザインまったくの未経験者が、プロのデザイナーになるまでのステップを詳しく丁寧に徹底解説しています。

記事本編はこちらから

   

長時間労働?人間関係?みんながデザイナーを辞めたくなる3つの理由

「デザイナー辞めたい!」一度は考えたことありませんか? そんなデザイナーの不平・不満を調査してみました。 デザイナーのみなさんならこの苦労を分かち合えるはずです!

記事本編はこちらから

   

Webデザインを安く勉強できるオンラインスクール厳選

Webデザインを勉強したい方に向けて、価格や授業内容を比較しながら、おすすめできるオンラインスクールをまとめてご紹介しています。

記事本編はこちらから

© 2022 デザイナーの道しるべ