【独学でWebデザイナーになった人の記事紹介付】未経験者が１個レスポンシブサイトを作ってみてわかったこと

どうもこんばんは。
最近はL'Arc〜en〜Cielのアルバム聴きながら脳内でヘドバンしてます。

今現在私は「HTML5＆CSS3 デザインブック」を教科書代わりにレスポンシブサイトの勉強をしています。
書店のWeb関連のコーナーをのぞいたり、アマゾンで関連書籍をさがしてみると数多の本がある中で
何故これを選んだかと言うと
結構、未経験者からWebデザイナーになった方のブログなどで紹介されていることが多かったからです。（当社比）

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

私は10月にWebデザイナーに転職することを決意した初めのころ、
専門のスクールに通おうかなと思っていましたが
様々なお話を聞いたり、考えた結果、（主に金銭面が原因で）独学で頑張ってみようと決意しました。
どうしてもスクールって、就職率の数字が出ているところがなかったので、
ここなら安心できる、というのが、イマイチ見つからなかったんですよね。
なので、それよりも実際に独学からWebデザイナーになった人の話を参考にしたほうがずっと説得力があると思い
スクールを断念した後、色々そういった方たちのブログ記事をあさりまくったんです。

それで今月は、こいつ1冊とにらめっこしながらサイトをとりあえず一通り作ってみようと制作中なのです。

１個レスポンシブサイトを作ってみて感じた3つのツボ

で、実際に本をもとに一個作ってみたわけですが
レスポンシブデザインってここを押さえておけばあとは応用だなあと思いました。

１．ページをbox単位で見る視点

正直ページレイアウトはboxのパズルゲームだな！と思ったのが感想。
実際この本の一番最初の章で扱ってたのは基本的に「boxでどうページを組み立てるか」の説明でした。
その基本編を終わった後に実際にページを作る章に入っていくのですが、作ってみるとその意味が深く理解できます。
なのでページレイアウトを考え、実際にコードに落とし込むときは
「ゴールのレイアウトを表現するには、どうやってbox分割してあげればよいか？」を考える作業がとても重要になってきます。

２．display、floatの理解

まあこれは1番目のboxのレイアウト視点が大事だからこそ、ということではあるんですけど
boxベースでレイアウトを扱う上で、この二つの理解はおろそかにはできないです。
何故displayをblockにしたらレイアウトがうまくいくか、とか
floatを指定するのはいいけど結局どういう仕組みで左行ったり右行ったりできるの、とか
レスポンシブサイト創るにあたって仕組みレベルでまず理解すべきはまずこの二つだなと感じました。

この二つに関しては、後日自分の復習のためにも記事としてまとめたいと思います。

３．paddingとmarginを使ったページレイアウト調整力

ページが違和感なくきれいに見せるためにはこれは不可欠。そう感じました。
この本での勉強に入る前に自分で何個かページレイアウト練習につくったときも感じていましたが
レイアウトが崩れるのもレイアウトがきれいに整うのも、すべてはpaddingとmarginを操れるかどうか！にかかっています。
なのでboxレイアウトを行うにあたってbox内でのpaddingとmarginのルールは理解必須です。
（以前boxレイアウトでぶち当たったときに書いた記事の内容とか特に重要でした）

独学でWebデザイナーになりたい人向けのおすすめ記事

…とまあえらそうに講釈たれてるようになってしまいましたが、
まだ１冊は終えていないので理解が抜けてたり慣れていなかったりすることは多々あるのですが
今月の終わりは今度はフォトショとイラレ練習のための本に取り掛かるスケジュールなので、たゆまず残りの分も読んでまた作っていきます。

最後に、私が「この人の記事はまた参考にしよう！」と思った方の記事を紹介します。
あとでFeedlyにも登録しとこうっと…

yamasha.net
www.designmap.info
tsukuruiroiro.hatenablog.com

□「Webデザイナーになるには何すればいいか？」という一番初めの疑問にぶち当たったときに参考になりました。
どれも簡潔にまとまってるので計画が立てやすくなります。

creive.me

□上の二つの記事を読んで、何をやるかは決まった！じゃあ具体的に目指すべきゴールは？と考えたときに参考になります。

blog.cntlog.net
kuraokura.xsrv.jp

□紹介しているサイトが役に立つものが多いです。
また、実際にWebデザイナーってどういうことやるのか、何が必要なのか、についてのお話は業種未経験者にはありがたいです。

個人的な今の気持ちとしては、早くフォトショ＆イラレ練習用教科書に取り掛かって、ばんばん模写をやりたいという気持ちが高まってます。
いずれにせよ年内にはどちらも終わらせたいので、これからも日々積み重ねていこうと思います。