デザイナーが、未経験からWebデザイナーになる方法を超具体的に書きました。
基本的には全部自分が経験したことがベースになっています。
Webデザイナーになりたい、Webデザイナーに興味があるという方、目を通してみてください。
未経験からWebデザイナーになれるのか？
結論から先に言うと、なれます。
なぜなら誰もが最初は未経験だったからとなるのですが、さすがにそれだと禅問答になってしまうのでもう少し詳しく説明します。
Webのデザインに限らず、デザインというものは先天的な能力をそこまで必要としません。
先天的な能力が必要とされる職業っていくつかありますよね？
例えばスポーツ選手や音楽家といった職業って、後天的な能力（＝努力）ももちろん大切ですが、何よりも先天的な才能がモノをいう世界だと思うんです。
でもデザイナーの世界はそうじゃない。
努力のみである程度のレベルには誰でも到達できます。
僕は小さい頃からデザインが「好き」でしたが、「美大」には通っていません。
イラストも描けません（描いても、ヘタクソ）。
でもデザイナーとして約10年間食べることはできました。
僕でもできたわけですから、本気でWebデザイナーを目指すのであれば、誰でもWebデザイナーになることが可能です。
Webデザイナーになるために最初にすべきこと
では、Webデザイナーになるためには具体的に何をすればいいのか？
最初はわからないことだらけかもしれませんが、必要なものは2点です。
それは絶対にWebデザイナーになるという決意と勉強するための環境です。
それぞれ詳しく説明します。
絶対にWebデザイナーになると決意する
まずWebデザイナーになるためにはWebデザイナーとしての最低限の技術を身につけねばなりません。
これはコツコツと基本独学でやらなくてはいけないので、結構時間がかかるんです。
最低でも8ヶ月〜1年はかかるでしょうか。
ですので、なんとしても自力で最低限の技術を身につけると誓ってください。
もちろん、スクールに通うのも一つの方法です。オンラインスクールっていうのも最近はありますよね。
でも基本は独学です。
市販されている参考書をマスターするだけで最低限の技術は身につきますし、それが最も経済的負担を少くする方法なので、できれば独学でいくことをおすすめします。
要はとにかく自分で努力しろと。
勉強するための環境を整える
Webデザイナーになると決意しただけではさすがにWebデザイナーにはなれませんので、それ相応の環境を用意します。
- パソコン
- デザインソフト
- HTMLエディタ
- 教材
- サーバー
パソコン
まずはパソコンがなくては何もできませんので、パソコンは1台用意しましょう。
ただ、高価なものは必要ないです。だって初心者でしょ？
安価なマシンで十分です。
ポイントはメモリ数。
デザインソフトのAdobe Creative Cloudが最低限動かせる「8GB」あるかどうかでチョイスしてください。
OSをWindowsにするかMacにするかは、好みで決めてオッケー。
僕はiMacとMac miniをメインにして、ASUSのノートブックのもっと安いやつをサブマシンにしていました。当時のAdobe CCならASUSの安いノートブックでも十分に動かせたと記憶しています。
デザインソフト
これはAdobe Creative Cloudが基本です。
個人用のCreative Cloudコンプリートプランなら4,980円／月（税別）で使えますので、ここは思い切ってAdobeに課金しましょう。
これだけでプロのWebデザイナーと同じ環境になります。
そう考えると安いでしょ？
テキストエディタ
HTMLやCSSという言語を書く（コーディングと言う）のにテキストエディタというものが必要になります。
無料のエディタだと、Windowsなら「サクラエディタ」、Macなら「Coteditor」がおすすめ。
またHTMLエディタというコーディングに特化したものもあります。
HTMLエディタに関しては以下の記事を書きましたので、そちらも参考にしてください。
デザイナーが選ぶ！使ってみて良かったHTMLエディタおすすめランキング
教材
教材は市販の参考書を使います。
これは次の章で紹介します。
サーバー
サーバーはあった方がいいです。
サーバーがあれば、就職活動をする時に自分の作品をまとめて見せることが可能になりますので、作品制作を開始する前には用意しておきましょう。
以下のページに、初心者におすすめのレンタルサーバーをまとめましたので参考にしてください。
作品制作に関しても後ほど解説します。
Webデザイナーになるために必要な技術5選
次に、独学で学ぶべき最低限の技術を紹介します。もちろん全部必須です。
Photoshop
デザイナーの必須ソフトがPhotoshopとIllustratorです。
どちらも大事ですし、どちらでもWebデザインを作ることができますが、実際のWeb制作現場ではPhotoshopがメインソフトとして使われていることが多いです。
ですから基本はPhotoshopと覚えましょう。
ただPhotoshopはすごく奥が深いです。その機能を全部をマスターしようとするとどうしても時間がかかってしまうので、以下の4点を最低限できるようにしてください。
- レイヤー操作
- 画像補正
- マスク機能
- スライス機能
▼おすすめの参考書
Photoshop しっかり入門[CC/CS6/CS5] (しっかり入門シリーズ)
Photoshopレタッチ・加工 アイデア図鑑
Illustrator
Illustratorも便利な機能がいっぱいありますが、必須項目は1点だけ。
- ベジェ曲線
Illustratorはベジェ曲線が基本となります。何はともあれベジェ曲線に慣れておいてください。
▼おすすめの参考書
Illustrator しっかり入門 [CC/CS6/CS5] (しっかり入門シリーズ)
HTML/CSS
HTML5/CSS3の参考書と、少し高度なCSSの専門書の合計2冊でオッケーです。それぞれ2回通して勉強すれば、十分な土台が完成します。
▼おすすめの参考書
作りながら学ぶ HTML/CSSデザインの教科書
現場でかならず使われている CSSデザインのメソッド
WordPress
どのWeb制作会社でもWordPressは使用します。ですから、WordPressも触っておきましょう。
▼おすすめの参考書
WordPressレッスンブック HTML5&CSS準拠
自分のデザイン的な強み
一番大切なのはここ。
自分の強みを意識してデザインしなければダメなんです。
これ、他のサイトには書いてないんですよ。でもここがちゃんと表現できるかどうかで就職活動をした時の採用率が大きく変わります。
あのですね、世の中には色んなテイストのWebサイトがありますよね？
具体的に言うと、
- プレミア感 カジュアル感
- ゴージャス感 シンプル感
- アクティブ感 リラックス感
- モダン感 レトロ感
- アーバン感 ナチュラル感
- ハイテク感 エコロジー感
- ガーリー感 エレガント感
- ボーイッシュ感 ダンディ感
- スポーティ感 シック感
みたくなるんですが、「どんなテイストでも作れます」っていうアピールは相手に受けないんですよ。
「この人、何が得意なんだろ？」って思われますから。
作品を見せた時に、「あ、この子はガーリーなテイストが得意なんだな」と相手に一発でわかるように作品を作るべきなんです。
わかりやすく作ることができれば、面接での相手の反応も良くなりますし、しいては採用される確率も上がると。
ですから、自分がどんなテイストを売りにしたいのかよ〜く考えてください。
ちなみに僕の売りは、カジュアルでシンプルなものです。
まあ、そのあたりもド底辺デザイナーって感じですよね。
で、苦手なのがプレミア、ゴージャス、ハイテク……。
自分の強みを見つける時に参考になるWebサイト
デザイン的な強みを探すために便利なサイトを紹介します。
MUUUUU.ORG｜縦長のwebデザインギャラリー・サイトリンク集
Web Design Clip｜Webデザイン制作の上で参考になるWebデザインのリンク集
上記のサイトでたくさん今のWebデザインを見て、自分ならどういうテイストが作れるか、どういうテイストを得意分野にしていきたいか吟味してください。
そして強みとするテイストが決まったら、そのテイストのWebサイトをどんどん真似していきましょう。
そのWebサイトにアクセスしてソースコードをじっくり見るのも参考になります。
Webデザイナーになるための基礎を固める
というわけで、基本的な部分の説明が終わりました。
参考書を使いながら基礎を固める作業を開始しますが、この作業の目安は3ヶ月です。
- Photoshopの勉強：1ヶ月
- Illustratorの勉強：0.5ヶ月
- HTML/CSSの勉強：1.5ヶ月
WordPressは後々作品制作の過程で勉強しますので、この段階ではやらなくていいです。
先にも述べた通り、HTML/CSSの参考書を2周もやれば基礎は固まりますので、だらだらやらずに一気にやってしまいましょう。
PhotoshopとIllustratorの違いがわかって、HTML/CSSの概念が理解できたら次のステップに移ります。
Webデザイナーになるための作品を制作する
次のステップとは、作品の制作です。
未経験でも経験者でも「作品」は必須になりますので、ここはがんばって作ります。
結局は経験者の作品と同じかそれ以上のクオリティのものを作ればオッケーということなんです。
でもほとんどの方が何を作っていいのかわかんないと言うと思うので、やり方を説明します。
自分の身の回りにお店がいっぱいありますよね？
自分が普段ネットで使っているSNSサイトとかでもいいです。
そういうお店やSNSサイトを自分で勝手にデザインしてWebサイトにしてしまうんです。
もちろん、お店の名前とかは架空のものに変えます。
例えば、美容室。
美容室ってのはデザイナーならみんな一度は関わったことがあるんじゃないかってくらいベタ案件です。
自分が通っている美容室でもいいですし、近所にある美容室でもいいです。自分がそのお店から依頼されたような体（てい）でデザインしてしまいましょう。
手順としては以下の通りです。
- デザインコンセプトを決める
- ロゴをIllustratorで作る
- 写真・テキストを準備する
- トップページ＋下層ページのデザインをPhotoshopで作る
- コーディング
- サーバーにアップ
写真はフリー素材サイトのものを使います。素材サイトは以下のリンクから探してください。
テキストは自分で用意しましょう。
またトップページだけではなく下層ページまで含めて全部作ると、作品としての完成度が大きく上がるのでおすすめです。
サーバーにアップする時は、サイトごとにフォルダを作って適当な名前を付けてアップしてください。
作品はいくつ必要か？
作品数は多ければ多いほどいいです。
よくある質問に「作品の数と質、どちらが重要ですか？」というものがありますが、どちらも大事。
質の高いものをたくさんが答えです。
- 美容室
- 飲食店（和食）
- 飲食店（洋食）
- 中小企業
- SNSサイト
- オンラインショップ
- ニュースサイト
- 地域サイト
- 音楽などのアーティストサイト
- 自分のポートフォリオサイト（WordPress）
これだけで10サイトです。
ですので最低でも10は必要と考えてください。
それも自分のテイストを生かすことが大切になります。
1サイトを2週間で作るとして、10サイトだと5ヶ月。基礎を固める作業と合わせれば計8ヶ月。
でもしっかり作品をつくれば、見てくれる人は絶対に見てくれます。
ここが踏ん張りどころですのでがんばりましょう。
作品を作る時の心構え
デザインというのは基本的に無名性なものです。
作った人が有名であるか無名であるかはほとんどの場合で問題になりません。
だってネットサーフィンしながらたくさんWebサイトを見て、そのサイトを誰が作ったか、作った人のキャリアがどうなっているのかなんて普通は気にしませんから。
要はいいものはほとんどの人がいいってわかるということです。
新人の作品でもいいものなら簡単に認めてもらえます。
デザインの世界はそういう点では平等なので、自分にキャリアがないからなんて言って尻込みしないようにしましょう。
自意識過剰くらいが丁度いいのかもしれません。
作品はポートフォリオにまとめる
作品がある程度まとまったら、それを見せるためのポートフォリオサイトを作ります。
ポートフォリオサイトはWordPressで作りましょう。
その時点でいくつかサイトを作っていれば、WordPressの参考書を見ながらなら簡単にポートフォリオサイトが作れるはず。
時間に余裕があるなら、参考書を見ながら自作のテンプレートを作るのも効果的です。
要領よく就職活動をしよう
ポートフォリオサイトができたら、就職活動を開始します。
ただ未経験だからといって「下手な鉄砲も数打てば当たる」作戦でいくとうまくいきません。
逆です。
自分の強みのデザインを生かせる（と自分で思える）会社を選んで作品を見せることが大事になります。
つまりはいい作品を作っていると思える会社、自分のデザインと方向性が似ている会社です。
本気で入りたいと思う気持ちとか熱意って、けっこう大事。
ちゃんと作った作品を持って、未経験ですと正直に答えて、どうしても入りたいとアピールしましょう。
「類は友を呼ぶ」ではないですが、デザインの好みが似ているだけで評価してもらえる確率が上がります。
僕は20代の時に、自分の勤めていたデザイン事務所で採用数1人のところに良さげな人が2人来てしまい、悩んだ結果、1人を採用して、もう1人には外注スタッフになってもらったことがあります。
また、求人サイトに掲載する求人案件のデータ処理を1年くらい担当したことがあるんですが、WebデザイナーまたはWebデザイナー・アシスタント募集で「未経験可、40歳まで」という案件を結構見たことがあります。
20〜30代ならそこそこの作品を作って応募すれば、道は開けるということです。
ちょっと記事が長くなってしまいましたが、Webデザイナーになりたい方は是非参考にしてみてください。
あとがき
本文で書き忘れてしまったんですけど、経験者の人たちが作品を見る時って、結構細かいところを見ます。
バナーデザインでも、1ピクセル単位で細かい装飾ができていると評価されます。
作品を作るなら細部に注意を払って丁寧に作ってください。