未経験でWebデザイナーになるには？スキルと転職活動の要点を解説

インターネットの普及と共に、世の中には多様なWebサービスが次々に登場し、Web業界は活気づいています。特にコロナ禍においては、外出を控え、自宅で過ごす人が増えたこともあり、Webサービスの需要が拡大。ECサイトやWebコンテンツを増強する企業が増えました。

煌びやかなイメージがある「デザイン」の領域に興味や憧れを持つ人も多いことから、WebデザイナーはWeb業界の中でも人気の職種です。さらに、テレワークなど多様な働き方ができる職種としても、近年、ますます注目を集めています。

ここでは、そんなWebデザイナーを未経験から目指す人に向けて、仕事内容や必要なスキルの習得方法のほか、転職活動時のポイントについて解説します。

Webデザイナーの仕事内容と役割

未経験からWebデザイナーを目指すなら、まずはWebデザイナーの仕事内容とWeb制作における役割について把握しておきましょう。

Webデザイナーの主な仕事は、商品やサービスをWeb上で告知・展開するために必要なWebページなどをデザインすることです。デザインするものは、Webサイトをはじめ、バナーやアプリ、ユーザーが広告などを経由して最初に訪れるランディングページ（LP）など、多岐にわたります。

企業の売上に直結する商用サイトでは、商品を魅力的に見せることによって集客数が向上したり、問い合わせや商品の購入といったコンバージョン（Webページ上で獲得できる最終的な成果）に繋がったりと、デザインが重要な役割を果たすことが少なくありません。

一般的にWebデザイナーは、「デザイン部分のみを担う仕事」とイメージされがちですが、実際にはWebページにデザインを反映するためのコーディングやプログラミングまで関わるケースも多くあります。また、クライアントへのヒアリングやユーザー調査・分析のほか、サイト設計といった上流工程に関わることもあります。

Webデザイナーが、ワンストップでWebサイト制作のすべての工程を担当するか、分業でWebデザインのみを担当するかは、企業やプロジェクトによって異なります。

Webデザイナーに必要なスキルや知識とは？

所属やプロジェクトによって担当する工程に差はあれど、WebデザイナーはWebに関わるデザインを担うのが仕事です。では、未経験からWebデザイナーになるには、具体的に何を学び、どんなことを身につけたらいいのでしょうか。ここではWebデザイナーが最低限押さえておきたい知識やスキルについてご紹介します。

デザインする力

Webデザイナーになるには、まず基礎的なデザイン知識が必要です。レイアウトや配色、フォントなどの知識は最低限押さえておきましょう。

たとえば、レイアウトにおける、デザインの4つの基本原則（近接・整列・反復・コントラスト）や、配色における、色の三属性（色相・彩度・明度）は基礎知識として押させておきたいところです。フォントにおいては、明朝体・ゴシック体、セリフ体・サンセリフ体など、文字の種類やWebサイト上でよく使用されているフォントはチェックしておきましょう。これらは、知っているかどうかでデザインのクオリティを左右するともいえます。

また、実際の業務ではIllustratorやPhotoshopといったグラフィックソフトを使うことがほとんど。そのため、ソフトを用いてデザインをアウトプットする力も必要です。基礎的なデザイン知識を活かしながら、自分が思い描くデザインがひと通り表現できるまで、ツールを使い倒してみましょう。もし、どのソフトから学べばいいか迷ったら、Webデザインにおける使用ソフトの汎用性という視点から、Photoshop、Illustratorの順で習得することをおすすめします。

なお、近年では、前述のソフトに近しい機能を持ちながら、より快適にUI（※）デザインができるAdobe XDやSketch、Webブラウザ上でデザインの作成・共有ができるFigmaなどのツールも登場し、その存在感を増しています。今後Webデザイナーとして活躍することを目指すなら、いずれかは実際に触って操作感がわかるようにしておくとよいでしょう。

（※）ユーザーインターフェース（User Interface）の略でユーザーとサービスとの接点を指す。Webサイトの場合は、主にWebサイト上における表示部分など。

コーディングの知見

デザインを実際のWebサイトに反映するための作業をコーディングといいます。コーディングには、HTMLやCSS、JavaScriptといった言語の知識が必要です。Web上に文章や画像を表示させるためにはHTML、その文章や画像を調整・装飾するのがCSSなので、この2つの言語に関してはセットで理解しておきましょう。もし、自分でコードを書くことができなかったとしても、HTML、CSSを用いて、なにが書かれているのか、その意味を理解できるようになっておくことが重要です。自分のイメージするデザインがWeb上で再現できるのか、実装の可否も含めてデザイン業務にあたれますし、エンジニアといった開発者とのスムーズなコミュニケーションも期待できるためです。

さらにHTML、CSSに加えて、JavaScriptの知見があれば、サイト内に動く要素を加えることができるので表現の幅が広がります。学ぶ順序としては、HTML、CSS、JavaScriptの順がよいでしょう。まずはHTML、CSSを用いて、サイト制作ができる状態を目指すことをおすすめします。

情報をキャッチアップする力

猛烈なスピードで進化を続けるWeb業界において、情報をキャッチアップする力はクリエイターの成長に欠かせません。デザインやコーディングといった基礎的な知識を身につけるのと合わせて、最新のトレンドを追う姿勢が大切です。トレンドを知らないと独りよがりのデザインになってしまう可能性もあるからです。

Webデザインのトレンドはもちろん、実務に役立つツールや技術、デバイスなどもあっという間に移り変わるため、注目のWebサイトやWebデザイナーとして活躍している人のSNSなどをこまめにチェックし、必要な情報を逃さないようにしましょう。たとえば、ロイヤリティフリーのストック画像をはじめ、多くのプレミアムコンテンツを提供するAdobe Stockが毎年年間のトレンドを予測して発表しているクリエイティブトレンドなども参考になります。

コミュニケーションスキル

Webデザイナーの仕事は、デザインを通してクライアントや自社の問題を解決し、サービスの向上や商品の売上を図ることです。そこで重要なのがコミュニケーションスキルです。ただ表層的におしゃれなサイトをデザインするだけがWebデザイナーの仕事ではありません。

Webデザイナーは、クライアントとの対話を通じ、今抱えている課題やニーズを引き出し、デザインに反映していく必要があります。

具体的にそれらを解決するためにはどうしたらいいか、Webディレクターやエンジニアといった同じチームのメンバーとディスカッションしていくことも欠かせないでしょう。課題解決や制作意図を意識しないままWebデザインを行っても、クライアントの問題を解決するアウトプットにはなりません。

Webデザイナーを目指すなら、デザインの目的を互いの共通認識として把握するためにもコミュニケーション能力も磨く努力をしましょう。

Webデザイナーに必要な知識やスキルを身につける方法

Webデザイナーとして必要な知識・スキルについて紹介してきましたが、いざ未経験からWebデザイナーを目指そうと思ったとき、実際、それらをどのように身につけたらいいのか悩む人もいるのではないでしょうか。続いては、Webデザイナーになるために必要な知識やスキルの習得方法と、それぞれの習得方法におけるメリット・デメリットをご紹介します。

書籍やインターネットで独学する

Webデザイナーになるために、書籍やインターネットを駆使して、独学する方法があります。HTMLやCSSなどについては、ノウハウがまとめられた書籍やWebコンテンツがたくさんありますので、基礎的なものを見つけて読んでみましょう。併せて、実際に手を動かしてソースコードを打ち込むと、理解が深まります。

Webデザイナーの仕事で主流のグラフィックソフトである、IllustratorやPhotoshopについても同様に、入門書を参考にしながら、実際にソフトにふれて動かしてみることが大切です。こちらのソフトを提供するAdobeのWebサイトでは、期限つきで無料体験版をダウンロードできますので、機能を確認してみましょう。

独学は自分のペースで学べ、隙間時間を有効に使えるといったメリットがある一方、デザインに対する客観的な指摘や評価が得にくいことや、自分1人で行うため、つまずきやすいことがデメリットとして挙げられます。

Webデザイナーに必要なひと通りの知識を学び、デザインツールの操作性にもある程度慣れたら、オリジナルのWebサイトを作って公開し、SNSなどで客観的な意見やアドバイスをもらうのもひとつの手です。

スクールで学ぶ

Webデザイナーになるための知識やスキルを、スクールで学ぶ方法もあります。最近はオンラインスクールが増え、働きながらWebデザイナーの勉強をしやすくなりました。

スクールに通う場合、授業料がかかるという費用面でのデメリットはありますが、なんといっても必要な知識やスキルを体系的に学べるのが大きなメリットです。わからないところを先生や同期の生徒にすぐに聞くことができたり、チームでものづくりにチャレンジする経験ができたりするのもスクールならでは。学習に挫折しかけたときなど、生徒同士の交流が励みになることもあるでしょう。また、集団授業を行うスクールであれば、卒業後も同時期に入学した生徒間で横の繋がりを構築できることもメリットの1つといえます。

Webデザイナーに必要な知識やスキルの習得方法は、独学する、スクールで学ぶ、どちらの方法でも問題はありません。転職活動の際は、実際にWebサイトのデザインに関わった経験の有無がポイントとなります。ゼロからWebサイトを制作したという「実績」があることが大きな強みになるでしょう。

Webデザイナーに転職するために欠かせない、ポートフォリオを作る際の注意点

Webデザイナーの転職活動に欠かせないのが、応募企業へ提出するポートフォリオです。

ポートフォリオとは、これまでの実績や作品をまとめたWebデザイナーの作品集のようなもの。アウトプットの形式は、紙（印刷）やPDF、Webサイトなどさまざまです。最近では、相手の閲覧環境を考慮し、PDFやWebサイトを用いてポートフォリを作成するケースも増えています。

続いては、Webデザイナーを目指す人がポートフォリオを作る際に注意すべき点をご紹介しましょう。

決められた（与えられた）課題作品だけではなく、ポートフォリオには、できるだけ自分でテーマを設定して制作した作品を盛り込むことをおすすめします。さまざまなジャンルやテイストのWebデザインを入れておくことで、自身が対応できるデザインの幅やデザイン力のほか、デザイナーを目指すモチベーションの高さを示すことができるからです。

また、クライアントの要望を具現化するという体験をしているかどうかで、得られる経験値は大きく変わってきます。そのため、身近な人からの依頼でも構いませんので、「クライアントワーク」の実績を作れるとなおよいでしょう。

デザインした作品を通して、自分は誰のどのような課題を解決したかったのか、どうしてそのようなデザインにしたのか、意図やロジックもしっかりポートフォリオに書き込み、自分自身の考えを伝えることが重要です。デザインに至るまでのプロセスや制作に対する目的意識など、デザインに意味合いを込めることで、作品への説得力が増し、プラスの印象に繋がるでしょう。

なお、複数の人が関わった作品の場合は、「自分がどのような役割を果たしたのか」「具体的にどの部分を担当したのか」を添えておくと、デザインスキルの認識についてギャップが発生するのを防ぐことができます。

未経験からWebデザイナーにチャレンジする場合、応募先企業にポテンシャルをどれだけ示せるかがポイントになります。ポートフォリオに掲載する作品のジャンルの広さや質、量でアピールするのはもちろんですが、「絶対にWebデザイナーになりたい」「ここで働きたい」という熱量を盛り込んだ自己PRをポートフォリオのプロフィール箇所に載せるのもおすすめです。

企業の面接官から、「なぜWebデザイナーになりたいのか？」「どうしてこの企業で働きたいのか？」と聞かれたときをイメージして、その回答を自己PRに盛り込みましょう。

また、マイナビワークスが提供するポートフォリオ作成サービス「MATCHBOX（マッチボックス）」を使えば、誰でもかんたんにポートフォリオをつくることができます。ぜひご活用ください。

少しずつステップアップして、Webデザイナーになる選択肢も

未経験から即戦力として活躍できるWebデザイナーになるのが難しくても、まずはWebデザイナーの仕事に関連する職種に就き、実務経験を積みながらステップアップしていくという方法もあります。

たとえば、Webサイトの更新や運用を行うポジションから入り、Webデザイナーに転身するケースやWebディレクターからWebデザイナーに転身するケースなどがあります。未経験のうちは、まずWeb業界で関連する実務の経験を積むことが、今後のキャリアにおいて大きな財産になるでしょう。

未経験からWebデザイナーに転職した実例

最後に、マイナビクリエイターを通じて、未経験からWebデザイナーへの転職を成功させた人の実例をご紹介します。Webデザイナーを目指し、具体的にはどんなことをしたのか、ポートフォリオにはどんな工夫をして転職活動に臨んだのか。Webデザイナーとして転職するのにポートフォリオがいかに重要かが感じられると思います。ぜひ参考にしてみてください。

未経験からWebデザイナーになるには、必要なスキルを身につけて効果的なアピールが重要

未経験からWebデザイナーを目指すなら、まずは最低限の知識とスキルを習得しなくてはなりません。独学する、またはスクールで学ぶといういずれかの方法で、Webデザインの基礎的な力を身につけましょう。

そして身につけたその力を活かし、Webサイトなどを実際に制作してみることが何よりも重要です。また作品を作って終わりではいけません。制作実績をポートフォリオとしてまとめ、身につけたスキルや熱意をわかりやすく伝えられるよう工夫しましょう。Webデザイナーの転職では、ポートフォリオの見せ方が採用に大きく影響します。たとえば未経験で制作実績が少ない場合、作品はもちろん、自分自身のポテンシャルが伝わるように掲載することが大切です。

ただ、ポートフォリオの重要性を理解しつつも、実際どのように見せるべきかわからないということもあるでしょう。そんなときは、キャリアアドバイザーに相談するのもひとつの手です。マイナビクリエイターでは、効果的なポートフォリオの作り方についてもアドバイスいたしますので、お気軽にご相談ください。