Webデザイナーへのなり方とは。お問い合せHOMEブログ雑談Webデザイナーへのなり方とは。雑談Webデザイナーへのなり方とは。03:59こんにちはジローです。私はWebデザイナーとして10年以上のキャリアがあり、現在はフリーランスを経て株式会社クロスバズ技術責任者CTOとして制作指揮および、Webデザイナーの採用の担当もしています。今まで見てきたポートフォリオの数はおそらく500は超えます。その経験から、未経験がWebデザイナーになるためにはどうしたらいいかを、Webデザイナー目線と採用担当目線を交えて紹介させていただきます。まとめWebデザイナーとしての就職は未経験からなれるのか結論、なれます。目指す理由は人それぞれですが、Webデザイナーという職種に対する憧れや、IT系技術職の中ではプログラミングほど敷居が高くなくとっつきやすいというのもあってか目指す方が多い人気の職種なのかと思います。採用をしていても、Webデザインをスクールで勉強をした未経験からの応募は多くあり、目指している方が多くいるんだなと実感しています。いって諦めなくても大丈夫です!もちろん技術職なのでそれ相応の努力は必要なのですが、Webデザイナーは様々な能力が求められる分、デザイン未経験からでも戦い方次第では未経験から独学で就職も可能です。重要なのは未経験のライバルたちと差別化ができるかどうかなので方向性の正しい努力をすれば道は開けます。Webデザイナーに将来性はあるのか結論、キャリアのあるWebデザイナーの市場価値は高く売り手市場です、将来性あります。Webデザイナーの採用をしていて思うのは、未経験からの応募は多いのですが、3年以上の実務経験があるスキルの高いデザイナーからの応募は少ないことです。スキルの高いWebデザイナーは自分から応募をしないでも多くの企業からスカウトがされるので、選べる立場になれるためです。これには色々理由はあるかとは思いますが大きく3つあるかと思います。オンライン市場拡大にともないWeb制作需要の高まりWebデザイナーは上流工程のWebディレクターになったりするWebデザイナーはフリーランスになりやすいWebデザイナーとしてキャリアを積むとWebディレクターになったり、フリーランスになったりするので案外Webデザイナーひとすじ10年以上という方は多くはない印象です。そんな理由もあってか、スキルのあるWebデザイナーは市場価値が高いため「Webデザイナーって将来性あるか心配」と思っている方は、あまり心配しなくてもいいかとは思っています。Webデザインはスクールと独学どちらが良いか結論、どちらでも良いと思います。どちらでも良いなんて言われると余計にどうしようか悩むという人も多いかと思いますが、本当にどちらでも良いと思っています。ちなみに、私は完全独学でWebデザイナーになりました。私のWebデザイナーを目指した10年以上前には、そもそもWebデザイナースクールがあったかどうか分からないですが、独学で勉強という方法を自然ととりました。どちらでも良いと思う理由は主に2つ。Webデザインは自力で勉強できるWebデザイナーとして活動するなら分からない事は自分で解決する必要があるWebデザインは自力で勉強できるWebデザイナーとして必要な能力はざっくりと以下になるかと思います。←ワイヤーフレーム制作に必要デザイン力コーディング力では、これらの能力はどうしたら高められるのか。それは人から教えてもらうことではなく、とにかく目的をもったサイトを作りまくって自分の思考と感覚を鍛えるしかないと思っています。四原則がありますが、そんなことを教えてもらったり本で読んだところで良いデザインは作れません。デザイン力を高めるには、良いデザインを見て自分の中のストックとしてインプットしていく作業が必要です。それは教えてもらうことではなく鍛えるものです。Webデザインに必要な基本技術となるデザインツールの操作(Photoshop・Illustrator・XD)や、コーディング方法(HTML・CSS)はネット上で学べるので、あとはひたすら反復練習で事足りるかなと思ってます。これが例えば、アプリ制作のために高度なプログラミング言語を学びたい場合などは、独学では学習難易度の高さからネット上の情報だけでは自力では解決できない躓くポイントが多く、学習スピードが遅くなることが考えられるので、スクールもおすすめできます。Webデザイナーとしての学習では躓くポイントはあまり思いつかないので独学でも良いかなと思います。コーディングは人によって適正があるので、難しいと感じる方もいるかと思いますがHTML・CSSはプログラミング言語というよりかはマークアップ言語なのでなんとかなります。Webデザイナーとして活動するなら分からない事は自分で解決する必要があるこれはどの業界でも一緒だとは思いますが、分からないことがあったときに自分で解決できる能力があるかどうかでその人の伸びしろはある程度決まるかなと思ってます。結局スクールで学んだとしても、分からないことがあればネットなり書籍なりで情報を探しインプットして解決する必要があり、その能力こそ重要なのでWebデザイナーとして大成できる人は独学でもどうにかできちゃうのかなとは思ってます。スクールか独学かは、ほんとうにどちらでも良いスクールだと学費として50万円以上かかるかとは思います。私には高いか安いかは分かりません。ほんとうにどちらでも良いと思っているので、好きな学習方法を選んで下さい。未経験からWebデザイナーになる方法では、どうしたら未経験からWebデザイナーになれるかの説明をします。結論、スキルを高めて高レベルなポートフォリオを作りましょう。Webデザイナーは技術職なので「なにをしてきたか」ではなく「なにができるか」で就職できるか決まります。「なにができるか」はWebデザイナーでいうところのポートフォリオになります。採用をしていても、ポートフォリオがない方は評価のしようが無いため、Webデザイナーにはポートフォリオが必須であり、むしろポートフォリオで全てが決まると言っても過言ではありません。Webデザイナーとして就職をするための学習方法ではここからは、どのような学習方法をするか良いかを紹介します。10サイト3.コーディングをしてみる4.自分でサイトを作ってみるまずは、Webデザイナーとして学習する環境を整える・パソコンを買おうMacとWindowsの2択になりますが、個人的にはMacをおすすめします。昔は自分でWindowsパソコンを自作するくらい色々やってましたが、今は完全にMac派です。理由は、Macのの製品・OSの完成度が高く使っていて気持ちが良いからです。ディスプレイも綺麗で、あの薄さでキーボードも全くたわまず打ちやすい、タッチパッドの反応と精度も圧倒的に良く、M1チップで処理が早くサクサク動く。Airは11.5万円〜買えるのでコスパも相当良いと思います。結論、正味どちらでも良いです。使い放題なので契約しましょう。月6,000円くらいです。やり方次第では月4,000円くらいで使えたりもします。・コーディングソフトはVScodeをインストールするなんでもいいのですが、情報が多く使いやすいことからVScodeをおすすめします。コーディングソフトとしてDreamweaverを勉強したほうがいいという情報もありますが、プロの現場ではDreamweaverを使うことは少ないんじゃないでしょうか。私は軽さと柔軟性の高さからVScodeをおすすめします。AtomやSublimeやBracketsもありますが、全部使ったことはありますが私はVScodeが一番使いやすかったです。利用者が多いのもVScodeです。これにかぎらず悩んだら一番使われているものを選択すると良いです。使用者が多いとその分ネット上に情報が多いので躓いてもすぐに解決できるためです。環境ができたら、とにかく自分の中でデザインが優れていると思うサイトのデザインをトレースしましょう。スクールや教え方によっては、まずはPhotoshopやIllustratorの基本操作を覚えましょうなどのステップがありますが、そんなものはやりながら覚えるのが手っ取り早いです。トレース作業をするのがおすすめです。WebデザインにはWebのルールに則る必要があり、フォントサイズ一つとっても最適なサイズがあります。いった基本的なルールから、デザインの規則性や、デザインストックをインプットできるのでトレースは必須です。昔はPhotoshopでWebデザインが当たり前でしたが、今はXDが主流なので、XDでトレースしてください。このとき、PCとスマホ両方のデザインをトレースしてください。レスポンシブのデザインの作り方が学べます。ポイントとしては、ランディングページを多めにトレースすることです。ランディングページのイメージは楽天の商品ページのようなものです。獲得に特化したページでデザイン性も高いのでデザイン力は非常に鍛えられます。割合としては以下くらいがおすすめです。1サイト記事メディアを1サイトトレースしておくとメディアサイトの特徴もわかるので、トレースしてみてください。コーディングをしてみるトレースしたデザインをコーディングしてください。コーディングするサイトは3サイトていどで十分です。コーポレートサイト1サイト、ランディングページ2サイトていどでよいです。コーディングの方法は、Progateなどのオンライン学習サービスで学んでもいいですし、自分でページ作ってみて試してみるでもどんな学習方法でもいいです。HTML・CSSのコーディングの設計規則はいろいろあるのですが、はじめのCSSは「BEM」のルールでいいかと思います。なれたらFLOCSSを取り入れたりしてみるといいです。コーディングに関しては、トレース元のサイトのコーディングを真似る必要はないです。学ぶことも多いのでどのようなHTML構造でどのようなCSS設計規則でコーディングされているかは確認したほうがよいです。レスポンシブも試してみましょう。自分でサイトを作ってみる最後に、自分でサイトを作ってみましょう。ここでいうサイトはポートフォリオに載せるサイトになるので重要です。サイト作りに大切なのは「Webサイトに訪問するユーザーのどんな課題を解決できるか」を考えることです。これまで採用担当として、500以上のポートフォリオを見てきましたが、未経験者が作るポートフォリオの9割以上は「架空のカフェ」などただたんに綺麗めなサイトを作っただけで、どのようなクライアントからの依頼で、どのような課題があり、それを解決するための思考の試行錯誤の跡が感じられないものがほとんどです。構成とデザインは別物と感じる方もいるかと思いますが、デザインの本質もまた、課題の解決にありデザインには意味が必要です。課題が明確ではないページではデザインに意味を持たせられないのでデザインがよくならないケースがほとんどです。その上で、どのようなページを作れば良いかを説明いたします。結論、ランディングページをつくろう。それが採用担当として500以上のポートフォリオを見てきた結論です。未経験のWebデザイナーが作るポートフォリオはありきたりな架空なコーポレートサイトばかりでどれも差がありません。それはいくつか理由はあるのですが、コーポレートサイトは課題が明確じゃないケースが多く、課題の解決という目的が薄いので、デザインに意味を持たせることが難しくなんとなく綺麗なサイトという目線でした評価ができないことにあります。コーポレートサイトでもデザイン能力を示すことはできますが、架空のコーポレートサイトじゃありきたりなデザインに落ち着くケースがほとんどでした。そこでおすすめなのがランディングページです。ランディングページは課題が明確です。目的は「購入」「お申込み」のどちらかがほとんどあり、購入率の向上など解決部分が明確なので、デザインに意味をもたせやすくなります。課題が明確な分、構成力も鍛えられます。ランディングページはデザインの制約もなくデザイン力を存分に発揮できるのも良い点です。商材はなんでも良いです。美容液販売LPでもフィットネスクラブのお申し込みLPでもなんでも良いです。そのかわり、架空の商品を考え外っ面だけマネるのではなく美容液販売LPであればどうしたら美容液を買ってもらえるかを徹底的に考えて下さい。ビジネス的な視点からもランディングページの需要は高く、採用をする経営側からしてもマネタイズの算段がつくので「このランディングページが作れるなら売上をあげられるな」と採用に踏み切りやすくなります。ポートフォリオまとめ作るポートフォリオは以下の5サイトだけでも応募者の能力は判断できます。3ページポートフォリオの掲載サイトが多くてもレベルが低ければなんの加点にもならないので、レベルの高い5サイトを作りましょう。レベルの高い10サイトを作ったのであればそれは加点になるので全て掲載しましょう。コーポレートサイトはデザインの差別化が難しいのでアニメーションを付けることをおすすめします。アニメーションがつくだけれ驚くほど印象は変わります。ランディングページはなんでも良いので、興味のあるジャンルで作りましょう。あまりにもニッチすぎるジャンルばかりの場合は、メジャーなジャンルのLPもあるとよいです。スクールなどではバナーの制作がカリキュラムとしてあるケースが多いですが、ポートフォリオの中にバナーは含めても含めなくてもどちらでもよいです。バナーでは応募者のWebデザイナーとしての能力は分からないので。まとめ最後に、Webデザイナーになれるかどうかは努力次第です。センスも必要なのですが、大前提は努力の量です。努力なくしてセンスは語れないので本気でWebデザイナーを目指しているのであれば、自分を信じてスキルを磨きまくりましょう。/「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。【弊社事例】リスティング広告の成功事例6選!成功の法則&すぐ真似できる広告戦略とは?依頼殺到。POPULAR雑談TEKE2024.05.02社員インタビューvol.4|制作事業部の熱血ディレクターに10の質問!ブログとうま2023.05.31私がクロスバズに入社した4つの理由リスティングブログX編集部2022.12.20【弊社事例】リスティング広告の成功事例6選!成功の法則&すぐ真似できる広告戦略とは?LPブログジロー2022.06.30依頼殺到。