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

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

全くの未経験だけど、WEBデザイナーになりたい!

独学でどうやって勉強すれば就職できる?

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

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

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

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

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

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

やぁみんな!僕が現役WEBデザイナー社長のさかしだ。

WEBデザインは独学でも習得可能だから、この記事で勉強方法をじっくり学んで行ってね♪

「スクール代に30万円は正直怖い。。しかも先払い。」

WEBデザインスクールの料金に絶望していませんか?
実は、スクールに30万円支払う時代は終わりました。
WEBデザイナーの切符を勝ち取る!
プロの添削つきサブスク型スクール爆誕。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼

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サイトを自分で作れる」ってことだからね!
企業からしたら「WEBサイトを作れるなら雇ってみようかな」と感じてくれるよ。

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

たしかに一人前のWEBデザイナーになるには必要かもしれない。

ただ、未経験からすべてを学ぶ必要はないんだ。

雇う側が未経験者を雇用する時、初めから高いレベルは求めてないからね。

とりあえずこの3つのスキルがあれば働けるようになるから、あとは働きながら1つずつステップアップして、1人前のWEBデザイナーを目指してほしい!

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

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

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

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

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

webデザインの勉強法

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

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

コーディング

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

というのも、コーディングを初めにやると、「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を勉強するときに本を使う場合は、「作りながら学べる」「基礎の基礎から学べる」ものを選ぶのがおすすめです。

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

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

スラスラわかるHTML&CSSのきほん

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

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

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

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

大人気ブログ「Webクリエイターボックス」の管理人「Mana」さんが書いた、超人気コーディング本。

HTML/CSSのコーディングだけでなく、デザインやユーザビリティなどにも触れられており、お得感満載の内容となっています。

もちろんイラストや図解、写真をふんだんに使っているのでとてもわかりやすく、苦手意識を持たず、楽しくコーディングを学べます。

前半でコーディングやデザインの基礎を身につけ、後半は実際にサイトを作ることでインプットとアウトプットを一冊でできるのも嬉しいポイントです♪

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

cssデザイン逆引きレシピ_optimized

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

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

いくら良いデザインでも、WEBサイトで表現できないデザインを作っても意味がありませんよね?

「CSSで何ができるか?」を知っておくのは初心者WEBデザイナーに必須となるので、見ておいて損はないですよ♪

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

コーディング本はどれでもいいの?

どれでもいいよ!内容はほとんど変わらないし。

あと、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のどちらにも対応しています。

テキストエディタなんだけど、さかしはどれ使ってるの?

ぼくは最近Visual Studio Codeにしたよ!

他のプログラマーにも人気なんだけど、使ってみて理由が分かったね。

ここでは割愛するけど、かなり使いやすいぜ♪

とりあえずVS CodeでOKだ!

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

フォトショップ,Photoshop

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

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

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

実務では「illustrator」や「XD」というツールを使う機会もありますが、Photoshopのほうが使う比率は高いです。

実際、デザインツールにPhotoshopを採用している企業が圧倒的に多いですね。

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

ただ、Photoshopの機能をすべて使えるようにする必要はありません。

実は、Photoshopは超高機能ですが、WEBデザインの実務で使う機能は限られているのです。

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

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

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

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

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

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

Photoshop CCのチュートリアル

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

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

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

Photoshopは月額1,078円~(フォトプラン)使えるので、コーディングの勉強が終わったら購入してみましょう!

Photoshopだけでいいんだね!

未経験の人には十分だよ。

Sketch(スケッチ)とか、Adobe XDみたいなUIデザインで使うツールは入社してからで問題なし。

とりあえずフォトショだ!

シンプルでいい感じだね!

しかも、全ての機能を勉強する必要はないなんて最高!

よくすべての機能を勉強しようとする人がいるけど、そもそもPhotoshopは画像編集ソフトだから、WEBデザインで使わない機能のほうが多いんだ。

それは時間の無駄だから、キャバコはやっちゃダメだよ。

ほーい。

【Photoshop + Illustratorセットを安く買って学習リスクを減らそう!】
ヒューマンアカデミー たのまな 
※ 通常価格より3万円以上お得です(7万2,336円 → 3万9,980円~)。ヒューマンアカデミーの講座付き。

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

webデザイン勉強の流れ

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

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

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

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

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

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

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

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

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

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

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

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

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

「デザインの4原則(近接・整列・反復・コントラスト)」を守っていれば、「素人っぽいなぁ…」というデザインから脱却できます。

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

なるほどデザイン

なるほどデザイン

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

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

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

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

つまり、デザイン1つ1つに「根拠となる考え方」を持つ必要があるのです。

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

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

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

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

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

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

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

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

  1. 「ノンデザイナーズ・デザインブック」 = デザインの基礎
  2. 「なるほどデザイン」 = デザインの考え方
  3. 「ほんとに使えるユーザービリティ」 = UI(ユーザビリティ)

を学ぶ流れだね!

とりあえずこれくらい学べば素人デザインから抜け出せるよ!

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

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

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

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

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

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

現場でもいろいろなWEBサイトのデザインをパクって(参考にして)、組み合わせてオリジナルのWEBデザインにブラッシュアップしていきますからね!

WEBデザインにおいて、パクる(参考にする)ことは正義です(もちろん、全く同じはダメです)。

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

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

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

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

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

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

SANKOU!

SANKOU!

日本のWEBサイトを探しやすく、たくさん集めてくれているだけでなく、LP(ランディングページ)のデザインも探せる超使えるギャラリーサイト。

配色やレイアウト、ジャンルイメージ、業界別、アニメーションなどからWEBサイトを探すこともできるので、作りたいイメージのWEBサイトを見つけやすいですよ♪

デザイン数も非常に豊富なので、見ているだけで毎日新しいデザインインスピレーションを得られるでしょう。

とりあえず、ギャラリーサイトはSANKOU!でOKと言えます。

現代デザイン

現代デザイン

「現代デザイン」は、その名の通り「今流行っているWEBデザイン」を探すことができるサイトです。

WEBデザイナーたるもの、古臭くてダサいデザインをするわけにはいきません(あえて古臭くする場合も、今っぽいデザインと組み合わせていることが多いです)。

なぜなら、ユーザーに「このサイトはダサいから、商品もショボそう…」と思わせてしまうから。

そのためWEBデザイナーは洋服のデザイナーと同じように、常に新しいデザインを取り入れておく必要があるのです。

新しいデザインの引き出しも増えていくので、ぜひチェックしてほしいサイトです!

ギャラリーサイトは「SANKOU!」と「現代WEBデザイン」さえ見ておけばOKだよ♪

足りなければ、以下ページにギャラリーサイトをまとめているから、必要に応じて追加していこう!

 


 

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

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

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

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

WEBサイト全体のキャプチャーを保存するには、Firefoxを使うと楽です。

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

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

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

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

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

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

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

トレースは1つのWEBサイトを完コピすることを意識しましょう!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみにコーディングでは、タブレット・スマホの画面サイズにも適応できる「レスポンシブデザイン」まで作ることを目標とするのがおすすめです。

今はスマホでのアクセス集めが非常に重要なので、「どうすればスマホサイズのWEBサイトを作れるか?」は最低限勉強しておくようにしてくださいね♪(Photoshopでタブレット・スマホサイズのデザインは作る必要ないです)

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

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

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

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

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

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

jQuery(ジェイクエリー)

jQuery

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

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

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

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

Bootstrap(ブートストラップ)

Bootstrap

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

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

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

ドットインストールを見たり、当サイトの記事で、大体使えるようになります。

Bootstrapとは?使い方を身につけ、Web制作速度を爆速にブーストしよう!

illustrator(イラストレーター)

イラストレーター,illustrator

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

ロゴの作成や、WEBサイトに使われるベクター画像(拡大・縮小しても画質が変わらない画像のこと)のイラストを作る時に多く使われます。

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

【Photoshop + Illustratorセットを安く買って学習リスクを減らそう!】
ヒューマンアカデミー たのまな 
※ 通常価格より3万円以上お得です(7万2,336円 → 3万9,980円~)。ヒューマンアカデミーの講座付き。

WordPress(ワードプレス )

WordPress,ワードプレス

WordPress(ワードプレス )とは、会社のWEBサイトなどを自分でカスタマイズしたり、情報をブログ感覚で更新することができる「CMS」という便利なソフトウェアのことです。

そして、WEBデザイナーになったら必ずと言っていいほどWord Press案件が回ってきます。

というのも、全世界のWEBサイトの1/3にWordPressが使われていると言われているからです。

つまりWordPressが何なのかすらわからないと、仕事の1/3を失うと言えます。。

WEBデザイナーとして生きていくなら、非常にヤバいですよね。

とはいえ、Word Pressの基礎は比較的簡単なので、「ワードプレスの機能」「ワードプレスの構造」「WEBデザイナーはどのファイルを触るのか」くらいをわかっておけば初めはOKです♪

HTML、CSSがわかっていれば意外とすんなり入ってくるので安心してください。

「Word Pressでサイトカスタマイズできます!」と面接で言えたら、かなり重宝されますよ♪

SEO

seo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

就職するためのポートフォリオの作り方

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

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

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

とはいえ、掲載するのはここまで練習で作ったWEBサイトですし、ポートフォリオ作成はけっこう簡単なので安心してください。

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

【ポートフォリオ作成で最低限載せておきたい情報】

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

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

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

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

実際に就職面接で使ったポートフォリオ

実際に就職面接で使ったポートフォリオ

実際に就職面接で使ったポートフォリオ

実際に就職面接で使ったポートフォリオ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

びゅーん無視かよ!

「一人で出来るかな…」と不安な方へ。WEBデザイナーになるためにおすすめのスクール

おすすめのWEBデザインスクール

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

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

「独学で本当に就職できるのかな?」「就職できても『使えないヤツだな』って思われたくない…」なんて感じてしまうと思います。

実際、さかしの部下(当時29歳)も独学だけで勉強した結果、10社面接に落ちました。

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

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

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

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

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

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

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

無料体験もあるので、「自分でできるかわからないなぁ」と感じた方、「より可能性の高い方法でWebデザイナーを目指したい」という方は受講してみてください。

WEB食いオンラインスクール【当社の赤字覚悟の格安WEBデザインスクール】

WEB食いオンラインスクール

学べること HTML/CSS/JavaScript/jQuery/Photoshop/illustrator/Bootstrap/現場で使えるデザイン知識/バナー作成/実際に公開するWEBサイト作成/必要ならプログラミングまで/githubなど
料金 入会金69,800円、月会費10,800円
タイプ オンライン型
キャリアサポート 企業への斡旋なし、相談・サポート可

WEB食いオンラインスクールは、当社が運営するWEBデザインスクールです。

社長のさかしのWEB制作愛のみで実現した、赤字覚悟の格安オンラインスクールとなっております。

他のスクールとの違いは、現役の「WEBデザイナー、WEBエンジニア、WEBマーケッター」であるさかしから、「現場で培った使えるスキル」をいつでも学べるという点でしょう。

特にWEBマーケッターの視点から「商品・サービスを売るためのデザイン」、WEBエンジニアの視点から「制作サイドにまで気を配ったWEBデザイン」なども学べるのは、WEB食いオンラインスクールのストロングポイントと言えます。

スクールの内容としては、現役WEBデザイナーさかしの経験から、WEBデザインは「とにかく作りまくる」→「プロに添削してもらう」というサイクルが1番上達するので、このサイクルを実践できる環境を用意してあります。

料金は安く設定してあるので、「本当はスクールで学びたいけど、お金が高いから独学にしようと思っている…」という人の助けになれるでしょう。

転職・案件獲得に必須の「高品質なオリジナル作品」も作りまくれます。

少し宣伝させてもらったけど、「WEB食いオンラインスクールが1番いいよ!」ってわけじゃないぜ!自分に合ったところをじっくり探してくれ!

何ちゃっかり宣伝してるのよ(笑)

でも、選択肢が多いのはいいことだよね!

気になった人はのぞいてみてね♪

「スクール代に30万円は正直怖い。。しかも先払い。」

WEBデザインスクールの料金に絶望していませんか?
実は、スクールに30万円支払う時代は終わりました。
WEBデザイナーの切符を勝ち取る!
プロの添削つきサブスク型スクール爆誕。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼

WEB食いオンラインスクールへのお申し込みはこちら
※未経験からの転職成功者、増産中!

Tech Academy(テックアカデミー)【無料体験あります。】

Tech Academy,テックアカデミー

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

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

社会人は12万9,000円から学ぶことができるので、「スクールが高いから独学を選んだ」という人も、比較的手を伸ばしやすいと思いますよ♪

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

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

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

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

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

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

Tech Academy【Webデザインコース】
※ 無料体験あります。

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

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

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

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

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

メニューを閉じる