Webデザイナーに転職するには何を学べばいいかまとめてみた！

最終更新日：2024/08/09

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

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

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

目次 (PRも含まれます）

1 未経験のWebデザイナーが最低限持っておきたいスキルセット
2 HTML, CSS
3 JavaScript
4 Bootstrap
5 プロになる基礎から実践まで！WebデザインからHTML5・CSS3（Sass）でのコーディングを全て学べる講座
6 Webデザインで仕事を取る
7 Webデザインで転職する
8 Webデザインの独学でつまづいたら
9 Webデザインが学べるスクール
10 最後に
11 関連記事

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

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

HTML: Webページをマークアップする言語
CSS: HTMLにいろをつけたり、場所を変えたりできるスタイリング（装飾）する言語
JavaScript, jQuery: HTMLやCSSに動きをつけることができる言語
Bootstrap: HTML, CSSでおしゃれなデザインを簡単に作れるCSSフレームワーク
Illustrator: Webデザインを作成するAdobe製ツール
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については、以下の教材が無料で学べるのでおすすめです。

JavaScript

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

Bootstrap

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

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

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

Bootstrap 4入門 | ドットインストール

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

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

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

Webデザインで仕事を取る

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

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

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

Webデザインで転職する

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

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

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

DAI

ポートフォリオについては他人のポートフォリオや制作会社などの実績を見てみると参考になると思います。

参考：HomePageShop | 制作実績

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

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

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

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

その前に、以下のようなサイトで自分のつまづいているポイントを解決できないか、情報を探してみるのもおすすめです。
日本デザイン｜WEBデザインの知りたい！知りたかった！が見つかる情報サイト

株式会社日本デザインでは「Webデザインスキルで生き方・働き方をより幸せに、日本をより良い国にする。」を理念に、デザインスクールをはじめとした事業を展開しているので、確かな情報が手に入ります。