ITスキル
約12分で読めます!
公開日

【2ヶ月でフリーランス独立】Webデザイナー独学ロードマップ

2ヶ月でフリーランス独立Webデザイナー独学ロードマップ

Webデザインに興味はあるけれど、「自分にはデザインのセンスがない」と思って一歩踏み出せずにいませんか?

Webデザインはロジックで行うものでセンスは不要です。

僕自身が独学でWebデザインについて勉強をして、独立をした経験の中でたくさん失敗や遠回りをしました。

これからWebデザインを学ぶ皆さんには、僕のように失敗や遠回りをせずに最短でWebデザインを学んで欲しいと考えてこのロードマップを作成しました。

この記事ではWebデザインに興味があるけれど、学び方がわからないという方に向けて、1日3時間2ヶ月でフリーランス独立可能なレベルまでのスキル習得方法を解説しています。

この記事でわかること
  • webデザインに興味がある
  • webフリーランスとして独立したい
  • 一人でも生活のできるスキルを身につけたい

このロードマップ通りに勉強を進めることで、独学でWebデザインの案件が受けれるレベルまで到達できます。

Webデザイナーとは?

Webデザイナーとは、クライアントの要望や課題解決をWebサイトで達成するためのデザインを行います。

Webデザイナーの仕事内容

Webデザイナーの仕事内容は、クライアントの要望や課題を聞いた上でワイヤーフレームというWebサイトの骨組みを作り、それを元に打ち合わせを重ね、クライアントの目的を達成するデザインにブラッシュアップしていきます。

ワイヤーフレームによってデザインが固まったらデザインカンプ(デザインの完成見本)を制作してコーダーに渡すところまでがWebデザイナーの仕事です。

ポイント ワイヤーフレームとは、テキストや画像をどのように配置するかのレイアウトを決めた簡易的な設計図になります。 クライアントとデザイナー間の認識のズレを埋めるために非常に役に立ちます。

Webデザイナーとコーダー

広義ではデザインからコーディングまで行う職業をWebデザイナーと呼ぶ場合がありますが、この記事ではWebデザイナーとコーダーは分けております。

僕はフリーランスになってWebデザインとコーデイング両方の仕事をしたよ!

コーダーとは?

コーダーとは、Webデザイナーのデザインをもとにインターネット上で見れるようにHTMLやCSSといった言語を使い構築する仕事です。

Webサイト制作の流れ

Webサイト制作には、Webデザイナーの他にもWebディレクター、コーダー、サーバーサイドエンジニア等の様々な人が関わることがあります。

    一般的なWebサイト制作の流れ

  1. ヒアリング
  2. 調査/分析
  3. Webサイト運用戦略立案
  4. ワイヤーフレーム作成
  5. デザインカンプ作成
  6. コーディング
  7. サーバーにアップロードして実装
  8. 運用開始

Webデザイナーの働き方

Webデザインはサービスや商品のPRやブランディングと様々なシーンで必要とされています。

フリーランス

フリーランスWebデザイナーの働き方は主にクラウドソーシングを利用してインターネット上で働く方法や制作会社とパートナーになり仕事をする方法があります。

リモートでの仕事も多く、比較的に場所や時間に縛られずに働くことができます。

企業に所属

企業の中で自社のサービスや商品に関するWebデザインを行う働き方や、制作会社に所属して様々な案件を行う働き方があります。

あわせて読みたい

【Webデザイナー】収入・需要・相場は?現実や将来性を徹底調査
【Webデザイナー】収入・需要・相場は?現実や将来性を徹底調査

Webデザイナーに必要な知識とスキル

勉強を始める前に、Webデザインを行う際に必要な知識とスキルを知っておきましょう。

Webデザイナーに必要な知識

先ほども述べたようにWebデザインはセンスではなくロジックです。

正しい知識を身につけることは、これからのWebデザインの学習においての土台となります。

デザインについての知識

デザインの4原則や配色、構図についての知識を幅広く持つことは、Webデザイナーとしての引き出しを広げることになります。

引き出しが多いWebデザイナーは、様々なクライアントの要望に応えることができるため重宝されます。

Webサイトについての知識

Webサイトについての知識はWebデザイナーにとっては必須です。

「ヘッダーやフッターのメニューはなぜ必要なのか?」「スマートフォンとパソコンでどのようなデザインの変更が必要なのか?」などWebサイトを作る上でなくてはならないものです。

トレンドの知識

最新のトレンドをWebサイトに取り入れることで、サイト自体の質の向上、ユーザー体験の向上、競合との差別化がはかれる等の様々なメリットがあります。

常に最新のトレンドを取り入れられるようにアンテナを張ろう!

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

スキルは頭の中にある知識を活用するために磨く必要があります。

以下の3つはWebデザイナーにとって特に必要なスキルです。

情報を整理するスキル

Webサイトはユーザーに正確に情報を伝えて感情を動かし行動してもらうためにあります。

整理された情報はターゲットユーザーが内容を正確に理解できるため、Webデザインにおいては重要なスキルになります。

コミュニケーション能力

Webデザインの現場では、クライアントからのヒアリングや打ち合わせや、コーダーにデザインの意図を説明するなどプロジェクトを円滑に進めるためにコミュニケーションの能力が問われる場面があります。

デザインに必要なソフトを扱うスキル

Webデザインはデザインカンプを作成する際など、デザインソフトを使います。

ソフトは有料のものから無料のものまであり、クライアントによってはソフトを指定される場合もあります。

僕はAdobeのIllustrator/Photoshop/XDをよく使うよ!

    デザインの現場でよく使用されるソフト

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe XD
  • Canva
  • Figma

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

このWebデザイナー学習ロードマップは「1日3時間2ヶ月でWebデザイナーとして仕事を受注できる」をコンセプトに構成されています。

目標

学習開始から2ヶ月後にWebデザイナーとして仕事を受注できるレベルになる。

ゴール

Webデザイン案件初受注で収入を得る。

    学習に必要な道具

  • パソコン
  • デザインソフト

無料でデザインソフトを利用したいならFigmaがおすすめ!

学習前に用意するもの

以下は学習の手助けと今後Webデザイナーとして仕事を受けるのに必要になります。

発信用のSNSアカウント

学習の段階から発信していくことをおすすめします。

アウトプットをすることでより理解を深めると同時に知識の定着にも役に立ちます。

また、仕事を獲得する上でもSNSは有利に働くためWebデザイン用にアカウントを用意してください。

ポートフォリオ

ポートフォリオはあなたのスキルや仕事の実績をクライアントにアピールすることができます。

ポートフォリオにはデザイン力やアプローチ方法、制作能力、コミュニケーションスキルなどが判断できるため、採用選考の際にも重要な役割を果たします。

ポートフォリオとは?

デザインの現場におけるポートフォリオとは、自分の作品集のことを表します。

ポートフォリオサービス

ポートフォリオの公開は既存のサービスを使い簡単に行えます。

あわせて読みたい

【フリーランスのポートフォリオ作成入門】重要ポイントと成功の秘訣
【フリーランスのポートフォリオ作成入門】重要ポイントと成功の秘訣

Webデザイン学習の心得

Webデザインを学習するにあたってポイントが3つあります。

1つ目のポイントは、継続して学習をするということ。

学習初期の頃は、継続して繰り返し行うことで知識やスキルが擦り込まれていきます。

1回の学習時間を長く取るよりも、毎日必ず継続する方が身につくスピードは早いです。

2つ目のポイントはデザイン制作する際には必ず時間を測るということ。

Webデザインを仕事にすることが目標であれば、時間を意識することは非常に重要です。

学習段階から時間を意識して制作することで、作業ボリュームに対してかかる時間を知れるので、Webデザイナーになった際の見積もりやスケジューリングに役立ちます。

また、作業時間を測ることで自身の成長も知ることができます。

3つ目のポイントは、1つのデザインに時間をかけすぎないということ。

完璧を目指すことは非常に大切ですが、Webデザインは完璧を求めてしまうと終わりはありません。

特に学習段階において、デザイン数をこなすことの方が、1つのデザインに時間をかけるよりも上達します。

そのためデザイン制作段階に入ったら、時間を設定して時間で次に進むようにしましょう。

ステップ0:SNSで発信開始

今後SNS経由で仕事の受注をしたいのであればSNSで学習の過程を発信して下さい。

学習途中でもSNS経由で仕事の依頼が来ることもあります。

フリーランスWebデザイナーとして働きたい人はマスト!

    学習段階からSNS発信するメリット

  • 学んだ知識が定着する
  • Webデザイナーとしてのポジションが取れる
  • SNS経由で依頼を受けることができる
  • Webデザイナーの仲間ができる

ステップ1:デザインの基礎知識学習(~10日)

まずはトレンドに左右されないデザインの基礎知識を勉強しましょう。

この基礎知識を習得することで初心者でも魅力的なデザインを作成できるようになります。

デザインの4原則

「情報をわかりやすく整理して伝える」のがデザインの役割です。

情報をわかりやすく伝えるためのルールとしてデザインの4原則があります。

  • 近接
  • 整列
  • 強弱
  • 反復

色の三属性

色の三属性とは、色が持つ3つの性質のことで「色相」「明度」「彩度」で表されます。

色相

色の違い(赤、黄、青、紫 …)

明度

明るさの度合い

彩度

色味の強さの度合い

フォントの知識

ユーザーが受ける印象はフォントによって大きく左右されます。

そのためWebデザインでは伝えたい内容や相手によって最適なフォントを選択する必要があります。

ステップ2:デザインに必要なソフトについて学ぶ(11日)

デザインの基本学習が終わったら、実際にデザインソフトを使用して操作方法の学習をしましょう。

デザインソフトを選ぶ

まずは使用するデザインソフトを選択しなければなりません。

ソフトによって金額や特徴が変わってきます。

Adobe Illustrator

テキストや画像、線や図形を組み合わせたレイアウトの作成を行えるソフトです。

Adobe Photoshop

写真や画像の加工・色の調整、などが行えるソフトです。

Adobe XD

Webサイトのワイヤーフレーム、デザインカンプ、プロトタイプを作成できるソフトです。

Adobe CC(Adobe Creative Cloud)というサブスクリプションサービスを利用すれば、上の3つのAdobe製品は全て利用できるよ!

Canva

無料で始めることができるオンラインで使えるグラフィックデザインツールです。

Figma

無料で始めることができるオンラインで使えるデザインツールです。

上記2つは無料で始めることができるけど、納品や他のデザイナーとのやり取りを考えると、有料でもみんなが使っているAdobe製品を使うのがおすすめ!

ステップ3:バナーのデザインをする(11日~20日)

デザインソフトを一通り操作してみたら、次はそれらを使って実際にバナーと呼ばれる広告や宣伝のための1枚の画像デザインを作成して練習しましょう。

バナー模写

実際にあるバナーを真似してまるっきり同じものを作ります。

こちらのサイトより様々な種類のバナーを見本に最低5枚は模写しましょう。

ポイント バナーを模写する際は「デザインの基礎知識」で学習したことを意識して見本を観察しましょう。「余白」「色」「フォント」等細かい場所まで完璧に真似して作りましょう。

模写したバナーは他人のデザインしたものを練習として使用させてもらうため、SNS等で公開しないようにしましょう。

ここからの作業は全て1つのデザインにかかった時間を測るようにしよう!

バナーデザイン

バナー模写でデザインソフトの操作に慣れてきたら、実際にある依頼からバナーのデザインを最低5枚はしましょう。

ここでは腕試しにクラウドワークスランサーズといったクラウドソーシングで募集されているバナーデザインのコンペに実際に応募しても良いです。

デザインをYouTubeやUdemy(有料)等の動画で学習する方法もあります!

ステップ4:Webサイトについて学ぶ(21日~30日)

ここでは一度、作業から離れてWebサイトの知識について学びましょう。

Webサイトの種類と目的

大前提としてWebサイトは何かの目的を達成するためのツールであるということを理解しておきましょう。

その目的を達成するために以下のように様々な種類のサイトが存在しています。

  • コーポレートサイト
  • ブランディングサイト
  • ランディングページ(LP)
  • ECサイト
  • サービスサイト
  • 採用サイト
  • オウンドメディア
コーポレートサイト

コーポレートサイトは会社の顔となるサイトで、自社の取り組みやサービス、商品についてを総合的に知ってもらう目的のサイトです。

ブランディングサイト

ブランディングサイトはサービスや商品の認知や体験を通して、ユーザーのファン化を目的としたサイトです。

ランディングページ(LP)

ランディングページは訪れたユーザーに対してサービスや商品の購入といった何かしらの行動をしてもらうことを目的としたサイトです。

ECサイト

ECサイトは実店舗だけではなく、オンライン上でサービスや商品を購入してもらうことを目的としたサイトです。

サービスサイト

サービスサイトは特定のサービスや商品への理解を高め購入に繋げることを目的としたサイトです。

採用サイト

採用サイトは企業が求職者に自社の存在やイメージを認知してもらい、良い人材の採用を目的としたサイトです。

オウンドメディア

オウンドメディアは自社のサービスや商品の認知度を高め、ユーザーをファンへと教育することを目的にした自社で運営をするサイト(メディア)です。

それぞれの種類のサイトデザインをたくさん見て、誰に向けてなぜそのデザインにしているのかを考えてみよう!

ステップ5:Webサイトのデザインをする(31日~60日)

ここからは実際に手を動かしてWebサイトのデザインをしていきます。

デザインをする際は、トップページだけではなく下層ページまでしっかりと行いましょう。

Webサイト模写①コーポレートサイト

デザインソフトを使用しコーポレートサイトの模写を行います。

Webサイト模写②ランディングページ(LP)

デザインソフトを使用しランディングページの模写を行います。

Webサイト模写③オウンドメディア

デザインソフトを使用しオウンドメディアの模写を行います。

実際の依頼をもとにWebサイトのデザインする

クラウドワークスランサーズ等で依頼されている情報を元に実際にサイトをデザインしてみましょう。

最低でも5つはデザインを行って自分のポートフォリオに加えましょう。

「誰に向けて何をどのように伝えるか?」を徹底的に考え目的を達成するためのコンテンツとデザインを選択しましょう。

必要コンテンツの洗い出し

目的を達成するために必要になるコンテンツの洗い出しをします。

    例)

  • サービスや商品の特徴
  • 会社案内
  • 企業理念
  • 採用情報
  • お問い合わせ
  • 最新情報
ワイヤーフレーム

必要な情報がまとまったら、その情報をどこにどのように配置するかを決定します。

デザインカンプ

ワイヤーフレームができたら、それをもとにデザインカンプ(デザインの完成見本)を作成します。

フリーランス独立後の仕事について

ロードマップの学習が終わ、り実際にフリーランスとして活躍するためにおすすめな仕事の受け方を紹介します。

フリーランスWebデザイナーの仕事の受け方

    主な受注方法を紹介

  • マッチングサービス
  • クラウドソーシング
  • SNS
  • 自身での営業

マッチングサービス

企業とフリーランスをマッチングするサービスです。

クラウドソーシング

オンライン上で仕事を受注できるサービスです。

あわせて読みたい

【徹底比較】初心者におすすめクラウドソーシング人気ランキング7選
【徹底比較】初心者におすすめクラウドソーシング人気ランキング7選

SNS

TwitterやInstagramを利用して自身の実績を公開して受注に繋げましょう。

自身での営業

自身で制作会社やエンドユーザーに営業をかけて仕事を受注する方法です。

商工会議所に入会してクライアントを紹介してもらう方法もあります。

フリーランス独立直後のおすすめの仕事の受け方

フリーランスが仕事を受ける際に重要視されるのは実績です。

フリーランス独立直後は実績がないため、とにかく実績をストックすることが最重要課題になります。

    おすすめの仕事の受け方の流れ

  1. クラウドソーシングで仕事を受注(安価でも受注優先)
  2. 作品はポートフォリオとSNSで発信←見ている人から受注が入る可能性がある
  3. 制作会社に営業をかけパートナーとして仕事を受注

Webデザイナーの収入について

Webデザイナーの収入は、自身の実績やクライアントの予算、サイトの規模によっても大きく変わります。

収入アップの方法

Webデザイナーが収入をアップさせるには、「受注単価を上げる」「受注件数を増やす」と2つの方法しかありません。

基本的には、実績を重ね自分の得意を伸ばし「受注単価を上げる」ことに注力すると良いでしょう。

    単価アップの方法

  • 実績を増やす
  • 技術を伸ばす
  • 一次請けの仕事をする

安定のさせ方

仕事を安定させるためにはチームを組み仕組み化を行うこと必要です。

Webデザイナーにおすすめのサービスや機能

Webデザイナーが仕事を行う際に使えるおすすめのサービスや機能を紹介します。

デザイン参考サイト

最新のトレンドデザインの勉強やWebデザインを行う際に参考にできるデザインを集めたサイトです。

画像サイト

デザインを行う際に使用する画像をダウンロードできるサービスのサイトになります。

無料のサイトと有料なサイトがあるためご注意下さい。

注意点 無料のサイトでダウンロードする画像は、他のサイト等で利用されている可能性が高まる他、有料のものに比べてクオリティが劣るものが多いため注意が必要です。

イラストサイト

イラストがダウンロードできるサイトになります。

アイコンサイト

Webデザインで使用するアイコンのサイトになります。

Font Awesomeはwebデザイナーやコーダーであれば誰もが一度は利用するほどメジャーなサイトになります。

Google Chromeのおすすめ拡張機能

Google Chromeに用意されている拡張機能を利用して効率的にWebデザインの作業や学習を行いましょう。

ColorPick Eyedropper

ColorPick Eyedropperは閲覧しているWebサイトで使用されているカラーコードを調べることができるツールです。

What Font

What Fontは閲覧しているWebサイトで使用されているフォントの種類やサイズを調べることができるツールです。

Go Full Page

Go Full Pageは閲覧しているWebサイトのスクリーンショットを上から下まで簡単に撮ることのできるツールです。

まとめ

2ヶ月でWebデザイナーになることは可能です。

Webデザイナーはセンスではなく知識と経験で上達していきます。

初案件を受注してからが本当のWebデザイナーとしての学習の始まりです。

デザインに対する意見は全て真摯に受け止めて次に活かしていけるようにしましょう。

あわせて読みたい

【フリーランスの始め方】未経験から月収20万円稼ぐオススメの方法
【フリーランスの始め方】未経験から月収20万円稼ぐオススメの方法

RELATED ARTICLE関連記事