独学でWebデザインを始めるなら、必要なものはこれだけ!

Webデザインの勉強を始めたいけど、そもそも必要なものがわからない!

そんな方はまず、「Webスキルを身に付けるための学習環境」を整えるところから始めましょう!

Webをお仕事にするためには、まずは必要なWebスキルを身につけないといけません。
でも全くの未経験だと、そもそもWebをお仕事にするためには何が必要なのかすらわかりませんよね。

こちらの記事ではそういった方向けに、全くの未経験者がWebデザインを独学で学ぶためにまず準備すべきもの3つをご紹介します!

「パソコンって何を選べばいいの?買い直さないとだめ?」
「Webデザインをお仕事にするためには、どんなソフトが必要なの?」

こういった疑問に、IT業界歴5年目の現役Webデザイナーがお答えします。
それではさっそく本題に入っていきましょう〜!

パソコンを用意しよう

Webデザインを勉強するならば、何よりも先にパソコンを準備しましょう。
どんなに本や動画で知識を頭に入れても、実際に手を動かさないと知識は定着しません!

Webデザインスキルを最短で身に付けるなら、とにかく手を動かして学びましょう。
ということで、Webデザインを独学で始めるなら最低限準備すべきもの1つ目は「パソコン」です!

Webデザインは、Windowsでも MacBookでもどちらでも大丈夫

WebデザインするならMacBookの方がいいの?

こういったご質問はよくいただきますが、MacBookでなければいけない、ということはありません。
企業・個人関係なく、Windowsのパソコンメインで作業をされている方はたくさんいらっしゃいます。

すでにWindowsのパソコンを持っているという方はまずはそれを使って勉強を始めてみて、軌道に乗ってきたら欲しいパソコンに乗り換える、で十分かと思います。

かたちから入るタイプだからMacBook買った方がモチベが上がる!!
という方は、MacBook買うのもありだと思います。

つまり、WindowsとMacBookのどちらを使えばいいの?のわたし的回答は「お好きな方でどうぞ!!」です!笑

ちなみに、私自身は元々Windwosのパソコンを使っていましたが、故障をきっかけにMacBook Airに乗り換えました。

WindowsからMacBookに乗り換えるにあたって特に困ったことはありませんでしたが、操作感などは全然違うので、慣れが必要かもしれないです。

あ、あと会社員時代もWindowsのパソコンを使っていたので、Windowsでしか使えないソフトが使えなかったりするときは、今でも「くうう!」と思うことがあります、笑

パソコンはどれでもいい!と言いましたが、あまりに古かったりで動きがめちゃくちゃ遅いようであれば、買い換えましょうね…!

MacBook Air とMacBook Proはどっちがいい?

WindowsとMacBookどっちでもWebデザインはできるよ!
とお伝えしてもやっぱりMacBookを選ばれる方は多いんじゃないでしょうか。

わたし自身今はMacBook Airを使っていますが、次はMacBook Proを検討しています。
その理由は大きく分けてこちらの2つ。

  1. Photoshopの動作に若干のもたつきを感じる
  2. 動画編集でソフトが固まることが度々ある

これから MacBookを買う場合は、がっつりWebをやっていきたい!動画編集は絶対やりたい!という熱い想いのある方は最初からMacBookProがおすすめ

それ以外の方はMacBookAirでも全然問題ないと思います。
もし何年もWebのお仕事を続けていてMacが壊れたりしたら、その時にProに変えれば十分だと思います。

Webデザインに限らず、Webのお仕事ってとっても幅広いです。
勉強を始めてみると、どんどん興味のあるお仕事やスキルが出てくると思うので、自分がやりたいことが固まってきたら、今よりもハイスペックなパソコンが必要なのか一度考えてみましょう^^

Webデザインで必要な道具(ツール)を準備する

Webデザインのスキルを身につけるにあたって、パソコンだけあれば勉強できるわけではありません!

用意したパソコンの中に、Webデザインで使うツールを入れておきましょう。
ここではWebデザインには必須の「デザインツール」と「コードエディタ」をご紹介します。

この2つがあれば、Webデザイン(バナー作成やWebサイト制作などなど)の勉強は開始できます。
その他必要になってくるものについては、都度都度追加すればOK!

ここからはツールが必要な理由や選び方をお伝えしていますが「必要なツールだけはやく教えて!」という方はこちらからどうぞ!

デザインツール

マストで必要なのは、Adobeが提供しているPhotoshopというデザインツールです。
こちらは月額、もしくは年額で契約して使用することができます。
使ったことはないけど、名前は聞いたことがある!という方も多いのではないでしょうか。

最近はFigmaなどの無料で使えるデザインツールもありますが、Webサイト制作などをお仕事にしたいのであればPhotoshopスキルは必須です。

Web制作でもデザインではなくて「コーディング」と呼ばれる部分をメインでやっていきたいから、Photoshopは入れなくてもいいかな?

答えはNoです。
何故ならば、コーディングをすると言っても、デザイナーさんが作ってくれるデザインはPhotoshopデータで送られてくることがほとんど。

Photoshopがないとコーディングをするための画像を、デザインデータから保存(書き出しと言います)することもできません…!

自分一人でデザイン〜コーディングを行うのであれば、Photoshopなしでもどうにかなると思いますが、なかなかそれを続けていくのは困難だと思いますので、Web制作をお仕事にしたいのであれば諦めてPhotoshopを契約しましょう。。。

初めての場合は7日間無料でお試しすることができます。

ちなみに通常のPhotoshop単体プランだと定価 2,728 円/月からですが、フォトプランだと定価 1,078 円/月からPhotoshopを契約することができます。

■Adobe公式 Photoshopプラン
https://www.adobe.com/jp/creativecloud/compareplans.html

Adobeプラン

 

細かく見ると使える機能が変わってくるのですが、とりあえずはフォトプランで問題ないかなと思います。

タイミングによってはセールなどでお得に契約できたりするので、チェックしてみてください〜!

こちらのPhotoshop、あまりにもなんでもできてしまうが故に、基本操作を覚えるだけでもなかなか時間がかかります。
(そしてずっと触っていないと忘れていく・・・)

早い段階でパソコンに入れておいて、インスタなどのバナーをPhotoshopで作るなど、初めの方は日常的に触るようにするのがおすすめ。

特にWEBサイト制作に興味がない・本当にお試しでデザインをしてみたいだけ!という方は、figmaとか無料のツールでもいいと思います〜!

コードエディター

デザインツールで作成したデザインを、Google ChromeなどのWebブラウザ上で表示させるために必要な「コーディング」という作業を行うために必要なツールです。

Webデザインといってもそのお仕事内容は様々です。
「自分はデザインをメインに仕事を受けたい!」という場合は、コーディングは外注するという手段もあるので必ずしもマスターする必要はありません。

ですが外注するとしても、コーダーさんと会話する上でコーディングの基本部分については知っておく必要はあります。
ということで、コードエディタもパソコンに入れておきましょう。

どのエディターを使えばいいの?オススメは?

私も過去に調べましたが、エディターって結構種類がたくさんあるので、Webデザイン初心者の方はどれを使えばいいのか悩みますよね。

正直自分が使いやすいものならどれでもいいと思います。
どれを選んでも使っていれば慣れてくるので、エディタ選びに時間をかけるのはもったいないかと・・・!

どれがいいか決められない方はとりあえずVisual Studio Codeがおすすめです^^

■Visual Studio Codeのインストールはこちら
https://azure.microsoft.com/ja-jp/products/visual-studio-code/?cdn=disable

Visual Studio Code

実際に使っていく中で「なんか違うかも」と感じたら、乗り換えを検討してみてください〜!

ちなみに私のエディタ遍歴は、DreamWeaver→Atom→Brackets→Visuau Studio Codeです!
DreamWeaverはすごく使いやすかったのですが有料です。
無料のものに乗り換えたくていろいろ触ってみた結果、一番操作感が近いVisual Studio Codeに落ち着きました〜!

ただ、たまに求人を見ていると「このエディターの使用経験がある方」という条件があったりするので、応募したい企業があるなら事前に確認しておくことをおすすめします^^

まとめると、Webデザインスキルの学習に最低限必要なものはこれ!

Webデザインスキルの学習を始めるなら、まずはこの2つを揃えましょう。

Webデザインの学習に最低限必要なもの

  1. Photoshop:デザインツール
  2. Visual Studio Code:コードエディター

Photoshopは年額もしくは月額の契約が必要です。
いろいろなプランがありますが定価 1,078 円/月からの「フォトプラン」でOK。

Adobeプラン

プラン一覧はこちら
Photoshopの契約(7日間無料)の申し込みはこちら

エディターは「Visual Studio Code」をインストールしておきましょう。
こちらのページの「今すぐダウンロード」からインストールできます。

Visual Studio Code

デザインツールもコードエディターもいろいろな種類があります。
最初のうちはどれを選べばいいかわからない&悩む時間がもったいないので、とりあえずこの2つを準備すればOK。

その他は、学習を進める中で必要に応じて追加していきましょう〜!

独学でも効率的にWebデザインの学習を進めるために

パソコン・デザインツール・コードエディター、この3つがあれば基本的にWebデザインの学習は進められます。
ここからは番外編として、効率的にWebデザインの学習を進めるために必要なことをお伝えします。

パソコン操作を行ううえで最低限知っておきたい知識ですので、パソコン初心者の方はぜひチェックしておいてください。

ショートカットキーを使いこなそう

ショートカットキーとは、マウス操作の代わりにキーボードを使ってパソコン操作をすることができる機能です。

実は、仕事が速い人ってほとんどマウスを使わないんですよね・・・!!

ほぼパソコン初心者レベルでIT企業に入社した当時、先輩たちがあまりにも高速でパソコン操作をするのに驚きました。笑

これからスクールや講座などの受講を検討されている方は、せっかくの授業時間に自分のパソコン操作でいっぱいいっぱいになって講義の内容が頭に入ってこない、ということがないように、ぜひショートカットキーを使いこなせるようになってみてください。

独学でWebデザインを勉強しようと思っているという方も、ショートカットキーで学習スピードを高めていきましょう。

ショートカットキーでの操作に慣れると、作業スピードが全く違うので本当におすすめ!

よく使うショートカット

  • ⌘+tab:最前面に出すアプリを切り替える
  • ⌘+S :編集中のファイルを保存
  • ⌘+C :選択範囲をコピー
  • ⌘+X :選択範囲を切り取り
  • ⌘+V:コピー・切り取りした内容を貼り付け

一番上のみパソコン自体の操作で、それ以外はアプリを開いているときに使うショートカットキーになります。
これらは本当によく使う&基本的なものになりますので、これだけも覚えておいてください。

ショートカットキーはまだまだたくさんあるので、パソコン操作に慣れてきたらどんどん取り入れていきましょう〜!

ショートカットキーもっと知りたい!という方には、こちらがおすすめ!
図解も多く、実際の使用シーンとともにショートカットキーなど、作業を効率化する方法が書かれていますので、パソコン初心者の方にもおすすめです。

Webデザインの学習環境が整ったら、さっそく独学を始めよう!

Webデザインの学習に必要なものが揃ったら、さっそく勉強を始めましょう〜。

学ぶ方法は、独学・スクールどちらでも大丈夫!
スクールだと費用が高いけど、独学でできるか心配という方も、最近はyoutubeやブログでとてもわかりやすく解説してくれているものも多いです。

このサイトでも全くのWebデザイン初心者がWeb制作のお仕事をできるレベルになれるよう、HTML、CSSの基礎から発信を行なっていきます。

興味があればまた見に来てください^^

記事をアップした際はインスタでお知らせしています。
他にもこういう内容も取り上げて欲しい!などご意見ありましたら、こちらのフォームからお気軽にどうぞ。

基本的には記事・インスタどちらかで回答させていただきます^^

※誰にでも見えるかたちでの返信となりますので、あまり個人的な内容は書かれませんようお願いいたします・・・!

以上、こちらの記事では「Webデザインを勉強したいけど何からすればいいかわからない」という方へ、Webデザインを勉強するためのファーストステップについてお伝えさせていただきました。

Webデザインスキルの勉強に入る前の準備段階で時間を取られてしまうのって、すごくもったいないことだと思います。
準備はサクッと終わらせて、スキルの勉強に入っていきましょうね!!

-WEBデザイナーになる
-, ,

Copyright© Webマーケティングのもり , 2022 All Rights Reserved.