全くの未経験が独学でWEBデザイナーに転職するまで

全くの未経験が独学でWEBデザイナーに転職するまでのアイキャッチ画像

【最終更新】2019年9月4日更新

この記事は2015年11月に書かれたもので、WEBデザイナーに転職してから約3年以上が経ちました。

この3年間で学んだことや書いておきたいことは追記しておきました。

28歳の未経験がWEBデザイナーに転職

私はWEBデザイナーとして働いています。それまで、WEBデザインどころか、デザインの仕事やプログラミングやWEB関係の仕事すらやったことがありませんでした。

WEBデザイナーなどクリエイティブ業界では28歳で未経験はかなり少数なんです。結構大変です。

そんな私でも、WEBデザイナーに就職することができました。私がWEBデザイナーになるまでにやってきたことを書いていきます。WEBデザイナーを目指している人が読んだ時に、少しでも参考になれば良いなと思います。

当記事は未経験者向けの記事なので、経験者で転職を考えている人はこちらの記事をご覧ください。

未経験の求人を探してこのサイトに辿りついた人には「WORKPORT」がイチオシなので、利用してみて下さい。未経験の転職に力をいれている数少ない転職エージェントです。

案件の数が多いことでも有名ですね。

勉強を始める前に必要なもの

必要なもの

  • パソコン(当たり前や)
  • Photoshop
  • Illustrator
  • テキストエディタ
  • 教材

デザインソフト

PhotoshopとIllustratorのイメージ画像

PhotoshopとIllustratorは多くのWEBデザインの現場で使用されており、パソコンにインストールしておきましょう。

Photoshopは主にレイアウトと画像の加工に使用します。

Illustratorは主にアイコン画像やイラストを作成する時に使います。

PhotoshopやIllustrator、Adobe XD、Dreamweaverなどのアドビソフトのほとんど使えるのがCreative Cloudのコンプリートプランです。

もしPhotoshopとIllustratorの両方そろえるお金がないという方は、Photoshopをオススメします。Photoshopだけでも大半のことはできます。フォトグラフィプランなら、めちゃ安いです。コンプリートプランだと高いですからね、予算を抑えたい方にはおすすめ。

テキストエディタ

昔はDreamWeaverというテキストエディタがよく使われていたようですが、動作が重くて最近はあまり使われていないようです。

今使うならVisual Studio Code(VScode)が良いでしょう。

Visual Studio Codeのキャプチャ

VScodeは無料で利用ができる、Microsoft製のテキスト・エディタです。

自動で色分けしたり、予測変換が出たり、便利なショートカットが使えたりできます。他にも色んなことができますが、主旨と外れるので細かい説明は省きます。

ちなみに私はSublime Text 3をメインで使っています。このテキストエディタもかなり便利です。

とはいえ最近はVScodeが主流なのでそちらをインストールするのが無難ですね。

独学の勉強方法

WEBデザイナーになるには、最低限以下のスキル・知識が必要になります。

必要なスキル・知識

  • デザインの基礎知識
  • HTML・CSS
  • デザインソフトの操作スキル

本格的に勉強して転職するまでの期間は約10ヶ月くらい。仕事しながらだったので、そんなに詰めて勉強できてなかったと思います。

この間にやってきたことを書いていきます。

デザインの勉強

まずはデザインの本です。デザインにはセオリーがあります。そのセオリーを学べる本を紹介していきます。

デザインの基礎を学ぶなら、この本が一番良いと思います。絶対に知っておかなくてはいけない知識が網羅されています。

そしてこちら。

「何か物足りない、何か違う」そんなデザインにヒントを与えてくれる本です。

デザインスキルを向上させるには

独学でデザインスキルを伸ばすのは、実際難しいものです。

どうやって学べば良いか分からない人は、次に紹介する2つの方法でデザインの勉強をしてみてください。

既存サイトのデザインを模写

デザインスキルを向上させるには、既存サイトのデザインを再現するのが一番です。

いきなりオシャレなWEBサイトを模写するのではなく、初心者なら一般的なコーポレートサイトを模写するのが良いでしょう。

実務ではカフェとか美容室のようなオシャレなサイトよりも、コーポレートサイトをデザインすることが多いからです。

クラウドソーシングでスキルアップ

でも、一番デザインの勉強になるのは実務なんです。これだけはしょうがない。

「実務ができないから困ってるんだよ!」って言われそうですが、実はWEBデザイナーになる前にデザインの実務をする方法があるんです。

職場の先輩社員にも独学で入社した人がいて、その人はクラウドソーシングでコンペに応募してデザインの練習をしていたそうです。これは目から鱗でした。仕事の依頼が来ないような人でも、コンペなら参加できます。

クラウドソーシングで有名なのがこの2社。

日本最大級のクラウドソーシング【クラウドワークス】

クラウドソーシング「ランサーズ」

デザインの練習にもなって、腕が上がればお金にもなるかもしれない。一石二鳥です。かなりオススメなので試しにやってみましょう。

HTML・CSSの勉強

デザインの勉強と並行して、Webサイトがどのような仕組で作られているかを把握するために、HTML・CSSコーディングを勉強しておきましょう。

ほとんどの会社ではWebデザイナーがコーディングまで行っています。

全くの素人なら、最初は超簡単な教材を買ってみましょう。いきなりカッコイイWEBサイトを作ろうなんて思うと挫折してしまいます。

最初はダサいくらいのレベルで十分です。「HTMLってこんな感じなんだー」ってのが分かる程度でOK。

こちらの本は超初心者の人にも分かりやすくHTMLとCSSを解説しています。

あと、分からないことがあったときにすぐ調べられるように、こういう書籍もあると便利です。ただ、タグの意味とかってググれば簡単に調べられるので、なくても大丈夫です。

一通りマスターしたら、次のステップに行きましょう。もう少しマシなデザインのサイトを作りたいなら、これが良書です。

私はこの教材は2回通して勉強しました。

ちょっと古い参考書なのですが、かなりおすすめです。

これ、一からWEBデザインを勉強するなら絶対読むべき参考書。なんせ、最初は簡単な内容なのに、進めていくうちにレスポンシブデザインに対応したり、jQueryが出てきたり、気づけば色んなテクニックを身につけることができます。他にも、Webアイコン、SNSボタンの設置などなど紹介しています。しかも、フラットデザイン。

そして、応用編が以下の二冊。

様々なCSSのテクニックを紹介している書籍です。

 

ちょっと前の書籍ですが、↓は応用編としてはかなりおすすめ。

WEBデザインのテクニックがたくさん紹介されています。ここまでくると初心者向けではないですが、ワンランクアップできます。jQueryの知識がないと分からない部分もありますが、CSSだけでできることもたくさん紹介されているので、必須の教材です。

もしお金がなくて書籍が買えないという方は、

HTML入門 (全24回) – プログラミングならドットインストール

こちらで勉強しましょう。

私もこのような記事を書いていますので、参考に読んでみて下さい。

超初心者のためのHTML・CSS入門講座 – SHIROMAG

スクールやオンラインスクールを利用する方法も

私自身は独学でWEBデザインやコーディングを勉強していましたが、私の知っているWEBデザイナーさんはスクールに通っていたという人が大半です。

スクールの方がモチベーションが継続しますし、分からない所で質問できるのが良いですね。

時間がないという人は、オンラインのスクールもあります。朝早くから遅い時間まで受講できるのが魅力です。CodeCampは他の方もよくオススメしていて、評判が良いようです。無料体験もできるみたいです。

追記:CodeCampの体験レッスンを受講してみました!!システムとか感想とか詳しく書いているので、スクール探している人は読んでみて下さい。

それでは、次はPhotoshop、Illustratorの勉強について。

Photoshop、Illustratorの使い方を学ぶ

コーディングの勉強って、たくさんネット上に情報があるので勉強に困ることはないですが、問題はPhotoshopとかIllustratorなんですよ。

デザインの知識を身につけても、それを表現できなくては意味がありません。PhotoshopやIllustratorの使い方はしっかり抑えておきましょう。

正直、私は転職前はPhotoshopやIllustratorがちゃんと使えてませんでした。なので、超シンプルなデザインにして、後はHTMLとCSSで頑張りました。これらのソフトの知識があまりなくても、ポイントを抑えればある程度カッコイイWEBサイトは作れます。

ちなみにPhotoshopをメインに使う現場が多く、私もそうです。まずPhotoshopをしっかり学びましょう。

勉強に使った教材はこちら

・初心者向け

とりあえずPhotoShopの基礎をしっかり学ぶ

レンタルサーバーを借りて、サイトを公開しよう

WEBサイトが作れるようになったら、レンタルサーバーを借りてWEBサイトを公開してみましょう。

できれば独自ドメインをとってください。

そうすることで、WEBサイトを公開する際の手順や、WEBの仕組みを学ぶことができます。

その際、レンタルサーバーの管理画面からファイルをアップするのではなく、FTPクライアントを使ってアップしてください。

FTPクライアントというのは自分のパソコンからサーバーにファイルをアップしたり、削除したりできるツールです。

私はFileZillaというFTPクライアントを使ってファイルをアップしています。

転職活動について

履歴書のイメージ画像

WEBデザインの勉強は楽しいですが、辛いのはやっぱり転職活動。特に、未経験で28歳(当時)の私は本当に苦労しました。

面接官は「未経験か~」って苦い顔をします。年齢も年齢ですし。

ここからは応募や面接について書いていきます。

転職活動をする前に、ポートフォリオを作ろう

まず、ポートフォリオサイトは必ず制作しましょう。未経験なら架空の会社とかお店のWEBサイトを作ってみましょう。ちなみに私はアフィリエイトサイトを作っていたので、それを載せました。

デザインはフラットデザインでシンプルに。CSSやjQueryでアニメーションをつけるのがオススメ。色に迷ったら、とりあえずモノトーン+一色。レイアウトは1ページの縦長で今風に。私のポートフォリオはこんな感じでした。

経験がない分、ポートフォリオを充実させることはとても重要です。

ポートフォリオの参考にはこの本を買いました。

WEBデザイナーには以下のような本もあります。

応募や面接について

まず悩むのは、派遣会社に応募するのか、直接企業に応募するのか。未経験なら、迷わず直接企業に応募して下さい。

派遣会社はアテになりません。しかも、企業は派遣会社に未経験を求めていません。面接に行く前にはじかれます。それに、求人紹介の頻度も高くありません。

未経験が転職活動をするには、直接企業に応募するのが一番近道です。

ちなみに、転職活動期間は1ヶ月半くらいです。

面接テクニック

とりあえず、バンバン応募しましょう。私は年齢的にも(転職活動中は無職だったので)金銭的にも早めに転職を決めたかったので、平日のほとんどは面接を入れてました。

私の履歴書はクソですが、書類通過率は50%くらい。面接まで行っても、未経験なので落ちまくります。

どうせ落ちるなら収穫が欲しかったので、必ず二つの質問をしていました。

「御社はどのような人材を求めていますか?」

「どのような社員が評価されますか?」

この二つを聞きます。この答えをそっくりそのまま、次の面接で使えばいいですよ。

— A社面接時 —

私「どのような社員が評価されますか?」

A社面接官「仕事をとってこれるくらいのWEBデザイナーになると良いですね」

— その後、B社面接時 —

B社面接官「当社でどうなりたいですか?」

私「仕事をとってこれるくらいのWEBデザイナーになりたいです」

名付けて、コピペ面接。

コミュニケーション能力をアピールできると強い

あと、WEBデザインとは関係なさそうですが、コミュニケーション能力があるなら絶対アピールしたほうが良いです。私はそこで評価上がったそうです。(後日談)

転職には転職エージェントを利用するのがおすすめです。

転職エージェントを利用すると、無料で面接対策や履歴書・ポートフォリオなどの添削を行ってくれるので安心できます。

上記の転職サービスが未経験にも力を入れており、未経験からの転職支援実績も豊富です。案件の数が多いことでも有名。

WEBデザイナーの案件も多数保有しています。無料で転職活動のアドバイスを行ってくれます。こういうのは利用しない手はないですね。

WEBデザイナーやエンジニア専門の転職サービスを紹介した記事もあるので、あわせてご覧ください。

30歳前後でもWEBデザイナーになれる?

20代後半、中には30歳を超えてWEBデザイナーを目指す人もいるでしょう。

しかし、新しい業界に飛び込むのに、30歳前後は遅いから諦めようかと考える人もいるかもしれません。

とはいえWEB業界は実力主義であり、これまでWEB業界にいなかったとしても、技術さえあればどうにかなる業界です。

しっかりと勉強して知識とスキルを身につければ、WEBデザイナーになるのは不可能ではありません。

一度入って経験を積めば、その後の転職は楽になります。

未経験での最初の就職では高望みせず、経験を積んで希望する企業に挑戦するのが良いでしょう。

Adobe XDの使い方は覚えるべき?

Adobe XD

Adobeから近年新しくリリースされたデザインソフトが、Adobe XDです。

デザインを手早く作れて、無駄のないシンプルさで人気があります。

あまり勉強時間が取れないという人は、Adobe XDの使い方を覚えるのに時間を取られるのはもったいないので、Photoshopに注力した方が良いでしょう。

まだまだPhotoshopをメインにしている現場の方が多いはずです。今後は逆転する可能性もありますが。

もし時間に余裕があればXDも勉強してみても良いでしょう。

JavaScriptは勉強した方が良いのか

最近ではWEBデザイナーにJavaScriptは必須になっていますが、私の場合は転職するまでほとんど勉強していませんでした。今必死こいて勉強してます。

JavaScriptはできなくてもWEBデザイナーになれました。JavaScriptを勉強しなかったのは理由があります。

まず第一に、CSS3のおかげでJavaScriptがなくても動きのあるサイトが作れるようになったからです。確かにjQueryのようなライブラリを使えば、CSSよりも豊かな表現ができますが、CSSという土台を固めることが優先事項だと思います。

本当はこっちが大きな原因なんですが、そもそも時間がありませんでした。28歳というギリギリの年齢だと、あれこれ手を出して時間をかける余裕はありません。中途半端にJavaScriptを学ばずに、HTMLとCSSをしっかり学びました。

ただ、私の場合は時間がなかったのでJavaScriptの勉強ができませんでしたが、まだ若くて時間もあるなら、JavaScriptは勉強しておいた方が良いでしょう。

もし、私のように年齢的にギリギリで時間がない方はCSSに集中しましょう。CSSだけでも、面白いことはたくさんできます。

追記

WEBデザイナーとして働いてきた中で、いくつか追記したいことがあったので書いておきます。

デザインについて

WEBデザインをする上で、最低限知っておいて欲しい点をいくつかここに挙げておきます。

  • 配色。色の組み合わせ、WEBサイトやブランドイメージとカラーの関係。色の与える印象。
  • フォント。フォントの種類。適切なフォントの組み合わせ。行間、文字間。
  • サイトの目的とデザインの関係。
  • デザインのトレンド。
  • ユーザー目線に立ったデザイン。UI/UX。

上で紹介したデザインの本を読めば、これらの知識を身につけられると思います。

この辺りは今後詳しく記事にして書いてみようと思います。

CSSについて

CSSを学ぶ時にまず意識して欲しいのが、要素を自分の思い通りに配置できるか。初心者はまずこれをしっかり勉強するべきだと思います。カッコいいデザインを学ぶ前に、「配置」することを学びましょう。

ボタンや画像を中央に配置する。1カラム、2カラム、3カラムのコーディングをささっとできるようにする。絶対配置、相対配置を理解する。このような基本はマスターしておきましょう。

最近だとFlexboxが便利にレイアウトできるので、こちらも学んでおきましょう。

できれば勉強しておいた方がいいこと

これらはちょっと難しいけど、仕事で使うこともあると思うので予め勉強しておいた方が有利になりそうなこと。

  • WordPress
  • PHP

以上をできるようにしておけば、恐らく転職にはめちゃくちゃ有利だと思います(難しいなら無理して覚えなくてもOK)。

ブログなどで学んだことを発信する

得た知識をブログなどで発信すると、モチベーションアップや理解度向上に繋がります。

私はこのはてなブログ以外にもWordPressを使って情報発信をしています。

そうすると、「凄い!」「おしゃれ!」と褒められることもあり、やる気に繋がります。また、「ここはこうした方が良い」などのアドバイスをもらうこともあり、このような意見はとても参考になります。

ブログをやっているとWordPressの使い方や開発も学べるのも良いですね。ぜひWordPressでブログを始めましょう。

WEBデザイナーの知識を活かしてはてなブログのテーマも作ってみました。

はてなブログのテーマを作るのは、HTMLやCSSの勉強にとてもおすすめです。

最後に

未経験の28歳がWEBデザイナーを目指したとき、周りはネガティブな発言ばかりします。「いやー、未経験では厳しいでしょう」って言います。

でも、本当にWEBデザイナーになりたいなら、無視しましょう。忘れましょう。少なくとも、28歳ならまだ大丈夫。

とりあえず、飛び込んでみて下さい。

気づいたら、こんなに長文になってた!

焦らず頑張りましょう\(^o^)/

 

他にもこんな記事を書いてます。

超初心者のためのHTML・CSS入門講座

WEBデザイナーの副業とフリーランスの話 – SHIROMAG

WEBデザイナーやエンジニアに特化した求人サイト・転職サービス – SHIROMAG

WEBデザインが学べる専門学校・オンラインスクール10選 – SHIROMAG