【最終更新】2021年2月21日更新
私が28歳で未経験から独学でWebデザイナーに転職した方法を紹介しています。
効率的な勉強方法や習得すべきスキル、転職活動のコツなど、Webデザイナーを目指している人におすすめの内容になっています。
この記事は2015年11月に書かれたものですが、当時と今では状況も異なるので加筆・修正を行っています。
これまでの5年間で学んだことや書いておきたいことは追記しておきました。
目次
28歳の未経験がWEBデザイナーに転職
私はWEBデザイナーとして働いています。それまで、WEBデザインどころか、デザインの仕事やプログラミングやWEB関係の仕事すらやったことがありませんでした。
最初からデザインのセンスがあったわけでもなく、今見るとWEBデザインの勉強を始めた頃作ったサイトは酷いものでした…。
WEBデザイナーなどクリエイティブ業界では28歳で未経験はかなり少数なんです。結構大変です。
そんな私でも、WEBデザイナーに就職することができました。私がWEBデザイナーになるまでにやってきたことを書いていきます。WEBデザイナーを目指している人が読んだ時に、少しでも参考になれば良いなと思います。
当記事は未経験者向けの記事なので、経験者で転職を考えている人はこちらの記事をご覧ください。
WEBデザイナーやエンジニアに特化した求人サイト・転職サービス – SHIROMAG
未経験の求人を探してこのサイトに辿りついた人には「WORKPORT」がイチオシなので、利用してみて下さい。未経験の転職に力をいれている数少ない転職エージェントです。
案件の数が多いことでも有名ですね。
勉強を始める前に必要なもの
必要なもの
- パソコン（当たり前や）
- Photoshop
- Illustrator
- テキストエディタ
- ブラウザ
- 教材
これらについて、先に書いておきます。
パソコンのスペック
私がメインで使っているのは、27インチのiMacです。画面サイズが大きくて気に入っています。
WindowsのPCは種類が多く選ぶのが大変なので、Macを選んでおけば無難です。
Macはフォントが綺麗なのもおすすめポイントです。
PCを選ぶ際、できれば以下のスペックを満たすPCが良いでしょう。
- SSD256GB以上
- Core i5以上
- メモリ16GB以上
SSDは読み書きが早く、デザインソフトの起動も速くなります。HDDはおすすめできません。
できれば256GB欲しいですが、勉強レベルなら128GBでも大丈夫でしょう。
CPUは処理速度に違いが出るので、Core i5は欲しいですね。
メモリが少ないと、複数アプリを同時に使うと重くなるので、16GBあると良いでしょう。
ただ、私がWebデザインの勉強をしている時は8GBだったので、できなくもないです。
8GBのパソコンを使う場合は、アプリケーションを同時に開かないようにしましょう。
以下の記事では、おすすめのPCを紹介しているので参考にしてください。
WebデザインにおすすめのPCは？最低限のスペックについて | SHIROMAG
デザインソフト
PhotoshopとIllustratorは多くのWEBデザインの現場で使用されており、パソコンにインストールしておきましょう。
Photoshopは主にレイアウトと画像の加工に使用します。
Illustratorは主にアイコン画像やイラストを作成する時に使います。
PhotoshopやIllustrator、Adobe XD、Dreamweaverなどのアドビソフトのほとんど使えるのがCreative Cloudのコンプリートプランです。
Adobe Creative Cloud | プロのクリエイター向けソフトウェアとサービス
もしPhotoshopとIllustratorの両方そろえるお金がないという方は、Photoshopをオススメします。Photoshopだけでも大半のことはできます。フォトグラフィプランなら、めちゃ安いです。コンプリートプランだと高いですからね、予算を抑えたい方にはおすすめ。
テキストエディタ
昔はDreamWeaverというテキストエディタがよく使われていたようですが、動作が重くて最近はあまり使われていないようです。
今使うならVisual Studio Code（VScode）が良いでしょう。
VScodeは無料で利用ができる、Microsoft製のテキスト・エディタです。
自動で色分けしたり、予測変換が出たり、便利なショートカットが使えたりできます。他にも色んなことができますが、主旨と外れるので細かい説明は省きます。
私は長い間Sublime Textというエディタを使っていましたが、VScodeに乗り換えました。機能がかなり充実しているので、とても満足しています。
ブラウザはGoogle Chromeがおすすめ
Webサイトを閲覧するために必要なのがブラウザです。
WindowsならEdge、MacならSafariがデフォルトでインストールされていますが、あまりおすすめできません。
メインで使うなら、Google Chromeがおすすめです。
Google Chromeにはデベロッパーツールという便利な機能があり、Webサイト制作が効率的に行えます。
他にも、Firefoxというブラウザもあるので、動作確認用にサブとしてインストールしておきましょう。
独学の勉強方法
WEBデザイナーになるには、最低限以下のスキル・知識が必要になります。
必要なスキル・知識
- デザインの基礎知識
- HTML・CSS
- デザインソフトの操作スキル
本格的に勉強して転職するまでの期間は約10ヶ月くらい。仕事しながらだったので、そんなに詰めて勉強できてなかったと思います。
この間にやってきたことを書いていきます。
デザインの勉強
まずはデザインの本です。デザインにはセオリーがあります。そのセオリーを学べる本を紹介していきます。
デザインの基礎を学ぶなら、この本が一番良いと思います。絶対に知っておかなくてはいけない知識が網羅されています。
そしてこちら。
「何か物足りない、何か違う」そんなデザインにヒントを与えてくれる本です。
WEBデザインの勉強におすすめの書籍、入門書の紹介 | SHIROMAG
デザインスキルを向上させるには
独学でデザインスキルを伸ばすのは、実際難しいものです。
どうやって学べば良いか分からない人は、次に紹介する方法でデザインの勉強をしてみてください。
まずは基本を学ぶ
デザインはセンスと思われがちですが、方法論を学ぶことでかなりデザインスキルは向上します。
先ほど紹介した「ノンデザイナーズ・デザインブック」は基本的な知識を身に付けられるのでおすすめです。
オシャレなサイトをたくさん見る
デザインを学ぶ上で大事なことは、より良いデザインを日頃から見ておくことです。
例えば、以下のWEBギャラリーサイトではたくさんの良質なデザインのサイトが紹介されています。
これらで紹介されているサイトを日頃からチェックし、参考にしましょう。
既存サイトのデザインを模写
デザインスキルを向上させるには、既存サイトのデザインを再現するのが一番です。
いきなりオシャレなWEBサイトを模写するのではなく、初心者なら一般的なコーポレートサイトを模写するのが良いでしょう。
実務ではカフェとか美容室のようなオシャレなサイトよりも、コーポレートサイトをデザインすることが多いからです。
クラウドソーシングでスキルアップ
でも、一番デザインの勉強になるのは実務なんです。これだけはしょうがない。
「実務ができないから困ってるんだよ！」って言われそうですが、実はWEBデザイナーになる前にデザインの実務をする方法があるんです。
職場の先輩社員にも独学で入社した人がいて、その人はクラウドソーシングでコンペに応募してデザインの練習をしていたそうです。これは目から鱗でした。仕事の依頼が来ないような人でも、コンペなら参加できます。
クラウドソーシングで有名なのがクラウドワークスですね。
デザインの練習にもなって、腕が上がればお金にもなるかもしれない。一石二鳥です。かなりオススメなので試しにやってみましょう。
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の体験レッスンを受講してみました！！システムとか感想とか詳しく書いているので、スクール探している人は読んでみて下さい。
WEBデザインやプログラミングが学べるオンラインスクール『CodeCamp（コードキャンプ）』がとっても便利
それでは、次はPhotoshop、Illustratorの勉強について。
Photoshop、Illustratorの使い方を学ぶ
コーディングの勉強って、たくさんネット上に情報があるので勉強に困ることはないですが、問題はPhotoshopとかIllustratorなんですよ。
デザインの知識を身につけても、それを表現できなくては意味がありません。PhotoshopやIllustratorの使い方はしっかり抑えておきましょう。
正直、私は転職前はPhotoshopやIllustratorがちゃんと使えてませんでした。なので、超シンプルなデザインにして、後はHTMLとCSSで頑張りました。これらのソフトの知識があまりなくても、ポイントを抑えればある程度カッコイイWEBサイトは作れます。
ちなみにPhotoshopをメインに使う現場が多く、私もそうです。まずPhotoshopをしっかり学びましょう。
勉強に使った教材はこちら
・初心者向け
とりあえずPhotoShopの基礎をしっかり学ぶ
Adobe XDの使い方は覚えるべき？
Adobe XDはUIデザイン使われるデザインツールです。デザインを手早く作れて、無駄のないシンプルさで人気があります。
最近ではXDを使う現場も増えているのと思うので、できれば勉強しておいた方が良いでしょう。
あまり勉強時間が取れないという人は、Adobe XDの使い方を覚えるのに時間を取られるのはもったいないので、Photoshopに注力するという手もあります。
まだまだPhotoshopをメインにしている現場も多いはずです。
レンタルサーバーを借りて、サイトを公開しよう
WEBサイトが作れるようになったら、レンタルサーバーを借りてWEBサイトを公開してみましょう。
できれば独自ドメインをとってください。
そうすることで、WEBサイトを公開する際の手順や、WEBの仕組みを学ぶことができます。
その際、レンタルサーバーの管理画面からファイルをアップするのではなく、FTPクライアントを使ってアップしてください。
FTPクライアントというのは自分のパソコンからサーバーにファイルをアップしたり、削除したりできるツールです。
私はFileZillaというFTPクライアントを使ってファイルをアップしています。
FileZilla – The free FTP solution
Udemyが熱い！
最近何か新しいことを学ぶ際、Udemyを使うことが多くなりました。
未来は、学ぶ人の手の中にある。Udemyの対象のオンラインコースが ￥1,800から
Udemyは動画で様々なレッスンが受けられるオンラインサービスで、Webデザインやプログラミングなどのコースがあります。
レッスンが充実しており、HTMLやCSS、デザインソフトの使い方など、Webデザインをする上で必要なスキルを身につけることができます。
料金は買い切りなので、月額費用はかかりません。
利用者のレビューや評価が見れるので、安心して購入できます。
Udemyでレッスンを受講する時は、通常料金だと結構高いので、セール期間中に購入するのがポイントです。
セールは頻繁に行われているので、セールになっていないかチェックしておきましょう。
転職活動について
WEBデザインの勉強は楽しいですが、辛いのはやっぱり転職活動。特に、未経験で28歳（当時）の私は本当に苦労しました。
面接官は「未経験か～」って苦い顔をします。年齢も年齢ですし。
ここからは応募や面接について書いていきます。
転職活動をする前に、ポートフォリオを作ろう
まず、ポートフォリオサイトは必ず制作しましょう。未経験なら架空の会社とかお店のWEBサイトを作ってみましょう。ちなみに私はアフィリエイトサイトを作っていたので、それを載せました。
デザインはフラットデザインでシンプルに。CSSやjQueryでアニメーションをつけるのがオススメ。色に迷ったら、とりあえずモノトーン+一色。レイアウトは1ページの縦長で今風に。私のポートフォリオはこんな感じでした。
経験がない分、ポートフォリオを充実させることはとても重要です。
ポートフォリオの参考にはこの本を買いました。
WEBデザイナーには以下のような本もあります。
ポートフォリオについては以下の記事を参考にしてください。
Webデザイナーのポートフォリオの作り方 | SHIROMAG
応募や面接について
まず悩むのは、派遣会社に応募するのか、直接企業に応募するのか。未経験なら、迷わず直接企業に応募して下さい。
派遣会社はアテになりません。しかも、企業は派遣会社に未経験を求めていません。面接に行く前にはじかれます。それに、求人紹介の頻度も高くありません。
未経験が転職活動をするには、直接企業に応募するのが一番近道です。
ちなみに、転職活動期間は１ヶ月半くらいです。
面接テクニック
とりあえず、バンバン応募しましょう。私は年齢的にも（転職活動中は無職だったので）金銭的にも早めに転職を決めたかったので、平日のほとんどは面接を入れてました。
私の履歴書はクソですが、書類通過率は50％くらい。面接まで行っても、未経験なので落ちまくります。
どうせ落ちるなら収穫が欲しかったので、必ず二つの質問をしていました。
「御社はどのような人材を求めていますか？」
「どのような社員が評価されますか？」
この二つを聞きます。この答えをそっくりそのまま、次の面接で使えばいいですよ。
— A社面接時 —
私「どのような社員が評価されますか？」
A社面接官「仕事をとってこれるくらいのWEBデザイナーになると良いですね」
— その後、B社面接時 —
B社面接官「当社でどうなりたいですか？」
私「仕事をとってこれるくらいのWEBデザイナーになりたいです」
名付けて、コピペ面接。
他にもWebデザイナーの面接で聞かれることをまとめた記事もあるので、こちらも併せてご覧ください。
コミュニケーション能力をアピールできると強い
あと、WEBデザインとは関係なさそうですが、コミュニケーション能力があるなら絶対アピールしたほうが良いです。私はそこで評価上がったそうです。（後日談）
転職には転職エージェントを利用するのがおすすめです。
転職エージェントを利用すると、無料で面接対策や履歴書・ポートフォリオなどの添削を行ってくれるので安心できます。
上記の転職サービスが未経験にも力を入れており、未経験からの転職支援実績も豊富です。案件の数が多いことでも有名。
WEBデザイナーの案件も多数保有しています。無料で転職活動のアドバイスを行ってくれます。こういうのは利用しない手はないですね。
WEBデザイナーやエンジニア専門の転職サービスを紹介した記事もあるので、あわせてご覧ください。
WEBデザイナーやエンジニアに特化した求人サイト・転職サービス
独学とスクールどっちがいい？
Webデザインを学ぶには、独学とスクールに通う２つの方法が一般的です。
私は独学でWebデザインを勉強しました。理由としてはスクールに通うお金と時間がなかったからです。
ネット上に多くの情報があり書籍も豊富にあるので、独学でWebデザイナーになる人は意外と多いです。
ただ、誰でも独学が向いているという訳ではなく、独学での勉強は時間がかかり、人によっては非効率かもしれません。
もしお金に余裕があるのであれば、スクールに通うのも１つの手です。
以下のような人はスクールに通うのがいいでしょう。
こんな人にはスクールがおすすめ
- お金に余裕がある
- 決まった時間に学習時間を確保できる
- 誰かに見られてないと勉強が進まない
- 何から勉強して良いのか分からない
スクールの良いところは、課題の提出を求められるので、サボれないという点です。
以下の記事ではおすすめのWebデザインスクールを紹介しているので、スクールに興味がある方は読んでみてください。
WEBデザインが学べるオンラインスクール・専門学校のおすすめ10選 | SHIROMAG
30歳前後でもWEBデザイナーになれる？
２０代後半、中には30歳を超えてWEBデザイナーを目指す人もいるでしょう。
しかし、新しい業界に飛び込むのに、30歳前後は遅いから諦めようかと考える人もいるかもしれません。
とはいえWEB業界は実力主義であり、これまでWEB業界にいなかったとしても、技術さえあればどうにかなる業界です。
しっかりと勉強して知識とスキルを身につければ、WEBデザイナーになるのは不可能ではありません。
一度入って経験を積めば、その後の転職は楽になります。
未経験での最初の就職では高望みせず、経験を積んで希望する企業に挑戦するのが良いでしょう。
JavaScriptは勉強した方が良いのか
最近ではWEBデザイナーにJavaScriptは必須になっていますが、私の場合は転職するまでほとんど勉強していませんでした。
JavaScriptはできなくてもWEBデザイナーになれました。JavaScriptを勉強しなかったのは理由があります。
まず第一に、CSS3のおかげでJavaScriptがなくても動きのあるサイトが作れるようになったからです。確かにJavaScriptを使えば、CSSよりも豊かな表現ができますが、CSSという土台を固めることが優先事項だと思います。
それに、JavaScriptを学ぶ時間もありませんでした。28歳というギリギリの年齢だと、あれこれ手を出して時間をかける余裕はありません。中途半端にJavaScriptを学ばずに、デザインとHTML/CSSをしっかり学びました。
私の場合は時間がなかったのでJavaScriptの勉強ができませんでしたが、まだ若くて時間もあるなら、JavaScriptは勉強しておいた方が良いでしょう。
もし、私のように年齢的にギリギリで時間がない方はデザインとHTML/CSSに集中しましょう。
追記
WEBデザイナーとして働いてきた中で、いくつか追記したいことがあったので書いておきます。
デザインについて
WEBデザインをする上で、最低限知っておいて欲しい点をいくつかここに挙げておきます。
- 配色。色の組み合わせ、WEBサイトやブランドイメージとカラーの関係。色の与える印象。
- フォント。フォントの種類。適切なフォントの組み合わせ。行間、文字間。
- サイトの目的とデザインの関係。
- デザインのトレンド。
- ユーザー目線に立ったデザイン。UI/UX。
上で紹介したデザインの本を読めば、これらの知識を身につけられると思います。
CSSについて
CSSを学ぶ時にまず意識して欲しいのが、要素を自分の思い通りに配置できるか。初心者はまずこれをしっかり勉強するべきだと思います。カッコいいデザインを学ぶ前に、「配置」することを学びましょう。
ボタンや画像を中央に配置する。１カラム、２カラム、３カラムのコーディングをささっとできるようにする。絶対配置、相対配置を理解する。このような基本はマスターしておきましょう。
最近だとFlexboxが便利にレイアウトできるので、こちらも学んでおきましょう。
できれば勉強しておいた方がいいこと
これらはちょっと難しいけど、仕事で使うこともあると思うので予め勉強しておいた方が有利になりそうなこと。
- WordPress
- PHP
以上をできるようにしておけば、恐らく転職にはめちゃくちゃ有利だと思います（難しいなら無理して覚えなくてもOK）。
私はWordPressのテーマも販売しているので、この辺りの知識はとても役に立っています。
ブログなどで学んだことを発信する
得た知識をブログなどで発信すると、モチベーションアップや理解度向上に繋がります。
私はこのはてなブログ以外にもWordPressを使って情報発信をしています。
そうすると、「凄い！」「おしゃれ！」と褒められることもあり、やる気に繋がります。また、「ここはこうした方が良い」などのアドバイスをもらうこともあり、このような意見はとても参考になります。
ブログをやっているとWordPressの使い方や開発も学べるのも良いですね。ぜひWordPressでブログを始めましょう。
WEBデザイナーの知識を活かしてはてなブログのテーマも作ってみました。
はてなブログのテーマを作るのは、HTMLやCSSの勉強にとてもおすすめです。
WEBデザイナーになって良かったこと
WEBデザイナーになって良かったことがいくつかあるので紹介します。
独立・起業できた
会社員として3年ほど働いた後フリーランスになり、その後会社を設立しました。
WEBデザインを勉強する前はこれと言ったスキルもなかったので、独立とは無縁でした。
WEBデザイナーになっていなければ、起業はできなかったと思います。
自宅で仕事ができる
WEBデザイナーは、職場によってはリモートも可能ですし、独立すれば自宅で仕事ができます。
これは新型コロナウィルスが流行して大きなメリットだと感じました。
移動時間を省くこともでき、満員電車で辛い思いをすることもありません。
別の仕事にも繋がる
私はWEB制作だけではなく、ブログアフィリエイトも行っています。
これらの仕事もWEB制作のスキルが活きます。
また、WordPressテーマの販売など、請負い以外の仕事にも広げることができました。
最後に
未経験の28歳がWEBデザイナーを目指したとき、周りはネガティブな発言ばかりします。「いやー、未経験では厳しいでしょう」って言います。
でも、本当にWEBデザイナーになりたいなら、無視しましょう。忘れましょう。少なくとも、28歳ならまだ大丈夫。
とりあえず、飛び込んでみて下さい。
気づいたら、こんなに長文になってた！
焦らず頑張りましょう＼(^o^)／
他にもこんな記事を書いてます。
WEBデザイナーの副業とフリーランスの話 – SHIROMAG
