KIMUSON BLOG

きむそんの雑記ブログ

【入門】WEBデザインの勉強をするのに参考にしたい資料【まとめ】

この記事をシェアする

f:id:samuraikid520:20171228234750j:plain
普段サーバーサイドの実装ばかりで、フロントエンドのWEBデザインには無頓着だった自分だがWEBデザインの知識が欲しいと急に思った。

というかフロントエンドの職人みたいな人たちに強い憧れがあった。

そのため、毎日少しづつ勉強はしていて参考になった資料を勝手にまとめてみた。

デザイン

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

職場のフロントエンドの方にオススメされて教えてもらった本。
「デザイン初めて!」の方には簡単で読みやすいです。

ウェブデザインに応用する4つの基本原則

www.slideshare.net

読んでみるとなんとなく「わかっているつもり」でいたことに気づかされる。
当たり前のことを当たり前にするために読むべき。

企業サイトのデザイン構成7つのトレンド
www.climarks.com

トレンドを理解して一通り模写して、似たようなデザインを作れるようになるためにトレーニングしたりました。

色彩

色彩センスのいらない配色講座

www.slideshare.net

色彩センスゼロの僕にとってありがたい資料。
色彩で重要なのは配色であることを理解できた。

コーディング

コーディングに関しては以前から少しづつやっていたんですが、インプットはドットインストールのみでした。
個人的には「Bootstrap 4入門 (全22回)」の講義をやって初めて「フロントエンドおもしれぇ!!」ってなった気がします。

HTML入門
CSS入門 (全23回)
CSSレイアウト入門 (全15回)
実践!ウェブサイトを作ろう (全17回)
レスポンシブウェブデザイン入門 (全14回)
JavaScript入門 (全24回)
jQuery入門 (全20回)
Bootstrap 4入門 (全22回)

WEBサイト作り一連の流れ

Webサイトの作り方のまとめ!番外。
lopan.jp

快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】

www.slideshare.net

いちようフロントエンドの方と仕事で関わることがあるのでわかっていたけど、念のためさらっと読んだ程度。

他サイトのデザインまとめ

Web制作会社のサイト構成でよくみる5つのパターン
www.4696.co.jp

あとがき

ここには今回記載できなかったがPhotoshopの扱いについてもフロントエンドの仕事をする上で書かなければいけなかった。
しかしながら僕自身まだ勉強が追いついていない分野あので今回は割愛している。