未経験からwebデザイナーになる為の独学に必要なツール１４選

webデザインの独学をはじめるにあたって、独学を始める前に必要なツールを揃えることがとても大事です。

必要なツールを集めないと勉強の効率が低下し、更には挫折して独学をやめてしまうケースもあるからです。独学に必要なツールって沢山ありますよね。パソコンやマウス、デザインツールなど。［独学に必要なツールってなんとなくわかるけど何を揃えればよいのだろう！］と思っているそこのあなた！！

独学を経験した私だからご紹介できる未経験からwebデザイナーになる為の独学に必要なツール１４選！！をご紹介します。
必見です！是非ご覧ください。

• １．パソコン
• 2．インターネット環境
• ３．Adobeソフト（デザインソフト）を最安のプランで揃える！
• ４．ドメイン
• ５．レンタルサーバー
• ６．テキストエディタ
• ７．マウス
• ８．サブモニター
• 9．ワーキング（勉強）デスク
• １０．ワーキング（勉強）チェアー
• １１．パソコン用メガネ
• １２．集中できる勉強部屋
• １３．気分転換できる勉強場所
• １４．気分転換できる場所
• まとめ

１．パソコン

webデザインの独学をする為には、パソコンが必要です。
これが無いとwebデザインの勉強をすることはできません。
はじめにパソコンを準備しましょう。

webデザインの独学で必須のデザインソフトillustratorやPhotoshop、コーディング（コーディングとはプログラム言語を記述すること）する為のテキストエディタを使用するのでパソコンを準備するときスペックの確認が必要です。

『なぜ、このスペックでいいの？』『私のパソコンでも大丈夫な気がするけど。』と思いの方illustratorやPhotoshop、テキストエディタを使うために必要なスペックは以下の通りです。
最低限必要なスペックでも動作はしますが、カクカクしたり反応が遅くなったりするのでストレスを感じる事が多いでしょう。パソコンを購入するのであれば推進スペックをおすすめします。

最低限必要なスペック

※Macbook Airのいちばん安いもので大丈夫です。

推進スペック

※ OSはWindows Mac どちらでも好みで選んで問題ありません。
※ デスクトップ、ノートも自分の好みで選んで問題ありません。

具体的にどんなパソコンが良いのか知りたい場合は下記の記事を是非参考にしてみてください。

Webデザイナーにおすすめのノートパソコンは？8選

すでに所持しているパソコンが推進スペック以上ならそのまま使用可能です。
新たに買う必要はありませんよ！

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

2．インターネット環境

勿論webデザインの独学にはインターネット環境も必要です。

なぜインターネット環境が必要かというとソフトをダウンロードするときや、わからない事を検索するときに使用するからです。

例えばデザインソフトのillustratorやPhotoshop、コーディングに使用するテキストエディタをダウンロードするとき、勉強中にわからない事をGoogleやYahooなどで検索するときに使用します。基本的にソフトのダウンロードや検索に使用するので、あまり早いスピードでなくても大丈夫です！持ち運びwifi、テザリングなどの値段が安いインターネット環境に契約をしましょう。

３．Adobeソフト（デザインソフト）を最安のプランで揃える！

AdobeソフトとはAdobe社が提供するデザインソフトツールです。皆さんがよく使うPDFソフトツールと同じ会社ですね。
［Photoshop］（主に画像編集に使うデザインソフト）、［illustrator］（ロゴやイラスト作成に使うデザインソフト）は必須と言えます。少なくてもこの2点は契約しましょう。

数多くのデザインソフトツールがありますがwebデザイナーの仕事現場では圧倒的にAdobe社製の［Photoshop］と［illustrator］が多く使われているからです。

Photoshopとillustratorを使うにはAdobeプランへの契約が必要です。残念ながらPhotoshopとillustratorだけを合わせた契約プランはありません。契約プランを見ていきましょう。

illustrator ー単体プラン（個人）ー

年間プラン（一括払い）は12で割って月額を出すと2,890円相当。
年間プラン月々払いより約12％お得です。

年間プラン（一括払い）と月々プラン（月々払い）では、年間25080円の差額が出ます。安く契約できるに越したことはないですよね。
年間プラン（一括払い）にしておくほうが『お金払ったからやらなきゃ』とモチベーション維持にもなりますので、年間プラン（一括払い）をおすすめします。

Photoshop ー単体プラン（個人）ー

Adobe Creative Cloudでは、現在どのアプリケーション単体でも『単体プラン』となり同料金。
PhotoshopもIllustratorと同じ価格設定です。

Photoshop ーフォトプラン（個人）ー

Photoshopには単体プランとは別にフォトプランというのが用意されています。
このフォトプランは単体プランより安いのに、Lightroom（デスクトップでもモバイルでも、写真を編集、整理）とLightroom Classic（写真の整理、編集、現像、公開まで）が付いていて合計３つのソフトがダウンロードできます。

『３つもソフトがダウンロードできて、クラウドストレージの容量も多いのに、なんで単体プランより安いの！』と怪しく思いますがフォトプランはキャンペーンのようです。キャンペーンはいつ終わるかわからないのでご注意ください。

単体プラン最安値とフォトプラン最安値を比較すると、年額で6,200円／円（税込)の差額になります。
フォトプランは年間プランしかありませんが、これだけの差額だとフォトプランの契約一択と言ってもよいですね。

結論は

IllustratorとPhotoshopの2つを使いたい場合、以下の購入方法が公式ではおすすめです。

• illustrator 単体プラン/ 年間プラン（一括払い）: 34,680円
• フォトプラン（1TB）/年間プラン、（一括払い）: 28,480円

34,680 + 28,480 = 63,160円／年。

公式サイトでは時々「プラン期間限定SALE」など割引が行われることもありますので、チェックしてみてください。
なお、Premiere Proなどもう１つ以上使いたいソフトがあれば、コンプリートプランの方がお安いです。

参考リンク : アドビ【公式】サイト

４．ドメイン

自分のwebサイトやポートフォリオ（ポートフォリオとは実績や技量がわかる作品集のこと。履歴書みたいなものです。）を作りweb上にアップデートするにはドメインの契約が必要です。

ドメインとは、インターネット上の住所のことです。
https://skillhub.jp
黄色の部分がドメインになります。

インターネット上の住所（ドメイン）をクリックすると、ドメインにとびwebサイトが観覧できるという仕組みになっています。ドメインがないとwebサイトやポートフォリオがどこにあるかわからない為ドメインが必要です。家の住所に例えるとわかりやすいでしょう。

『以前会社でお世話になった方の家にお伺いしよう』と思ったときに家の住所が分からないと家に伺う事はできませんよね。webサイトやポートフォリオも同じようにドメインがないと置いてある場所がわからないので観覧することができないのです。ドメインは必須ですね。web上にアップデートするときには必ず契約しましょう。
（未経験の方は、レンタルサーバーを一緒に契約するのが簡単なのでこの後説明します。）

ドメインについてはここがわかりやすいですよ。
参考リンク : 超初心者向け！ドメインとは？基礎知識〜用語をわかりやすく解説します！

５．レンタルサーバー

レンタルサーバーもドメイン同様自分のwebサイトやポートフォリオを作りweb上にアップデートするにはレンタルサーバーの契約が必要です。

レンタルサーバーとは制作したwebサイトやポートフォリオなどのデータを保管しておく場所です。web上に保管しておく場所がなければ、web上に何もないので観覧できない為保管しておく場所が必要です。

今回も家で例えるとわかりやすいのですが、レンタルサーバーは『土地』と考え
ればよいでしょう。家を建てるのに住所（ドメイン）、土地（レンタルサーバー）の両方がないと建てられませんよね。だから、レンタルサーバーは必須なのです。

ドメイン・レンタルサーバーは別々に契約できますがセットで契約できる会社があり、未経験の方は両方一緒に契約できるほうが簡単なのでそちらをおすすめします。

ドメイン・レンタルサーバー両方一緒に契約できるおすすめ会社

【GMOインターネット】ConoHa WING
【エックスサーバー】XSERBERレンタルサーバー
【GMOペポボ】ロリポップ！レンタルサーバー
【さくらインターネット】さくらのマネージドサーバ

下記のサイトで色々と検索できます。自分に合った会社を探しましょう。
参考リンク : レンタルサーバー比較ナビ

ドメイン・レンタルサーバーの契約は、さほど難しくありませんが難しいと思う方にはこちらのサイトが参考になると思います是非ご覧ください。
参考リンク : レンタルサーバーを使ったWebサイト公開方法 - はじめてのWEBデザイン

６．テキストエディタ

webデザインの独学をするときにはコーディングをします。そのときに必要なのがテキストエディタと言われるソフトです。

テキストエディタとは中身が文字だけのファイルを編集するときに使うソフトでwindowsやmacに標準装備されているメモ帳などです。メモ帳でもコーディングできますがテキストエディタはコーディング専用ソフトで使用すると作業効率が上がる為絶対に必要ですよ。

テキストエディタはメモ帳と違い記述ミスエラーの表示や命令語ごとに色を変えてくれるような機能が充実しているので自分にあったテキストエディタを選びましょう。

ずばり未経験者におすすめは、この２つしかありません！！
是非お試しください。

SublimeText

https://www.sublimetext.com

Sublimetextは【恋に落ちるテキストエディタ】という面白いキャッチコピーを持っていて特徴は動作がめちゃくちゃ軽くてさくさく動くことです。

初期状態では無駄な機能がなく未経験の方にはとても良いですね。
勿論初期状態のままでも十分に使用することができます。
初期状態から自分に合ったカスタマイズをすることができます。

プラグインによるショートカットキーの整理もできますし、現在開いているファイルをハイライト表示もでき嬉しいですね。
特に未経験からwebデザイナーの独学を始める方にはおすすめです。

Visual Studio Code

https://code.visualstudio.com

Visual Studio Code（VS Code）は比較的歴史が新しく、2015年11月に正式公開されたMicrosoft製テキストエディタなのですが、多機能ながら軽量でさくさく動作します。

こちらも初期状態でプラグインをせず問題なく使用することができます。

プラグインが多数用意されているので軽さや機能のバランスを考えながらできるので嬉しいですよね。
Sublimetextより初期状態の機能は少々多く感じるので、少しSublimetextを使ってからVisual Studio Codeを試してみるのがおすすめです。

７．マウス

デスクトップパソコンでは必須になりますが、ノートパソコンの場合はタッチパッドがついているので、必ずしもマウスは必要ではありません。ただ、Windowsユーザーは間違いなくマウスはあった方がよいでしょう。
（Macユーザーはトラックパッドを使っている方も多いです。ご自分に合った方を選択しても大丈夫ですね。）

webデザイナーの業務では非常に細かい操作を求められる場面が多いので、マウスがあると非常に便利です。

例えばPhotoshopで画像の細かいレイアウト加工やillustratorでロゴなどの細かな角度を調整する時などマウスがあると非常に便利です。タッチパッドでも操作は可能ですが細かな作業にあまり向いていない為、膨大な時間の浪費になってしまいます。マウスは是非購入しましょう。おすすめは使用時の快適性やボタンのレスポンス、持ち運びのしやすさを考えると、有線・無線両用可能なマウスがおすすめです。

おすすめマウス参考サイト : 有線・無線の両方に対応するマウス８製品！

８．サブモニター

サブモニターは必須とはいえませんが、是非揃えて頂きたいと思っています。

理由はwebデザインの勉強効率が格段に上げることができるからです。

例えば、メインモニターはテキストエディタを使ってコーディングし、サブモニターはweb書籍や動画などを表示させる。もしくはGoogleやYahooなどの検索のときに使うなど。モニターを複数使うことによりいちいち画面を切り替えなくてすみ、勉強の効率を格段に上げることができます。

でも、［サブモニターは必須じゃないからいらないよ～］［お金がないから買えない！］などそう思っている方も多いのではないでしょうか？

買わなくてもよいのです！！

ちょっと家の掃除をしてください。昔買って使っていないパソコンやタブレット、スマートフォンはありませんか？

昔買った物でサブモニターにすることが可能なのです。

ネット環境を使って無線で繋げることもできますし、有線ケーブルを購入してサブモニター化できます。有線ケーブル購入といってもモニターを購入するより安く抑えられるので、やってみる価値があること間違いなしですね。

Windowsでマルチディスプレイするおすすめ方法

「spacedesk」でマルチディスプレイが無料で高性能、超簡単。タブレット、スマホ、ノートPCが外部画面に。

Macでマルチディスプレイするおすすめ方法

【Mac入門講座】#5 デュアルディスプレイを使おう！ 接続から設定まで紹介します！

9．ワーキング（勉強）デスク

webデザインの独学をはじめるときに見落としがちなのがワーキング（勉強）デスクです。結構みなさん見落としがちなんです。これも必要なツールの1つです。

デスク上に物が多く乱雑になってしまうと勉強の効率低下やモチベーションが下がってしまいます。極力スペースを確保しやすい大きな物がよいでしょう。

デスク上にはパソコン、勉強用書籍、ノートなど多くの物を乗せたいですよね。
部屋のスペースや乗せるものを考えワーキング（勉強）デスクを選びましょう。

おすすめワーキング（勉強）デスク : 《2022年》パソコンデスクおすすめ11選。多機能モデルから省スペースタイプまで

１０．ワーキング（勉強）チェアー

ワーキング（勉強）チェアーも見落としがちです。必要なツールの1つと言えます。

webデザインの独学はパソコン中心で勉強するので姿勢が悪くなり腰痛の原因になります。

勉強に集中すると時間もわすれて長時間座っていることもありますよね。疲れにくいチェアーやワーキング（勉強）デスクに合ったチェアーを選びましょう。購入前に実際に座って確認することが大事です。

おすすめワーキング（勉強）チェアー : 《2022年》オフィスチェアのおすすめ13選。価格とスペックを徹底比較

１１．パソコン用メガネ

一昔前はこのような商品はありませんでしたが現在はパソコンを使用するのがあたり前な社会になりパソコン用ブルーライトカットメガネができました。パソコン用ブルーライトカットメガネを用意しておくとよいでしょう。

眼精疲労やドライアイ、肩こり、頭痛など色々なところに悪影響がおこり睡眠の質の低下がおこります。それが続くことにより体調不良を引き起こす可能性がでてくるのです。ここで使ってほしいのが目の疲れを軽減できるパソコン用ブルーライトカットメガネです。

特に色使いが多いテキストエディタを使って長時間コーディングをしていると、目に負担をかけてしまい目が疲れてきますよね。
１つ持っておくことをおすすめします。

おすすめパソコン用メガネ : 【2022年】ブルーライトカットメガネのおすすめ人気ランキング9選

１２．集中できる勉強部屋

webデザイナーになる為には長い期間の勉強時間が必要になります。その為に集中できる勉強部屋が必要です。

集中＝勉強効率が上がる

間違いないですね。

このような勉強部屋を作ってみてはいかがでしょうか！

画像引用元 : koma42chima1128 - 机/勉強スペース/スタディースペース/家事スペース/収納/シンプルインテリア… のインテリア実例

画像引用元 : h.com - 机/100均/セリア/男前/ペイント壁/niko and…　… のインテリア実例

家族やパートナーなど一緒に住んでいる方は、集中できる勉強部屋を一緒に作ってもらえるように相談してみるとよいです。集中できる勉強部屋を作り効率よく勉強しましょう。

集中できる勉強部屋作りに参考になるサイト
集中力アップ！勉強部屋のおすすめインテリアや配置のコツを紹介
勉強部屋の実例70選！

１３．気分転換できる勉強場所

webデザインの独学には、気分転換できる勉強場所が必要です。

集中できる勉強部屋を用意してもテレビやゲームなど色んな誘惑があったり、同じ部屋で勉強していると飽きてきてモチベーションを保てなくなることがありますよね。そんな時に気分転換できる勉強場所があると集中でき勉強も捗ると思います。

例えば、喫茶店やカフェ、図書館など、気分転換や勉強に集中できる場所を作っておきましょう。そのような場所を作っておくと独学の勉強効率が爆上がりですよ。

特に最近は電源が付いているカフェが多くなってきていて気分転換できる勉強場所として人気急上昇中です。バッテリーを気にせず勉強できるのは嬉しいですね。

気分転換できて、バッテリーも気にせず勉強できるおすすめカフェ！

勉強できるカフェはここだ！おすすめカフェ10選
充電がない！PC作業がしたい！無料で充電が出来る電源カフェを全国にあるチェーン店から13選

１４．気分転換できる場所

気分転換・リフレッシュできる場所も作っておくことは重要です。

いくら気分転換できる勉強場所があっても、やはり勉強って大変ですよね。思い切って少し勉強のことから離れて気分転換できる場所へ行きリフレッシュすることも大事です。

自然が好きなら川のほとりや森林公園。ショッピングが好きならデパートやショッピングモールスポーツが好きなら運動場やサイクリングコースなど。

気分転換・リフレッシュできる場所は人それぞれ違いますので、気分転換できる場所は必ず作っておきましょう。リフレッシュできると思わぬヒラメキや良いアイデアが浮かぶときもあるのでリフレッシュと言えど、録音や文字起こしできるようにスマホは持って行くのが良いかもしれませんね。

まとめ

［未経験からwebデザイナーになる為の独学に必要なツール１４選！！］をご紹介しました。必要なツールを揃えて効率のよい独学をしていきましょう。

頑張って独学を一生懸命やっても効果がでない方は、せっかく揃えた１４のツールが勿体ないです。揃えた１４のツールはwebデザインスクールでも使うことができるので、webデザインスクールの受講をご検討ください。