webデザイナーってどうやってなるの？という記事で、webデザイナーの働き方や、未経験からでもwebデザイナーになれるということをお話ししました。そこでwebデザイナーに必要なスキルについてもお話ししましたが、いろいろなサイトやブログで調べると人によって言うことが異なると思います。どれも間違いではありません。
今回はどのスキルがどう必要になってくるか噛み砕いてみようと思います。今回も未経験からwebデザイナーになりたいという人を前提にしています。
web制作の工程について
最初にweb制作の工程について説明しておきますね。
web制作にはディレクター、デザイナー、コーダーという役割の人がいます。
ディレクター…全体の指揮をとる人。クライアントの要望を聞いて制作の方向性を決めたりチームをまとめたりします。
デザイナー…ディレクターの指示のもとwebサイトのデザインをします。
コーダー…コードを書く人。デザインをもとにweb用の言語でサイトを作り上げます。プログラマーとは異なり、コーダーは「フロントエンド」といい目に見える表示の分野を担当し、プログラマーは「バックエンド」というシステムの分野を担当します。
web制作の工程はこのようになっています。
①ディレクターがサイトの要望をまとめてイメージを伝えます
②デザイナーがサイトのデザインを作成します
③コーダーがデザインをもとにコーディングをします（デザイナーが兼任する場合もあり）
④コーディングしたデータをアップロードして完成です
かなりざっくりとしていますが、おおまかにいうとどこもこのような流れで制作をしています。
①②や②③をデザイナーが兼任する場合もあれば、すべてデザイナーひとりで行う場合もあります。兼任は大変そう・・・と思うかもしれませんが、自分の裁量が増える分やりがいもありますし自分自身のスキルアップにもなります。反対に分業の場合は関わる人が増えるほどコミュニケーションが大切になってきますが専門性が上がりますね。どちらにも利点があります。
webデザイナーに必要なスキルは？
さて、webデザイナーに必要なスキルについてです。
先ほどのweb制作の工程でお話しした、どの分野を担当したいかによっても異なってきます。デザイナー専任でやる場合、またはデザイナーとコーダーを兼任する場合というのがよくあるパターンです。ディレクターは経験を積んで制作の流れや交渉力、チームをまとめる力がついてから任されることが多いです。
でも、どれをやりたいかと突然言われてもわからないですよね。それぞれのメリットとデメリットを紹介します。
＜デザイナー専任でやる場合＞
メリット
・専門性が高くなる
デメリット
・突出したセンスがないと仕事がもらいにくい
＜デザイナーとコーダーを兼任する場合＞
メリット
・デザイナーとコーダーどちらでも活躍できるので仕事がもらいやすい
・コーディングを意識したデザインができるようになる
デメリット
・覚えなくてはならないスキルが多い
もし、自分のデザイン力に自信があるならデザイナー専任でも大丈夫でしょう。でも、もしそうではないならデザインとコーディングの両方の技術を習得するのがおすすめです。コーディングを意識したデザインができるのは強みになります。とくに社会人になって途中でwebデザイナーに転身する場合は、仕事の間口を広げられます。
というわけで、世の中で紹介されている「webデザイナーに必要とされているスキル」というのは「デザインのスキル」と「コーディングのスキル」の２種類あるということです。
webデザイナーに必要なスキルは？[デザインスキル編]
webデザイナーに必要なデザインスキルは「デザインの基礎」と「デザインソフトが使えること」です。
デザインの基礎は時代を経ても変わらないので、書籍で網羅的に習得するのがおすすめです。
★★☆ Illustrator （なるべく使えたほうがいい）
おすすめの書籍
デザインの基礎を覚えるために参考になる書籍はこちらです。
おすすめのソフト
デザインソフトはいろいろありますが、一番普及されているAdobe社の「Photoshop」を習得しましょう。Photoshopさえ習得すればその他のデザインソフトを使うことになっても感覚を掴みやすくなります。Adobeのサイトから体験版が7日間利用でき、ID登録すれば月額980円で利用できます。同じくAdobeの「Illustrator」はイラストやロゴの作成をするときによく使います。Photoshopでもできないことはないのですが、Illustratorの方がきれいに描けたり、印刷物など様々な媒体に展開しやすかったりと汎用性があるので覚えておいて損はありません。
webデザイナーに必要なスキルは？[コーディングスキル編]
次にコーディングのスキルです。こちらはちょっと耳慣れなくて複雑に感じるかもしれませんが、まず必須のスキルはHTMLとCSSです。このふたつはフロントエンド（サイトの見える部分）を構成するための言語なので必要になってきます。ちなみにHTMLはマークアップ言語といって、タグという決められた言語を使って画像やテキストなどのwebサイトの要素を記述するもの。CSSはそれらに色やサイズを指定して装飾をするものです。
★★★ CSS （必須）
★★☆ Javascript/jQuery （あると便利）
★★☆ PHP （場合によって必要）
Javascript/jQueryは、HTML/CSSで作成したページに動きをつけたりできるプログラミング言語です。写真がスライドしたり、スクロールで要素が表示されるサイトを見たことがあると思います。デザインに動きがあることで興味を引くサイトになるので、クライアントから求められることが多く、覚えておくといいスキルのひとつです。HTML/CSSを習得したらぜひ覚えてみてください。ちなみにjQueryはJavascriptを使いやすくしたもので、CSSを覚えた人はとっつきやすいと思います。jQueryの方を覚えるのがおすすめです。（ちなみに私もjQueryの勉強中です）
PHPは、これを覚えた方がいいスキルの中に入れるか悩むところなのですが昔からあるポピュラーなプログラミング言語で、使用しているサイトが多いので一応入れておきました。HTMLの中に組み込んで、指定された情報を表示する言語です（初心者にわかりやすく言っているのでちょっと語弊があるかもです）。通販サイトなどにログインすると「こんにちは、〇〇さん！」等の表示をされますが、この「〇〇さん」の部分のデータを取ってきて表示したりするのがPHPです。
中小規模のサイトではWordpressというサイト作成＆運営できるシステムを利用しているところが多く、そのWordpressもPHPを使用しているので出くわす機会が多いかもしれません（このブログもWordpressで作成しています）。PHPにも手を出すとちょっと大変になってくるので、必要性を感じる場面になるまでは覚えなくてもいいかもしれません。
必要な言語は作るサイトによって異なってくるので、仕事によってはこれとは違う言語が必要になる場合もあります。HTML/CSSは必ず必要になるスキルなのでまずは覚えておきましょう。
おすすめのソフト
忘れるところでした！コーディングをするにはテキストエディターソフトが必要です。MacのテキストエディタやWindowsのメモ帳でもできるのですが、専用のエディターの方が圧倒的に使いやすいのでご紹介します。テキストエディターソフトは無料のものでも十分使いやすく、「このソフトが使えないとダメ！」というのもありません。おすすめはこちらです。
Mac/Windows対応
・Sublime Text（無料）
・Atom（無料）
私は、職場ではAdobeのDreamweaver（有料）が指定されているので職場ではそれを使い、自宅ではAtomを使用しています。どちらも使いやすいです。Atomはオシャレすぎていまいち使いこなせてるのかよくわからないのでSublime Textの普通のテキストエディター感（なにそれ）の方が合う気がしています。
ちなみに筆者は
参考にならないと思いますがwebデザイナー歴約10年の私のスキルをご紹介します。
・デザインスキル
Photoshop 使える
Illustrator チラシや名刺などの印刷物は作成できるがイラストやロゴは作れない
・コーディングスキル
HTML/CSS 使える
Javascript/jQuery jQueryが少し使える。勉強中
PHP 少し使える。勉強中
今まで3〜4社勤めていますが、PHPは必要になるときとならない時がありました。今は個人的にWordpressを覚えていきたいので勉強中です。Illustrator/Javascript/jQueryは覚えておくと重宝されたり仕事の幅が広がるなと感じます。
あと最近は「動画作れる？」と聞かれることが増えてきたので、興味があれば覚えてみてもいいかもしれません（笑）。
私の経験を元にwebデザイナーに必要なスキルをまとめてみました。最高になれば幸いです。
