【必読】未経験からWebデザイナーになるための方法と必要な6つのスキル
今の仕事はデザインと全く関係ないけど、未経験からでもWebデザイナーになれるの？
大学や専門学校でデザインの勉強をしていなかったけど、短期間の勉強でもWebデザイナーになれるの？
この記事を読もうと来ていただいた方からそんな悩みや意見が聞こえてきそうですが、先に結論から話すと
未経験からでもWebデザイナーになれます。
ただし誰でも簡単になれる職種ではないことを先に伝えておきます。
この言葉をもう少し言い換えると、誰でもなろうと思えばなることはできるが、簡単になれる訳ではない。
ということです。
なぜ誰でもなれるのかというと、Webデザイナーになるために必要な資格や専門学校卒などは関係ないからです。
もしあなたが今から医者を目指すとなれば医大に合格するために必死に勉強して学位まで取得してとかなり厳しい道のりになりますし、弁護士や会計士などの難関職業も資格を取得しなければなることさえできません。
その点、Webデザイナーは資格や学位などではなくても、スキルとポテンシャル、ポートフォリオがあれば未経験でもWebデザイナーになることができます。
ポートフォリオとは、自分でデザインしたデータや印刷物、Webサイトのことです。
目次
Webデザイナーとは
念のため、Webデザイナーの仕事について解説しておきます。
Webデザイナーとは文字通り、Web上で必要となるデザインをツールなどを使って設計し、それを元にWebサイトやWebアプリケーションなど実際にユーザーが使うものとして制作する仕事です。
冊子や雑誌などのペーパー類など印刷物の制作を行うデザイナーはDTP（Desktop Publishing)デザイナーと呼ばれたりしますが、企業によってはWebデザイナーがDTPデザインを行うこともあります。
Webデザイナーという職種はかなり企業によって呼び方が違ったり、業務の幅もかなり異なります。
Webデザイナー以外の呼び方でもHTMLコーダー、マークアップエンジニア、フロントエンドエンジニア、Webエンジニア、UI/UXデザイナーなどなどあります。
ここではふ〜ん程度で結構ですが、上記であげた職種の名前を見るとなんとなく「エンジニアぽい？」と思われたのではないでしょうか？
これらエンジニアと名前がついている職種名でもWebデザイナーと同じようにデザインを設計している方もいれば、HTMLやCSSなどのコーディングをメインとする方など企業や人によって異なるということです。
非常にややこしいので、この記事ではWebデザイナーを狭義と広義の意味で分けます。
狭義の意味でのWebデザイナー: デザインを制作することに特化した人（コーディングはしない）
広義の意味でのWebデザイナー: デザインだけでなく、Webサイトを作るためのコーディング作業も行う人
この記事では「広義の意味でのWebデザイナー」として必要なスキルについて解説していきます。
なぜなら、Webデザイナーに求められるスキルはどんどん増えていて、デザインだけするWebデザイナーではなくWebサイトを作るためののコーディングやアニメーションの実装まで求められているからです。
僕が未経験から転職活動をしてみて、募集案内は圧倒的に「広義の意味でのWebデザイナー」が多かったです。
Webデザイナーになるためのスキルを解説する前に
Webデザイナーになるために必要なスキルがどんどん増えていることを説明しました。
「どこまでレベルアップしたら未経験でもなれるのか？」と疑問を持たれるでしょうが、残念ながらはっきりとはしていません。
はっきりしていない理由としては、大きく３つあげられます。
- ポートフォリオを持ってきても正直実務でどれだけ活躍できるかは未経験の場合、判断できないらしい
- Webデザイナーのスキルやツールはプログラマーよりも変化が激しいと言われているのでトレンドが変わりやすく、企業が求めているスキルも様々だから
- 結局実務経験がないといくら勉強してもスキルを伸ばしにくいし、スキルと言っても果てしない
Webデザイナーでの転職活動ではポートフォリオの制作は必須です！
ポートフォリオがないと書類すら通過しません。あなたのデザインに対する熱意やポテンシャルは大事ですが、ポートフォリオがないと評価されないものだと考えておきましょう。
とはいえ、１で書いている通り、ポートフォリオを持ってきても未経験だと特にどれだけ実務で活躍できるかはポートフォリオだけで判断ができないとおっしゃる面接官の方がいました。
ポートフォリオの作り込みは大事ですが、どのクオリティーを満たせば良いかは企業によって、また面接を受ける方の人柄やそのほかのスキルに影響することも大きいです。特に未経験での採用なので。
なので自分のレベルやポートフォリオの求められるクオリティを知るためにもポートフォリオを作ったらまずは企業に応募してみることから始めるべきです。
もし書類の時点で落ちることが多いのであればポートフォリオのクオリティーが不十分だと判断されたのでは？と分析できます。
面接まで進むことができればポートフォリオのフィードバックを質問したりメールで直接、聞いてもいいでしょう。
親切な会社であればフィードバックや必要なスキルなんかも詳しく教えてくれたりします。
そこで必要なスキルが理解できスキル不足だったとわかったならもう一度学習をすればいいだけです。
理解しておくべきことはあなたは単にWebデザインのスキルを上げることを目的としているのではなく、「Webデザイナーとして就職・転職を成功させること」なのではないでしょうか？
ゴールを明確にして逆算思考で行動するようにしましょう。
そうすることで無駄な労力を投下していつまでもWebデザイナーとして転職できないといった事態にならなくて済みます。
Webデザイナーになるために必要な6つのスキル
ではWebデザイナーになるために必要なスキルを6つ紹介していこうと思います。
ここで紹介するスキルはあくまで企業によっては実務の中で身に付けるので十分というものもあれば、募集要件に書かれていたものもあります。
ご自身で求人票を見て照らし合わせながら学習を進めていくと良いでしょう。
1.Photoshopでデザインを作る
Webサイトを作る前にサイトのデザイン設計図が必要になります。
そこでAdobe社が提供しているPhotoshopというツールを利用して、Webデザイナーはサイトのコンセプトなどに合わせてデザインを作っていきます。
デザインツールは色々ありますが、ほとんどのWeb制作会社がPhotoshopを必須のツールとしています。
Webデザイナーに興味を持ち始めた程度の方でもまずはPhotoshopから勉強を始めるといいでしょう。
僕もWebデザイナーとしての学習の始まりはPhotoshopでした。
最初は写真の加工をしたり紙のデザインを作ったり。
Webデザイナーのスキル全般に言えることですが、Photoshopの学習は手を動かして学ぶしか方法はないです。
なのでWebデザイナーに自分は向いているかを判断するためにも今すぐPhotoshopを使ってみることをおすすめします。
Photoshopを登録して使い方は分からないけどググりながら使ってみる。これがWebデザイナーへの第一歩です。
2.HTML/CSSでWebサイト制作のためのコーディングを学ぶ
Webサイトを制作するためにはマークアップ言語と呼ばれるHTMLとCSSのコーディングスキルが必要になります。
HTMLとは、Hyper Text Markup Languageの略称で、簡単にいうとWebサイトにテキストや画像などを表示するために必要となる言語です。
CSSとは、Cascading StyleSheetsの略称で、HTMLによって表示された文字や画像にスタイル（デザイン）をつけていくものだと考えておけばOKです。
なのでHTMLとCSSは同時に学習するのが最も効率的です！
HTMLとCSS学習はProgateというオンライン学習サービスが特におすすめで、最もWeb業界では有名で評価の高いサービスなのでぜひ一度確認してみてください。
初心者の方は書籍からではなく、Progateから学習を始めるようにしましょう。
3.テキストエディタなど環境を構築する
HTMLやCSSはProgateで学習すべきとお伝えしました。
なぜならProgateはすでに環境が構築されていて初心者がつまずきやすい環境構築がサービスで作られているからです。
しかし実際にHTML/CSSでコーディング作業をするためには自分でテキストエディタをダウンロードして、エディタをより使いやすくするための拡張機能やプラグインなどを自分で構築しないといけません。
ただネット上にはおすすめのテキストエディタやダウンロード方法、おすすめ拡張機能などで情報は困らないほどあるので調べながら構築すればあまり難しいことではありません。
テキストエディタとして有名で人気なものをここにあげておきます。
僕は一通り使ってみて、Visual Studio Codeに落ち着きました。
実際に最近はVisual Studio Codeを使用している方が圧倒的に多く、拡張機能なども豊富なのでおすすめです。
4.レスポンシブ対応のWebサイトを制作
レスポンシブとは端末の画面幅に応じてサイトデザインが変化していくもののことです。
スマホが当たり前に普及しタブレットなども登場したことで、以前のようにPCでサイトにアクセスするよりもスマホでアクセスする人の方が多くなりました。
それにより、スマホサイズに合わせてデザインとPC用デザインをどちらも綺麗に表示するスキルが必要になりました。
多くのWeb制作会社の求人要件にもレスポンシブ対応のサイト構築が必須になっています。
レスポンシブ対応のためのコーディングも怠らずに学習しましょう！
5.JQueryでアニメーションの実装
JQueryとは、JavaScriptのライブラリで簡単に説明するとHTML/CSSで作ったサイトは動きのないページですので、そこにアニメーションをつけたりするためにJavaScriptよりも簡単に実装できるのでJQueryです。
よくTwitterなどではJQueryはオワコンなどの話題が上がりますが、以前から言われていますが実際制作現場では多用しているケースが多いです。
なぜならこれまでJQueryで作っていたサイトを改修するのにJQuery以外のものに変える方が大変です。
コストもかかります。
それがJQueryがいまだになくならず、重宝されている理由です。
またポートフォリオにJQueryを実装することで見た目もよくなります。
HTML/CSSでデザインでも問題ないですが、動きがないので味気ないサイトになってしまいます。
実際HTML/CSSだけで書かれたサイトを探すほうが難しいくらいです。
ふわっと文字が表示されたり何かしらアニメーションが実装されているサイトが当たり前になっているようにJQueryを使ってアニメーションを加えることができれば多少面接の評価も上がりますし、ポートフォリオのデザインもかっこよくなります。
またJavaScriptは本格的なプログラミング言語で習得にある程度時間がかかります。
ですが、JQueryは短期間で習得することができますし、ネットにはJQueryの解説であふれているので学習しやすい点もあります。
6.Wordpressを使えるようになる
WordPressとは、簡単にWebサイトを制作するためのシステムで、CMS（コンテンツマネジメントシステム）と呼ばれています。
コンテンツをマネジメントするということから分かるようにサイトに何か記事や画像を追加したりするときに、HTMLコードに直接加えてサーバーにアップロードしてと面倒な作業を、WordPressの管理画面でコードを修正しなくても簡単にコンテンツを追加できる便利なシステムです。
世界中のWebサイトの25％以上がWordPressで作られていると言われており、日本のCMSにおけるシェアではWordPressが圧倒的人気を誇っています。
またWordPressはブログに使いやすいという方から大抵のブロガーの方はWordPressを元に構築されています。
ちなみにこのブログもWordPressで制作していますよ！
WordPressを学習することでWebやサーバー回りに知識など豊富な知識を身に付けることができます。
またWordPressはPHPというサーバーサイド言語を使用しているのですが、WordPressに必要なコードだけググりながら作ればいいので初心者でもそれほど苦戦せず利用することができます。
最後に
未経験からWebデザイナーになるための方法と必要なスキルを６つそれぞれ解説してきました。
最初は「覚えることが多すぎて無理！」と思われたかもしれません。
しかし、HTMLやCSSで基本的なコーディングをすることもそれほど時間はかかりませんし、大抵のことはググれば答えを見つけることはできます。
そしてWebデザイナーになるための学習において最も大事なことは「手を動かすこと」。
これまで受験勉強や資格勉強をされてきた方はインプット重視の暗記学習をされてきたかもしれません。
ですがWebデザインは勉強ではなく「スキル」なので手を動かして体で覚えるのが最も効率的です。
むしろ手を動かさないといつまで経っても理解が進まなくて挫折する原因になります。
分からなくて諦めず手を動かしていれば、「点と点が線になる瞬間」で一気に理解が進むこともあります。
本記事を参考にWebデザイナーへの就職・転職を目指して取り組んでみてください。
