最終更新日:

こんにちは、DAINOTE編集部のDAIです。 Webデザイナーに未経験からなりたいという方も多いのではないでしょうか。

  • Webデザインの何から勉強したらいいかわからない
  • Webデザイナーとして未経験から仕事を取る方法がわからない
  • Webデザイナーとして未経験から就職する方法がわからない

とお悩みのかた向けに、今回はWebデザイナーに未経験からなる方法について、まとめていきたいと思います。

未経験のWebデザイナーが最低限持っておきたいスキルセット

未経験のWebデザイナーが最低限持っておきたいスキルセットについて解説します。 最低限、以下のことを学習しておきましょう。

  1. HTML: Webページをマークアップする言語
  2. CSS: HTMLにいろをつけたり、場所を変えたりできるスタイリング(装飾)する言語
  3. JavaScript, jQuery: HTMLやCSSに動きをつけることができる言語
  4. Bootstrap: HTML, CSSでおしゃれなデザインを簡単に作れるCSSフレームワーク
  5. Illustrator: Webデザインを作成するAdobe製ツール
  6. Adobe XD: プロトタイプを作ることができる無料ツール

HTML, CSS

HTMLは、Webページをマークアップする言語です。 例えば、リンクがついたテキストをコーディングするときは、aタグを利用します。

<a href="www.google.com">Googleへアクセス</a>

こんな感じでマークアップします。他にも、例えば引用する場合は、

<blockquote>ここに引用する文章が入ります</blockquote>

みたいな感じでマークアップします。 一方で、CSSはこれらHTMLを修飾します。例えば、リンクの色を緑にしたい場合、

<a href="www.google.com">Googleへアクセス</a>

に対して、CSSで以下のように設定します。

a {   //要素を指定
color:green; //色を指定
} 

こうすると、HTMLで指定したリンクが緑いろになります。 こんな感じがHTMLとCSSのだいたいの説明になります。 HTML, CSSについては、以下の教材が無料で学べるのでおすすめです。

  1. HTML & CSS | Progate
  2. はじめてのHTML | ドットインストール

JavaScript

JavaScriptは、HTMLに動きをつける言語となります。 JavaScriptについては、以下の教材が無料で学べるのでおすすめです。

Bootstrap

Bootstrapは、HTML、CSSをコードを少なく、かつよく使うコーディングをまとめたフレームワークです。 例えば、ボタンのデザインも、普通CSSで色、大きさ、余白などをいちいち設定しなければいけないのですが、Bootstrapを導入することで、HTMLに以下のようにクラスを指定してあげるだけで、ボタンをおしゃれにすることができます。

<button class="btn btn-primary"">クリック!</button>

Bootstrapについては、以下の教材が有料ですが、多くのことを学べるのでおすすめです。

また、これらの最低限の実装知識に加えて、ゼロからWebデザインを行い、実装する方法については、以下の動画が非常にわかりやすいです。

プロになる基礎から実践まで!WebデザインからHTML5・CSS3(Sass)でのコーディングを全て学べる講座

こちらは、実際にゼロからWebデザインを考えてて、それを実装する流れを学ぶことができるUdemyの動画です。実際に僕もこれにしたがって、Webデザインを学びました。ここまでできれば、基本的には企業ホームページの案件を受託するくらいはできるようになるかと思います。 https://www.udemy.com/course/web-expert/

Webデザインで仕事を取る

Webデザインを未経験から仕事を取る方法は以下のステップで進めていけば大丈夫です。

  1. プログラミング、Webデザインの基礎を勉強する
  2. コピーでもいいので、一からWebサイトを公開する
  3. 実際に、クラウドソーシングのWeb制作案件での要望をみて、ゼロからサイトを公開してみる
  4. クラウドソーシングで営業して、案件を獲得してみる

まずはオリジナルのポートフォリオになるような、Webサイトを公開するところまでを短期的なゴールにして進めてみるのが良いでしょう。そのあとは、クラウドソーシングのWebサイトなどを利用してみるのがおすすめです。

Webデザインで転職する

Webデザイナーとして就職、転職するなら以下の方法がおすすめです。

  1. プログラミング、Webデザインの基礎を勉強する
  2. コピーでもいいので、一からWebサイトを公開する
  3. 実際に、クラウドソーシングのWeb制作案件での要望をみて、ゼロからサイトを公開してみる
  4. ポートフォリオを持って、Wantedlyや転職サイトを利用して転職活動を進める

Webデザイナーの転職でも、やはりポートフォリオが非常に重要になります。とにかく、実際に作ったものがない場合、面接官にやる気すら見せることができないので、仕事を取るときと同様に、まずは短期的にポートフォリオを作ることを目標にして進めましょう。

Webデザインの独学でつまづいたら

Webデザインの勉強をゼロから初めても、正直つまづくことは多いです。理由としては、

  1. 全体像があまりイメージできない
  2. コーディングでバグが起こって、どう解決していいかわからない
  3. 就職方法がわからない

などですね、正直、これらの課題を自分で解決することは、できなくはないんですが、多分8割くらいの人は積みます。 そういう場合は、Webデザインのスクールを利用するのがおすすめです。

Webデザインが学べるスクール

市場が大きくなりWebデザイナーの需要が高まっていることもあり、Webデザインを学べるスクールは増えてきています。 人気スクールを早速紹介しましょう。

  1. デジタルハリウッドSTUDIO by LIG: 教室でがっつりと学んで、フリーランスとして独立、または転職まで検討している人向け
  2. CodeCamp:デザインマスターコース :独学である程度自律的に、比較的安価で学習したい人向け
  3. TechAcademy:Webデザインコース: 独学である程度自律的に、比較的安価で学習したい人向け

自分にあったスクールの選び方については、下記記事にまとめましたので、ぜひ見てみてください!

【体験談あり】Webデザインを学べる受講者がおすすめしたプログラミングスクール3選

最後に

ということで、まとめです。

  1. Webデザイナーに未経験からなるなら、最低限ポートフォリオを作れるレベルまで勉強しよう
  2. もし独学につまづいたら、未経験からでも学べるWebデザイナースクールに行くのがおすすめ
  3. ポートフォリオを作ったら、ポートフォリオを元に転職活動をしよう

関連記事

【体験談あり】Webデザインを学べる受講者がおすすめしたプログラミングスクール3選