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