【未経験からWebデザイナーになるには】勉強の流れとオススメの参考書
自分は30を超えて実務未経験からWebデザイナーになりました。
その経験をもとに、これから志望してる人の参考になりそうなトピックについて書いていきます。
『【未経験からWebデザイナーになるには】目次』
今回の内容は【勉強の流れとオススメの参考書】
最初に参考書を選ぶポイントと、そのあと勉強の流れと一緒にオススメの参考書を1、２冊ずつ紹介していきます。
webデザイナーとして就職するにあたって全部習得しておく必要は全然ないですが、学習内容の全体像を見渡す上での参考にしてもらえたらと思います。
参考書を選ぶポイント
まずはWeb関連の参考書を選ぶときの基本的なポイントを２つ。
①出版年を確認
参考書はネットの評価をチェックして選ぶことも多いでしょう。
その際、注意するのは書籍の出版年。
Web関連の書籍は出版年の影響が大きいジャンルと小さいジャンルがあります。
つまり、技術が刷新されて古くなりやすい分野とそうでない分野があるということ。
影響が大きいものに関しては、評価が多いものほど出版から年数も経っていることもあるので、『評判いいし、売れてる』だけで選ばないようにします。
『影響が大きい・小さい』で並べると次のような感じ。
| 影響(大) 1-２年以内推奨 |
・HTML/CSS ・WordPress ・SEO |
|---|---|
| 影響(中) 3-4年以内推奨 |
・photoshop ・illustrator ・プログラム関連（詳しくないですが、基礎的な部分は変わらないのでもっと古くても問題なさそう） |
| 影響(小) ５年以上でも問題なし |
・デザイン基礎（色彩・タイポグラフィ・レイアウト） |
フォトショ・イラレは基本知識は大きく変わらないので、（中）にしています。
ただ、CCを使っているのであれば、やはりCC対応の参考書がいいでしょう。
特にHTML/CSSは影響が大きく、勉強し始めの頃に買うので、『古いの買って失敗した』というのをやってしまいがちです。
自分の頃は『HTML4』でしたが、今勉強すべきなのは『HTML５・CSS３』です。
②対象読者のレベルを確認
参考書には初級者向けと中級者向けのものがあります。
いきなり中級者向けのをやると、初級者には解説が不親切で理解できなかったりするので注意です。
これは表紙だけで結構判断できます。
（『はじめてでも簡単』とコピーがあったり、初心者向けのはイラストが多用されてたり）
ただ、出版社側の対象読者の設定はあまりあてにならないこともあります。
（出版する側はできるだけ対象読者を広げたいので）
その点はネットのレビューが参考になります。
よく『1冊目に最適』や『２冊目以降で手に取るべき』といったコメントを見ますし、この記事でもそういう紹介をしてます。
勉強する順番とオススメの書籍 ーデザイン・マークアップ関連
順番は同時並行することもあるし、一つの目安で。
１番目の『デザイン基礎』に関しては、なぜ一番最初に勉強すべきかも記事の最後で補足しています。
最初にザッと項目を挙げておくと
- ① デザイン基礎
- ② HTML/CSS
- ③ Photoshop
- ④ Illustrator
- ⑤ JavaScript
- ⑥ jQuery
- ⑦ PHP/MySQL
- ⑧ WordPress
1. デザイン基礎
オススメの書籍は２つ。
この記事で紹介する中でも、この２冊は絶対読んでほしいと思う本です。
１冊目は『デザインの教室』。
『手を動かす』とあるように、各LESSONでデザインのポイントを学んだあと、自分でもその内容を踏まえてデザインします。
LESSON01の内容は『線を使ったデザイン』。
それまで基礎すら知らなかった自分は『デザインはいかに装飾に凝るか』みたいな感覚を持ってました。
それが、この本で『デザインは基本をおさえていれば、線だけで（線すらなくても）成立する』ということを学びました。
それは本当に目からウロコな体験でした。
デザイン関連は読むだけの書籍が多い中、『手を動かす』ことに重点を置いてる点もポイントです。
一見シンプルで簡単そうでも、いざ自分で作るとなると、半端なく難しいということを何度も実感します。
（線だけでデザインを成立させるのはある意味凝ったデザインより難しいので、そういう意味ではハードル高いとも思う）
章の間にはデザインに関するコラムが載っています。
それぞれ１ページの短いものですが、本当に良い内容でこのコラムもオススメです。
『自分自身から学ぶ』『長い長い魔法の呪文ー毎日続けるということ』など、デザインの道のりの一歩目に目をとおしておきたいものばかりです。
２冊目は『ノンデザイナーズ・デザインブック』。
『ノンデザイナーズ』とありますが、普通にデザイナーにも最適で、レイアウト・配色・タイポグラフィといったデザインの基礎が網羅されています。
特筆すべきなのは、解説のあとに『悪いデザイン例』と『良いデザイン例』が載っていること。
悪い例だけみても、そこまでおかしいと思わないけど、良い例と比べると一目瞭然で『デザインの力』を実感できます。
もう一つこの本で好きなのは、何回も出てくる『臆病になるな！』というフレーズ。
一見意味がわからないかもしれないけど、要は『デザインには思い切りが大事』ということ。
ジャンプ率（文字のサイズ差）をつけるならしっかりつける、余白を開けるならしっかり空ける、など。
やっていくごとにこのフレーズの重みを実感して、『デザインには心の持ちようも大事』ということを教わりました。
② HTML/CSS
HTML/CSS関連はサンプルサイトを作って、手を動かしながら学んでいける形式のものがオススメです。
最初に書いたようにHTML関連は出版年の影響が大きいです。
自分は最近の入門書はやってなく知りらないので、オススメの出版社を挙げるとソシム出版のエビスコム著の参考書。
ソシム/エビスコム(著)の参考書は全体的にわかりやすく、ハズレがないです。
HTML4の時に買った入門書も、後で挙げるWordPressの本もソシム/エビスコム(著)です。
【初級者〜向け】『HTML5&CSS3デザインブック』
マークアップに関しては、対象読者のレベルの差も大きいです。
中級者向けだと『効率、更新のしやすさ』や『応用的な記述』も盛り込んだ実務向けなものがあります。
そういったものだと次の参考書がオススメ。
【追記 2017.08.05】今年復習しましたが、やはり良い内容。通して4,5回は読み返してます。
flexレイアウトではなく、floatだったりさすがに若干古くはなってきてます。
ただ、まだまだfloatが必要な場面は多いので、まずはfloatを覚えた方がいいと思います。
【中級者〜向け】『HTML5/CSS3モダンコーディング』
逆に次の２冊はイマイチでした。
どちらも知ってる人には物足りないし、知らない人には説明が足りないというどっちつかずな内容。
『現場のプロが本気で教える HTML/CSSデザイン講義』
『６ステップでマスターする 「最新標準」HTML CSSデザイン』
『現場のプロが本気で教える〜』は記述ミスが多すぎて対応が難しいと思います。
『６ステップでマスターする〜』は信頼のソシムですが、これはあまりオススメできません。
③ Photoshop
フォトショをイラレより先に持ってきたのは、Webデザインではフォトショの方が断然使う機会が多いからです。
カンプは基本フォトショで作るので、自分は割合的には95%くらいがフォトショ。イラレは一全然使わないこともあります。
学習中はイラレ中心でやっていて、カンプもイラレで作ってたのですが、就業後フォトショに乗り換えました。
使いやすいさ以前に大多数はフォトショを使っているので、基本は合わせるべきです(こういう常識も知らなかった)。
フォトショも初級者・中級者向けで一冊ずつあげます。
【初級者〜向け】『Photoshop 10年使える逆引き手帖』
結構厚めでボリュームがありますが、入門書２、３冊買うならこの１冊を買うのが良いと思います。
【中級者〜向け】『作業を10倍加速する Photoshop「超」仕事術』
動画学習サービス『schoo』でも100本以上講義をしている、まきのゆみさんの本です。
④ Illustrator
イラレはベジュ曲線という独特の操作方法の線で作図します。
これは慣れないとてこづる場合もあるので、ベジュ曲線に特化した参考書もあったりします。
自分はそこまで苦手ではなかったので、普通の入門書しか手に取ってません。
苦手そうだったら専門の参考書を検討してみるといいかもしれません。
『イラレはWebではあまり使わない』と書きましたが、今後はイラレのSVGという技術を利用する機会が多くなると予想されます。
SVGに関しても自分は現状ネット記事だけでまかなえてますが、SVGの知識が含まれた参考書だとより良いかと思います。
（↓『逆引き手帖』は前の版をやったのでSVGが含まれてるかは不明。『10倍ラクする〜』は改訂版でも含まれてません）
【初級者〜向け】『Illustrator 10年使える逆引き手帖』
【中級者〜向け】『10倍ラクするIllustrator仕事術』
これはDTP向けの知識も含まれますが、Webにも活かせるイラレの効率のいい操作方法を学べます。
今気づきましたが、イラレもフォトショも『10年』とか『10倍』とか、何かと『10』という数字でアピールしてますね。
勉強する順番とオススメの書籍 ープログラム関連
ここからはプログラム関連。
なかなかここまで手を伸ばせない/伸ばす必要がない場合もあるかと思います。
でも、Webサイトの仕組みとして必須のものなので、できれば一通りどんなものか知っておくと良いと思います。
学ぶ順番は『JavaScript→jQuery→PHP→WordPress』がオススメです。
理由はJS、jQueryはブラウザで動作するフロントエンド側のプログラムで、PHP、WPはサーバーで動くバックエンド側のプログラムだからというのが一つ。
（と言われてもピンとこないかもしれませんが…）
要はJS、jQueryの方はサイトの見た目部分を操作する言語なので、Webデザインと関係が深いということ。
（メイン画像のスライダーや『TOPへ戻る』ボタン/ページスクロールなど）
一方、PHP、WPはサイトの裏側(見えない部分)で動く、システムを構築するためのプログラムです。
（お問い合わせフォームの送信やブログの更新システムなど）
そして、jQueryはJS、WPはPHPを元に作られた言語なので、順番としては元のJS、PHPを先に勉強するのが順当です。
いきなりjQuery、WordPressに手をつけても習得できないことはないですが、JS、PHPから勉強した方が理解しやすいです。
一般の人がWPの既存テンプレートをカスタムするなら、WPから入ってもいいですが、制作者として一からオリジナルテーマを構築するのであれば、簡単な本でもいいのでPHPから学ぶのをオススメします。
⑤ JavaScript
JSの入門書としてはこちらがオススメ。（中級者向けのは手を出してないので入門書のみ）
正直若干古く、CSSの内容に関しては今とそぐわない部分もあります。
それでも、JSに関してはこれ一択でオススメしたいです。
ポイントとしてはWeb関連の参考書としては珍しく、口語調の文体なので、講師に伴走してもらいながら勉強している気分になれます。
プログラム初心者だと心理的なハードルも高いですが、語り口にユーモアと親近感があって、すごくとっつきやすいです。
もちろん、説明もわかりやすくて、３回は通してやりました。
あと『Webデザイナー向けのJS入門』がテーマの構成なので、そういう面でも入りやすかったです。
【追記】
2015年に改訂版が出版されていました。
内容はほぼ全く同じで、本のサイズが大きくなってたり、各章にブログ風にアイキャッチがついてたりして読みやすくなっています。
⑥ jQuery
jQueryは定番で『ドーナツ本』という通称まであるこの参考書。
初めてのプログラミングでJSを勉強する際は、結構しんどい時もあると思います。
（自分はパソコン自体初心者だったし、かなり苦労しました。Web関連の勉強の中でも一番しんどかったかもしれない）
jQueryはそのJSを簡略化したものなので、JSの基礎が身についてると、jQueryの初歩は簡単に理解できます。
⑦ PHP/MySQL
PHPは入門書を２冊。
１冊目。
【初級者〜向け】『いきなりはじめるPHP~ワクワク・ドキドキの入門教室~』
見るからに初級者向けの表紙ですね。
『いきなりはじめるPHP』も易しい文体で、初心者目線で丁寧に解説されているので、わかりやすいです。
WordPressの習得が主な目的であれば、PHPはとりあえずこの一冊だけでも良いと思います。
ちなみに続編に『気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!』もあります。
こちらはガッとレベルが上がって結構難しい印象でした。
２冊目。
【初級者〜向け】『PHPプログラミングの教科書』
基礎の解説のあとは、掲示板などのサンプルを自分で作るというすごくオーソドックスな構成です。
サンプル数が『いきなりはじめる〜』より多めなので、よりPHPに慣れることができます。
イラストを使った解説が多く、わかりやすいです。
⑧ WordPress
WordPressは上で書いたようにPHPという言語を元に作られたものです。
なので、PHPの基礎が身についてるのといないのとでは、だいぶ理解度が変わってきます。
ただWP独自の仕様も少なくないので、PHPを知っていても、JS→jQueryよりは大変だと思います。
いずれにしろ、入門書としてはWPの根本の仕組みから丁寧に解説されてるものがいいです。
そういう点で次の２冊がオススメ。
どちらも表面的な知識だけでなく、WPの原理原則から理解してもらおうという意図が伝わってくる良書です。
【初級者〜向け】『基礎からのWordPress』
【初級者〜向け】『WordPressレッスンブック』
デザイン基礎の書籍を一番に手に取る理由
補足で、デザインの基礎から勉強する理由を。
一言で言うと一番根本的なのに、意外と飛ばしがちなところだからです。
（デザインの専門学校なら必ず最初にやると思いますが）
Webデザインを勉強する際、最初に手に取るのは『HTML/CSS』関連が多い気がします。
とりあえず、サンプルサイトを作って感じを掴むのもアリだと思います。
でも、自分は『デザイン』の参考書をオススメします。
理由はそれが重要度としてもステップとしても順当であることが一つ。
もう一つは感覚として身につけるのに最も時間がかかるからです。
デザインの感覚というのは例えば『フォント』。
デザイナーであれば、『形の美しさ』とか、ジャンプ率や文字詰めの感覚・印象に敏感でないといけません。
最初非デザイナーの頃は『文字なんて読めればいい、ゴシックと明朝の違いすらよくわからない』という感じでしょう。
この素人の感覚から、繊細なフォント感を身につけていくには、まずはフォントの基礎的な知識を知ることが第一歩。
でも、デザインの感覚の難しさは知識を頭に入れただけでは身につかないところです。
頭で知ってから身体感覚として定着するのには、時間がかかります。
デザイナーじゃない人でも、よくワードなどで資料を作ることがあります。
普通はそこまで違和感はないですが、デザイナーだと（具体的にセオリーを外してるポイントにも気づきますが、それ以前にぱっと見）凄く違和感を覚えます。
揃えるべき文字が1センチずれてるだけでなんだか落ち着きません。
そういう感度を高めるには基礎を学習してからも時間がかかるものなので、まずはなるべく早めに知識を勉強しておくべきということです。
これだけ、あえて強調するのは自分自身やっておけばよかったと思うから。
通ったWebスクールでもデザインの基礎は軽く触れた程度で、すぐにHTML/CSSの講義に移りました。
デザインの原則もろくに意識しないままポートフォリオサイトを作ったし、『色の３属性』も知らないでphotoshopを操作してました。
相当ないがしろにしてたなと思います。
そうなった理由としては、マークアップ言語やグラフィックソフトは間違うと動かないなど『厳格にエラーを返す』のに対して、デザインの基礎は知らなくてもエラーはでないし、感覚でできてしまう部分もあるからだったと思います。
でも、仕事で長く続けるのであれば、そういうわけにもいきません。
『Webデザイン』の勉強はまずは『デザイン』の基礎から、をオススメします。
さいごに
『勉強の流れとオススメの参考書』の紹介でした。
まだ何も手をつけてない状態で見ると、『こんなに必要なのか』と思うかもしれません。
実際はもっと沢山やったし、オススメの本ももっと沢山あったりします。
どの分野も再読する際や２冊目以降はだいぶ楽になるので、そこまで苦しくないかなとは思います。
プログラムも初歩レベルであれば、どの言語も考え方は共通する点が多いので、最初に一つやるとあとがだいぶ楽になります。
（JSの基礎の方が、PHPの基礎より断然辛かった。）
最後に、もう一つ注意点を挙げると、参考書中心の学習にならないこと。
参考書をやったら必ず何かしらオリジナルを作ってみることを大事です。
参考書のサンプルはどんなに難しくても、本の知識をなぞっていれば完成します。
同じ知識でも、少しでもアレンジしてオリジナルを作るとレベルがグッと上がって大変だし、その分身につきやすいです。
『もっと参考書やってレベルアップしてから』という思考は要注意です。
これも自分ができていなかった点で、今でも気をつけてる部分です。
関連記事
- 【〜Webデザイナーになるには⑧】就活で採用の可能性を上げるためのポイント
- 【〜Webデザイナーになるには⑦】ポートフォリオを作る時の15のポイント
- 【〜Webデザイナーになるには⑥】勉強の流れとオススメの参考書
- 【〜Webデザイナーになるには⑤】独学か？スクールに通うべきか？
- 【〜Webデザイナーになるには④】資格の取得は必要か？
- 【〜Webデザイナーになるには③】30代から目指すときに心がけたい10のこと
- 【〜Webデザイナーになるには②】Webデザインにセンスは必要か？
- 【未経験からWebデザイナーになるには①】『なれるかどうか』の前に考えたい『本当にやりたいかどうか？』
- 【体験記④】 アラサー未経験が派遣会社に登録しても、望みは薄い
- 【体験記③】 2社目の面接の結果
- 【体験記②】 【面接での面接官の言葉】
- 【体験記①】 【これまでメール応募の時点で選考外だった理由】
- Find job!の『転職支援サービス』に申し込んでみた結果