未経験者がWebデザインを独学で勉強する方法を徹底解説【現役Webデザイナー直伝】

未経験者がWebデザインを独学で勉強する方法を徹底解説【現役Webデザイナー直伝】Webデザイン
まっしゅ
まっしゅ

これからWebデザインを学んでみたい。

でもどのようにすれば無駄なく適切に学べるか分からない。

このような悩みをお持ちの方のための記事です。

 Webデザインの「基礎スキル」
 Webデザインの「実践で使えるスキル」
 Webデザインの「発展スキル」
 Webデザインの「応用スキル」

と、Webデザインと言っても、各スキルによって学習方法は変わってきます。習得したいスキルに適した学習を行う必要があります。

梅干さない
梅干さない

本記事では、Webデザインの基礎面から応用面までどのように学習すると良いかを徹底解説します!

そもそもWebデザインとは?

Webデザインとは、ページの訪問者が目にする全てのものをいいます。それは、サイトの装飾だけでなく、機能や動きなどユーザーのとって使いやすさも含めた広い概念として扱われています。

ここには目的があります。会社は自社のサービス、商品を購入してもらうことを目指します。つまり、Webデザインも、ブランドイメージを作り、対象顧客の購買につなげることが目的なので。

Webデザイナーを目指す前に知るべき前提

梅干さない
梅干さない

Webデザイナーを目指す前に知っておく前提をはじめに話しておきますね!

Webデザインの敷居は下がっている

Webデザインを取り巻く環境は徐々に変わりつつあります。実は、WebデザイナーでなくてもWebサービスが作れる「NoCodeサービス」の開始や「WordPress」の普及で、スキルのない人でもWeb制作は可能です。

Webデザイナーの守備範囲は徐々に侵されているのです。これらを考えた時に、今後必要なスキルは、上記では実現できない、企業のより細かなニーズに対応できるスキルと言えます。例えば、JavaScriptであれば最低限2つ以上のライブラリ(JavaScriptを使いやすくしたものと考えてください)を扱えたり、バックエンドやマーケティングのスキルがあれば付加価値が高まります。初学者の学習範囲ではありませんが、本質的でWebデザイナーの目指すべきところです。

長い道のりが覚悟できるか?

Web上では「未経験からプロ並みに」や「未経験からフリーランスを目指す」など甘い言葉が踊ります。確かに、HTML、CSS、そしてPhotoshopやIllustratorのスキルは、最短4週間で基礎を固めることができます。

しかし、企業が求めるレベルに行くにはその先の時間の方が圧倒的に長いのです。学んで終わりではなく、2-3年ごとに新しいスキルのアップデートが求められます。この長い道のりを覚悟し、学習を進めるべきなのです。

私もスクールでWebデザインのメンターを担当したことがありますが、生徒さんで、途中で挫折した方は、「フリーランスで仕事したいから」「未経験からの就職に有利だから」という理由の方が多く、逆に途中で挫折せず続けた方は、デザインすることが面白いと感じる方でした。こちらの記事にあるように、長時間を犠牲にすることになるため、諦めを思いとどまらせるものは、理屈ではない面白さだという点には強く共感します。
長く続く人に共通していたことは、デザインに対する理由のない「好き」という感覚や作りたいサービスへの「ワクワク感」が強いということでした。

Webデザイナーになるための必要スキルとは?

梅干さない
梅干さない

Webデザイナーになるには、主に以下のスキル取得が必要です。

  • HTML(ページの構造に関する言語)
  • CSS(ページの装飾に関する言語)
  • JavaScript(機能に関する言語)
  • Photoshop(画像処理)
  • Illustrator(イラスト制作)

Webデザイナーは、グラフィックデザイナーのようにデザインのみではなく、HTML/CSSなどのコーディングスキルも必要となります。デザイナーとWebデザイナーの違いと言えます。

コーディングスキルは必要ないというWebデザイナーの方もいらっしゃいますが、企業案件を受けるとなると、コーディングスキルを所持していなければまず雇ってもらえません。

 参考:【初心者向け】大成するプロのWebデザイナーが大切にしている必要スキルとは?

基礎から応用まで学習ステップを徹底解説

Webデザインスキルの基礎から応用面までの学習ステップをまとめて紹介します!

最初にHTMLとCSSから初めてください。JavaScriptは毛色が違う言語であり、HTML、CSSの理解を前提とするため、応用と考えてください。また、Webデザインの基本はHTMLとCSSです。

PhotoshopとIllustratorの学習はそこそこにHTMLとCSSの学習により時間を割くと良いでしょう。

梅干さない
梅干さない

以下にて基礎固め〜応用編までの学習ステップの詳細を紹介します!

  • STEP1
    基礎学習

     目的:HTML、CSS、Photoshop、Illustratorの基本操作を知る。

    created by Rinker
    技術評論社
    ¥2,178(2020/10/20 11:57:09時点 Amazon調べ-詳細)
    created by Rinker
    技術評論社
    ¥2,068(2020/10/20 11:57:10時点 Amazon調べ-詳細)

    基礎学習は上記で学ぶことをおすすめします。ただここにあまり時間を使わなくてOKです。

  • STEP2
    基礎定着
     目的:実際に簡易的作品を作り、基本的なタグの使い方に慣れる。

    簡易的な構造のページを5つほど作ってください。
    何度も手を動かし、エラー→解決を繰り返すことこそ最も重要なことです。

  • STEP3
    発展学習
     目的:スマホへのデザイン対応やJavaScriptの基本を理解する。

    基礎の定着が完了したら、いよいよ発展学習です。下記学習サービスを利用することで一気に学習を進めましょう。

  • STEP4
    作品制作とポートフォリオ作成
     目的:Step3までの知識でを作品を3つ以上作り、それをポートフォリオとしてまとめる。

    作品は出来上がったら人に見せましょう。サイトの構造やタグの選択に注意しましょう。

    ここまでのレベルとなるとある程度Webデザイナーとして確立されています。

  • STEP5
    応用
     目的:アニメーションの作成やjQueryやVue.jsといったjsライブラリの使用ができる。

    現段階でも企業案件を取得することは可能でしょうが、飽くなき勉学の先にさらに幸福は待っているものです。さらなる応用を学び、他者にないスキルを身につけましょう。

    ここまでくるとUdemyくらいしか現状で学べるサービスは存在しておりません。Udemyにある動画を閲覧しながらスキルを磨きましょう。

Webデザインを勉強する上で参考になるオンライン学習教材

梅干さない
梅干さない

基礎面(Step1とStep2)を学ぶ上では、書籍もですが、低価格のオンラインサービスを利用することをおすすめしています。

以下は、日本でよく知られたサービスです。下記のコースを受けてみて、学習が直感的に「面白い」と思えば、Step3以降に進めても良いでしょう。

サービス名メリットデメリット
Udemy実践的なコースが学べる。
Udemy以上に優れた学習サービスは今の所ない。
買い切りのサービスのため、月額が発生しない。
×無料コンテンツはほとんんどない。
ドットインストールコーディングの基礎が学べる。
平均2-3分の動画でポイントが絞られており、わかりやすい。
プログラミング言語の幅が広い。
×コースを修了しても作品を作れるようにはならない。
×HTML、CSS、JavaScriptは学べても、デザインは学べない。
Progate作品を作りつつ、基礎を学べる。
手を動かし一定の作品を作る。
×簡易的な作品は作れるが実践的ではない。
×プログラミングスキルに特化しており、デザインは学べない。
Schoo基礎スキルが一通り学べる。
様々な講師による講義が聞ける。
講義の種類が豊富
×簡易的な作品は作れるが実践的ではない。
Youtubeコンテンツが豊富×日本語より英語のコースが充実

 参考:【有名Webデザインスクール比較】社会人向けおすすめスクール6つを徹底比較!

手を動かすことでしかスキルは身につかない

上記のStep1の後、Step2に移ります。この段階で基本的なタグやプロパティ(コードの書き方)の使い方を理解しています。Webデザインの学習で大切なことは、とにかく手を動かし、コードを書くことです。

例えば、Youtubeで「html css チュートリアル」や「html css 入門」で検索してください。参考になる短時間のコースが見つかります。分からないうちは、コードをまねて、コーディングに慣れてください。そして、分からない点が出てきたら、必ず調べる癖をつけてください。

梅干さない
梅干さない

ただし、検索に時間を使いすぎてはいけません。この段階では、分からない点はメモして、先に進み、作品の完成を優先させる。ここがコツです!

独学でもWebデザインは学べるのか?

基本面(step2)まではWebデザインスクールに頼らずに独学でWebデザインは学ぶことができます。

ただし、一般的にはどれだけ頑張ってもStep4までです。それ以上はやはりどうしても限界が出てきます。また、独学の際は、以下に注意してください。

十分な時間が確保できるか?

上記のStep1からStep4まで1日10時間を使って、1ヶ月程度で進むことは可能です(人により差があります)。最低限、300時間程度は確保しましょう。

質問者、フィードバックをくれる人はいるか?

挫折する人の一番の理由は、自分でエラーを解決できないことです。

その場合に、すぐに人に聞ける環境であれば、「進んでいる」感覚を持ち、挫折しにくいです。また、書いたコードが良いのか悪いのか、初心者のうちは自分で判断できません。その際、近くにフィードバックをくれる人がいればスキルは上達します。まずは質問ができるオンラインコースなど(スクールではない)をお勧めします。

深堀はしないこと

例えば、HTMLだけでも全てを学習しようとすれば数ヶ月かけられます。しかし、それは効果的な学習とは言えません。プロのエンジニアでも調べながら業務をやっています。よく使う基本的スキルを学べば深掘りせず、次に次にと学習を続けていただくと良いですよ。

Webデザインスクールを活用する

Webデザインスクールを学習の初期段階から活用するというのも良い手でしょう。

最短距離で学習するなら、スクールの選択もお勧めです。

梅干さない
梅干さない

ただし選択の際、2つの注意点があります。こちらだけ事前にお伝えしておきます!

メンターの質を事前に確かめよ

実は、メンターと言っても卒業生であり、実務経験がない人も中にはいらっしゃいます。プロジェクトに関わった経験がないため、実務上のつまづきなど経験上のアドバイスができないのです。そこで、豊富な実務経験のあるメンターかどうかは、事前に確認してください。

コース終了後の就職紹介はあるか?

コース終了後に紹介できる企業案件数にスクールの力の差が表れます。紹介数が少なければ、自分で就職活動することとなり大変です。そこで、何件の紹介実績があるのか、直接聞くだけでなく、ネットでもリサーチしてください。

 参考:【有名Webデザインスクール比較】社会人向けおすすめスクール6つを徹底比較!

この記事のまとめ

独学のポイントは、Step4までの期間を効率よく終わらせることです。

Stepを更に進めようとすれば、実践的な企業案件を請け負うことが最も効果的です。そのために、案件獲得力のある企業に就職することが最も近道です。実際、チーム開発、バージョン管理など学習する項目は多岐に渡り、それを独学で行うことは無理があります。就職に強いWebデザインスクールに通う選択が有効なのもこの理由からです。

また、人によっては、別職種で入社し、エンジニアと仲良くなる中でプログラミングを覚え、部署移動する人もいます。多様な進路があるという点も覚えておいてください。

コメント