Webデザイナーへのなり方とは。採用担当が未経験から就職するための方法を解説

こんにちはジローです。
私はWebデザイナーとして10年以上のキャリアがあり、現在はフリーランスを経て株式会社クロスバズ技術責任者CTOとして制作指揮および、Webデザイナーの採用の担当もしています。

今まで見てきたポートフォリオの数はおそらく500は超えます。

その経験から、未経験がWebデザイナーになるためにはどうしたらいいかを、Webデザイナー目線と採用担当目線を交えて紹介させていただきます。

Webデザイナーとしての就職は未経験からなれるのか

結論、なれます。
しかし簡単ではありません。そもそもあなたは何故Webデザイナーになりたいのでしょうか？ 目指す理由は人それぞれですが、Webデザイナーという職種に対する憧れや、IT系技術職の中ではプログラミングほど敷居が高くなくとっつきやすいというのもあってか目指す方が多い人気の職種なのかと思います。

採用をしていても、Webデザインをスクールで勉強をした未経験からの応募は多くあり、目指している方が多くいるんだなと実感しています。

だからといって諦めなくても大丈夫です！
もちろん技術職なのでそれ相応の努力は必要なのですが、Webデザイナーは様々な能力が求められる分、デザイン未経験からでも戦い方次第では未経験から独学で就職も可能です。重要なのは未経験のライバルたちと差別化ができるかどうかなので方向性の正しい努力をすれば道は開けます。

Webデザイナーに将来性はあるのか

結論、キャリアのあるWebデザイナーの市場価値は高く売り手市場です、将来性あります。

Webデザイナーの採用をしていて思うのは、未経験からの応募は多いのですが、3年以上の実務経験があるスキルの高いデザイナーからの応募は少ないことです。
なぜなら、スキルの高いWebデザイナーは自分から応募をしないでも多くの企業からスカウトがされるので、選べる立場になれるためです。

これには色々理由はあるかとは思いますが大きく３つあるかと思います。

• オンライン市場拡大にともないWeb制作需要の高まり
• Webデザイナーは上流工程のWebディレクターになったりする
• Webデザイナーはフリーランスになりやすい

Webデザイナーとしてキャリアを積むとWebディレクターになったり、フリーランスになったりするので案外Webデザイナーひとすじ10年以上という方は多くはない印象です。

そんな理由もあってか、スキルのあるWebデザイナーは市場価値が高いため「Webデザイナーって将来性あるか心配」と思っている方は、あまり心配しなくてもいいかとは思っています。

Webデザインはスクールと独学どちらが良いか

結論、どちらでも良いと思います。

どちらでも良いなんて言われると余計にどうしようか悩むという人も多いかと思いますが、本当にどちらでも良いと思っています。

ちなみに、私は完全独学でWebデザイナーになりました。
私のWebデザイナーを目指した10年以上前には、そもそもWebデザイナースクールがあったかどうか分からないですが、独学で勉強という方法を自然ととりました。

どちらでも良いと思う理由は主に２つ。

• Webデザインは自力で勉強できる
• Webデザイナーとして活動するなら分からない事は自分で解決する必要がある

Webデザインは自力で勉強できる

Webデザイナーとして必要な能力はざっくりと以下になるかと思います。

• ページ構成力　←ワイヤーフレーム制作に必要
• ライティング力　←ワイヤーフレーム制作に必要
• デザイン力
• コーディング力

では、これらの能力はどうしたら高められるのか。

それは人から教えてもらうことではなく、とにかく目的をもったサイトを作りまくって自分の思考と感覚を鍛えるしかないと思っています。

デザインには「近接」「整列」「強弱」「反復」の四原則がありますが、そんなことを教えてもらったり本で読んだところで良いデザインは作れません。

デザイン力を高めるには、良いデザインを見て自分の中のストックとしてインプットしていく作業が必要です。それは教えてもらうことではなく鍛えるものです。

また、Webデザインに必要な基本技術となるデザインツールの操作（Photoshop・Illustrator・XD）や、コーディング方法（HTML・CSS）はネット上で学べるので、あとはひたすら反復練習で事足りるかなと思ってます。

これが例えば、アプリ制作のために高度なプログラミング言語を学びたい場合などは、独学では学習難易度の高さからネット上の情報だけでは自力では解決できない躓くポイントが多く、学習スピードが遅くなることが考えられるので、スクールもおすすめできます。
しかし、Webデザイナーとしての学習では躓くポイントはあまり思いつかないので独学でも良いかなと思います。

コーディングは人によって適正があるので、難しいと感じる方もいるかと思いますがHTML・CSSはプログラミング言語というよりかはマークアップ言語なのでなんとかなります。

Webデザイナーとして活動するなら分からない事は自分で解決する必要がある

これはどの業界でも一緒だとは思いますが、分からないことがあったときに自分で解決できる能力があるかどうかでその人の伸びしろはある程度決まるかなと思ってます。

結局スクールで学んだとしても、分からないことがあればネットなり書籍なりで情報を探しインプットして解決する必要があり、その能力こそ重要なのでWebデザイナーとして大成できる人は独学でもどうにかできちゃうのかなとは思ってます。

スクールか独学かは、ほんとうにどちらでも良い

スクールだと学費として50万円以上かかるかとは思います。私には高いか安いかは分かりません。

ほんとうにどちらでも良いと思っているので、好きな学習方法を選んで下さい。

未経験からWebデザイナーになる方法

では、どうしたら未経験からWebデザイナーになれるかの説明をします。
結論、スキルを高めて高レベルなポートフォリオを作りましょう。

Webデザイナーは技術職なので「なにをしてきたか」ではなく「なにができるか」で就職できるか決まります。

「なにができるか」はWebデザイナーでいうところのポートフォリオになります。

採用をしていても、ポートフォリオがない方は評価のしようが無いため、Webデザイナーにはポートフォリオが必須であり、むしろポートフォリオで全てが決まると言っても過言ではありません。

Webデザイナーとして就職をするための学習方法

ではここからは、どのような学習方法をするか良いかを紹介します。

１．まずは、環境を整える
２．Webデザインのトレースをする 10サイト
３．コーディングをしてみる
４．自分でサイトを作ってみる

まずは、Webデザイナーとして学習する環境を整える

・パソコンを買おう

MacとWindowsの2択になりますが、個人的にはMacをおすすめします。
昔は自分でWindowsパソコンを自作するくらい色々やってましたが、今は完全にMac派です。

理由は、Macのの製品・OSの完成度が高く使っていて気持ちが良いからです。

ディスプレイも綺麗で、あの薄さでキーボードも全くたわまず打ちやすい、タッチパッドの反応と精度も圧倒的に良く、M1チップで処理が早くサクサク動く。それでいてMacBook Airは11.5万円〜買えるのでコスパも相当良いと思います。

結論、正味どちらでも良いです。

・アドビコンプリートプランを契約する

制作で必須なソフトとして、Photoshop・Illustrator・XD が必要です。

XDは他にもfigmaやSketchなど選択肢はありますが、Photoshopは必須なのでとりあえず、アドビコンプリートプランなら、Photoshop・Illustrator・XD が使い放題なので契約しましょう。

月6,000円くらいです。やり方次第では月4,000円くらいで使えたりもします。

・コーディングソフトはVScodeをインストールする

なんでもいいのですが、情報が多く使いやすいことからVScodeをおすすめします。

コーディングソフトとしてDreamweaverを勉強したほうがいいという情報もありますが、プロの現場ではDreamweaverを使うことは少ないんじゃないでしょうか。私は軽さと柔軟性の高さからVScodeをおすすめします。

AtomやSublimeやBracketsもありますが、全部使ったことはありますが私はVScodeが一番使いやすかったです。また一番利用者が多いのもVScodeです。これにかぎらず悩んだら一番使われているものを選択すると良いです。使用者が多いとその分ネット上に情報が多いので躓いてもすぐに解決できるためです。

Webデザインのトレースをする 10サイト以上

環境ができたら、とにかく自分の中でデザインが優れていると思うサイトのデザインをトレースしましょう。

スクールや教え方によっては、まずはPhotoshopやIllustratorの基本操作を覚えましょうなどのステップがありますが、そんなものはやりながら覚えるのが手っ取り早いです。

なので、とにかくトレース作業をするのがおすすめです。

WebデザインにはWebのルールに則る必要があり、フォントサイズ一つとっても最適なサイズがあります。そういった基本的なルールから、デザインの規則性や、デザインストックをインプットできるのでトレースは必須です。

昔はPhotoshopでWebデザインが当たり前でしたが、今はXDが主流なので、XDでトレースしてください。
このとき、PCとスマホ両方のデザインをトレースしてください。レスポンシブのデザインの作り方が学べます。

ポイントとしては、ランディングページを多めにトレースすることです。ランディングページのイメージは楽天の商品ページのようなものです。獲得に特化したページでデザイン性も高いのでデザイン力は非常に鍛えられます。

割合としては以下くらいがおすすめです。

• コーポレートサイト 4サイト
• ランディングページ 5サイト
• 記事メディア 1サイト

記事メディアを1サイトトレースしておくとメディアサイトの特徴もわかるので、トレースしてみてください。

コーディングをしてみる

トレースしたデザインをコーディングしてください。

コーディングするサイトは3サイトていどで十分です。
コーポレートサイト1サイト、ランディングページ2サイトていどでよいです。

コーディングの方法は、Progateなどのオンライン学習サービスで学んでもいいですし、自分でページ作ってみて試してみるでもどんな学習方法でもいいです。

HTML・CSSのコーディングの設計規則はいろいろあるのですが、はじめのCSSは「BEM」のルールでいいかと思います。なれたらFLOCSSを取り入れたりしてみるといいです。

コーディングに関しては、トレース元のサイトのコーディングを真似る必要はないです。ただし学ぶことも多いのでどのようなHTML構造でどのようなCSS設計規則でコーディングされているかは確認したほうがよいです。

レスポンシブも試してみましょう。

自分でサイトを作ってみる

最後に、自分でサイトを作ってみましょう。ここでいうサイトはポートフォリオに載せるサイトになるので重要です。

サイト作りに大切なのは「Webサイトに訪問するユーザーのどんな課題を解決できるか」を考えることです。

これまで採用担当として、500以上のポートフォリオを見てきましたが、未経験者が作るポートフォリオの9割以上は「架空のカフェ」などただたんに綺麗めなサイトを作っただけで、どのようなクライアントからの依頼で、どのような課題があり、それを解決するための思考の試行錯誤の跡が感じられないものがほとんどです。

構成とデザインは別物と感じる方もいるかと思いますが、デザインの本質もまた、課題の解決にありデザインには意味が必要です。課題が明確ではないページではデザインに意味を持たせられないのでデザインがよくならないケースがほとんどです。

その上で、どのようなページを作れば良いかを説明いたします。

採用担当が惹かれるポートフォリオの作り方

結論、ランディングページをつくろう。
それが採用担当として500以上のポートフォリオを見てきた結論です。

未経験のWebデザイナーが作るポートフォリオはありきたりな架空なコーポレートサイトばかりでどれも差がありません。それはいくつか理由はあるのですが、コーポレートサイトは課題が明確じゃないケースが多く、課題の解決という目的が薄いので、デザインに意味を持たせることが難しくなんとなく綺麗なサイトという目線でした評価ができないことにあります。

もちろん、コーポレートサイトでもデザイン能力を示すことはできますが、架空のコーポレートサイトじゃありきたりなデザインに落ち着くケースがほとんどでした。

そこでおすすめなのがランディングページです。

ランディングページは課題が明確です。目的は「購入」「お申込み」のどちらかがほとんどあり、購入率の向上など解決部分が明確なので、デザインに意味をもたせやすくなります。
課題が明確な分、構成力も鍛えられます。

また、ランディングページはデザインの制約もなくデザイン力を存分に発揮できるのも良い点です。

商材はなんでも良いです。美容液販売LPでもフィットネスクラブのお申し込みLPでもなんでも良いです。
そのかわり、架空の商品を考え外っ面だけマネるのではなく美容液販売LPであればどうしたら美容液を買ってもらえるかを徹底的に考えて下さい。

また、ビジネス的な視点からもランディングページの需要は高く、採用をする経営側からしてもマネタイズの算段がつくので「このランディングページが作れるなら売上をあげられるな」と採用に踏み切りやすくなります。

ポートフォリオまとめ

作るポートフォリオは以下の5サイトだけでも応募者の能力は判断できます。

• コーポレートサイト 要アニメーション（ページ規模全5ページ以内） 2サイト
• ランディングページ　3ページ

ポートフォリオの掲載サイトが多くてもレベルが低ければなんの加点にもならないので、レベルの高い5サイトを作りましょう。もちろんレベルの高い10サイトを作ったのであればそれは加点になるので全て掲載しましょう。

コーポレートサイトはデザインの差別化が難しいのでアニメーションを付けることをおすすめします。アニメーションがつくだけれ驚くほど印象は変わります。

ランディングページはなんでも良いので、興味のあるジャンルで作りましょう。あまりにもニッチすぎるジャンルばかりの場合は、メジャーなジャンルのLPもあるとよいです。

スクールなどではバナーの制作がカリキュラムとしてあるケースが多いですが、ポートフォリオの中にバナーは含めても含めなくてもどちらでもよいです。バナーでは応募者のWebデザイナーとしての能力は分からないので。

まとめ

最後に、Webデザイナーになれるかどうかは努力次第です。
もちろんセンスも必要なのですが、大前提は努力の量です。努力なくしてセンスは語れないので本気でWebデザイナーを目指しているのであれば、自分を信じてスキルを磨きまくりましょう。