Life is colourful.

Inspire yourself

未経験から独学でWebデザイナーの仕事を得るまでの具体的な道筋とヒント

f:id:mtasam:20180917110935j:plain

全く未経験の人がゼロからWebデザインを学んで、Webデザイナーとして仕事を得るまでの方法について、具体的かつ、わかりやすく書いてみる。

前半ではWebデザイナーのスキルに関して、学習の優先順位から勉強法のコツについて。後半では、Webデザイナー就職のヒント&アドバイスを詳しく解説している。

このページは、以下のような内容になっている。

 

また、ここでは「独学」を前提で書いているけれど、Webデザインをスクールで学ぶ手段もある。コストはかかるけれどプロから効率よく学べるというメリットがある。

スクールに行こうかなと迷っている人には、以下のページも参考に。 

関連ページWebデザインスクール経験者が教えるオススメの学校とその実態ー未経験からWebデザイナー、フリーランスになれる!?

 

未経験ウェブデザイナーに必要なスキルと知識

f:id:mtasam:20180917111221j:plain

まず初心者が学ぶべきWebデザイナーに必要なスキルについて。

Webデザイン初心者向けに便利なツールや優良な情報は以下にまとめているので、こちらも参考に。

関連ページWebデザイン初心者に役立つ良質なツールやサービス、おすすめ本を出し惜しみせず全部紹介

Webデザイナーとして飯を食っていくなら、以下の4つのスキルは抑えておきたい。

  1. Webデザイン
  2. HTML/CSS
  3. WordPress
  4. jQuery(Javascript)

未経験の人はまず、これらを一通り学びベースにした上で、自分の好みに応じて特定分野の専門性を伸ばしていくのがいいだろう。

デザイン寄りのスペシャリストになりたいなら色彩や配色の理論などを学び実績をつみ、開発サイドのエンジニアを目指すならPHP、Rubyなどのプログラミング言語を、Webマーケターや集客に興味があるなら、Web解析やSEO等のスキルを深めていこう。

以降で上の4つを順に解説していく。

 

 

1. Webデザインを独学する

まずはデザインスキルについて。

デザインができなくてもWebデザイナーにはなれる。後述のHTML/CSSを使えるだけでも、いちおう「Webデザイナー」と呼ばれる。

でもデザインはできたらすごく有利。

Webデザインができれば間違いなく有利

f:id:mtasam:20180913221746j:plain

「Webデザイン」とは、Photoshop(フォトショップ)やIllustrator(イラストレーター)、Adobe XDなどのグラフィックツールを使ってWebサイトのレイアウトや配色、バナーやボタンなど各種パーツを設計するスキルのこと。

Webデザインが少しでもできると、サイト構築の全体を見渡せる力がつくのでWebデザイナーとしての視野が広がる。

特に独立・フリーランスを目指す人は、確実に仕事の幅が広がるので損することはない。逆にデザインができなければWebサイト制作の依頼を請けても、デザイン部分は外注しなくてはいけなくなる。

なにはともあれ、グラフィックツール(Adobe CC)が必須!

f:id:mtasam:20180901010312j:plain

WebデザインにはIllustrator、Photoshopが必須。これからはAdobe XDも使いこなせたほうがいい。これらを全ツールを含んだパッケージ商品をAdobe CC(Adobe Creative Cloud)という。

デザイナーでAdobe CCを知らない人はいない。決して安いツールではないけれど、必須の仕事道具なので、ためらわず投資しよう。

Adobe CCはヒューマンアカデミーの通販で安く手に入れることができる。しかもオンライン講義動画がセットになっているので、初心者の人はPhotoshopやIllustratorの使い方も学べるのでまさに一石二鳥でおすすめ。

Adobeソフト+動画講座 最大82%off~

商品の概要や購入方法など詳しくは以下も参考にどうぞ。

関連ページ【格安2,483円/月】Adobe CC(Adobe Creative Cloud)を安く手に入れる

Webデザインの独学方法 ー まずは「真似(トレース)をする」ことから

Webデザインの勉強は、他人の作品を真似することから始めよう。

これはもう、デザインを学ぶ人みんながやること。いいデザインをお手本にして、観察&分析して自分の手で再現する。これをトレースという。

Webデザインスクールでもトレースはカリキュラムに組まれている。それくらい重要。

色彩や配色、レイアウトなどの理論を学ぶことも重要だけれど、お勉強はあとでいいので、とにかくツール(Photoshop/Illustrator)を使って手を動かすことが上達の近道。

例えば、ネットで下のようなデザインをみつけて「こういうの作りたいな!」と思ったら、即コピーしよう。

f:id:mtasam:20170603125806j:plain

Photoshopで開いて、デザインの各構成要素の大きさやカラーコードを調べるところから始まって、フォントの種類、マージンのサイズ、余白の配置、背景画像のテイスト、グラデーションやシャドー効果の設定値などまで、一旦全てを細かく分解・分析して、その後、自分の手で全く同じものを作ってみる。

f:id:mtasam:20180913233329j:plain

こうしてトレースを何度も繰り返していくと、デザインを見る目が肥えて「なぜそのデザインがいいか」が理解できるようになる。結果、いいデザインを生み出すことができるようになる。 

おすすめは「バナー」デザインから

f:id:mtasam:20160714152534j:plain
上で解説した「トレース」の練習をするなら、バナーデザインを材料にするのがおすすめ。理由は以下の通り。

  • 制作時間が短いので練習が手軽
  • プロのテクニックが凝縮されている
  • 色んなテイストのデザインを学べる
  • バナーデザインができれば、それだけで仕事がある

最初からホームページ1ページを丸々トレースしようとすると、かなりしんどい。時間が掛かってダレて気持ちが折れる。

その点、バナーならサイズはせいぜい300x250px等なので、1つ作るのにそれほど時間はかからない。その上、バナーはデザインスペースこそ小さいけれど、その中にデザイナーのテクニックが凝縮されているので、とてもいいお手本になる。

f:id:mtasam:20170603125809j:plain f:id:mtasam:20170603125802j:plain

僕の場合はデザインの勉強を始めて半年間くらいは、実績作りもかねてLancersでバナーデザイン(上図のような)をひたすら作ってコンペに投げていた。

3ヶ月くらいで売れるバナーが作れるようになり、最終的には800個ほどになった。このときの作品実績は今でも大切な財産でポートフォリオにも使っている。

ネット上にはプロが作った洗練されたバナー広告が溢れているので、いいデザインはどんどん真似してテクニックを盗んで自分のスキルにしていくと良い。バナーだと「1日1個トレースする」とかノルマを決めて継続もしやすい。

バナーデザインについて詳しくは以下にもまとめている。

 

2. HTML/CSSを独学する

HTML/CSSとはWebサイト作るための言語のこと。Webデザイナーになるなら、しっかりとマスターしておこう。

さすがに、これができないとWebデザイナーとは言えない。

HTML/CSSは難しくない!まずは基本を押さえる

f:id:mtasam:20170311145138j:plain
HTML/CSSはそれほど難しくないので、短期集中で基本を押さえてしまおう。

HTML/CSSを勉強する方法はいくらでもあって、

などのオンライン学習を利用すれば、今すぐにでも無料で学習を始められる。

HTMLは<div>や<p>といったタグを使ってWebサイトのパーツを構成するもの、CSSは各パーツの配置や色など決めてWebサイトを装飾するためのもの。

HTML/CSSの全てを完璧に暗記する必要はなくて、コアだけはきっちり押さえて、あとは以下のようなリファレンスを随時使いながらWebサイトを作れれば良い。
HTMLクイックリファレンス

HTML/CSSを書籍で勉強したいという人は、こちらがおすすめ。完全初心者向け。

次のステップがこちら。

基本を押さえたら自分の手でサイトを作ろう

オンライン学習や書籍でHTML/CSSの基礎を身につけたあとは、実際にWebサイトを作ってみよう。

初心者が学習初期に「自分の手でゼロから実際にサイトを作る」経験をしておくのはとても大事なこと。まずは5ページくらいのWebサイトでいいのでやってみよう。

こちらの書籍を使えば、材料と解説は整っているので便利。

この本は中級者向けなので、これがクリアできればまずはWebデザイナーとしてOK。

エディタはBracketsがイチオシ

f:id:mtasam:20180914225138j:plain

HTML/CSSを記述するにはエディタというツールが必要。メモ帳の強化版みたいなイメージ。

エディタも有料・無料色々あってsublimeやAtom、Vimが有名。Adobe CCを購入すればDream Weaverが含まれているのでこれを使っている人も多い。

人によっておすすめも違うのだけれど、初心者ならとりあえずAdobeが無料で提供している「Brackets」で始めればいいと思う。

初めから日本語環境だし無料、シンプルで機能も十分。初心者にやさしいし、なに不自由ない。

 

 

3. WordPressを独学する

f:id:mtasam:20160529231420j:plain

WordPressはWebサイトを簡単に作れるツールのこと。

今やIT専門外の素人でもWordPressを使ってブログを運営する時代。もちろんブログだけでなく、世界中のウェブサイトの40%はWordPressで作られているという状況にある。

WordPressを触れないWebデザイナーは「時代遅れ」かもしれないが、逆に言えばWordPressの仕事はとても多いので、できるとすごく有利になる。

どれくらいWordPressができればいいのか?

では、WordPressができます!と胸を張れるのはどのレベルか?

「WordPressでブログを作れます」だけではダメ。Webデザイナーが「WordPressできます」というなら、少なくとも

  • オリジナルテーマを作れる
  • WordPressで企業サイトを作れる

最低限この2つができるレベルにあるべきだろう。もちろん、HTML/CSSは理解していることは大前提。

つまり、WordPress仕組みを理解していて

  • クライアントの要望に応じてカスタマイズできる
  • 不具合が生じたときに解決できる

くらいのレベル。もちろんPHP、MySQLもマスターしているに越したことはないけれど、まずはここを目指そう。

WordPressの勉強方法 ー 仕組みをまず理解しよう

まずは、WordPressってどういう仕組みで動いているの?という本質的な部分をきちんと理解しておくとよい。全体のイメージがしっかりできるとブレない。以下のページが参考になる。

参考まず最初に学ぶべきWordPressの本質 | hijiriworld Web

初心者だと上の解説は難しいかもしれないけれど、最初は気にせず、勉強を進めていく中で何度か読み返せば自ずと理解できるようになる。

テーマの作り方はこちらが参考になる。

参考WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

HTML/CSSの学習と同様、実際に自分でWordPressでWebサイトを作ってみるといい。制作の全体像が把握できて、とても良い練習になる。上述した通り、自分でテーマを作って、ビジネスサイトを制作してみるのがベスト。

いきなりゼロからテーマ作成は難しいので、書籍を使うのも良い。以下がおすすめ。

 

 

 

 

3. JavaScript(jQuery)の独学

f:id:mtasam:20180918013012j:plain

JavaScriptは「Webサイトに動きをつけてくれるもの」。(簡単に言うと)

HTML/CSSを動的に変化させて、例えば、写真をサッとスライドさせたり、パッと飛び出させたり、画面をヌルッとスクロールさせたりといった感じに。

とにかく、このJavaScriptが使いこなせればとても重宝がられることは確実。

とりあえずはjQueryだけでもいい

JavaScriptはプログラミング言語の一つで、使えればとにかく便利で楽しいけれど、HTML/CSSに比べると習得のハードルも高いのが事実。

Webデザイナーでもプログラミングは苦手な人はたくさんいるので、JavaScriptまではきない…という人も多い。そこで、せめて初心者が習得しておきたいのがjQuery。

jQueryはJavaScriptの簡易版で、色んな機能を手軽に実装できるようにしたもの。JavaScriptのコードが書けない人でも簡単に使えてしまう。

jQueryでどんなことができるかは、以下にわかりやすくサンプルがまとめられている。

参考『jQuery 最高の教科書』サンプルサイト

jQueryの勉強方法 ー ハマったらJavaScriptへステップアップ!

jQueryの勉強も、とにかく手を動かしてどんどん作っていくに限る。

上述の通り、jQueryは色んなアニメーション効果を自分の手で実装できるので、勉強していて楽しいし、ハマっていく人も多いだろう。「もっと深めたいな」と思ったら、ためらいなくJavaScriptへ進もう。

とりあえず一つ書籍を買うといい。下の2つが有名どころ。

 

 

 

 

未経験からWebデザイナーの仕事を得る方法

f:id:mtasam:20170310223045j:plain

仕事探しの前に、まずはポートフォリオを作ろう。

Webデザイナーのポートフォリオとは、これまでに自分が制作したWebサイトやバナーなどの作品集のこと。自信作をまとめてWeb上に公開しておくとよい。

ただ、職種や仕事の探し方によってはポートフォリオは不要なこともあるし、初心者がいきなりポートフォリオと言われても難しいかもしれない。ポートフォリオがなくてもWebデザインの仕事に就けないわけではないので、学びながら実績を積んでいけばよい。

Webデザイナーの仕事探し5つの方法

Webデザインの仕事を得る方法を5つ紹介してみる。

  1. スクールの就職サポートを利用する
  2. 転職エージェントを利用する
  3. インハウスデザイナーの求人を狙う
  4. クラウドソーシング、ココナラで仕事を請ける
  5. ブログを運営してスキルを売る

以降で一つずつ詳しく解説していこう。

 

 

1. Webデザインスクールの就職サポートを利用する

f:id:mtasam:20180917110940j:plain

スクールでWebデザインを学ぶ人は、スクールが用意している就職・転職サポートを利用しよう。これを使わない手はない。

IT・WebスクールはたいていWeb業界と繋がっていて、企業がスクールの学生向けに求人案件を回していたり、講師が現役または元Webデザイナーというケースも少なくない。ツテや人脈が期待できる。

転職サポートが充実しているWebデザインスクール

WebCamp PRO|転職保証付きプログラミングスクール

WEBCAMP PRO(ウェブキャンプ プロ)は、転職・就職保証型のIT・Webスクール。 「コース受講完了後、3ヶ月以内に転職・就職できない場合は全額返金」が保証されている。

TECH::EXPERT|未経験のITエンジニア転職なら

TECH::EXPERT(テックエキスパート)は転職率97%を誇る即戦力エンジニア養成プログラム。こちらも「転職できなければ全額返金」を掲げている。

KENスクール|強力な転職サポート

KENスクールの母体は、ITシステム開発・人材紹介の事業を行うIT企業で、IT・Web業界に強力なコネクションがある。受講生対象の非公開求人も多く、キャリアコンサルタントがコース受講中から相談にのってくれる。卒業生の就職率は83%。

 

 

2. IT・Web系の転職エージェントを利用する

f:id:mtasam:20180917170750j:plain

IT企業やWeb制作会社、広告代理店などでWebデザイナー・エンジニアの仕事に就きたいなら、転職エージェントを利用するのが最も一般的で無難。

実力が伴えば、大手で条件の良い求人案件にも出会えるだろう。IT・Webの人材は不足の傾向にあるので現時点でやや実力が足りなくとも、エージェントに登録しておけばキャリアコンサルタントがキャリアパスを一緒に考えてくれる。チャンスは巡ってくる。 マッチング(採用)成功すればエージェント側は報酬が得られるので、どんどん案件を紹介してくれる。

IT・Web業界で優良な転職エージェント

f:id:mtasam:20180917175956j:plain

IT・Webのクリエイター専門の転職エージェントは多数ある。それぞれ持っている案件も異なるので複数に登録しておくとよい。

 

レバテックキャリア

レバテックキャリアは、IT・Web専門の転職エージェントで、エンジニア・クリエイターの就職・転職ならとりあえずはここ、というほどの知名度と信頼性の高さ。業界トップクラス4,000件超の求人登録数、非公開求人数も多数。職務経歴書の添削、模擬面談で事前準備も徹底サポートしてくれる。

マイナビクリエイター

マイナビクリエイターは、Webデザイナー・クリエイター専門エージェント。業界専門のキャリアコンサルタントが転職をサポートしてくれる。会員には無料でポートフォリオ作成サービス「MATCHBOX」も提供している。

WORKPORT

ワークポートは元々はIT・Web業界特化のエージェントで約2000社との取引実績が有る。非公開求人も豊富で、IT・Web系の専門性の高い転職サポートをしてくれる。

レバテックフリーランス

上のレバテックキャリアと同運営のフリーランス専門の転職エージェント。将来独立を考えている人は、こちらに登録しておくと良い。条件の良い良質な業務委託案件等を豊富に扱っている。

上記以外に、IT・Web特化でなくても大手のエージェントならWebデザイナーの求人案件も豊富に持っているのでこちらもチェックしよう。

◆ リクルートエージェント

◆ パソナキャリア

◆ マイナビエージェント×IT

◆ キャリコネ

 

3. 「インハウスデザイナー」の求人を狙う

f:id:mtasam:20170306194246j:plain

Webデザイナーにはインハウスデザイナーという選択肢もある。

インハウスデザイナーとは、他業種の事業主(例えば建築事務所や病院など)に勤めるWeb担当者のこと。中小企業ならたいてい一人。

「全てが自分の責任」という緊張感と貴重な経験が得られる

僕もインハウスデザイナーを2年経験した。

インハウスデザイナーのメリットはWeb周りを全て一人で担当できること。デザイン、Web開発、サーバー保守、SEO、マーケティング全てを担当し責任を負う。周りは専門外の人ばかりなので、当然助けてくれる人はいない。

Web周りの全責任を自分一人で負う緊張感は大きかったけれど、得られた自信も大きかったので良い経験だった。フリーランスを目指す人にはおすすめの選択肢。

仕事探しは一般的な求人サイトで

インハウスデザイナーの求人は、転職エージェント経由より一般的な求人サイトで地域の求人案件を探すといい。ハローワークでもある。

Check!Indeed (インディード)

また、企業やブランドの自社サイトでWebデザイナーの求人を掲載していることもあるのでチェックしてみると良い。

最後に一点、インハウスデザイナーのデメリット。給与が安い。Webデザイナーは専門職という認識がなく、一般的な事務職やパートと同じレベルで給与設定されていることが多い。

 

 

4. クラウドソーシングやココナラで仕事を請け負う

クラウドソーシング大手のCrowdWorks(クラウドワークス) などでは、Webサイトやバナーデザイン制作の案件が毎日掲載されていて、誰でも応募できる。

クラウドソーシングの案件は単価が安いので、これだけで生計は立てることは難しいけれど、初心者デザイナーがとにかく実践をこなすにはいい練習場になる。下積み、または副業という位置付けで考えれば、利用価値はとても高い。

僕自身もスクールに通いながらアウプットの場として、半年間Lancers(ランサーズ)を使い実務経験をつんでいた。初めて自分のデザインが売れたときは嬉しかったし、この頃に作ったWebサイトやバナー作品は今でもポートフォリオに掲載している。

同様に、自分のスキルが売れる「ココナラ」というサービスもあるので、こちらを利用しても良いだろう。

 

 

5. ブログを運営してスキルを売る

f:id:mtasam:20170111145115j:plain

ブログを通して自分のスキルを売るという選択肢もある。

Webデザイナーとしてセルフブランディングを行い、日々ブログでデザインに関する情報を発信することによってファンを集め、デザインカスタマイズ等の依頼を募集したりする。

ただ、この手段は短期間で成果を出すのは難しい。いきなり初心者がはじめても誰も依頼しないし、ネット上で露出してある程度認知度が高まるまではかなり時間もかかる。

趣味または、自分のアウトプットの場という位置付けでブログを継続的に更新して信頼を積んでいけば、徐々にデザインやWebサイト制作の依頼も増えてくる可能性はある。