独学・未経験でwebデザイナーとして稼ぐための勉強方法

2020年12月3日2023年5月8日

URLをコピーしました！

「webデザイナーとして働いてみたい！」

未経験からでも始められる職種の一つとして人気のwebデザイナーとして働いてみたいという方も多いのではないでしょうか。

しかし、下記のようなことで悩んでいる方もいるかもしれません。

「未経験からwebデザイナーになって本当に稼げるのかな…」

「webデザイナーとして副業で働いてみたいけど何から始めればいいのだろう…」
本記事では、そんな方へ向けて未経験からwebデザイナーについての基礎知識や今後の需要、必要になるスキルと身につけるためにオススメの勉強方法について紹介してきます。

【この記事を読んで学べること】
・webデザイナーについての基礎知識や今後の需要について
・webデザイナーに必要なスキル
・webデザイナーになるためにオススメの勉強方法

webデザイナーとは

webデザイナーは、webサイトやwebサービスに関するレイアウトデザインやサイト構築を行なっていく仕事です。

webサイトやサービスを作るために必要不可欠な職種で、サイトのビジュアルをデザインする仕事なので、普段から目に触れているwebサイトはwebデザイナーがデザインしたものと言えるでしょう。

webデザイナーの仕事には具体的に下記のようなものがあります。

○画像の編集やバナーアイコンの作成などのデザイン制作
○webサイトやwebサービスの画面レイアウトのデザイン
○webサイトのコーディング作業

webデザイナーはデザインからサイト構築まで幅広く業務がありますが、未経験からでも副業として稼げる職種として人気があります。

そこで、次の項では副業で稼げるwebデザイナーの魅力について詳しく説明していきましょう。

副業で稼げるwebデザイナーの魅力

webデザイナーは副業でも稼げる職種の一つとして人気がありますが、理由として下記のようなものが挙げられます。

○未経験からでも始めやすい
○副業として案件を見つけやすく稼ぎやすい

webデザイナーの仕事は、エンジニアと同じように独学やプログラミングスクールでの学習がしやすい職種です。

また、副業としてもクラウドソーシングなどのサービスで豊富に案件を取り扱っているため、案件を見つけやすく稼ぎやすい点も人気の理由です。

クラウドソーシングサービスの例として、ランサーズの報酬相場をみてみましょう。

【ランサーズの報酬相場】
○ホームページ作成（新規作成・ページ改修） 50,000〜400,000円/1-10ページ
○webデザイン（webサイトデザイン） 150,000円〜200,000円/6ページ
○ランディングページ（LP）制作　　　50,000〜100,000円/1ページ
○CMS構築・Word Press制作・導入　　50,000〜200,000円〜10ページ
○バナー作成　　　　　　　　　　　　5,000〜40,000円/個 etc..

サイトデザインからLPやバナーの作成など、幅広く案件があり思っているよりも報酬が高いと感じたのではないでしょうか。

実際の案件ではLPのデザイン/コーディングで1ページ1万円〜2万円での案件ありますが、経験を積めば相場と同じくらいの案件を獲得することも可能でしょう。　

webデザイナー需要は今後どうなる？

webデザイナーとして仕事をしていく場合、今後の需要が気になる方もいると思います。

まずは、下記の「今後のIT人材の需要を表したグラフ」をご覧ください。

出典：『IT 人材需給に関する調査』　※2019年度調査　

IT 人材需給に関する主な試算結果②（生産性上昇率 0.7%、IT 需要の伸び「中位」）

webデザイナーに必要なスキル

webデザイナーの仕事には、デザインやレイアウトの制作、コーディングがあると説明しましたが、それらの業務をこなすために必要なスキルについて詳しく紹介していきます。

【webデザイナーに必要なスキル】

・Photoshop・Illustratorを使った編集スキル
・プログラミング言語の理解及び実装
・発展編：高みを目指すならUI／UXデザインの深い知見も

Photoshop・Illustratorを使った編集スキル

PhotoshopとIllustratorは、webデザイナーとして働く場合には身に付けておく必要のあるスキルの一つです。

○Photoshop：画像編集やサイトのレイアウトデザインを行う際に使用するツール
○Illustrator：イラストやロゴの作成を行う際に利用されるツール

PhotoshopとIllustratorは、画像編集やロゴ作成など、どのような仕事でも活用できるので覚えておいて損はないでしょう。

また、求められるスキル感については下記の通りです。

【求められるスキル感】

◇初心者：基礎知識・使い方・ショートカットキーなど一通りの知識がある
◇中級者：目的や要望に沿ってツールを用いて一通りデザインの作成ができる
◇上級者：実務においてクライアントのニーズに沿った幅広いデザインの制作が可能

上記は参考ではありますが。実務で問題なく使用できるかが重要なポイントになります。

そのため、まずは自身でソフトを使いながらツールを用いてデザインを一通り制作できるようにしましょう。

プログラミング言語の理解及び実装

これからwebデザイナーとして稼いでいきたい場合、プログラミング言語の理解及びコーディングなどの実装のスキルは必要不可欠のスキルと言えるでしょう。

デザインスキルだけでも案件獲得は可能ですが、クラウドソーシングではデザイン×コーディングでのLPやサイト制作の案件の割合が多く、報酬も高い傾向にあります。

では、webデザイナーとして身につけた方が良いコーディングスキルにはどのようなものがあるのでしょうか。

【webデザイナーとして身につけるべきスキル】

○HTML：WEB上に表示されている文章やWEBサイトの大枠などを制作が可能
○CSS：HTMLで記載したコードを装飾するために利用する言語
○JavaScript：ポップアップ画面の作成など動きのあるサイトの作成が可能
○jQuery：フェードイン/フェードアウトなどのアニメーションをつけることが可能
○Word Pressでのサイト制作：CMSツールの一つで簡単にwebサイトの作成が可能

複数身につけるべきスキルがあり、難易度が高く感じるかもしれませんが、プログラミングの基礎知識や簡単なコーディングは独学でも習得が可能です。

また、CMSツールはコーディングに比べて難易度も低く、クラウドソーシングサービスでもWord Pressでのサイト制作案件も多いため、優先的に取得しておくとより早く案件を獲得することにつながります。

発展編：高みを目指すならUI／UXデザインの深い知見も

webデザイナーの中でも特に注目されているのが、UI / UXの知見です。

UI（User Interface）とUX（User Experience）はそれぞれ関連性のある言葉ですが、下記のような違いがあります。

○UI：ユーザーがWEBサイトを利用するときに見やすさ・使いやすさのこと
○UX：WEBサイトを利用した際の、UI設計などを通して感じるユーザー体験のこと

UI / UXの知見を深めていくことで、ユーザーの使いやすさや傾向を考慮したデザイン制作ができるようになります。

その結果、PV数の増減や顧客満足度の向上など、クライアントが抱える課題にアプローチができるようになるため市場価値を高めることにもつながるでしょう。

【UI / UXの知見例】

○案件相場のQ&Aを見ている人が多いので、登録時の案内で表示されるようにしよう
○ヒートマップの傾向からボタン配置を変更して操作性を高めよう

UI / UXデザインは、webサイト制作だけではなくユーザー動向の分析やシステム構築のための導線の把握など、幅広い知識が必要になるため難易度は高く見えます。

しかし、『ユーザーの見やすさ・使いやすさ』を意識するだけでもデザインの質は上がるので、まずは意識をするところから始めてみるとよいでしょう。

webデザインの習得を加速するの効率的な勉強方法5ステップ

ここまで、webデザイナーの基本情報や必要になるスキルについて説明していきました。

その中で、「どうやって勉強をすればいいのだろう？」と感じた方もいるのではないでしょうか。

そこで本項では、webデザイナーとして必要なスキルを習得するための効率的な勉強方法について紹介していきます。

【webデザインの勉強方法5ステップ】

・ステップ1:UIツールでサイトデザイン模写
・ステップ2:コーディング勉強
・ステップ3:サイト模写
・ステップ4:デザインカンプから自分でコーデイング
・ステップ5:サイトアップしてみる

ステップ1:UIツールでサイトデザイン模写

はじめに、デザインを行う感覚を掴むためにAdobeXDなどのUIツールを用いてサイトのデザインを模写してみるのが良いでしょう。

AdobeXDは、PhotoshopやIllustratorと同じようにサイトデザインを行う際に用いられるツールの一つで、UI / UXのデザイン制作に特化したツールです。

また、AdobeXDは基本利用は無料で利用できるため、操作性や実際にどのような形でデザインが作成できるのか勉強していくには最適のツールになります。

そして、複数のサイトデザインの模写することで下記のようなことを把握できます。

○どのような意図でデザインが作成されているのか
○実際にデザインを作成するためにどれだけ工数が必要なのか
○よく利用されているフォントやデザインなどの流行りがわかる

デザイナーは知識ではなく、実際に手を動かして感覚を掴む方がスキル習得には効率的なので、基礎知識の勉強と合わせてデザインの模写を行うのがオススメです。

ステップ2:コーディング勉強

次に、コーディングの基本概念と簡単な知識を勉強していきます。

コーディングを勉強する場合には、動画で勉強したい場合は「ドットインストール」、実際にコードを書きながら勉強したい場合は「Progate」を利用すると良いでしょう。

また、はじめから本で勉強する方法もありますが、効率よく習得するためにはProgateなどで実際に手を動かしながら学習を進めていき、その後に本を利用するのがオススメです。

Progateでは実際に書いたコードがどのように反映されているかがわかりやすいため、初めてでも勉強がしやすくなっています。

そして、本ではコーディングに必要なタグなどが幅広く掲載されていることが多いので、Progateで基礎概念を理解して、本で知識を補完していく形が良いでしょう。

現役エンジニアが教えるプログラミング初心者がWeb制作を学ぶ時に読むべき本

ステップ3:サイト模写

コーディングの勉強ができたら、次にサイトの模写を行っていきます。

サイトを模写することでの利点は下記の通りです。

○実際に運用されているサイトのコードが確認ができる
○効率的なコードの書き方や枠組みの理解がしやすい
○デザインをコーディングでどのように反映させているのかの理解がしやすい

はじめてサイトを作成する際には、既存のサイトを模写することで、答え合わせができ、デザインや枠組みや意図が理解しやすくなります。

また、既存のサイトの模写が完成した後に、そのコードを参考にして自身のオリジナルのサイトを作成すれば、ポートフォリオとしても利用できるためオススメです。

【サイト模写の流れ】

1.模写するwebサイトを選定　※デザイン模写したサイトを推奨
2.検証ツールを使わずに、一通り模写をしてみる
3.検証ツールで自身のコードと模写サイトのコードを比較
4.異なる点をピックアップして一つ一つ修正を行う

※初めはLPなどのシングルページの模写から始めてみるのがオススメ

【検証ツールの起動方法】

○Windows	Ctrl+Shift+I
○Mac	Command + Option + I

【サイト模写におすすめのエディター】

○Visual Studio Code	自動補完機能があり効率よくコーディングが可能
○Atom	シンプルで使いやすく、初心者にはオススメのツール

ステップ4:デザインカンプから自分でコーデイング

webサイトの模写が完了したら、次にオリジナルのデザインカンプ（サイト全体のデザイン）からコーディングまでやってみましょう。

ここでは、自身のポートフォリオサイトを作成すると、案件探しに役立つので効率的です。

オリジナルのポートフォリオサイトを作成する際には下記のポイントを意識しましょう。

【オリジナルポートフォリオ作成のポイント】

○他者のポートフォリオサイトやお仕事依頼ページを参考にデザインを検討
○難しい機能は入れずにシンプルデザインがオススメ
○デザイン・サイト制作の所要時間や作成で意識したポイントを記載すると良い

デザイナーのスキルはポートフォリオで判断されると言っても過言ではないため、ポートフォリオは最大限クライアントの視点に立って作成し、必要な情報を掲載すると良いでしょう。

合わせて読みたい
【フロントエンドエンジニアを目指す人必読】ポートフォリオの必要性と準備のコツ

ステップ5:サイトアップしてみる

最後に作成したサイトをアップしてみましょう。

サイトのアップのためには下記の手順が必要になります。

サイトアップまでの手順

ドメインの取得
レンタルサーバーの契約
サーバーへのアップロード/サイトアップ

サイトアップのためには、「ドメイン取得」と「レンタールサーバーの契約」は必要不可欠なため優先的に対応しておきましょう。

【ドメイン取得】
○お名前.com：ドメイン取得サービスの最大手　豊富にドメインを取り扱っている
○ムームードメイン：ロリポップとの親和性が高いドメイン取得サービス

【レンタルサーバー契約】
○エックスサーバー：日本最大級のレンタルサーバー　機能性・性能に優れている
○ロリポップ：安さコスパ重視のブログ運営者向け　個人利用の場合にはオススメ

また、「ドメイン取得」と「レンタールサーバーの契約」が完了したら、レンタルサーバーに自身が書いたコードのデータを転送します。

【データを送信する方法】
○サーバーのFTP機能（ファイル転送を行うための機能）を利用する
○「FileZilla」のようなFTPソフトを利用してやアップロード

以上の方法で、ドメインとwebサイトのデータを連携させることでインターネット上へwebサイトの公開が可能です。

まとめ

以上、未経験からwebデザイナーについての基礎知識や今後の需要、必要になるスキルと身につけるためにオススメの勉強方法について紹介しました。

しかし、本記事を読んでいく中で、下記のようなことを感じた人もいるのではないでしょうか。

「webデザインやコーディングの勉強を続けられる自信がない…」

「もっと効率的にwebデザイナーの学習をする方法はないかな？」

そんな方には、プログラミングスクールを活用するのがオススメです。