carrier

Webデザイン初心者が0から始めた独学方法と学習ロードマップ

※本ページはプロモーションが含まれています

Webデザインの勉強をしたいけど、スクールに通うお金はない、、

独学でもWebデザイナーになれるの?

そんなお悩みはありませんか?

今回は、Webデザイン初心者アラサー女子の私が実際にやったWebデザイン独学方法をご紹介します。

この記事を読めば、Webデザイン初心者からWebデザイナーになるための手順がわかるようになりますよ!

解決できるお悩み

  • 初心者でも独学でWebデザイナーになれるの?
  • おすすめの学習方法は?
  • Webデザイン独学のメリットとデメリットは?

そもそもWebデザインとは?

Webデザインとは

Webデザインとは、Web上に表示されるページをデザインすることを指します。

もっとわかりやすく言い換えると、「Webに表示される見た目を作ること」をWebデザインといいます。

Webメディアやホームページの制作を指すことが多いですが、昨今ではWebサイト用の広告バナーや画像などもWebデザインと呼ばれています。

Webデザイナーの仕事内容

Webデザイナーの仕事内容は、企業や個人などのクライアントから依頼されたWebサイトのデザインを制作することです。
サイトの構成と設計を考え、デザイン、レイアウト、カラーなどの選定をし、魅力が伝わるデザインを制作します。

また、デザインが完成したらWebサイト上に文字や画像を表示させたり動かしたりできるよう、コンピューターに指示を出すコーディングを行います。

チームで制作を行う場合には、以下のような役割が必要になります。

Webデザイナーは独学でもなれるのか

結論から言うと、独学でもWebデザイナーになることはできます。

ただ、独学の場合は知識に偏りが出てしまったり、最初の実績が作りづらいというデメリットもあります。学習につまづいた時に相談できる相手がいない場合、挫折しやすくなりますので自分で学習計画をしっかり立てることが重要になります。

Webデザインの勉強に必要なもの

パソコン

パソコンはWindowsでもMacでもどちらでもOK!

スペックは大きい方がデータ処理速度が早くなるので勉強が捗りますし、将来webデザイナーになった時にも、引き続きそのパソコンを使うことができます。

また、多くのデザイン系の会社はMacを使用しているので、これから購入するという方には断然Macがおすすめです!

デザインソフト

Webデザインをするにあたって、最低でもAdobeのPhotoshopは必要。
パソコンを購入したらまずインストールしておきましょう!

Adobeでは、7日間の無料体験期間があるので一度どんなソフトなのか試してみるのも◎

Adobe公式ホームページはこちら

その他に、以下のソフトを主に使用します。

  • Illustrator
  • Lightroom

コンプリートプランならPhotoshop、Illustrator、Lightroom全て使うことができます。

コンプリートプランをいきなり全額自己負担するのはキツイかも、、という方は、まずはフォトプランにしてみるのがおすすめです。

shio

まずはPhotoshopに慣れてから、他のソフトも必要だったら切り替えるのもありです!

Webデザイナーになるために習得するべきこと

デザイン知識

  • Webデザインに関する基本的な用語や概念を理解する。
  • レスポンシブデザイン、フォント、色などの基本知識を身につける。

レスポンシブデザイン、フォント、色などデザインの基本知識を身につける必要があります。

デザインは、単に見た目をよくすることではなく「何を誰にどう伝えたいか」が重要です。

また、フォントや雰囲気などデザインには時代によって流行りがあります。常に最新のトレンドや技術などの情報を収集する必要があります。

コーディング知識

HTML/CSSといったプログラミング言語を用いて、Webサイト上に文字や画像を表示させたり動かしたりできるよう、コンピューターに指示を出すことをコーディングといいます。

コーディングの知識はWebサイト制作に関わる上で大切な要素です。

プロのWebデザイナーになるには以下のプログラミング言語の習得は必須になります。

  • HTML
    文字や画像を表示するWebサイトの基礎言語
  • CSS
    Webサイトのデザイン・レイアウトを作る言語
  • JavaScript
    Webサイトに「動き」を作り出すための言語
  • PHP
    問い合わせフォームやECサイトを構築する言語

また、最近ではコーディングを必要としない制作ツールも増えていますが、簡易的なツールでは細かなデザインは作れない場合があります。

shio

そんな時に、コーディングの知識がある人材は重宝されます!

コーディングの知識がある人はまだまだ少ないのが現状ですので、Webデザイナーとして収入を伸ばすためには、コーディングをできることが必須条件です。

ツール使用力

  • AdobeのPhotoshop、Illustrator、Lightroomを使えるようになる。

PC操作はもちろん、デザイン制作をする上で必要なツールなども使いこなせるようになる必要があります。

例えば、画像編集をするフォトショップ、ロゴやイラストの制作にはIllustratorなどを使用します。

Webデザインおすすめの勉強方法

書籍

費用 1,000円〜
おすすめ度 ★★
学びやすさ

まずは、費用を抑えて手軽に始められる書籍がおすすめ。
最近では、未経験者向けの本も増えているため、デザインの基本からWebデザイン制作まで体系的に学ぶことができます。

shio

本のレイアウト自体も、デザインの勉強になります♪

ただし、書籍の場合はわからないことを質問する相手がいないので他の学習と組み合わせて使うことをおすすめします!
以下は、私が実際にwebデザインを勉強する時に使った書籍ですのでぜひ参考にしてみてください。

Webデザインの基本を学ぶなら

デザインの参考に

レイアウトの勉強に

手元に1冊あると安心

学習サイト

費用 0円〜
おすすめ度 ★★★
学びやすさ ★★★★

プログラミング言語の習得は、とにかく手を動かすことが1番の近道です。

Progate(プロゲート)では無料プラン(基礎)とプラスプラン(応用)があり、無料HTML/CSSやJavaScriptの基礎を学ぶことができます。

また、イラスト中心で1つ1つの説明がわかりやすいのでプログラミングって難しそう、、、という方でも確実にできるようになります。

Progateの公式ノームページはこちら

YouTube

費用 0円〜
おすすめ度 ★★★
学びやすさ ★★★

最近、YouTubeではWebデザイン関連の動画も増えてきています。

ツールの基本的な操作から、Webデザイナーの仕事について話している動画など様々な発信をしているYouTuberもいますので、ぜひお気に入りの動画を見つけてみてください。

YouTubeなら通勤時などの隙間時間に取り入れられるので、まとまった時間の取れない人にもおすすめの勉強法です。

Adobe Creative Station

Webの神様

Webデザインスクール

費用 100,000円〜
おすすめ度 ★★★★
学びやすさ ★★★★★

費用はかかりますが、挫折しそう、基礎からしっかり学びたい。という方にはスクールがおすすめです。

私が受講していたSHElikesは、女性向けのオンラインWebデザインスクールで、Webデザイン・Webマーケティング・ライティングなど40以上の豊富な職種スキル(※2024年1月時点)をオンラインで受け放題でした!

コーチングやもくもく会など、コースの受講にも挫折しないためのサービスがたくさんあり、楽しみながら勉強を続けられたので気になる方は、ぜひ無料体験レッスンに参加してみてくださいね!

▶︎▶︎▶︎SHElikes無料体験レッスンの詳細を見てみる

あわせて読みたい

【SHElikes】WEBデザイン未経験アラサー女子が無料体験ガチレポ!

続きを見る

Webデザインの勉強で挫折しないコツ

目標を立てる

Webデザインを独学する上で1番大切なことな、明確な目標を立てることです。

いきなりすごい目標を立てる必要はありませんが、ある程度実現できそうな範囲で目標を立てることで、今何を勉強するべきかが分かり、モチベーションを保ちやすくなります。

目標の例

  • バナーを1日1個作る
  • 1日30分必ず勉強する 
  • まずは1冊書籍を読む

大切なのは、「1ヶ月でWebデザイン会社に転職する」など無理な目標を立てないことです。

学習時間を確保し、無理のない計画で挫折せずに習得できるようにしましょう。

とにかくアウトプットをする

Webデザインを勉強する上で大切なことは、知識だけでなく、実際に手を動かして作品を作る「アウトプット」です。

書籍などで知識をインプットしても、実際に制作ができないと意味がありません。

とにかく手を動かして、慣れることを意識してみてください。

とは言っても、初めは何をすればいいかわからないですよね。

shio

私は、まず初めにバナートレースでデザインの引き出しを増やすことを心がけました!

バナートレースをすることで、デザインソフトの練習ができますし、「どうしてこのデザインにしたのか」「いいデザインとは何か」がわかるようになります。

初心者におすすめ!

案件を獲得する

ある程度デザインのスキルが身に付いたら、ココナラ、クラウドワークスなど使って案件に挑戦していきましょう。

初めは、報酬や仕事内容よりも「勉強」だと思ってとにかく数をこなす事を重視してみてください。

独学の場合は、ここからフィードバックがもらえることもあるので、貴重な経験になります。

ココナラの新規会員登録はこちらから

Webデザイン独学ロードマップ

Webデザイは、いきなり難しいことをしようとすると挫折の原因になります。

まずは以下の手順で少しずつ練習していきましょう!

Webデザイン学習ロードマップ

  • Webデザインの基礎を学ぶ
  • 作りたいものを決める
  • 再現してみる
  • より良いデザインに改善してみる

Webデザインの基礎を学ぶ

Webデザイン制作をする上で、基礎知識は必須です。

書籍やWebサイトなどで、制作に関する用語や基本のレイアウトなどの知識を身につけましょう。

shio

まずは最低限の知識だけでOK!

Webデザインは、作りたいものによって必要な知識がお異なるので、いきなり全てを覚える必要はありません。

ただ、基礎がしっかり身に付いていれば今後の制作でつまずきにくくなります♪

作りたいものを決める

いきなり、「オリジナルのデザインを一から作ってください。」と言われても、何から初めてらいいかわからないですよね。

初めは、すでに完成されたデザインをマネする(模倣する)だけでOK。

ピンタレストなどから、自分の好きなデザインを探すのがおすすめです。

再現してみる

作りたいデザインが決まったら、早速Photoshopを使ってデザインを模倣していきましょう。

最初から完璧に作り込まなくて大丈夫。

初めは7割ぐらいを目標に制作していきましょう。

初めから完璧を目指してしまうと、いつまで経っても一つも完成しない事態に陥ってしまいます。操作でわからないことは、一つずつ調べながら進めていくと勉強になりますよ。

より良いデザインに改善してみる

ある程度デザインが完成したら、細部に注目してみてください。

この時点で、他人にみてもらうのもGOODです。客観的にみて、見本のデザインと何が違うのか?どこを改善するとよくなるのか?が見えてきます。

shio

何度も改善を繰り返すことで、どんどんスキルが身に付いていきますよ!

Webデザインを独学で勉強するメリット

  • 初期費用がかからない
  • 好きな時に勉強できる
  • 好きなことを好きな順で勉強できる

独学の場合、費用を抑えて自分の好きなタイミングで勉強できるのが最大の魅力。

スクールだと事前にカリキュラムが組まれていて、学びたいこと意外のことも勉強しないといけない場合もありますので、とにかく自由に勉強したい!という方に独学がおすすめです。

また、Webデザインに興味がある、スクールに通うか迷っているという方にもおすすめ。

書籍なら1,000円〜で購入できるので、まずは1冊買ってみてWebデザインについて知ることで、その後本格的に勉強を始めるかどうかの判断ができます。

Webデザインを独学で勉強するデメリット

  • わからない事を相談できる人がいない
  • 学習計画をきちんと立てないと挫折しがち
  • 基礎が不十分な可能性がある

Webデザインを独学するデメリットは、知識が偏りがちという点です。

基礎が十分でないと、挫折しやすくなってしまいます。

また、わからないことを相談できる人がいないので、解決方法をしレベルことに1日を費やしてしまうなど効率よく勉強するのが難しいというデメリットも。

おすすめは、1〜3ヶ月など期間を決めてスクールでサクッと学び、あとは独学するという方法。
スクールなら基礎をしっかり学べるのでその後の独学もしやすくなります。

自分には独学は向いてなさそう。と思ったらスクールに通うことも検討してみましょう。

あわせて読みたい

SHElikes(シーライクス)の評判は?口コミから料金まで徹底解説

続きを見る

Webデザイン初心者でも独学でWebデザイナーになれる

以下の3つのポイントを押さえれば、Webデザイン初心者から、独学でWebデザイナーを目指すことができます!

  • 目標を立てる
  • とにかくアウトプットをする
  • 案件を獲得する

Webデザイナーはパソコン1つあればどこでも仕事ができるので、働き方を変えたい、何かスキルを身につけたいと思っている方にとってもおすすめ。

この記事を参考に、ぜひ始めてみてくださいね。

  • この記事を書いた人

shio

20代後半|SHIO BLOG運営|夫の海外赴任のためカナダで駐妻生活中|転職・結婚・海外移住など人生の転機のたびにたくさん悩んだ経験をシェアしようと思いブログを立ち上げました。少しでもみなさんのお役に立てれば嬉しです。

-carrier
-