2023/03/14【未経験者向け】Webデザイナーのお仕事とは?〜必要なスキルやツール・独学での勉強方法3つをご紹介〜副業の解禁やIT人材の需要の高まりにより、Webデザインを学びたいという人は増えています。未経験の状態からWebデザインを独学で学び、お仕事にするにはどうしたらよいのでしょうか。この記事では、Webデザインに興味のある未経験の方に向けて、Webデザイナーのお仕事や勉強法など、幅広く解説します。けWebデザインの勉強方法5つ独学(書籍)について独学(Webサービス)独学(動画)スクール実務Webデザイナーに資格は必須ではない最短で効率よく稼げるWebデザイナーを目指すなら独学は厳しいWebデザインとはWebデザインとは、Web上に表示されるあらゆるホームページの見た目を作ることです。ホームページの構成、文字の色や大きさ、使用する写真の配置などを決めることも全てWebデザインといえます。Webデザインと混同されやすいものとして、グラフィックデザインがあります。WebデザインはWeb媒体、グラフィックデザインは紙媒体(ポスター・チラシ・広告など)が対象です。どちらも見た目を作ることに変わりはないのですが、Webデザインとグラフィックデザインは使用するツールやコンテンツのサイズ、色などに違いがあります。必要なスキルや知識が異なるため、両者は別物と区別しておくとよいでしょう。最近ではWebデザインにあたってUI/UXの知識の必要性が高まっています。デザインはただ「かわいい」や「おしゃれ」という理由だけで表現されるものではなく、何かの目的や課題を達成するための手段だからです。UIは「ユーザーインターフェース」といって、何かを操作する際の対象とその利用者を繋ぐものです。車を運転するためのハンドルがそれにあたります。UXとは「ユーザーエクスペリエンス」といって、ユーザーがサービスを通して得る一連の体験や感情のことです。身の回りのWebサイトをよく見ると、様々な課題や目的のためにデザインが使用されていることがわかります。「無料の体験会に参加を促したい」といったものです。そのWebサイトを見たり使用したりするのは人、すなわちユーザーです。WebデザイナーにUI/UXの知識があり、課題や目的を達成するためにユーザー視点でのデザイン設計や改善ができれば、最終的なアウトプットの質も高まることになります。UI/UXの考え方を重視したWebデザインのことをUI/UXデザインと呼びます。厳密にはWebデザイン=UI/UXデザインではありません。UI/UXデザイナーにはWebサイトの作成だけでなく、アプリなどのデジタルプロダクトの設計も業務内容として加わります。Webデザイナーのお仕事について実務経験なし、あるいはバナーやWebサイト作成を数本経験した「初歩デザイナー」、Webサイトの上流設計から担当し、その後の改善まで対応可能な「中級デザイナー」、大型案件を請け負い、ディレクションなどを担当しながら全体を把握できる「上級デザイナー」と段階別に、収入の目安を表にまとめました。50万円〜表の通り案件相場には幅があるため、参考程度に認識してもらえるとよいかと思います。Webデザインの業務は、初心者であっても比較的高単価が期待できます。中級・上級デザイナーになれば上流設計の担当や、ディレクション業務なども行うことが増えるため、その分単価も上がります。時給ではなく案件ごとに売り上げが発生することが多いので、デザインツールに慣れて効率よく作業することも大切になるでしょう。Webデザイナーの働き方は大きく分けて会社員とフリーランスの2つです。フリーランスの働き方はさらに副業系フリーランスと独立系フリーランスの2つに分けられます。副業の平均収入はいくら?どんな仕事内容?稼げる職種はコレだ!(※3)フリーランス白書2019もちろんどの働き方が正解というわけではありません。会社員・フリーランスのどちらが向いているか、ワクワクするかは人それぞれです。ここからは会社員・フリーランスそれぞれのメリット・デメリットを紹介します。収入をあげられるわけではない会社員としてWebデザイナーの仕事をするメリットのひとつとして、「安定」が挙げられます。毎月安定した収入を得られるため、長期的な家計の予算計画は立てやすいです。仕事を自分で選べない、収入アップがすぐには期待できないなどのデメリットも。「柔軟さ」という面ではフリーランスに劣る部分もありそうです。管理など)フリーランスWebデザイナーとして働くメリットは、なんといっても「自由さ」でしょう。今話題のワーケーションも実現可能です。結婚や妊娠・出産などのライフスタイルの変化にも柔軟に対応しやすいというメリットもありますが、もちろんデメリットもあります。「スケジュール管理やマルチタスクが得意で、場所も時間も自由に選択して働きたい」方はフリーランスが向いているでしょう。一方で、「ある程度の安定をキープしつつ、組織の中で自分の力を発揮したい」方は会社員を選択してもいいかもしれませんね。プロのWebデザイナーに必要なスキルここでは、Webデザイナー・グラフィックデザイナー・UI/UXデザイナーのそれぞれに必要なスキルについて、段階ごとに紹介します。実務経験なし、あるいはバナーやWebサイト作成を数本経験した「初歩Webデザイナー」の場合、必要なスキルは以下の3つです。1デザインの基礎知識Webデザインは、レイアウト・配色・写真などの基礎知識をベースに作られています。デザインにオリジナリティを出すためにはまず、基本をおさえましょう。2デザインツールの操作デザインには多くのツールを使用します。PhotoshopやIllustrator、Figmaなどのデザインツールは一通り使えるようにしておきましょう。Webデザイナーは特に、クライアントとの報告・連絡・相談を徹底しましょう。これで大抵のミスは防ぐことができます。「こんなこともわからないのかと思われるかな」と不安になる前に、まずはコミュニケーションをとるべきです。【中級Webデザイナー】Webサイトの上流設計から担当し、その後の改善まで対応可能な「中級Webデザイナー」には、初歩Webデザイナーに必要なスキルに加えて以下の2つのスキルが必要です。1情報設計スキルデザインは、ある目的を達成するために使用される手段です。デザインを用いる主な目的は、「誰かに何かをわかりやすく伝えること」にあります。そのため、情報を把握し優先度をつける情報設計スキルは必要不可欠です。2コーディングスキルコーディングとは、Webデザインをブラウザ上で見える形にするためにプログラミング言語を使って記述すること。コーディングはシンプルな方がわかりやすく、不具合も起きにくいです。コーディングスキルがあれば、実装するエンジニアがコーディングしやすいデザインを作ることができます。その結果、制作活動が効率よく進みますよ。大型案件を請け負い、ディレクションなどを担当しながら全体を把握できる「上級Webデザイナー」には、以下の2つのスキルを身につけておくことをおすすめします。1デザイン×〇〇のスキルデザインに関する知識だけでなく、それに掛け合わせられるスキルを身につけておくとよいでしょう。要点を簡潔に伝えるためのライティングや目的を達成するためのマーケティングスキル、デザインの材料となるイラストを描くスキルなどです。自分の好きなもの、得意なものを見つけてもいいですね。2マネジメントスキル上級デザイナーとなれば、いちWebデザイナーからマネジメントする立場を目指す人もいるでしょう。そこで、マネジメントスキルを身につけることをおすすめします。スケジュールや目標を決めるといった計画立案の方法やタスク管理などは、たとえマネジメントする側にならなくても役に立ちます。実務経験なし、あるいは1枚のポスターやチラシ制作を中心に行う初歩グラフィックデザイナーに必要なスキルは、以下の3つです。「デザインはセンス」と思っている人は多いかもしれません。デザインにも理論があります。黄金比や色相環などもデザイン理論のひとつです。全てを頭に入れる必要はありませんが、基本をおさえておくとデザインの制作過程もスムーズになるかもしれませんね。2フォントに関する知識グラフィックデザインの肝ともいえるフォントに関する知識も必要です。既存のフォントのほか、新たに生み出されるフォントもたくさんあります。手がけるデザインによって最適なフォントを選択するセンスもあるといいですね。日頃からフォントをチェックして、インプットする習慣をつけましょう。3デザインツールの操作Webデザイナー同様、グラフィックデザイナーも各種デザインツールを使用できなければなりません。IllustratorやPhotoshopは搭載されている機能も多いため、慣れるためにたくさん使用しましょう。ショートカット機能などを使うことによって、作業効率も一段と上がります。デザインツールを「使える」だけでなく「使いこなせる」ようにしておくことが重要です。広告制作を行ったり、デザインの上流設計から網羅的に関わったりする中級グラフィックデザイナー。初歩グラフィックデザイナーに必要なスキルに加えて以下の2つのスキルが必要です。1マーケティングスキルマーケティングとは、情報収集や分析を通して「売れる仕組み」を作ることです。広告を発信したいクライアントと、広告を受け取るユーザーのニーズをマッチさせてデザインにすることで、広告としての効果が上がります。マーケティングスキルを持つグラフィックデザイナーは、市場価値が上がること間違いなしです。2プレゼンテーションスキルグラフィックデザイナーは、クライアントに対してどんな意図でデザインしたのか説明する機会が多くあります。自分の中のイメージをデザインに落とし込むだけでなく、それを説明するスキルがあるとクライアントとのすり合わせもスムーズになるでしょう。上級グラフィックデザイナーになると、ロゴ/CIの作成も行います。デザイナー側から提案をしたり、プロジェクト全体のディレクションをしたりすることも。追加で必要なスキルは以下の2つです。1ロゴ制作プロセスに関する知識ひとつのロゴを作成するには、実は多くのプロセスがあります。コンセプト作りをしてイメージの具現化をしたあと、少しずつブラッシュアップしていき、完成させるのです。良いものを作るために想像以上のトライアンドエラーを繰り返すため、大まかな制作プロセスは把握しておくとよいでしょう。最終的にアウトプットするのはロゴですが、完成に至るまでにはイメージを言語化したり、コンセプトからキーワードを抽出したりします。言語化が苦手なデザイナーは、克服するとアウトプットの質のレベルアップが期待できるでしょう。実務経験なし、あるいは既存のアプリやWebサービスのUI改善を中心に行う初歩UI/UXデザイナーに必要なスキルを以下の3つにまとめました。1UI設計力まず高いUI設計力が必要です。一般的に「ユーザーに考えさせない」デザインが理想だといわれています。デザイナーは日頃からWebサイトやアプリを見ることで慣れが生じてしまいますが、そこが盲点です。シンプルかつ洗練されたデザインでUIを表現できる力は強みになります。2本質を見抜く力UI設計力が高いだけでは、UI/UXデザイナーとしては少し足りないでしょう。UIが良くなれば全体の体験としてももちろん良くなりますが、全体を見直さなければ本当にいい体験を届けられないこともあります。ユーザーが感じている本質的な課題を見抜くスキルも重要です。繰り返すことでプロダクトやサービスを改善していきます。PDCAをただ回すのではなく、「正しく」回すことが重要です。PDCAサイクルの期間を決めてメリハリをつけたり、定期的にゴールを見直したりして、PDCAを回すことが目的にならないようにしましょう。中級UI/UXデザイナーは既存のサービス改善に加えて、アプリやWebサービスのUIを0から作成します。初歩UI/UXデザイナーに必要なスキルに加えて以下の2つのスキルが必要です。1行動心理学の知識UI/UXをより良いものにするためには、ユーザーの心理を読み取らなければいけません。人間の行動から感情が読み取れるとされる行動心理学は、良いUI/UXを設計するために役立ちます。ユーザーのニーズ分析や課題発見を加速させるスキルになるでしょう。2批判的思考力UI/UXのデザインは綿密な戦略に基づいてアウトプットされています。一度デザインを完成させたと思っても、「これが本当に最適解か」を常に考える批判的思考力を持っておくとよいでしょう。バイアスがかかりにくくなり、より良いものを作れます。【上級UI/UXデザイナー】アプリやWebサービスのUIはもちろん、UXの上流設計から中心になって行う上級デザイナーになると、さらに必要なスキルが出てきます。以下の2つにまとめました。1ブランディングスキルプロダクトやサービスの「らしさ」を設計するブランディングのスキルがあるといいでしょう。「らしさ」を作るために、デザインを含む全ての施策を一貫させる必要があります。UI/UXデザイナーといえどブランディングの知識があれば、上流設計もスムーズにいくはずです。2マネジメントスキルUI/UXデザイナーの仕事は、一人で行うわけではありません。大きなプロダクトになればなおさらです。マネジメントスキルを身につけて、タスクや進行管理を正しく行うことでパフォーマンスが上がり、より良いプロダクトを作ることにつながります。SHElikesでは、初歩Webデザイナー向けのデザインスキル習得からコーディング、マーケティングやマネジメントなど上級者向けの講座まで網羅的に学べます。グラフィックやUI/UXデザインに関する講座もまるっと受け放題ですよ。SHElikes無料体験レッスンはこちらプロのWebデザイナーに必要なツールプロのWebデザイナーに必要なツールと費用について紹介します。シェア率が高く、使いこなすことでお仕事効率や幅が広がる3つのツールをみていきましょう。AdobeAdobe製品の定番といえるソフトは主に2つ。写真の編集や加工を得意とする「Photoshop」と、イラストやロゴ作成を得意とする「Illustrator」です。Webデザイナーを名乗る人で、知らない人はいないツールといえます。料金は月額1,078〜6,480円。使用するツールや数に応じてプランの選択が可能です。FigmaFigmaは、Web上でデザインができるツールです。作成したファイル共有も簡単なため、オンラインをフル活用する現在のビジネスにぴったりのツールといえるでしょう。フリープランがあり、多くの機能を無料で使用できます。有料の場合は月額15〜45$です。WordPressWordPressとは、コーディングなしでWebページを作成・管理できるツールです。WordPressのシェア率は全Webサイトの4割ほどを占めているため、使用できて損はないツールといえます。クオリティも高く、プログラミングの知識がなくても更新できるので、シェア率も高まっています。けWebデザインの勉強方法5つWebデザイナーになるための勉強法はたくさんあります。・未経験OKの企業はブラックな場合も独学(書籍)についてWebデザインに関する書籍は、デザインの仕組みや基礎を学ぶものから、実際にWebサイトを作っていく実践型のものまでたくさん出版されています。プロのWebデザイナーを目指す上で、書籍を用いた独学を成功させるには自分に合った書籍を選択できるかがポイントです。イラストや図が多用されている本をわかりやすいと感じるのか、シンプルに文章で要点がまとめられている本がいいのかは人それぞれ。自分のレベルによっても選ぶ書籍は異なります。本」などで検索して購入する前に、一度書店で本を開いてみましょう。「何から手をつけたらいいかわからない」人は入門書、「専門的な知識を身につけたい」人はその分野の専門書、「自分が気になるところを効率的に探したい」人は逆引き機能がある書籍を選ぶのがおすすめ!書籍でWebデザインを勉強していくと、途中でわからない部分がきっと出てくるはずです。それらをひとつひとつ調べながら勉強を進めていくとなると、時間もかかります。勉強効率の面では、講師がいるスクールや実務に比べると劣ってしまうかもしれませんね。エンジニアの経験がある人や、デザイン系の専門学校・大学に通っていた人、そこまで急いでスキルをつけようと考えていない人は、手頃な書籍から勉強を始めてみてはいかがでしょうか。独学(Webサービス)最近はWebデザインを勉強するためのWebサービスも充実してきています。デザインを基礎から学べるchot.designや、コーディングを学べるprogateなどがおすすめです。デザイン理論の基礎やデザインツールの使い方、プログラミングの実践など、座学から実践まで幅広く学ぶことができますよ。有料の場合は月額1,000円程度かかってきますが、無料でできる範囲も広いです。お金をかけずに気軽に勉強を始めてみたい、隙間時間にスマホやPCから勉強したい、という方はWebサービスで勉強を始めてみましょう!Webサービスでの勉強の場合、お仕事獲得のサポートやWebデザイン以外のスキルをつけることは少し難しいです。多少大きなお金を動かしてでもお仕事獲得までのサポートも受けたい方はスクールを、Webデザイン以外のスキル(ライティングやマーケティングなど)も身につけたい方は専門の書籍、動画との組み合わせをおすすめします。独学(動画)YouTubeなどの動画は、要点をわかりやすくまとめたものが多いため、時間がない方でも気軽に取り入れることができる勉強法です。後から動画を見返すことができたり、途中で動画を止めて自分のなかで整理できたりするのもメリット。動画の難易度によってわからない言葉が飛び交う場合もあるため、Web知識があまりない方は勉強がなかなか進まないことも。自分のレベルに合った動画を選択する、苦手な分野については書籍を組み合わせて勉強するなどしてキャッチアップすると、勉強効率も高まるでしょう。デザインについての動画はもちろん、パソコンの選び方やマーケティング、カメラについての動画まで幅広く配信しています。Webデザイン以外のスキルを掛け合わせたい方にはぴったり!ほかには、動画配信型のオンライン学習サービスである『Udemy』も人気が高まっています。18万5,000ものオンラインビデオコースから選択が可能。Webデザイン以外にも開発やビジネススキル、写真や音楽などについても学べます。YouTubeと違って料金がかかりますが、スクールよりはかかるお金も少額です。お金をかけず、ある程度仕組み化された場所で勉強したい方にはおすすめですよ。スクール最短で効率よく稼ぐWebデザイナーを目指すなら、スクールがおすすめ!オフラインで授業を受けるスクールと、オンラインでどこでも勉強できるスクールの2つがあります。スキル定着のスピードやモチベーションの維持に関わってくるので、自分のライフスタイルや講師に求めているコミュニケーションに合わせて選択するとよいでしょう。独学での勉強法に比べると大きなお金が必要になりますが、勉強効率は格段に上がります。最短でスキルを身につけたい、独学では続ける自信がない人はスクールを検討してみてください。大きなお金を動かすことにためらう方や、受講期間内に勉強時間を確保することが難しい方は、アプリや動画を活用してみてもよいかもしれません。実務を通してWebデザインのスキルを身につける方法もあります。働きながら新しいスキルを身につけられる、わからないことは上長や仲間に聞けるということで選択する人も。できるだけスムーズに業務に取り掛かるため、またWebデザイナーとしての成長スピードを上げるために、デザインの基礎知識やツールの使い方、簡単なバナー制作などは理解しておくとよいでしょう。未経験からWebデザイナーになりたい人を採用している企業もありますが、そこには残業が多いなどブラックな現状も......。「プライベートの時間も大事にしたい!」「家族との時間もしっかり持ちたいな」という人は、独学やスクールでの勉強も視野に入れてみてくださいね。Webデザイナーに資格は必須ではないWebデザインに関する資格は、厚生労働省が認定しているウェブデザイン技能検定のほか、Webデザイナー検定やWebクリエイター能力認定試験などたくさんあります。いずれの資格もWebデザイナーとして働く上で必須ではありません。案件によっては実務未経験でも採用の可能性があるお仕事です。実際の選考の中ではその人自身が持つスキルや実績を重視することが多いでしょう。そのために作っておきたいのが「ポートフォリオ」と呼ばれるこれまでの作品をまとめたものです。Webデザイナーであればポートフォリオサイトそのものを自分で作成する方も多くいます。無料のテンプレートサイトもあるので、カスタマイズして使用してもいいですね。SHElikesでは、Webデザインのスキルを身につけられるのはもちろん、ポートフォリオの作成やお仕事紹介での案件獲得、そして案件獲得後のサポートまで行っています。Webスキルを身につけるところからお仕事獲得まで、体系的に学べるのは嬉しいですね。最短で効率よく稼げるWebデザイナーを目指すなら独学は厳しいプロのWebデザイナーとして活躍するには、デザインの基礎知識やツールを使いこなす力はもちろん、マーケティングや言語化する力といった掛け合わせのスキルが求められます。独学での勉強方法はたくさんありますが、未経験の方は特に効率よく学べる「スクール」がおすすめです!女性のためのキャリアスクール”SHElikes”では、WebデザインだけでなくグラフィックやUI/UX、マーケティングなど28種のコースをつまみ食いして“好き”を発見し、自分らしい生き方を実現するまでサポートしています。要点をわかりやすくまとめた動画講座と、わからないことは講師に質問できる環境で未経験の方でも安心。コーチングなどの挫折しない仕組みやお仕事獲得に必要なサポートが受けられるなど、”なりたい姿”を叶えるための環境が揃っていますよ。美容を通した国際協力を行う女子学生団体を立ち上げ、副代表を務める。その後女性向け動画メディアの立ち上げに従事し、新卒で入った会社では、ゼクシィの営業を行う。その最中SHEに出会い、理念に共感。現在はSHEshares編集長とマーケティングチームでクリエイティブプランナーを務める。掲載している情報は記事更新時点のものです。