1000本突破
1000本突破
#174
STUDIO by LIG

未経験からWebデザイナーになるには?おすすめ勉強法や必要スキルを紹介

こんにちは! デジタルハリウッドSTUDIO by LIGの運営担当の天(@10TEN10TAN10)です!

デジタルハリウッドSTUDIO by LIG(以下デジLIG)とは
株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。デジLIGは上野・池袋・大宮・北千住にて受講生を募集中。無料個別説明会は毎日開催中!

デジLIGの個別説明会では、未経験からWebデザイナーを目指す方へ具体的な学習方法やカリキュラムについてお話ししています。

説明会にご参加される方は、Webデザインを学ぶ方法を模索している方が多数です。通学にするのか、オンラインスクールなのか、はたまた独学で学習できないか……と、いくつかの学習方法を検討されています。そもそも、未経験からWebデザイナーってなれるものなのでしょうか……?

結論からお伝えすると……なれます。

ただし、自分に合う学習方法や環境を整え、学習時間を作る必要があります。この記事では、「未経験からWebデザイナーになるため方法」を紹介するので、自分に合う最適な方法を見つける参考にしてもらえると嬉しいです!

Webデザイナーとは?

Webデザイナーは、クライアント(企業/個人)から依頼を受け、Webサイトのデザインを制作する職業です。お客様の要望をヒアリングし、Webサイトの方向性、構成、ユーザーの使いやすさを考えデザインを制作します。

Webデザイナーの仕事

Webデザイナーの仕事は、クライアントの課題を解決するデザインを制作することです。業務範囲は以下のように多岐に渡ります。

Webサイトの構成と設計を考える

Webサイト全体の構成・レイアウト・イメージを決定します。Webサイトを利用するユーザーの目線に立ち、Webサイトを訪れたお客様にとって使いやすいUI(ユーザーインターフェイス)とUX(ユーザーエクスペリエンス)を設計し、ユーザーが求める顧客体験を実現させます。

Webサイト・Webページのデザイン

Adobe Photoshop、Adobe IllustratorといったグラフィックデザインソフトやAdobe XDというデザインツールを使用してデザインを制作します。

コーディング

HTML(エイチティーエムエル)、CSS(カスケーディングスタイルシート)、JavaScript(ジャバスクリプト)といったコンピューターの言語を用いてWebサイトを構築します。

Webサイト制作の流れ

クライアントからWebサイト制作の依頼を受け、公開に至るまでには以下の工程があります。

  1. 要件を定義する
  2. ワイヤーフレームを作る
  3. デザインを制作する
  4. コーディングをする

要件を定義する

要件定義とはWebサイトを何のために制作するのかを明確にする工程です。Webサイト制作によってどのような課題を解決していくのかををまとめます。

ワイヤーフレームを作る

要件定義を元にWebサイト全体のレイアウトやコンテンツの構成を考え、ワイヤフレーム(Webサイトの設計図)を作ります。

デザインを制作する

Adobe Photoshop、Adobe Illustrator、Adobe XDを使用し、Webサイトの全体のデザインカンプ(デザインの完成見本)というデザインデータを制作します。その際はパソコンだけでなく、スマートフォンから見たデザイン・ビジュアルも合わせて考えていきます。

コーディングをする

Webサイトを構築するためにコンピューターの言語を使いコーディングを行います。HTMLで文字や画像を記述し、CSSでWebサイトのレイアウト(見た目)を整えます。Webサイトに動きをつけるためには、JavaScriptというプログラミング言語を用いていきます。デザインされたものをコーディングすることで、Webサイトとして使用できるようになります。

コーディングは、テキストエディターやAdobe DreamweaverというWebサイト制作のソフトを使って行います。

Webデザイナーの働き方

Webデザイナーとしての働き方はさまざまです。制作会社・事業会社で正社員として働く場合は、安定した収入を得ながら、リモートワークやフレックスタイム制を活用した柔軟な働き方ができます。

派遣社員として働く場合は、有期雇用になりますが、専門職のため時給も高く、残業に関しても規定で守られているため、仕事のオンオフがつけやすいです。また実務経験を重ねてスキルを磨いた後に、フリーランスのWebデザイナーとして活躍する人数も増加傾向にあります。それぞれの働き方について解説します。

制作会社のWebデザイナー

お客様(他の会社)から依頼を受け、Webサイト・アプリの制作や運用を行うWebデザイナーのことです。外部企業がクライアントになるため多種多様な業界・種類のデザインに携わる特徴があり、幅広い知識・技術・経験を身に付けていくことができます。Webデザイナーとしてデザインの技術やスキルアップを高めたいと考えている方におすすめです。

事業会社のWebデザイナー(インハウスデザイナー)

自社のWebサイト・アプリなどの制作や運用をする社内Webデザイナーのことです。自社サービスの制作を行うため、長期的により良いものを育てていくことができます。

クライアントが外部ではないため、納期の短縮や突発的な作業が起きづらく、仕事が調整しやすい特徴があります。また、インハウスデザイナーは、デザインだけでなくサイト運営全体に携わることが多いため、ディレクションを始め、クリエイティブの周辺業務(マーケティング、開発、デバッグなど)を通して、視野を広げてスキルを高めることができる働き方です。

フリーランスのWebデザイナー

組織に所属せず独立し、Webサイト制作や運用を行うWebデザイナーのことです。制作会社や事業会社のWebデザイナーと異なり、自由度の高い働き方を実現できます。

一方で会社員ではないため、安定した収入を得るための実力・実績が求められるでしょう。Webデザイナーとして経験を積み、スキルを高め、計画的に独立することがおすすめです。

仕事を獲得する際は人脈やフリーランス向けの案件紹介サイト、クラウドソーシングなどを活用してお仕事を得ていく必要があります。知識・技術・経験を身に付け、自分の裁量で仕事をしていきたい方におすすめです。

Webデザイナーのキャリア

WebデザイナーのキャリアプランはWebディレクター、UI・UXデザイナー、アートディレクターの3つに大別されます。それぞれのキャリアについて紹介していきます。

Webディレクター

Webディレクターは、Web制作におけるプロジェクト全体の進行管理者です。クライアントの意向をヒアリングし、納期までに制作を終えられるようなプロジェクトの進捗管理が仕事です。

Webデザイナー、プログラマーといったメンバーのマネジメント業務を行いながら、Web制作全般を管理します。制作会社・事業会社のWebデザイナーとして現場で経験を重ねていくことで、Webディレクターに必要なスキルを磨いていくことができるでしょう。

Webディレクターには、クライアントの要望をヒアリングし、制作メンバーをまとめていくコミュニケーション力が求められます。

UI・UXデザイナー

UIデザイナーはユーザーが使いやすいようにWebサイトやアプリの構成・ビジュアル・操作性をデザインする仕事です。UXデザイナーは、ユーザーにとっての価値ある体験(使いやすさや楽しさ)をデザインをするためにユーザーのニーズを分析し戦略を立てる仕事です。

UI・UXデザイナーになるには、ユーザー目線でデザインや設定を考えるスキルや、分析能力が求められます。

アートディレクター

アートディレクターはデザインの責任者としてデザインの方向性を決定し、デザインに関わるクリエイターたちを指揮する仕事。

アートディレクターになるには、クリエイティブの制作全般に関する専門知識とスキルが必要です。クライアントの要望を的確に掴むためのコミュニケーションスキル、ディレクションスキルが求められるため、Webデザイナー・Webディレクターとして実務経験が求められます。

未経験からWebデザイナーになるには?

未経験からWebデザイナーになるためには、必要なスキル(知識と技術)を身に付けていく必要があります。ここでは未経験からWebデザイナーになるための方法とメリット・デメリットを紹介していきます。

独学

メリット
  • 学習カリキュラムを自分で決定できる
  • 自分のペースで学習を進めることができる
  • 学習のための費用を安価に抑えることができる
デメリット
  • 教材は自分で用意する必要がある
  • インプットがメインの学習となりアウトプットが難しい
  • デザインのフィードバックが受けられず何が正解か判断がつかない
  • 自分を律する自己管理力がなければ学習が進まず怠けてしまう
  • 現場で求められる最新スキルや業界事情の情報収集が難しい

独学のポイント

専門書籍や動画教材を活用し、わからないことはインターネットで検索しながら学習を進めます。Web制作に必要なAdobeのデザインソフトのチュートリアルを使用したり、YouTube動画でも多くの投稿があるため、比較的コストをかけずに学習が可能です。

独学でWebデザイナーになりたい方はこちらの記事をご覧ください。

Webデザインスクール・専門学校

メリット
  • Webデザイナーに必要な最新のスキルを専門の教材を活用し基礎から体系立てて知識と技術を学ぶことができる
  • プロの視点のアドバイスを受けることができ、制作物にフィードバックがもらえる
  • 同じ目標を持つ仲間たちと横の繋がりができ学習に取り組める
  • 就職・転職活動の支援や案件紹介などのサービスを活用できる
  • スクールの環境(校舎・パソコン・ソフト)を活用できる
デメリット
  • スクール・学校ごとに定められた学習期間内で学習を進めなければならない
  • 独学よりも割高な学習費用を捻出する必要がある
  • 学習時間(社会人は仕事と学習の両立)の確保が必要

Webスクールのポイント

Webスクールのカリキュラムを活用して、Webデザイナーに必要なスキルを身に付けることが可能です。学習期間はスクールによって異なり、1〜3ヶ月程度の短期集中から1年以上と期間も様々です。学習に使える時間をあらかじめ計算し、自分のライフスタイルに合ったスクールを検討していく必要があります。

学習を進める中でわからないことは、講師に対面で質問や相談できるのが大きな特長です。スクールごとに学生同士のコミュニティや就職・転職支援サービスなどが充実しているところが多いです。

スクールに通ってWebデザイナーになりたい方はこちらの記事をご覧ください。

オンラインスクール

メリット
  • 通学の必要がなくパソコン・デザインソフト・インターネットにアクセスできる環境があれば好きな時間に自由に学習を進めることができる
デメリット
  • 独学よりも割出な学習費用の捻出が必要
  • スクールの先生・スタッフとオンラインツール上でしかコミュニケーションが取れない
  • 集中できる学習環境(PC・ソフト・学習スペース)を整える必要がある
  • 自由度が高い分、学習を阻害する誘惑が多くモチベーションの維持・学習計画の管理が難しい

オンラインスクールのポイント

スクールが提供するWeb教材・動画教材を活用し学習を進め、スキルを身に付けていきます。オンライン学習で好きな時間に学習を進めることができるため、隙間時間を有効活用した効率的が学習が可能。オンラインスクールも学習期間・費用も様々なため、自分に合ったスクール選びが必要です。

講師とはオンライン上のコミュニケーションツールを活用しながら、決まった時間に質問ができます。オンラインセミナーやオンラインイベントが企画されているスクールも多いようです。

オンラインスクールに興味がある方はこちらの記事をご覧ください。

未経験可の求人に応募し現場で学ぶ

メリット
  • Web制作の現場で実務を通してWebデザインのスキルを身に付けられる
  • 業務時間内にWebデザインを学習をすることができる
  • 職場の先輩Webデザイナーに相談ができる
デメリット
  • 完全未経験でWebデザイナーの仕事を見つけるのが難しい
  • Webデザインの学習経験がない場合は、自分に合っている仕事かどうかの判断がつかない

未経験から現場で学ぶポイント

企業の社内研修を経て、Webデザイナーとしてスキルアップを目指します。Web制作の現場でスキルを磨きながら実務経験を積むことができることが大きな魅力です。

現役のWebデザイナーに学習方法をインタビュー

私が運営に関わるデジLIGでは、Webデザイナーとして活躍しているトレーナー(講師)とWeb制作会社LIGで働くWebデザイナーから実践的な学びを得ることができます。実際にデジLIGに携わるWebデザイナーの皆さんからWebデザインの学習方法やポイントや経験談を伺いましたので紹介します。

独学タイプ

ico独学は学習に費用がかからない点と、Webに関する知識や技術だけではなく、検索力や自己解決能力が身につくという点がメリットでした。
 
逆にデメリットと感じたのは、最短の学習方法や勉強に行き詰まったときに解決策を教えてくれる人がいないというところでしょうか。僕が学習していた時代と比べると現在は情報が多い時代なので当てはまるかはわかりませんが、学習にはとにかく時間がかかりました。独学のため一緒に学習する仲間もおらず情報交換をすることも難しかったですね。
 
デジLIG 中里トレーナー

ico独学で大変なこともたくさんあったけれど自分には合っていました!
 
私は自分の好きなものを作るために勉強を頑張っていたので、好きなものが作れるようになることでモチベーションが上がりました。勉強もやりたいときに進められるのがメリットですね。
 
でも独学が全員にとっては正解じゃないと思います。就職支援などのサポートがないため、自分に合う会社がわからず、遠回りしてしまう可能性があります。あとは背中を押してくれる仲間がいないのでモチベーションの維持には工夫が必要ですね。
 
LIGデザイナー おまめ

Webデザインスクール活用タイプ

icoWebデザインスクールを活用する学習のメリットは、なんといっても講師であるトレーナー陣からフィードバックをもらえることです!
 
初学者の多くがつまずくポイントは、自分が作ったデザインが本当に良いものになっているかどうかがわからないというところです。スキル上達の最短の近道は、講師からたくさんフィードバックをもらうこと。
 
デメリットは学習のためにまとまったお金が必要なことですね。でも、経験や時間を「買う」と考えたら、決して高くないと思います。
 
デジLIG 相原トレーナー

ico自分のサイトを形にできることが何より嬉しかったです。動画教材で無理なくステップアップしていけるので、モチベーションを保ったまま学習を続けられました。
 
また、現役のWebデザイナーの方々からお話を聞けるため、実際の働き方のイメージを持つこともできました。スクール時代のご縁で、卒業後に講師の方とお仕事をすることもあります。
 
キツかったのは、学費が高いこと。最高の施設・環境が揃っているので、その分しっかり元を取って欲しいと思います……!
 
デジLIG 石上トレーナー

未経験可の求人に応募し現場に飛び込むタイプ

icoWebデザイナーになる一番の近道は、未経験可の求人に応募し現場で実践的に学ぶことです! 私はインターンを活用して企業に飛び込んで働きながらWebデザインを学びました。
 
最初はわからないことだらけで辛い時期もあるかもしれませんが、自分のペースではなく、現場のペースで「勉強+仕事」をしなければならないので、グングン成長を感じることができました。
 
また、本や座学では学べないことを吸収できます。何より最前線で働く先輩Webデザイナーが身近にいることは、とっても刺激にもなります!
 
私は幸運なことにすごく素敵な環境で学ぶことができました。しかし場所によっては、インターン生に任せるのは雑用ばかりで、まったくWebデザイナーとして成長できない環境になってしまう場合などもあります。
 
環境選びにはかなり注意が必要だと思います……!
 
LIGデザイナー まいまい

Webデザイナーに求められる必要なスキル

ここではWebデザイナーに求められるスキルを紹介します。

デザインの基礎知識

デザインに関する基本的な知識を学び身に付ける必要があります。レイアウト・配色・フォントといったデザインの知識を始め、最新のWebデザインのトレンドをキャッチアップすることが重要です。

グラフィックツールやソフトの操作スキル

Webデザイナーとして活躍するには、Adobe Illustrator、Adobe Photoshopといったグラフィックソフトの操作方法を身に付け、使いこなしていくことが必要です。

コーディングやプログラミングスキル

Webサイト構成するHTML・CSSのコーディングスキルと動きを表現するJavaScriptのプログラミングスキルが必要です。

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

クライアントの要望をヒアリングするためにコミュニケーション力が必要です。

現役デザイナーにWebデザイナーに求められる役割とスキルをインタビューした記事がこちらになります。詳しく知りたい方はぜひご覧ください。

Webデザイナーを目指すために必要な準備は?

未経験からWebデザイナー目指すために必要なものを紹介します。

パソコンを用意する

Webデザインを行う上で、パソコンは必要不可欠なアイテムです。パソコンを選ぶ際は自分が行う作業に対してどこまでの性能が必要なのかを考え、予算を踏まえて検討しましょう。Webデザインの勉強をするにあたって、パソコンの購入を考えている場合、どのようなものがいいかを現役のWebデザイナーに質問してみました。

パソコンはMacかWindowsか?

業界的にパソコンはMacを使用しているデザイナーが多いです。Mac同士であればデータの送受信やりとりの手間が省けるメリットがありますが、必ずMacでなければらないというわけではありません。

パソコンのスペックに関して

メモリやストレージの大きさによって作業効率が大きく変わります。メモリは16GB程あればAdobeのソフトなどを開いたときでも、パッと画像が表示されたりと動作にストレスが少ないです。

ストレージは、256GB以上のものがおすすめです。128GBではAdobeのソフトを入れるだけで重くなってしまいますが、512GBあるとかなり余裕ができます。

Macの場合のインチ数は?

MacBookは15インチがおすすめです。Webデザインは縦長になる場合が多く、作業をしていると画面の縦幅が広いパソコンのほうが良いなと思うようになることがあります。

13インチのMacBookは、パソコン本体を持ち歩くことが多く本体の重さが気になる人におすすめです。また、自宅にサブモニターを置き、デュアルディスプレイ(2画面)にすることで効率よく作業することができます。サブモニターは、1〜2万円程度のものでもひとまずは十分です。

Windowsの場合の注意点は?

CPUはCorei5以上、メモリは16GB以上のものが望ましいです。Corei7・Corei9など数字が大きいほど性能が良くなる分価格も上がります。

デザインソフト・ツール

Adobe Photoshop

写真の編集や合成に用いる画像編集ソフトです。多くのWeb制作会社で使用されており、デザインカンプなどを作る際に使用されます。点の集まりでできた「ビットマップ」データを扱うソフトです。

Adobe Illustrator

Webサイトに使用されるロゴ・ボタン・アイコンやイラストパーツ作成に使用するソフトです。画像を拡大・縮小しても画質が劣化しない「ベクター」データを扱うソフトです。

Adobe XD

近年デザインの制作現場で使用されいる新しいデザインツールです。直感的な操作でWebサイトやアプリなどのUIデザインを設計するソフトです。コードなしでデザインのプロトタイプが作成でき、制作チームのメンバーに簡単に共有・共同作業ができ、効率的にデザインをブラッシュアップできます。

テキストエディタ

テキストファイルを作成・編集するためのテキストエディタです。HTMLやCSSなどを組み合わせ自由にデザインをすることができます。

Adobe社が提供するあらゆるWebデザイン・アプリデザインのためのソフトDreamweaver以外に、Windowsのメモ帳や、Macのテキストエディットなど、無料使えるテキストエディタもあるので、自分に合ったものを見つけるのがお勧めです。

Webデザイナーの将来性とは?

Web業界はテクノロジーの進化とともに拡大と成長を続けています。デザインの仕事は「人間ならではの想像力や感覚を必要とする」ため、AIやロボットといったテクノロジーに代替可能性が低いという見方があります。

Webデザイナーとしてクライアントの要望を満たしていくためにコミュニケーション力や企画力を高め、Web業界のトレンドや最新技術のキャッチアップを行い、Webデザインに求められる知識や技術の変化に合わせたスキルアップを図ることが重要です。

Webデザイナーの年収

Webデザイナー平均年収は約449万円となっています。地域別で比較すると最も平均年収が高い地方は関東地方で397万円。東京都は493万円の高水準です。パソコンがあればどこでも仕事ができる職種でもあるため、地方に生活の拠点を置きながら、東京の会社で仕事をしている人も多いです。

参考:求人ボックス

まずは独学で学習をはじめてみよう!

興味はある。でも本当に自分に合っているのかわからない……。というそこのあなたへ、まずは独学で学習を初めてみてはどうでしょう? 学習を進める中でWebデザインの面白さと私がよく受講生さんにおすすめしている方法や、サイト、本などを詳細します!

おすすめの学習方法

いろんなデザインに触れる

まずはインターネット上でWebサイトを調べ、様々なWebデザインに触れてみましょう。この後に紹介させていただきますが、デザイン性の高いWebサイトがまとめられたWebサイトや、デザインを学ぶ書籍は数え切れないほどあります。自分の用途に合ったサイトまとめ集や、読み進めやすい本を見つけてみてください。

また街中にもデザインは溢れています。ポスター、看板、フリーペーパーなどを見た際には、なぜそのフォントなのか? なぜその配色なのか? を考えていくことでデザイン力を磨くトレーニングになります。

SNSの活用

良いデザインを発信している人をフォローし、毎日最新のデザイン情報を収集しましょう。

自身の学びを発信すると、同じ目標に向かう人と出会うきっかけにもなります。「#Webデザイン勉強中」などのハッシュタクで、一緒に頑張る仲間と出会うこともあります。

うまくいけば、知り合ったデザイナーさんに自分の作品のレビューをいただくような機会もあるので、ぜひ積極的に活用していきましょう。

バナートレース・サイトトレース

Webデザインの勉強していると、バナートレースやサイトトレースという言葉が出てきます。トレースは「模写・真似」するといものです。トレースを通して、IllustratorやPhotoshopの操作方法の理解を深めることができます。

さらにスキルを高めていくには、トレースの制限時間を決め時間内にどこまで作り込めるかに挑戦をしてみたり、デザインを分析しながら、なぜそのフォント・レイアウト・配色・写真なのか? を考えてトレースを行い、考察結果を記録していくことをおすすめします。

おすすめのデザインサイト

1guu.jp(イチグウ)

1guu.jp(イチグウ)は優れたWebサイトのデザインリンク集です。両サイドにあるバーから「国別、業種別」にWebサイトを絞り込むことができます。

I/O 3000

I/O 3000では国内外問わず、Webデザインの参考になるサイトがまとめられており、カテゴリー別、色別にも調べることが可能です。Webデザインのトレンドを掴むのにおすすめのサイトです。

Pinterest

Pinterestはお気に入りの画像や動画を発見し保存・整理・ブックマーク・シェアできるサービスです。多くのデザイナーさんがPinterestを活用しています! 気になるデザインをピン(保存)することができ、ボード(フォルダ)で整理整頓できるので、お気に入りのデザインをストックしておくことができます。

おすすめのデザイン書籍

ノンデザイナーズ・デザインブック


デザイナーの基本を学べる20年間愛されている名書です。デザインを勉強するなら一度は読むことをおすすめします。デザインの基本原則を踏まえて、レイアウトやフォントのお話しなど、デザインの基礎を押さえられる1冊です。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉


こちらも長らく愛されているデザイン本です。デザインに必要な考え方を図やイラストを通して目で見て楽しめる形でわかりやすく学習することができます。

ソシム株式会社さんの本

3冊一気にご紹介します。


それぞれのテーマに沿ったデザインサンプルが、左側にNGのデザイン、右側にOKデザインが見開きで紹介されています。いまいちさんの苦悩の声と、いまいちさんの悩みにたいする、しゅっと先輩によるアドバイスにもほっこりします。たくさんのフツーのデザインとおしゃれなデザインを比較できるのもこの本の魅力です。

まとめ

今回の記事では、未経験からWebデザイナーになりたいと考えている方に向けて、Webデザイナーの具体的なお仕事内容をはじめ、働き方、キャリア、Webデザイナーの将来性をご紹介しました。

社会の変化とともにリモートワーク・在宅ワークなどの働き方にも多様性が求められています。働き方を見つめ直し、専門性を高めるために手に職をつけたい、柔軟な働き方をしたいと考える方は増えているでしょう。

これからWebデザイナーになりたいと興味をお持ちの方は、自分に合う学習方法を見つけ、実際に行動してみてください。行動していくことが知識と技術を習得する最短ルートだと思います!

以上、天でした!

働きながら。授業の合間に。Webデザインを勉強するなら……デジタルハリウッドSTUDIO by LIG

n u l l