完全未経験者が3か月の独学でwebデザイナーになった勉強法

作成日:2019.03.04 最終更新日:2019.07.18

完全未経験者が3か月の独学でwebデザイナーになった勉強法

「全くの未経験だけど、webデザイナーになりたい!」
「独学でどうやって勉強すれば就職できる?」

webデザイナーになるために独学でwebデザインを学ぼうと思っても、「何をどう勉強すればいいかわからない!」ってなりますよね?

そんなあなたに、未経験からwebデザイナーになった男の勉強法を順序だてて、項目別に紹介します!

実はその男、たった3か月間、独学でwebデザイナーになるための勉強をして、Webデザインができる会社に入社しました。

この記事を読めば、「無駄なく、必要なものだけ、適切な順番で」webデザインの勉強ができます。

ほとんどの人は、未経験者に必要ないことまで勉強してしまって、就職・転職まで遠回りすることが多いです。

「webデザインの勉強をして、ちゃんと就職するのが目標」という方は、彼と同じステップで勉強すれば、たった3か月でwebデザイナーになることが可能です♪

【最短でwebデザイナーになるならこのスクールが最強!】

Tech Academy【Webデザインコース】

Code Camp-webデザインコース

webデザイナーになるための必須スキルを知っておこう!

webデザイン,勉強

webデザイナーになるには、「そもそもどんなスキルがあれば良いの?」というゴールを知っておかなければなりませんよね?

答えは以下の通り。

「下手でもいいからwebサイトをひと通り作れるスキル」です。

よくある間違い「めちゃくちゃおしゃれなデザイン」をできるようになろうとして、デザインばかりを勉強してしまうこと。

たしかにデザイン力はないよりあった方が良いですが、webデザイナーとしてまず就職することが目標なら、遠回りになってしまいます。

なぜなら、webデザイナーはデザインすることだけが仕事ではないからです。

もちろん、会社によっては、「webデザインの流れを理解していなくても、デザインがめっちゃできるなら、その人が欲しい」というところもありますが、かなりまれです。

なので、まずは「下手でもいいからwebサイトをひと通り作れるスキル」を習得することをゴールにしてください。

具体的には、面接を受ける前に以下の3つは習得する必要があります。

【未経験者がwebデザイナーになるために習得すべき必須スキル3つ】

  1. コーディングスキル
  2. デザインツールのスキル(使い方)
  3. デザインの知識・スキル

とりあえず、この3つを習得すればOKです!

この3つができればwebサイトを作ることができるので、webデザイナーのスタートラインに立てます。

「え?コーディングってあの呪文みたいなやつ…?」と不安に感じたかもしれませんが、コーディングができないとwebサイトは完成しません。

実際、今のwebデザイナーのほとんどはコーディングができます。

コーディングといっても、HTMLとCSSというwebサイトをデザイン通りに表現するための言語で、そこまで難しいものではないので安心してください。

むしろ、自分がデザインしたサイトをちゃんと形にできるのって、けっこう楽しいですよ♪

コーディングができてデザインツールが使えて、デザインできれば就職できるってことでいいんだよね?

うん!この3つさえ習得しちゃえば、「webサイトを自分で作れる」ってことだからね!
企業からしたら「このスキルがあれば仕事を任せられそうだな」と感じてくれるよ。

でも、他のサイトではillustrator(イラストレーター)とかプログラミング言語が必要って書いてあったよ?

たしかに一人前のwebデザイナーになるには必要かもしれない。
ただ、未経験からすべて学ぶ必要はないんだ。

雇う側が未経験者を雇用する時、初めから高いレベルは求めてないよ。
とりあえずこの3つのスキルがあれば働けるようになるから、あとは働きながら1つずつステップアップして、1人前のwebデザイナーを目指してほしいな!

そっか!3つだけならなんだかできそうな気がする~♪

webデザイナーになるための勉強方法と流れ

では、ここからは具体的に未経験から3か月でwebデザイナーになった男の勉強方法を紹介していきます。

勉強する順番は以下の通りです。

webデザインの勉強法

  1. コーディングを勉強する(参考書、オンライン学習ツール、模写)
  2. デザインツールを勉強する(Photoshopの使い方)
  3. デザインについて勉強する(本、プロのデザインを見る、実際に作る)

Step1. まずはコーディングから勉強するのがベスト!

webデザイン,勉強法,コーディング

「初めはデザインじゃないの?」と思ったかもしれませんが、最初にやるのはコーディングがおすすめです。

というのも、コーディングを初めにやると、「webサイトではどんなデザインができるか知れる」「webデザイナーとしての適性を見極められる」という2つの理由があるから。

特に、「webデザイナーとしての適性を見極められる」というのは重要で、コーディングが苦手で挫折してしまう人もいるんです。

また、デザインの勉強をするときにPhotoshop(フォトショップ)などのデザインツールを購入する必要もあるので、事前に適性を見極められると無駄なお金を払わずに勉強できるというメリットがあります。

webデザイナーの基本スキルとなるので、コーディングはしっかりと身につけておきましょう♪

コーディングの勉強方法

「コーディングというのは、具体的にどういうものなの?」と疑問に思った人もいるでしょう。

webデザイナーが担当するコーディングというのは、HTMLとCSSの2つがメインです。

HTMLとは、サイトの文章を記入したり、画像を挿入したり、リンクを貼ったり、webサイトの骨格を作るための言語です。

CSSは、HTMLで作ったコンテンツの色や形、向き、余白などを装飾する言語です。

言葉で説明されてもイメージできないと思いますので、今の時点で理解できなくても大丈夫です。学びながら理解できるようになるので。

HTMLとCSSの勉強法は、以下の手順で進めるのがおすすめです。

  1. 参考書とオンライン学習ツールで知識とスキルを高める
  2. webサイトを3~5つくらい模写する

参考書とオンライン学習ツールで知識とスキルを高め、最後に模写(今あるサイトを参考に、見た目通りにコーディングする)をやれば、働けるレベルまで上達できます。

最近は特にわかりやすい書籍や学習ツールがあるので、安心して始めてください。

参考書とオンライン学習ツールをやればいいんだね!

そう!HTMLとCSSは難しい言語じゃないから、参考書を1冊やって、オンライン学習ツールをやるだけで基礎知識は身につくよ!

でも、それだけで働けるレベルになるとは思えないなぁ。

そう言うと思った。基礎知識を身につけたら模写(もしゃ)をするといいよ!

webサイトを見つけて、そのデザインを元に1から自分のコーディングで再現する方法さ!

最初は、シンプルで動きの少ないwebサイトから真似するのがいいね。

モシャ?をやれば上手くなるってこと?

模写をすれば確実に上達するよ!

というのも、実際の現場でもデザインが決まったらそれを見ながら1からコーディングする流れだからね。

現場でおこなわれている作業と同じことをするんだから、そりゃ働けるレベルになるでしょ!

3~5サイトやるだけで飛躍的にコーディングはレベルアップするよ!いろんなデザインを模写するのがポイントだね!

でも、模写してもコーディングの答えを確認できなきゃ上達したことにならないんじゃない?

コーディングはまったく同じである必要はないよ。人によって再現の仕方は違うから。

答えを確認したい人は、GoogleChromeの「デバックツール」でそのサイトのコーディングが見れるから心配しないで!

模写しているサイトの画面で、macなら「command+option+I」、Windowsなら「F12」でデバックツールを開けるからやってみてね!

もしくは、右クリックして「ページのソースを表示」とすることでも、そのwebサイトのソースコードを確認できるよ!

HTMLとCSSの勉強におすすめの本

初心者がHTMLとCSSを勉強するときに本を使う場合は、「作りながら学べる」「基礎の基礎から学べる」ものを選ぶのがおすすめです。

以下の3つのうち1冊でも最後までやれば、基本的な知識とスキルは身につきます。

スラスラわかるHTML&CSSの基本

webデザイン,勉強,本

HTML、CSSの基礎中の基礎から学べる1冊です。

「HTML、CSSってなんやねん?」というレベルの人も勉強しやすい内容になっていますが、実際にカフェのサイトを作りながら学べるので、終わった時にはひと通りコーディングができるレベルになれます。

カラーページで作られているので、飽きずに勉強できますよ。

作りながら学ぶHTML/CSSデザインの教科書

webデザイン,勉強,本

1つのwebサイトを作り上げるのに必要な知識を網羅的に解説している1冊。

基礎から学べるだけでなく、現場で実際に使われているテクニックまで学べる内容になっています。

「なんでこのコードを使うの?」という部分まで知れるため、論理的に考える人におすすめです。

HTML5&CSS3標準デザイン講座

webデザイン,勉強,本

こちらも手を動かしながら学べる参考書です。

猫のサイトを作りながら学ぶのですが、説明がかなりわかりやすいです。

「なぜこのコーディングをするのか?」ということをしっかり理解できるので、自分でサイトを作る際にかなり役立ちます。

また、タグについても1つ1つ説明がついているので、いちいちネットで検索する必要がないのも便利です。

【おまけ】CSSデザイン逆引きレシピ

webデザイン,勉強,本

こちらはCSSでどんな装飾ができるか?を紹介している本です。

コーディングの基礎を紹介しているものではないのですが、「CSSでの様々な形の作り方」「グラデーションの作り方」「ボタンのデザイン」などを逆引き形式で紹介しています。

webサイトで表現できないデザインを作っても意味がないので、「CSSで何ができるか?」を知っておくのはwebデザイナーに必須となるので、見ておいて損はないですよ♪

図書館にあるかもしれません。

最初の3冊ならどれでもいいの?

どれでもいいよ!内容はほとんど変わらないし。ただ、HTMLとCSSって言葉自体はじめてな人は、「スラスラわかるHTML&CSSの基本」がいいかもしれないね。

オマツザキオの部下はどれ使ってたの?

HTML5&CSS3標準デザイン講座を使ってたよ。あと、CSSデザイン逆引きレシピは眺めるだけでも勉強になるって言ってたぞ!

HTML&CSSを学べるオンライン学習ツール

オンライン学習ツールは、実際に自分の手でコードを書きながら学べるので、効率的にスキルが身につきます。

「progate」「ドットインストール」のHTMLとCSSをやれば、本で学んだ内容をさらにブラッシュアップできるのでおすすめです。

もちろん、本より先にオンライン学習ツールからはじめてもOK!

progate(プロゲート)

progate,プロゲート

progateは、必要な知識を簡潔に教えてくれるだけでなく、知識を学んですぐにコーディングできる学習ツールです。

1項目の解説が終わったら、すぐに学んだことをコードで書ける仕様になっていて、インプット→アウトプットを効率的に行えるので身につく速度が段違いです。

また、「どのコーディングが間違っているか」も教えてくれるので、「自分ができていないのはこれか!」とその場で気づかせてくれるのも学習効率が良いですね。

もちろん、同じレッスンを何度も受けられるので、身につくまで学習できます。

また、無料で始められるので初心者も勉強が始めやすいです。

勉強を進めていくと有料コースに変更する必要がありますが、月額1,000円以下なのも嬉しいところ。

HTMLとCSSのほかにも、webサイトに動きをつける「jQuery」「JavaScript」なんかも学べるので、とりあえず無料登録しておいて損はありません。

「参考書とか苦手」っていうキャバコみたいな人は、Progateがおすすめだよ♪テキストエディタも用意する必要がないから、とりあえずコーディングの練習もできるしね。全体像をProgateでつかむのもありだ!

ドットインストール

ドットインストール

ドットインストールは、HTMLやCSSなどを実際にコーディングしながらわかりやすく解説してくれる動画です。

コーディングのやり方を優しく教えてくれるだけでなく、プロのコーディングの入力画面を動画で見れるので、効率的にコーディングする方法まで盗めちゃいます(ショートカットキーの解説はないですが、どんな効率的なコーディング方法があるか学べます)。

動画1つが3分に短くまとめてあるので勉強しやすいですし、「これなんだっけ?」と忘れてしまった項目の復習にも便利♪

もちろん全て無料です。

テキストエディタをダウンロードしておこう!

コーディングを勉強するには、「テキストエディタ」というコードを書くツールが必要です。

テキストエディタは様々なツールがありますが、「Visual Studio Code(ヴィジュアルスタジオコード)」か「SUBLIME TEXT(サブライムテキスト)」、「ATOM(アトム)」が高機能で人気です。

無料なので、コーディングの勉強を始める際はダウンロードしておきましょう!

好きなものを使えばOKですが、日本語対応をしているのはVisual Studio Codeのみです。

Mac、Windowsのどちらにも対応しています。

progateやってみたけど、すごくわかりやすいね!かわいいし!

そうでしょ!progateはプログラマーからも人気の学習サービスで、わかりやすさに定評があるよ♪ドットインストールも超有名サイトだから使ってみて!

テキストエディタなんだけど、オマツザキオはどれ使ってるの?

ぼくは最近Visual Studio Codeにしたよ!他のプログラマーにも人気なんだけど、使ってみて理由が分かったよ!ここでは割愛するけど、かなり使いやすいぜ♪

Step2. デザインツール「Photoshop」の基礎を学ぼう!

webデザイン,勉強,photoshop

コーディングがひと通りできるようになったら、次は「デザインツール」の勉強を始めましょう!

デザインツールはとりあえず「Photoshop」だけでOKです。

というのも、Photoshopさえ使えればwebデザインができてしまうから。

実務では「illustrator」を使う機会もありますが、photoshopのほうが使う比率は高いですし、デザインツールにPhotoshopを採用している企業が圧倒的に多いです。

なので、初めはPhotoshopの使い方を学びましょう!

ただ、Photoshopには覚えきれないくらいたくさんの機能があるのですが、それらの機能をすべて使えるようにする必要はありません。

実は、webデザインで使うPhotoshopの機能は限られているんです。

【webデザイナーが抑えておくべきPhotoshopの機能6つ】

  1. 選択範囲と画像の操作
  2. レイヤー
  3. ブラシ・シェイプ・グラデーション
  4. テキストツール
  5. マスク
  6. 色調補正とレタッチ

この6つの機能が使えればwebデザインは大体できちゃうので、項目を絞って効率的に勉強しましょう!

正直、Photoshopの参考書を買う必要はありません。

ネットで検索すれば情報はヒットしますし、動画でわかりやすく解説しているもので十分だからです。

Adobe(アドビ)社が提供する「Photoshopチュートリアル」だけでも、使い方を十分マスターできるでしょう。

Photoshopの使い方

Photoshop CCのチュートリアル

「Photoshopを体系的に学びたい!」という方は、「Udemy」というオンライン学習サービスで学べます。

あとは「使っていれば自然にできるようになる」というのが正直なところ。

ちなみに、Photoshopのショートカットキーを使えると、効率的に早くデザインできるようになるのでおすすめです。

photoshopは月額2,500円~(年間契約)使えるので、コーディングの勉強が終わったら購入してみましょう!

Photoshopだけでいいんだね!

未経験の人には十分だよ。Sketch(スケッチ)とか、AdobeXDみたいなUIデザインで使うツールは入社してからで問題なし。とりあえずフォトショだ!

シンプルでいい感じだね!しかも、全ての機能を勉強する必要はないなんて最高!

よくすべての機能を勉強しようとする人がいるんだけど、そもそもPhotoshopは画像編集ソフトだから、webデザインで使わない機能のほうが多いんだ。それは時間の無駄だから、キャバコはやっちゃダメだよ。

ほーい。

Step3. デザインの勉強の流れ

webデザイン,勉強,デザインの学び方

デザインの勉強の流れですが、以下の順序で勉強すると効率的です。

  1. 基礎知識を得る
  2. プロの作ったサイトを見る
  3. 自分で作る

なぜこの順序が効率的かというと、デザインには絶対的な正解がないためです。

基礎知識を勉強するだけでも上手くなりませんし、オリジナルの方法でデザインしても良いデザインにはならないんです。

そのため、デザイン全体の基礎を学び、プロの作ったサイトで「なぜこのデザインなのか?」を学び、実際に自分で作ってスキルアップするという手順しかありません。

「なんとなく難しそう…」と感じたかもしれませんが、大丈夫。

やっぱりデザインの勉強は楽しいですよ♪

デザインの基礎知識を得るのにおすすめの本

デザインの基礎知識は、本から学びましょう!

写真でていねいに解説されていて、体系的に教えてもらえる以下の3冊がおすすめです。

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

webデザイン,勉強,本

ノンデザイナーズ・デザインブックは、webデザイン専用の本ではありませんが、すべてに共通するレイアウトデザインの基礎中の基礎である「デザインの4原則」について教えてくれます。

「デザインの4原則」を守っていれば、「素人っぽいなぁ…」というデザインから脱却できます。

ほとんどのwebデザイナーは読んでいると思うので、「デザインの勉強をしよう!」と思ったら初めに読んでほしいです!

なるほどデザイン

webデザイン,勉強,本

なるほどデザインもwebデザイン専門の本ではありませんが、「目的に合わせたデザインの考え方」が身につく本なので、ぜひ読んでほしい一冊です。

デザインを考えていると、たぶん多くの人が「どういうデザインにすればいいんだろう?」と手が止まるか、「なんとなくでデザインして目的を達成できないデザイン」をしてしまいます。

原因は「デザインの考え方」がわかっていないからです。

「なんでここにこの要素を配置したの?」「なんでこの色なの?」「なんでこの文字の大きさなの?」という部分を、webサイトの目的に沿って論理的にデザインできないと、良いデザインは生まれません。

そして「なるほどデザイン」には、「デザインの考え方」から「デザインをつくる流れ」、「デザインを良くするためのポイント」などが書かれているので、初心者がぶつかる壁を解決することができます。

この1冊だけでも、webデザインにおける理論をマスターできると思うので、読んでみてくださいね♪

ほんとに使えるユーザビリティ-より良いデザインへのシンプルなアプローチ-

webデザイン,勉強,本

こちらは、「UI(ユーザーインターフェイス)」というwebデザインの機能的な使いやすさについて書かれた本です。

UIについて知れば、デザインするときに「こっちのほうがユーザーは使いやすいし、理解できるだろう!」「こうすればユーザーが迷いにくい!」という機能面の判断ができるので、初めのうちから知っておくのがおすすめです。

UIと聞くと難しく聞こえるかもしれませんが、この本では身近にあるモノやサービス、もちろんwebサイトを引き合いに出して、「これはこうだから使いにくい」「ユーザーはこうやってwebサイトを使いたい」ということをユーモアたっぷりにわかりやすく紹介してくれているので、安心してくださいね!

ユーモアが多くて少し疲れますが、内容はわかりやすく、役に立ちます。

「ノンデザイナーズ・デザインブック」でデザインの基礎を学び、「なるほどデザイン」でデザインの考え方、「ほんとに使えるユーザービリティ」でどんなサイトなら見やすい・使いやすいかを学ぶ流れだね!
とりあえずこれくらい学べば素人デザインから抜け出せるよ!

プロの作ったデザインを見て学ぼう!

webデザイン,勉強,デザインの学び方

デザインの知識がある程度ついた時点で、次は「プロが作ったデザインを見て学ぶ」ステップに移行しましょう!

なぜプロのデザインを見たほうが良いかというと、正解に近いデザインを学ぶことができるからです。

採用されているデザインは、企業の目的を叶えるためにプロが時間をかけて作ったものなので、学べることは本より多いと思います。

実際にプロのデザインを見て学ぶのは、「なぜこのデザインは良いデザインなのか?」を考えられたり、「こんなデザイン方法があるのか!」と新しい発見ができるので、webデザインの勉強に最適です。

では、どうやって学べばよいか?方法は以下の通り。

  1. デザインギャラリーサイトで良いサイトを見つけて研究する
  2. そのサイトをトレースしてみる

ただ見るのではなく、ヘッダーや見出しのデザイン、文字のサイズ、色の使い方、フォントの種類、レイアウト、写真の使い方など、プロが作ったデザインのすべてを盗む気持ちで見ると良い勉強になりますよ♪

あとは盗んだデザインを自分のデザインに反映させれば、プロっぽいデザインが完成します。

また、Photoshopを使って、実際のデザインをトレース(模写)するのも、おすすめの勉強法です。

プロのデザインを見られるおすすめのギャラリーサイト

I/O3000

i/o3000

国内・海外問わず、優秀なwebサイトを見ることができるギャラリーサイトです。

カテゴリー、タグ、色、公開順に検索できるので、使いやすさも抜群。

また、シャッフル検索機能もあるので、毎日新しいデザインインスピレーションを得られるでしょう。

awwwards

海外のwebデザインギャラリーサイト

海外では有名なサイトで、投票によって掲載されるサイトが変わるギャラリーです。

「site of day」という機能があり、毎日注目のサイトを見ることができるので、飽きずに見られるでしょう。

ikesai.com

国内のwebギャラリーサイト

国内のイケてるサイトを集めたギャラリーです。

見たいジャンルのwebサイトに分けて紹介されているので探しやすいと思います。

 


 

ギャラリーサイトで見つけた良いデザインは、自分のパソコンにストックしておくのをおすすめします。

いつでも見られるので、デザインに迷ったときに素早くアイデアを引っ張り出せるからです。

Evernoteなどなんでもいいので、カテゴリーに分けて保存しておきましょう!

その際、どんなフォント、どんな色を使っているかなど、良いと思ったところを一言添えておくのもおすすめの方法。

webサイト全体のキャプチャーを保存するには、GoogleChromeの拡張機能「Full Page Screen Capcher」で簡単にできます。

webデザインのトレース(写す)方法

ギャラリーサイトで良さそうなデザインを見つけたら、今度はPhotoshopでそれをそのまま写してみましょう!

写すことで「どんな表現方法があるか?」「余白はどのくらいあけているか」「見出しと本文の文字サイズ」などもわかるので、かなり勉強になります。

見ているだけじゃ気づかないドロップシャドウが見つかったりするので、トレースするのは重要です。

やり方ですが、基本的にはデザインを写すだけなので見ながらやればOKです。

Photoshopに見本を貼り付けて、その上からなぞるだけでも大丈夫。

トレースの目的は、「なぜこのデザインは良いのか?」を実際に作って見つけることですから。

ただ、問題は「画像とかどうするの?」という部分だと思います。

画像については、GoogleChromeの拡張機能「Image Downloader」を使えば、そのサイトで使われている画像ファイルを一括でダウンロードすることができます。

ただ、背景画像として使われている場合はダウンロードできないので、Photoshopの長方形ツールなどで簡単に代用してください。

トレースの際は画像の内容よりも、配置や色、文字サイズ、フォント、余白の使い方、要素の目立たせ方などを意識して学ぶほうが重要になります。

トレースの目的を忘れないように気をつけましょう!

自分でwebサイトをデザインしよう!

webデザイン,勉強,実際に作る

ここまで来たら、あとは自分で架空のサイトをデザインしていくだけです。

デザインからコーディングまでひと通りやってみましょう!

作るサイトは架空のものなので、テーマはなんでもいいです。

  • 結果にコミットする整骨院のサイト
  • 海外の野菜を日本で栽培する農家のサイト
  • 不老不死になれる薬のサイト

こんな風に思いついたものでOK!

楽しく作っていきましょう♪

ただ1つポイントがあります。

それは「目的を達成できるwebサイトにすること」です。

というのも、webサイトを作る個人や会社には、webサイトを作る理由があるから。

集客、販売、ブランディングなど、目的を達成するための手段としてwebサイトを作るんです。

なので、架空のサイトを作る際も目的を1つ決めて、それを達成できるようにデザインするのがコツです。

ここまでやってきたことを反映させれば、絶対にできます。

そして、ここで作ったwebサイトは、就職面接のときに採用担当者にアピールできる作品となるので、本気で作りましょう!

できれば2つか3つくらいコーディングまでやったサイトを作れると良いですね♪

【最短でwebデザイナーになるならこのスクールが最強!】
Tech Academy【Webデザインコース】

Code Camp-webデザインコース

ここまでで学んできた、コーディング、デザインツールの使い方、デザインの知識・スキルをフル活用してwebサイトを作ってみよう!
実際にサイトを1つ作りきったら、webデザイナーの仕事を受けられるよ♪初めは時間がかかるかもしれないけど、めちゃくちゃ楽しいぞ!

就活前にもう少しレベルアップしたいなら…

ここまでの勉強で、就職することができるレベルになります。

ただ、もう少し時間があったり、まだ不安を感じたりするのであれば、さらに勉強をすると就職しやすいです。

具体的には以下の5つを勉強するのがおすすめです。

  1. jQuery
  2. bootstrap
  3. illustrator
  4. SEO
  5. コーディングのルール

jQuery

jQuery

jQuery(ジェイクエリー)は、webサイトに動きをつけるための言語です。

厳密に言うと、JavaScript(ジャバスクリプト)というプログラミング言語のフレームワーク(簡単にしたもの)のこと。

jQueryを使えば、webサイトにスライドショーをつけたり、ドロップダウンメニューをつけたり、カーソルをボタンに合わせたら色がキレイに変わるなどの効果をつけられます。

最近はjQueryを使えるデザイナーも増えているため、「スライドショーも実装できます!」と面接で言えたら有利になりますね。

Bootstrap

bootstrap

Bootstrap(ブートストラップ)は、CSSのフレームワークのことで、より簡単に、短時間でCSSの装飾ができるものです。

要素の横並びなどが簡単にできるので、コーディングの時間を大幅に減らすことができ、多くの企業で使われています。

比較的簡単に使えるので、「もっと速くコーディングできるようになりたい」という人は、勉強してみてください。

ドットインストールを見れば、ある程度の知識はつきます。

illustrator

illustrator,イラストレーター

illustrator(イラストレーター)は、webデザインの現場でもよく使われるデザインツールです。

ロゴの作成や、レスポンシブデザイン(スマホ対応したデザイン)に使われる画像やイラストを作る時に多く使われます。

同じAdobe製のPhotoshopを使えれば、操作性にそこまで大きな違いはないので、短期間で習得できます。

SEO

seo

SEO(search engine optimization)は、検索エンジン最適化のことで、webサイトを上位表示するための対策を指します。

webデザイナーはコーディングをするので、SEOについても知っておいた方が良いです。

というのもコーディングには、検索エンジン(Googleなど)に「このページではこんなことを言っています」というのをタグなどを使って伝える役割があるからです。

つまり、コーディングによってはGoogleに伝えたいことをうまく伝えられない…ということになり、どんなに良いサイトでも上位に表示されず、集客できないという事態になることも。

めちゃくちゃ詳しくなる必要はありませんが、「どうすればwebサイトって上位に表示されるの?」「SEOに最適なコーディング方法」くらいは少し調べておくと、採用の際に有利となるでしょう。

命名規則(コーディングのルール)

コーディングはチームでやることも多いです。

そのため、自分オリジナルの命名規則ばかりを使っていると、他の人が読みにくくなり、効率的にコーディングができないことにつながります。

そのため、「どんな命名規則(ルール)でコーディングをしているか?」を少し頭に入れておくと、働き始めた際に助かります。

もちろん、企業によってコーディングのルールは違うので1つに絞ることはできませんが、有名なのはGoogleで使われている「BEM(ベム)」というルールです。

時間があれば、BEMについても勉強しておくと良いでしょう。

BEMについて詳しく書かれた記事はこちら

もっと就活で有利な状況になりたいなら、jQuery、Bootstrap、illustrator、SEO、命名規則を勉強するとイイんだね!

そうだね!必ず必要ってわけじゃないけど、未経験なのにこの5つのスキルを持ってたら「やる気がすごくていいなぁ」と感じてもらえるよ!

もうここまできたら一人前だね(笑)

一人前だね(笑)だから、時間に余裕がある人だけで大丈夫だよ!

webデザイナーに就職するためのポートフォリオの作り方

未経験からwebデザイナーとして就職するには、ポートフォリオというあなたの作品集を作る必要があります。

なぜかというと、企業に「あなたが何をできるのか」を伝えなければならないから。

現役のwebデザイナーも、転職する際に絶対にポートフォリオを作成します。

とはいえ、作るのはけっこう簡単なので安心してください。

基本的には、これまで作ったwebサイトの横に説明を載せて紙に印刷するだけです。

  • そのサイトの目的
  • そのサイトのターゲット
  • 配色の理由
  • レイアウトの理由
  • フォントの理由など

「なぜこのデザインにしたのか?」ということを、明確に伝えられるように作るのがポイントになります。

イメージしにくいと思うから、うちの会社に入社してくれた未経験者のポートフォリオを紹介するよ♪

【就職面接で使ったポートフォリオの実例】

ポートフォリオの作り方

ポートフォリオの作り方

ポートフォリオの作り方

ポートフォリオの作り方

実際、未経験の場合は面接でそこまで深く聞かれることはありませんが、未経験だからこそ、ここまで考えられるとかなりポイントが高いです。

ただ、作ったwebサイトが1~3個くらいだと少し寂しくなります。

そこで、「作品を水増しする」という手を使いましょう!

作品を水増しするとは、架空のwebサイトのトップページの上半分くらいをデザインして、それをポートフォリオに追加するということです。

ポートフォリオを水増しする

水増しサイトでコーディングする必要はありません。

水増しサイトを6サイトくらい作れれば、立派なポートフォリオが出来上がります。

あとは、ポートフォリオを印刷してファイルに閉じれば、面接でアピールできるポートフォリオの完成となります。

WindowsならPowerPoint、MacならKeynoteで作っちゃえばOKです。

勉強中に作るwebサイトもポートフォリオに載せることになるので、真剣に作ってくださいね!

ポートフォリオってのが必要なんだね!

僕の部下は未経験で面接を受けた時に「ポートフォリオの提出を求められたことはない」って言ってたから、必要ないこともあるんだけど、自ら提出するだけで評価はうなぎ登りだよ!

うなぎ登り!?びゅーんって!?

未経験はハンデになるから、評価が上がることはすべてやったほうがいいね♪

びゅーん無視かよ!

webデザイナーになるためにおすすめのスクール

最後に、webデザイナーになるためにおすすめのスクールについて紹介します。

ここまで、独学でwebデザイナーになるための勉強法についてお話してきましたが、「やっぱり独学だと不安…」と感じる人もいるでしょう。

実際、オマツザキオの部下も独学だけで勉強した結果、10社面接に落ちています。

web業界は人手不足ですが、未経験で独学だとどうしてもハンデになってしまいます。

それは、「企業があなたがどこまで学んだかわからない。本当に使えるの?」という疑念が原因です。

では、この疑念をふっしょくするにはどうすればいいか?

お察しの通り、webデザインスクールを使えば解決できます。

【なぜwebデザインスクールを使うとイイの?】

  • 独学より圧倒的にスキルの習得が早い
  • 就職サポートがあるから有利(スキルを企業に共有)
  • プロがデザインを添削してくれるから上達しやすい
  • わからないところをすぐに聞けるから効率的
  • 実践で使えるスキルを学べる
  • 忙しくてもいつでもどこでも体系的に学べる

社会人なら12万9,000円、学生なら8万9,000円から一生もののスキルと就職先を用意してもらえる可能性が高いです。

独学でもwebデザイナーになるのは不可能ではないですが、スクールに通ったほうが効率的なのは間違いありません。

無料体験もあるので、気になる方は受講してみてください。

Tech Academy(テックアカデミー)【未経験者向け!現役Webデザイナーも認めるカリキュラム】

テックアカデミー,webデザインコース

学べること HTML/CSS/JavaScript/jQuery/Photoshop/デザイン知識/ワイヤーフレーム
料金 129,000円~
タイプ オンライン型
キャリアサポート あり

テックアカデミーでは、webデザインの基礎知識から応用まで学べるので、実務に沿った知識・スキルを身につけることができます。

社会人は129,000円から学ぶことができるので、ちょっとお得です。

また、webデザイン+αのコースもあるので、基礎以上のことをマスターしたい人におすすめ!

テックアカデミーのカリキュラムは、デザインするためのツールをただ学ぶだけでなく、Webデザインするうえで大切な「デザインの知識」も学べるからかなりおすすめだ!

え?デザイン知識を学べないWebデザインスクールもあるの?

あるある!だから気を付けて欲しい。

ツールだけを学べるスクールは「デザイン経験がある人」を対象としているから、未経験の人は不安が残ると思う。

未経験から現場でちゃんと使えるWebデザイナーのスキルを身につけたい人は、デザイン知識まで学べるテックアカデミーでOKだ♪

Code Camp【デザイン経験あり!コーディングなどだけを学びたい人向け】

学べること HTML/CSS/JavaScript/jQuery/Photoshop/illustrator/Bootstrap
料金 148,000円~
タイプ オンライン型
キャリアサポート あり

コードキャンプは、2万人以上に選ばれている超人気校です。

webデザインマスターコースでは、実際にカフェなどのwebサイトを作りながら学んでいきます。

コースを修了すれば、現場で使えるスキルを身につけることができますよ♪

また、キャリアサポートもあるので「未経験だから就職できるか不安…。」と心配する必要もありません。

コードキャンプも悪くないと思うぜ!

デザイン知識は学べないから、「これまでDTPとかでデザインをやってきたけど、Webデザインのやり方がわからない…」という、コーディング周りを最速で強くしたい人に使って欲しい。

全くデザイン経験がない人は使わないでくれ!

値段と雰囲気だけで決めないようにしようね!

コードキャンプならWebデザインで使うコーディングだけを教えてもらえるから、無駄なくWebデザイナーになれるぞ!

デザインは独学でも勉強できるけど、手に職をつけたいならプロに添削してもらうのが1番上達できるよ♪

特に、在宅・副業・フリーランスとして働きたいなら、実践的なスキルが必要だからね!

デザインにしろ、コーディングにしろ、プロがどんなところを気にしているかを知識として持っていれば、素人Webデザイナーから脱却できる。

他にも色々なスクールがあるから、スクールも気になっている人は以下の記事を参考にしてくれ!

Webデザインスクール・オンライン講座15社を徹底比較してみた!

未経験からwebデザイナーになるための独学での勉強法まとめ

  • webデザイナーに必須のスキルは「コーディングスキル」「デザインツールスキル」「デザインスキル」の3つ
  • まずはコーディング(HTML,CSS)を本・オンライン学習サービスで学ぶ
  • 2番目にデザインツールの使い方を学ぶ
  • 3番目にデザインについて学ぶ
  • 時間があるなら「jQuery」「Bootstrap」「illustrator」「SEO」「コーディング規約」を学ぶ
  • 就職するには水増ししたポートフォリオを作る必要がある
  • webデザインスクールに通うのが圧倒的に有利!

メニューを閉じる