WEBデザイナーになりたい！
けど、
「勉強しようと思ったけど学習する内容が多すぎ。」
「何から勉強したらいいかわからない！」
「かといってスクールに通うのもなぁ。」
私自身も、未経験からWEBデザイナーになるまで試行錯誤してかなり迷走したので同じような気持ちになった経験があります。
そこで今回は未経験からWEBデザイナーになるために独学する学習ステップについてまとめました。今後のWEBデザイン学習の参考になれば幸いです。
【著者プロフィール】
ゆるけー（＠yurukei20）
WEBデザイナー。主な得意分野はHTML,CSS,JavaScriptなどのコーディング業務。
現在は大手印刷会社の派遣WEBデザイナーとしてコーディング業務を中心にグラフィックデザインも兼任している。
WEBデザインの独学厳選5ステップ
まずは、WEBデザイン学習の手順について解説します。ざっと眺めるとこんな感じ。
いきなりIllustratorとかPhotoshopとかのツールは触らなくていいの？
うーん。ツールとかって使い方が多過ぎて、何のために学習するかが薄らぐことが多い印象…。
なので、最初にどんな学習するかを志望職種や業界から絞りこむのがおすすめです。無駄に学習時間が長くなりがちなので。
だから、まずは
- 企業に必要とされているスキルを把握
- そこから学習内容決める
というやり方で、行きたい企業に対して刺さる作品を考えていきましょう。
じゃあ、今から順を追って学習手順を解説します！
求人を見ながらもデザインの学習を決めよう
まずは、求人で求められるスキルや経験をもとに学習内容を決めていきましょう。
もう一度復習に全体の流れを紹介すると、
という手順。今から解説するのは、このうちの1つ目です。
取り敢えず何かつくるのも大事ではありますが、対象や目的もなく作ったデザインに企業が惹かれることはありません。
なぜこのデザインにしたのか？なぜこのサイトを制作したのか？を深く考えることがデザイン学習の第1歩です。学習する際にも、ターゲットを狙った学習を心がけましょう。
企業が求めるスキルはどうやって調べるの？
大体以下の3つから調べるます。
などがあげられます。
でも大体企業の募集要項とか見ればわかるので、それで問題ないかなと。経験者であれば、企業の募集背景から自分とフィットするかとか考えます。
企業の募集要項からは以下のことがわかります。
- 必須条件
- 歓迎条件
- 業務内容
条件→業務内容のつながりを理解して、
- どんなことを経験した人が求められているか？
- その経験からどういった業務を任せられるのか？
- それに対して自分は何で埋め合わせられるか？
を考えましょう。
この時点で1つの企業にこだわりすぎると、その企業に落ちた時点で結構メンタル的にもスキル的にもつらくなると思うので、絞りすぎないように注意です。
ざっと求人をスクラップして、共通する部分をもとに分析することがおすすめです。私は以下のようにまとめて、マインドマップにしていました。
こんな感じでマインドマップに自分の考えや希望条件を書き出していました。
求めるスキルで作成できる完成物を考える
この時点で、必要な学習内容は大体把握できるかと思います。
よしじゃあ早速イラレのチュートリアル頑張るぞ！
ちょっと待って！
勉強する内容がわかっても、具体的にどこまで学習したらいいか決めないといつまでも選考に進めません。それに最終的に企業が見るのは、学習している様子ではなくて、学習した結果作成したもの。
提出する完成物を決めずに学習して、目的の無いデザインを作成するとかえってマイナス評価になることも。
そうはならないよう、ある程度企業に提出するサイトやデザインを考えましょう。
完成物って何をつくるの？
企業がコーディングスキルを求めるのであれば、一からコーディングで作成したサイト。
さらに言うと、
- 受託・クライアントワーク系企業なら様々なパターンのサイト
- 自社開発なら自社に関連したサービス・雰囲気のサイト
を完成物のベンチマークにするといいです。
コーディングとカンプ作成両方必要とされているのなら、
- 自分や友人をクライアントと見立てて
- 聞き出した内容をもとにXDやfigmaでカンプを作成
- カンプをもとにコーディングしたサイト
が刺さりやすくなります。
ざっくりラフスケッチでもいいので、どんなサイトを作成するか決めたら、学習する内容を考えていきましょう。
その完成物に対して自分に足りないスキルを分析
つくるサイトの方針も決めたよ！
じゃあ、そこから逆算して学習する内容を考えよう。
ここまでいろいろ言ってきましたが、正直WEBデザイナーだったらそんなに学習しないといけない種類はないです。プログラミングだと言語とかフレームワークとか細かく分かれるのでややこしいですが。。。
WEBデザインだと
- コーディング
- グラフィックデザイン
- カンプ作成
の3つくらい。
言語やツールで細かく分けたとしても、
- HTML
- CSS
- JavaScript
- Photoshop
- illustrator
- Adobe XD
- figma
- sketch
におさまることがほとんど。
あったとしても、
- jQuery
- PHP
- WordPress
- inDesign
とかそのあたり。このあたりから、学習するスキルの目星をつけていきましょう。
今までの分析要らなかったんじゃ？
いやそんなことはないよ。
未経験のWEBデザイナー転職において、「何でこの学習をしたのか？」「なぜこれを作ったのか？」などをしっかり順序だてて話せるかどうかは、職務経歴書や面接、ポートフォリオサイトでかなり差が出るところです。なので、無目的に学習を進める以上にこういった視点があるだけでだいぶ差別化できます。
やはり、未経験のWEBデザイナーは正直スキルでの差別化が難しいです。なので、よりこういった戦略的に考えているかどうかがかなり重要になってくるんですよね。
とは言っても、このページまでしっかり読んでいる時点で忍耐力がある方なので、十分ここまでのプロセスはすぐに踏めると思います。
学習の計画を立てる
必要そうなスキルの目星をつけたら、具体的に学習の計画を立てていきます。
ここからは、それぞれの志望する分野によって変わるとおもうので、基本的なことを重点的に解説していきますね。
今回は、さっきの例で出したコーディングとカンプ作成どちらも求められる場合を例に話します。コーディングだけだよという方はコーディングの部分を。グラフィックデザインだけの方はグラフィックデザインの部分を中心に見てもらえればなと。
超ざっくりですが、こんな感じです。ここでは、大体こういう学習が必要だなぁと考えるくらいでいいです。正直学習してから気づくことがほとんどなので。
それでは、具体的な学習内容を紹介していきます。
実際に学習する
コーディングの基礎学習
最初はコーディングから学習することがおすすめ。
理由としては、主に3つ。
- 学習分野的に時間がかかりやすい
- グラフィックデザイン系のソフトの値段が高い
- コーディングは割とアレルギーの人いる
1つ目の理由は時間面。コーディングは覚えることが少ない一方で、考え方の部分で結構時間がかかりやすいです。どうやったらサイトが出来上がるのかとかの仕組みで頭を結構使うので、できたら早いうちに触れるのがおすすめ。
2つ目の理由としては、金銭面。グラフィックデザインで使用するソフトは月額課金のものがほとんどで、使っても使わなくてもお金がかかります。なので、ちょっとでも後回しにしてもいいかなと。
3つ目の理由が適正面。これはWebデザイナーとしてはいいのかわからないのですが、コーディングに対してアレルギー的なものを持つ人もいます。意味のわからない言葉が並んでいるのが無理！というならまだしも、黒い画面をみるだけで頭痛になる人もいました。
ある程度学習してもしんどいようなら、多分コーディング業務をしてもしんどいだけなので、ここで適正を見極めてグラフィックデザイナーになるのも一手です。
次にコーディングの基礎での学習内容を具体的に紹介するとこんな感じ。
- Progateで基礎の理解
- ドットインストールでサイトを軽く作成する
- Tech Academy無料体験
で実践を増やす
私もこんな感じで学習しました。ここまでで大体3000円足らずで学習できます。
コーディングで模写サイトの作成
コーディングである程度慣れてきたら、サイトを模写してみましょう。
個人的におすすめなサイトはクリスタデザインというブログサイトの課題。このあたりをコーディングできたらOKです。
最初はコード見ながらとかになるかもしれませんが、コードを見ながらでも「このタグはどういう意味か？」「どうスタイリングしているか？」などを考えながら見るだけでもかなり学びになりますよ。
グラフィック基本操作学習
グラフィックデザインの学習は基本的にAdobeチュートリアルでほぼ十分です。
十分すぎるほどのカリキュラムがあるので、
- カリキュラムで学習
- わからない点を調べる
の繰り返しで結構操作自体は慣れます。
グラフィックデザインのトレース練習
ツールの基本操作が理解できてくれば、実際に模写してみましょう。デザインの業界用語？でトレースといいます。
とはいえ、ネットで適当に拾った下手なバナーを模写しても変な癖がつくかもしれません。初心者のうちは、参考書などを活用してデザイン原則に乗っ取ったトレースをおすすめします。
グラフィックデザイン・コーディングそれぞれアレンジ
コーディングやグラフィックデザインの模写にも慣れてきたら、少しずつアレンジしていきましょう。
与える印象を変えるために、コンセプトカラーを変えてみたり。
自分で宣伝したいものを紹介するサイトやバナーにしてみたり。
このあたりから、当初練っていた完成物をより具体的にしていきましょう。
ポートフォリオ制作
ポートフォリオを実際につくっていきましょう。
ポートフォリオでは、ここまで分析した企業や求人に向けた内容にしていきましょう。
- 自分はどんなスキルがあるのか
- デザインの一連の流れを個人単位でやったこと
- 仮説を立てて検証し試行錯誤したこと
これらが証明できるようなポートフォリオにすることを念頭に置いて作成していきましょう。
手順としては、以下の通り。
- デザインの目的設定
- ユーザーの設定
- コンセプト決定
- ラフスケッチ
- 制作する
こういった流れで作成すると、ポートフォリオの説明の際もストーリー性があって説得力があります。
ポートフォリオサイト制作
ポートフォリオとポートフォリオサイトの違いってなに？
当サイトでは、以下のように分類しています。
ポートフォリオが作成できれば、提出用にポートフォリオサイトなどにまとめましょう。
ポートフォリオサイトには、
- ポートフォリオ
- 作成した目的
- 制作時間
- リンク
- 成果
などをしっかり書きましょう。面接では、ポートフォリオそのものよりもポートフォリオを作成した意図やストーリーを聞きたがります。
現場では、どんなデザインをつくったか以上になぜそのデザインにしたのか？を問われることが多いです。面接や現場で問い詰められる練習として、ポートフォリオサイトでしっかり言語化しておきましょう。
ここまで来たら、あとは志望したい企業に対して職務経歴書や面接の準備もしていきつつ、感覚が鈍らないよう学習を継続していきましょう！
最後に
ざっくりとデザイン学習手順について解説してきました。ここまでお疲れ様です。
おさらいすると、
という手順でした。
長々と書きましたが、あくまでここまではWEBデザイナーになるための下準備。ここから転職、もしくは派遣などで実務経験を積んで理想のWEBデザイナーになりましょう！
実際に働いて感じますが、WEBデザイナーとして実務経験を積む段階で一気に成長します。とにかく現場に飛び込めるよう学習を進めて、現場でさらに学習していきましょう！私も日々学習中です。
WEBデザイナーへの転職ステップについてはこちらの記事で詳しくまとめています。
コメント