元々DTPやってました
自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。
「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代）
一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。
- Photoshopでデザインなんてやったことない、Illustrator使いたい
- 呪文みたいなコードを延々と打つ作業がだるい
- うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い
- 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べばいいかわからない
- わからないことググったらAのブログとBのブログで言ってること逆だったりする
- 結局AもBも間違ってたりする
- 要するに誰を信用すればいいのかわからない
- 20代後半くらいになってくると単純に新しくモノ覚える効率悪すぎる
- DTPはアプリや入稿の手順覚えればあとはデザイン磨くだけだったのに、Webだと作り方そのものが日々変化しててついてくのがしんどい
こんな感じで壁にぶつかって苦しんでる人、諦めちゃった人、少なくないんじゃないかなーと想像しますがいかがでしょうか。
割りといい歳した大人が、DTPの仕事しながら（だいたいの場合激務）新しいスキルを身につけるには、並々ならぬやる気はもちろんのこと、効率的に学ぶテクニックが不可欠であります。
結局いろいろと試行錯誤して、今Webデザイナーとしてなんとかご飯が食えているわけですが（まだまだですが）、同じようにDTPからWeb業界に転身したいけど、何をどうすればいいかわからない…って人から相談されることがたまにあるので、そんな方向けに自分が実践した方法をまとめてみます。
こういうブログ記事、わりとあると思うけど、自分のはちょっと独特な部分もあるかもしれない。なのであくまで参考までに留めていただければ幸いです。
モチベーション編
Mac買った
最初にお金をガッと使ってしまって後戻りできなくする作戦。自分の場合はAdobeもiMacも最初から持っていましたけど、勉強会とかに行きやすくなるし新しくMacBookAir買いました。
MacとWindowsどっちがいいのか？基本は使い慣れてる方を選べばいいと思いますが、最近だと便利な制作関連アプリがMac専用だったりすることが多いので（後述）、どちらか選んで！と言われたらMacを推します。MacならWindowsOSも入れられるし。
2ちゃんねるのDTP板を毎日見て日々絶望してた
こんなことやるの自分くらいかもしれないけど。とにかくDTP・印刷界隈の不景気な話しか出てこないのでモチベーション維持にはいいです。いや本当に落ち込むくらいしみったれた話題しか出てこないんですよね…。
ああ！DTPなんか糞だ！もうやってられるか！未来なんかないんだ！Web業界に死んでも行くしか生きる道はないんだ！と、変なスイッチを入れて勉強のモチベーション上げていきましょう。（そんなに言うほどDTP業界が死んでるわけでもWeb業界がバラ色なわけでもないとは思いますよ。あくまで自己暗示のため）
2ch@DTP板「年収200万円以下のオペレーター②」スレより。他のスレもこんなんばっかり。マジで落ち込んでくる。
デザイン編
模写しまくってPhotoshopデザインに慣れた
WebにおいてはPhotoshopでデザインするのがが主流ですが（そうでない人ももちろんいますが）、DTPデザイナーは基本IllustratorやIndesignでデザインをし、Photoshopは文字通り写真いじるためのレタッチツールに過ぎなかったりします。なので「Photoshopでデザインする」こと自体が初めてなので、操作そのものに戸惑ったりします。
こればっかりは模写するなどして慣れるしかない。綺麗だなーと思うWebデザインのキャプチャーを撮ってPhotoshopでひたすら写経。試行錯誤しながら、細かなディテールの付け方や、全体の配置のバランスなどを覚えていきました。
食べログのデザインをPhotoshopで模写（やりかけ）
他には、こういうサイトでPSDデータを拾ってきてデータの作り方を参考にしたり。人の生データ見るの、楽しいよね。
補足: 当時あったらよかったのになーと思うPhotoshop関連本
「神速Photoshop [Webデザイン編]」。Photoshopを使ったデザインの時短テクニックの数々が、かなり細かく解説されています。特に最初の「環境設定」の解説がとってもわかりやすいです。
Photoshopの環境設定について教えてくれる技術書なんてほぼないですけど、Webデザインにおいてはとても重要だと思います。
「プロになるためのWebデザイン入門講座」。Photoshopだけでなく、Illustratorを使ったパーツ作成やHTML&CSSも含めた、Webデザインの工程をひと通りを攫った内容です。
コーディング編
（ちゃんとした）HTML+CSS入門本を一冊読破した
まあ、基本ですけど。といってもこの手の入門書はごまんとあるので（そして大半は微妙なんだ）自分が読んでとても役立った本「現場のプロから学ぶXHTML+CSS」を紹介しておきます。
2008年発行と少し古くHTML5などの最新の技術については載っていませんが、入門としては逆に範囲が絞れて良いのでは。図版が少なく文字多めと、硬派な印象を受ける本書ですが、HTMLのマークアップやCSSによるレイアウトテクニックなど実務的な観点から丁寧に解説された、初心者向けバイブルと言って差し支えのない名著だと思います。
Web Designingに載ってるデザイナーやエンジニアを片っ端からフォローした
最初はこの世界の有名デザイナー、コーダーなんかも全然知らないので、技術書一つ買うにしても手がかりが全然ないんですよね。しょうがないから適当な本買ったら全然役に立たなかったり。効率悪い。
自分の場合は、最初にWebDesigningを買ってきて、各コーナーに載ってる著者名を全部ググって、片っ端からブログをいいね！したりTwitterをフォローしたりしました。
そこをとっかかりにして、いわゆるWeb畑で有名っぽい人を100人くらいフォロー。そのくらいすると、業界のトレンドや最新技術などの情報が自然と目につくようになってきます。
寄稿者名のほか自サイトやSNSアカウントが表記されていることが多い。
Twitterやブログを眺めるだけで知識が付くわけではもちろんないけれど、放っておいてもある程度情報が勝手に目に飛び込んでくる状況を作って日々アンテナを貼っておくことで、そこそこの知識は得られたと思います。
勉強に飽きたら寝転がってドットインストール見てた
超有名動画レッスンサイト。これを見てコーディング覚えたって人をちらほら聞きますね。1つあたり3分の動画で、HTMLやCSSなどの初歩が解説されています。無料。
自分はあまり積極的には使わなかったけれど、本を読んだり自分でコードを書いたりするのに飽きたらソファに寝転がってiPhoneやiPadで適当なレッスンをぼーっと見てました。やらないよりは全然良い。
ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
わからないことはとりあえずググった
「これはどのタグが適切なのか」など実践していく中でたびたび小さな壁にぶつかることと思います。そんなときはまず検索。初心者に限らず問題が起きるのは当たり前で、いかに迅速にそれを解決するかのほうが大事。
ググって出た答えを信用しすぎないようにした
「わからないことはググる」と矛盾するようですが、ちょうどドンピシャな回答が検索結果に出ていても、それが本当に正しいとは限りません。もしくは、一見正しいけれど、別の問題が発生したりするかもしれません。公式のリファレンスをあたったり、複数のブログを見て確認したり、なるべく有名な信用のおけるブロガーの記事を参照するなどをおすすめします。
このブログはあんまりアテにしないでください。
デベロッパーツールを活用しまくった
最初のうちは、CSSを書いても意図したとおりにならないことが多いはず。floatが効かないとか。で、3時間くらいドツボにはまった末、結局原因はセレクタの指定が間違ってただけだったり。コード書くのに慣れないうちはよくあるんじゃないでしょうか。
自分は、コード書いてみてうまくいかなかったときは、まずブラウザのデベロッパーツールで確認するクセをつけました。右側の欄に出てこなければHTMLの記述ミスかCSSのセレクタ指定ミスなので、そこをチェック。指定はされているけどうまく効いていないときは、デベロッパーツール上でCSSを書き換えてみたり（リアルタイムでブラウザに反映される）。いちいちエディタで書きなおしてプレビューして…を延々繰り返すよりスピーディーだし、問題の切り分けもしやすいです。
使えるエディタ、アプリは即買った
HTMLもCSSもただのテキストデータなので、OS付属のメモ帳アプリでもなんでもいいっちゃいいんですが、シンタックスハイライトやコード補完があるのとないのとではやはり効率が全く違うので、専用エディタを使った方が上達も早いはず。
以下、自分が制作でよく使うアプリ。SublimeText2以外は全部Mac用です。Windowsの場合？知らない。
Coda2
有名エディタ。メインで使ってます。AppStore価格で7400円。
SublimeText2
有名エディタその2。軽いのと、テキスト選択が超使いやすいのでちょっとした修正とかで使ってます。$70。エディタはCodaかSublimeTextのどっちかがあればとりあえず十分かと。DreamWeaver？知らない子ですね…。
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG
様々なプラグインをインストールして、自分好みにカスタムしやすいのが魅力のエディタ。友人の杉本さん、森田さんらが執筆されたこういう本もございます。買おう！[PR]
CodeKit
後述のHamlやSassを、普通のHTMLやCSSにコンパイルするやつ。自分は初代を使ってますが今はCodeKit2がリリースされています。$29。
CodeKitで簡単にCSS Preprocessorを利用する！ – to-R
Slicy
Photoshopのレイヤーやグループの名前を「hogehoge.jpg」とすると、その名前・形式でさくっと画像を書き出してくれるイカした奴。透過pngなんかもバッチリ対応してくれる。最高。もう面倒くさい普通のスライスなんかやりたくない。AppStore価格で2600円。
丸いパーツも自動的に透過PNGにしてくれる。頭いい。
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！ | OZPAの表4
Emmetを覚えた
これはコード書くのに多少慣れてきた頃がいいと思いますが。Emmetを使うとHTMLやCSSを省略して書くことができるので、効率的にコーディングを進めることができます。こんな感じ。
こんな感じでEmmet記法で書いてCtr+E押すと…
こうなる。楽ちん。
当初は「エディタのコード補完で十分じゃない？」「上級者向けっぽいからいいや…」と敬遠してましたが、試しに使ってみると意外に簡単。
初心者のうちは書き方をいちいちググったり、コード打ち間違えたりがストレスで、コーディングあんまり好きじゃなかったんですが、Emmetだと最小の手数でコードが展開できるのでその手のミス、ストレスはほぼ皆無。
コーディング苦手だからこそ、コーディングの効率化はとても有効なのだと思いました。
hamlを覚えた
hamlはhtmlを生成するためのマークアップ言語です。htmlをよりシンプルにしたような記法でコードを書き（hoge.haml）、上記で紹介したCodeKitなどでコンパイルすると、おなじみのHTMLの形式に変換されます（hoge.html）。
こんな感じでhamlを書いてコンパイルすると…
こうなる。
ご覧の通りインデントによってタグの入れ子を記述するので、「閉じタグ」が存在しません。ゆえに閉じタグ忘れが発生することがありえません。すごいね。嬉しいね。インデントをミスったときはコンパイラがエラー吐くからすぐわかるし。
ページにもよるけど、普通のhtmlの半分以下くらいの行数でマークアップできちゃうんじゃないでしょうか。おまけに自然と綺麗なインデントになる。
加えて、前述のEmmetもHamlに対応しているので、さらに省略して記述ができます。（Emmet記法さえ覚えていればHamlに変換してくれるので学習コストがさらに下がるイメージ）
Sassを覚えた
SassはCSSを生成するための言語。上記のhaml→htmlのように、Sass記法で書いたファイル（hoge.scss）をコンパイルするとhoge.cssの形に変換されます。プログラミングのようなことができるので、Sass内で変数や演算を使用することができますが、最初は簡単なネスト（入れ子）を使うだけでも、かなり効率化ができると思います。
Sassでネスト記法で書いてコンパイルすると
こうなる。いちいち親セレクタ名を書かなくていいので楽だしミスも減りますね。SassはWeb制作の現場の必須スキルになりつつあるので、そういう意味でもぜひ押さえておいた方がいいかと。
フルに使いこなすのは大変ですけど、無理に使わなくてもネストや変数など簡単な部分だけでも導入できるのがSassのとっつきやすい魅力。
効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！ | Webクリエイターボックス
例によって友人の森田さんらの著作がございますので、こちらもぜひ買おう！[PR]
まとめ
いかがでしたでしょうか。今さらな部分も多いかもしれないですけど。
HTMLやCSSの学習難易度ってそこまで高い方じゃないとは思うんだけど、それでも挫折しちゃった人を結構見てきて思うのは、HTMLやCSSを覚えることそのものではなく、延々とコードを書くことであったり、画像の書き出しであったり、もろもろの作業の量に辟易してしまうパターンが多いのかなーと。
自分もそれがダルくてダルくてしょうがなかったですが、省略記法を覚えたり、自動化してくれるアプリを活用したりすることで、その手のストレスはある程度解消され、本来の目的の技術の習得に集中することができました。似たような状況でお悩みの同業の方の一助になれば幸いです。