クラウドソーシングNAVI

クラウドソーシングを使いこなせ

未経験者がwebデザイナーになるためにおすすめ書籍5選

独学でwebデザインの勉強をするには、テキストの存在は絶対となります。大きい書店に行けば、数十冊の教本に出会うことができますが、地方の方だと品揃えの良い店を探すのも大変です。

このコラムでは、初心者に優しく手に入りやすいテキストをご紹介します。ネットでも買えますので参考にしてみてください!

学びやすいwebデザイン教本ランキング

初めてwebデザインに関わる人も、もう一度学び直したい人へもオススメの教本たちです!

第1位:HTML&CSSとWebデザインが 1冊できちんと身につく本

webデザインの基礎からCSSまで、webデザインって何をすればいいの?というレベルの初心者にもってこいの教本です。

初歩中の初歩という位置付けなので、サクッと読んでワンランク上の教本に進めば、基本は押さえることができます。しかし、デザインの基礎が少しでも備わっていたら、少し物足りないかもしれませんね。

何を学べるか?

webサイトの制作フローやデザインパターンについての、基本的な技術を学ぶことができます。
図も多く詳しく解説されているので、教本で起こりがちな「文章ばっかりでつまらない」という問題は回避できます。

第2位:Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

webデザインのアイデア集です。「デザインを学ぼう!」と思った時点では、頭のアイデアの引き出しは皆無と言えるので、サンプルを見ながら模写すると知識として蓄えられます。

初級を脱する前に1冊買って読むとおさらいができますし「あ〜ネタ切れだ、コーヒー飲んでも散歩してもデザインが浮かばん」といった窮地にも対応してくれます。

デザイン従事者には「どうやっても逆立ちしてもいいデザインが出ない時」という事案が月1くらいで必ず発生します。この書籍はそんな悩めるwebデザイナーのバイブルと言えるでしょう。

何を学べるか?

配色・レイアウト・書体・流行など、いろいろなジャンルのwebデザインに関わる要素について説明されているので、どのようなサイトを作ればいいのか分からないといった方にオススメです。

これらを把握してwebデザインをするのと、全くの我流でwebデザインをするのとでは、前者の方がデザインの美しさだけでなく”理由ある表現”でデザインすることができるようになります。

第3位:配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック

その名の通り「配色についてのルールブック」です。デザインにとって配色は避けて通れない問題です。例えば日本国旗の赤丸が緑丸だったとしたら、印象はガラリと変わりますよね。

この本には色が人の意識に与える影響や、色と色の適切な組合せについて学ぶことができます。
デザイナーとして活躍したいなら、この本から始まって「色彩検定の2級」くらいは取っておきたいところです。

何を学べるか?

それぞれの色の特徴・色の組合せから始まり、どのような色でどのようなイメージを伝えたいのかが身につきます。
クライアントに説明する時に理論立てて案を展開できるでしょう。
配色を学ぶと、外出した時の街の風景・看板や広告に鋭く観察する癖がつきますよ!

第4位:わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉

「文章で学ぶのが苦手だ!でも実務的な勉強はしたい!」という方にオススメの、マンガが含まれたテキストです。すごいところは、企画の大切さばかりでなくマーケティングの基礎まで網羅されているところです。

わかばちゃんが可愛いので何度でも見直せる凄いやつです。きちんとweb制作についてのTipsは説明されているので、教本としてのクオリティも高いです。

何を学べるか?

「ウェブ制作に興味があるけど一歩踏み出せない」という方にも、丁寧にサイト制作の知識が解説されています。
デザインの核をえぐる内容ではありませんが、全般的なwebデザイン・制作について知ることができます。

第5位:今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典

この書籍はwebデザインについて詳しく技法が掲載されているものではないのです、つまりコーディングに関する本と言えます。
webデザイナーが頭の隅に置くべき概念として「このデザインはコーディング可能か」という思考があります。

その思考を持っていないと、コーダーに出来上がったデザイン案を渡した時に「これどうやって組むねん……」という事態に陥りかねません。
ですので、少しはコーダーのことも考えよう!ということで、HTML・ CSSリファレンスを5位にランクインさせました。

何を学べるか?

HTMLとCSSの効果がすべて載ってあるので、現実的なデザインかどうかを常に考える力がつきます。
またweb制作言語にも詳しくなるので、論理的な裏付けがされたデザイン案を提案することができます。

番外編:WebデザインのためのPhotoshop+Illustratorテクニック

デザインソフトといえばAdobe1強としか言いようがありません。他にも代替ソフトあるのですが、操作のしやすさや作り込みのしやすさで言うとPhotoshopに勝るものはありません。web制作におけるデザイン技法はもちろん、DTPなどにも代用できるので、Photoshopに慣れる練習もしておきましょう。

何を学べるか?

PhotoshopやIllustratorの操作方法について詳しく説明されているので、切り抜いたりマスクをかけたりといった基本技術や、Adobe CCで加わった新機能にも触れてあります。

教本で学んだあとはどんどんアウトプット!

ずっと教本と睨めっこしていても技術は上達しません。重要な部分は下線を引いたりメモをしたりして、実際にwebデザインを並行で行うようにしましょう。

またAdobe CCは正規ライセンスで手に入れましょう!海賊版を使うのは犯罪です!
月6,000円でありとあらゆるクリエイティブツールが使い放題なので、必要経費として考えれば安いものだと思います。

まとめ

webデザインは適当にペタペタ要素を作り込んでいくのではなく、

  • なぜこの色なのか
  • なぜこの配置なのか
  • なぜこのレイアウトなのか
  • なぜこの装飾なのか
  • なぜ・・・

といったクライアントの「なぜ?」に理論立てて答えられるデザインをしなければいけません。ですので、初めのうちはwebデザインのセオリーを学んで、しっかりとした土台を作ることが大切です。