2021.10.31
この記事を書いた人
PENGIN LLC.
こんにちは！
PENGINを運営しているケインです😊
Webデザイナーに興味を持った方から「独学で完全未経験からWebデザイナーになれますか？」と質問をいただくことがけっこうあります。
結論からいえば、完全未経験から独学でWebデザイナーになることは可能です。
この記事では、完全未経験から3ヶ月程度の独学でWebデザイナーに転職するための全手順を解説していきます。
僕は、PENGINの運営を通してWebデザイナーを未経験から目指す方に学習方法のアドバイスや転職活動のアドバイスをしてきました。
今では、PENGINを通してたくさんの方がWebデザイナーになったり、実際に案件を獲得したりなど、嬉しいニュースを聞く機会も増えてきました。
この記事で紹介する手順は、これまで未経験から独学でWebデザイナーを目指す方へのアドバイスを分解し、最も効率のいい手順に再構築したものです。
ぜひ参考にしてください★
独学で未経験からWebデザイナーとして転職するための全手順
Webデザイナーになる全行程
まず、Webデザイナーになるための工程にかかる日数をざっくりと知っておきましょう。
- 学習時間 30日
- ポートフォリオ作成 30日〜60日間（掲載する作品の制作含む）
- 転職活動 20日〜60日間
上記はいずれも、仕事を辞めて1日8〜10時間取れる場合を想定しています。
お仕事をされていたり、育児をされている方は適宜ご自身に合うように時間配分をしていただければと思います💨
学習時間は、Webデザイナーになるために必要なスキルを身につける期間です。もともとのITリテラシやAdobeツールを触ったことがあるかどうかや、理解の速さによって個人差は大きい部分だと思いますが、集中して学習すれば1〜2ヶ月程度で最低限必要な知識は身につけることができるはずです。
Webデザイナーの転職活動にはポートフォリオという作品集が必要です。
こちらは4〜6個程度作品を掲載するとして、1〜2ヶ月程度で作成すると良いでしょう。
転職活動も集中してやれば1ヶ月足らずで終わりますが、難航した場合はポートフォリオをテコ入れしたり、自己PRを考え直したりしながら進める必要があります。
この記事では以下の構成で完全未経験から独学でWebデザイナーになるための方法を解説していきます。
- ①転職に必要なスキル・知識・ポートフォリオ
- ②スキルをつけるための学習手順
- ③知識をつけるための習慣
- ④ポートフォリオの作成方法
- ⑤転職活動の進め方
※会社や求人によって求められるスキルは異なります。ここで紹介する手順はあくまでも一例なので目安程度にしてください😊
転職に必要なのはスキル・知識・ポートフォリオ
Webデザイナーになるために必要なのは、スキル・知識・ポートフォリオの3点です。それぞれに何が必要なのかを一覧にまとめました。
転職を成功させるには、これらを身につけたり、準備したりする必要があります。
- スキル
- HTML/CSS/jQueryを使用したコーディングスキル
- Illustrator/Photoshopなどを使用したWebデザインスキル
- 知識
- デザインの基本的な知識
- デザインのトレンドに対するキャッチアップ
- Web業界の知識
- ポートフォリオ
- 作品
- 自己PR
スキルをつけるための学習手順
それではスキルを付けるための学習方法について紹介していきます。
以下のような時間配分で、転職のために必要なスキルはひと通り身につけることができるでしょう。
【学習計画のモデル】
- コーディング 合計90時間
- ①Progate HTML/CSS 10時間
- ②Progate JS/jQuery 10時間
- ③はじめてのコーディング 20時間
- ④jQuery 10時間
- ⑤#クリスタチャレンジ コーディング初級編 20時間
- ⑥#クリスタチャレンジ コーディング中級編 20時間
- デザイン 合計90時間
- ①デザインの基礎知識を学ぶ 10時間
- ②ツールの操作方法を学ぶ 20時間
- ③デザインのトレースをする 30時間
- ④0からデザインする 30時間
※Progate：HTML/CSSは道場編以外・JavaScriptはⅠのみ、jQueryはすべてやる想定の時間を算出しています。
※#クリスタチャレンジの上級編は余裕があれば取り組んでみてください。
コーディングの学習方法
コーディング学習は以下の手順で取り組んでいきましょう！
- ①はじめてのコーディング
- ②jQueryをサクッと理解するための4ステップ
- ③クリスタチャレンジ初級編〜中級編（上級編はやらなくてもOK）
- ※Progateを補助教材として使用
はじめてのコーディング
「はじめてのコーディング」は、はじめてHTML/CSSを学ぶ方のために4回に分けて大切な基礎を解説している連載です。
HTML/CSSの基礎をぎゅぎゅっと詰め込み、かんたんなWebサイトを1ページ作成します。
はじめてのコーディング① 〜事前準備編〜
しっかりと理解するために2回やりましょう。復習時間含め20時間程度の想定です。
jQueryをサクッと理解するための4ステップ
「jQueryがわからない・難しい」という声が多かったので、これだけ覚えてほしい基本のキを解説した連載です。全4回でJavaScriptの概要の解説・JavaScriptの基本文法・jQueryの書き方・ハンバーガーメニューの実装方法を解説しています。
【事例で学ぶ】JavaScriptとは何か？
#クリスタチャレンジ初級編・中級編
クリ★スタでは、コーディング練習用のデザインカンプを無料で配布しています。もちろん解説記事付きです。
まずは初級編、中級編をまるまる写経して、コーディングに慣れていきましょう。ある程度理解が深まってきたら、自力ですべてコーディングできるまで理解してください。
おすすめは以下の3セットを行うことです。
- 1セット目：理解しようとすらしない。ひたすら写経のように手を動かす。
- 2セット目：わからない点について、何がどうわからないか言語化してメモしておく
- 3セット目：わからない点のみ復習する
【コーディング課題】XDからコーディングをしよう【初級編】
【コーディング課題】XDからコーディングをしよう【中級編】
上級編もありますが、初級編・中級編をしっかりと理解できていればレベル的には問題ないです。より高度なテクニックを学びたい方・余裕がある方は上級編にもチャレンジしてみてください★
【コーディング課題】XDからコーディングをしよう【上級編】
いきなりエディタを使用して学習するのはハードルが高いと感じる方や、「はじめてのコーディング」の難易度が高いと感じる方は補助教材としてProgateやドットインストールを併用することをおすすめします。
デザインの学習方法
デザインの学習は以下の手順で取り組んでいきましょう！
- ①デザインの知識を身につける
- ②ツールの操作方法を学ぶ
- ③デザインのトレースをする
- ④0からデザインしてみる
デザインの知識を身につける
デザインには基本的な原則やルールがあります。まずはそれを理解しましょう。
Webデザインを構成する要素は、レイアウト・色・文字・画像の4つです。（本当は、あしらいや動きなどもありますが一旦無視でOKです）
まずはその4つについての知識を得ましょう。
以下の記事でそれぞれについて解説しています。
レイアウトの基礎知識
デザインにおいて重要なデザインの4原則とは
Webデザイン初学者が知っておくべき余白の取り方
配色の基礎知識
デザイナーが知っておくべき配色の基礎知識
タイポグラフィ（文字）の基礎知識
【デザインの重要事項】タイポグラフィの基礎知識
写真・画像の扱い
【デザインの重要事項】デザインにおける写真の活用方法
ツールの操作方法を学ぶ
Webデザイナーがデザインツールとして使用するのは、Adobe社が提供しているPhotoshopとIllstratorがメインです。
現在はXDやFigmaなどのUIデザインツールが浸透してきましたが、とりあえずは上記2つをしっかり使用できるようになりましょう。
Adobeのツールは公式のチュートリアルが充実しています。公式のチュートリアルをひと通りやれば基本的な操作方法はバッチリです！
Photoshopのチュートリアルは「デザイン編：基礎」をひと通りやればOKです。
Photoshopチュートリアル | Photoshopの使い方Illustratorのチュートリアルは「Illustratorの基礎」をやればOKです。また、ペンツールで描くベジェ曲線をマスターするを併せてやっておくと完璧です。
ベジェ曲線は理解が難しいので、すぐにマスターする必要はありませんが、使用できるようになると表現の幅が広がります。
デザインのトレースをする
ツール操作に慣れてきたら、デザインのトレースをしましょう。
トレースとは、世の中にあるデザインをそっくり模倣することです。画家でいう模写ですね。
デザインを学ぶ上でもっともメジャーな独学方法といってもいいかもしれません。
ツイッターでバナートレースでハッシュタグ検索すると、たくさんの人がトレースを学習に取り入れていることがわかります。
トレースのやり方については以下の記事で解説しています。
デザイン初学者必見！効果的なトレースの方法（実践問題あり！）
トレースする際は「なぜそのデザインなのか？」を考えることが大切です。手を動かすだけではなく、以下のことを考えながら行うと良いでしょう。
- ・ターゲットはどんな人？
- ・その人に何をしてほしいのか？
- ・なぜその配色なのか？
- ・なぜそのフォントなのか？
- ・なぜそのレイアウトなのか？
- ・どんな写真を使用しているか？
- ・どんな風に写真をレタッチしているか？
0からデザインしてみる
それでは実際に0から自分でデザインしていきましょう。クリ★スタで以下の課題を無料配布しています。
美容室サイトの作成課題
美容室は身近な業種で誰にも馴染みがある題材です。かつ、情報設計がシンプルなので、初学者でも取り組みやすいです。
なにより、おしゃれな感じに仕上げる必要があるため、デザインしていて楽しいですね。
【ポートフォリオ掲載OK！】実践的なWeb制作課題を配布します
ただし、制作会社などではほとんどない案件なので、あくまでもWeb制作の流れに慣れる意図で取り組みましょう。
コーポレートサイトリニューアル課題
コーポレートサイトのリニューアルは案件としては多いです。制作会社でもメインで受けている企業はあるでしょう。
遊びが少ない堅実な印象のデザインができると転職しやすくなりますので、ぜひチャレンジしてみてください。
Webデザイン独学課題〜コーポレートサイトリニューアル〜
知識をつけるための習慣
Webデザイナーとして活躍するためには幅広い知識が必要です。
幅広い知識を付けるためには、情報収集の習慣を付ける必要があります。
ここでは知識を付けるためにおすすめの習慣を紹介します。
本を読む
知識を付けるための方法として最もメジャーな方法が本を読むことではないでしょうか。クリ★スタではおすすめの本の紹介や、本を用いた効果的な学習方法についても紹介しています。
【2020年最新版！】Webデザインの独学におすすめの本20選！
根拠のあるデザインをつくるための学習法
メディアサイトを読む
毎日のインプット習慣して、良質なメディアサイトに日々目を通すこともおすすめです。ただし、Webメディアの情報はすべてを鵜呑みにするのはよくないので、僕が完全に信頼しているメディアサイトを厳選し、さらに、おすすめの連載まで絞って紹介します！
LIGブログ
言わずと知れた、東京上野にあるWeb制作会社LIGが運営しているブログです。
いろいろな情報にあふれていますが、初学者の方には「WEBデザインをはじめよう」の連載がおすすめ！
Goodpatch Blog
有名なデザイン会社であるGoodpatchのブログです。
UXデザインに強い企業で、UXについてのナレッジが半端じゃないです。下手な書籍を買うくらいならGoodpatch Blogを読み漁った方が体系的な知識がつきます。初学者でも理解できるような説明のしかたで、内容も理解しやすい点が非常にありがたいですね。
以下の記事＋記事内にリンクがある関連記事をすべて読むと、UXデザインの全体像が見えてくるはず！
UXデザインにおける5段階モデルとは？｜Blog｜Goodpatch グッドパッチFreshtrax
サンフランシスコと東京に拠点があるデザイン会社Btraxのブログです。
更新頻度は高くないですが、めちゃくちゃありがたい記事がたくさんあります。
経営視点が学べる情報が多いのお嬉しいポイントです。
デザイン初学者の方には、デザイン入門のまとめが非常に参考になると思います！
デザイン入門 | デザイン会社 ビートラックス: ブログ freshtraxデザインの観察
トレースをするのは時間がかかりますが、デザインを観察することはどんなに忙しくても毎日できるはずです。世の中にあふれるデザイン看板や電車や町中の広告など、勉強の題材になるものはたくさんあります。
毎日テーマを決めて10〜20サイトくらいサイトを観察するものおすすめです。
毎日テーマを決めてWebサイトを20個くらい見ると良いよ。
— クリ★スタ | Webデザインtips (@cresta_design) October 25, 2020
テーマはボタンの大きさでも、使用してるグレーの数でも、テキストサイズでも何でもいいよ。
これを続けているといつの間にか、それなりのクオリティのWebサイトを作れるようになるよ😊
また、ツイッターで #1日1サイトレビュー というハッシュタグがあるので、こちらも参考にしてみるといいかもしれません。
とにかく、デザインをたくさん見ましょう！そして、「なぜそのデザインなのか？」を可能な限り考えることが大切です。
学びの言語化
情報をインプットしたら、必ずアウトプットしましょう。
本やメディアサイトで知識を得たら友達に教えたり、ツイッターで発信したりしてアウトプットします。
デザインを観察したら、「デザインの目的・ターゲット」と「なぜそのデザインなのか」をアウトプットします。
ツイッターなどのSNSをうまく活用して、自分なりの継続方法を確立できると良いですね！！
学習効率UP！WebデザイナーのためのTwitterの使い方講座
学習効率をアップするためのツイッターの活用方法については上記の記事を参照ください！
ポートフォリオの作成方法
学習してスキルや知識が身についたら、ポートフォリオを作成していきましょう！
効果的なポートフォリオの作り方については以下の記事で詳しく解説しています！
【実例あり】Webデザイナーのポートフォリオの作り方【転職に効果大】
ポートフォリオには5つを目標に作品を掲載しましょう！
Webデザイナーを目指す場合は、すべてコーディングまでやる必要はないです。
以下のような構成で作成すると良いでしょう。
- Webサイトのデザイン〜コーディング：1〜2個
- Webサイトのデザインのみ：2〜3個
- バナーやファーストビューのみのデザイン：2〜4個
転職活動の進め方
ポートフォリオが完成したら、いよいよ転職活動開始ですね！！
転職活動は以下のようなフローでやっていきましょう！
- ①自己分析
- ②職務経歴書・履歴書の準備
- ③求人サイトに登録・応募
- ④面接
- ⑤内定
自己分析する
転職活動を始めるにあたって、最初にやっておくべきことは自己分析です。
なぜWebデザイナーになりたいのか？どんなことが得意なのか？どうなりたいのか？など、自信の考えを明確に言語化できないと自分にマッチする企業とは巡り会えません💨
以下の記事で明確にしておくべき内容と、自己分析のフレームワークについて紹介しているので、参考にしてください。
未経験Webデザイナーが転職活動前に行うべき自己分析
履歴書・職務経歴書を準備する。
転職活動をする際に、どの職種でも必要になるのが履歴書と職務経歴書の2点です。履歴書はプロフィールを説明するための書類、職務経歴書は今までの職歴とスキルを詳しく説明するための書類という認識で問題ないです。
デザインに自信がある場合は、職務経歴書や履歴書などは、自分でデザインしてもいいでしょう。
以下はDTPデザイナーからWebデザイナーへ転職したMiiさん（@mii881110
）がご自身でデザインされた職務経歴書です。
就職活動中の「職務履歴書」
— Mii｜グラフィック出身のWebデザイナー (@mii881110) July 15, 2020
Twitterで
「オリジナルでデザインしました」
という話をお聞きして
私もオリジナルで臨んでおりました
こんな感じ！、ポートフォリオと色を合わせてます
もはや懐かしい…
今思えば「履歴書」もオリジナルにしたら
もっと良かったかも！ pic.twitter.com/viidJ2rd5t
求人サイトに登録・応募
応募書類を用意したら、求人サイトに登録して求人に応募していきましょう！
以下の記事でおすすめの求人サイトを紹介しています！
未経験Webデザイナーの転職におすすめな求人サイト5選
求人サイトに登録したら、興味のある企業に応募していきましょう！
Webデザイナー求人の書類選考通過率は一般的に10%〜20%と言われていますので、ある程度多く応募していった方が仕事は決まりやすいです。
自分の通勤圏内で「未経験 Webデザイナー」でヒットする求人はすべて応募するくらいの気持ちで良いと思います。
面接〜内定
書類選考を通過したら、面接ですね！
以下に実際のWebデザイナー選考の面接で聞かれた質問と「こういう方向性で答えるといいよ」という例を記載しているので、面接対策として活用してください。
未経験Webデザイナーの面接対策〜実際に聞かれた質問10選〜
デザイナーは私服勤務の会社が多いですが、面接はラフな服装ではなく、ビジネスカジュアルくらいの服装で臨むのが無難です。
最後に
ここまで読んでいただきありがとうございます。
かなり分量があり、読むだけでも大変だったかと思います💨
未経験からWebデザイナーになるにはある程度の学習期間とたゆまぬ努力が必要です。しかし、自分なりの学習方法を確立できれば全く不可能ではありません。
コツコツがんばっていきましょう😊
