Webデザインを勉強したいけど、スクールはどこも高いし、やってみてもし自分に合わなかったら？と思うといきなり高額なお金を払うのは怖いですよね。
私はスクールに通いWebデザインを習得しましたが、スクールに通う前に独学で勉強しておけばもっとスクールで効率よく学習を進められたなと思ったので、今回はWebデザインを独学で習得するためのおすすめのツールや本をご紹介したいと思います。
(デザイン編とコーディング編に分けてお伝えします！)
目次
Webデザインの全体の流れがわかる本
Webデザインとコーディングのきほんのきほん
デザイン編とコーディング編に分けてお伝えしますとお伝えしたのにいきなりこの本のご紹介なのですが、Webデザインってとにかく必要な知識が幅広いんですよね。
デザインの基礎とか、どんなターゲットに向けてサイトを作るとか、サイトの構成の決め方とか、ワイヤーフレームの作成やらPhotoshopで画像加工やらコーディングやら・・・etc
とにかくいろんな知識が必要です。
この本は1つのWebサイトを作るための流れがデザイン〜コーディングまで広く浅く載っていて、この本のとおりに進めていけば1つサイトを作ることができます。
世の中にある本の多くはデザインに特化していたり、コーディングに特化していたり、Photoshopの本も全部の機能をどうやって使うかの解説で、Webデザインをするために必要最低限この機能を使えるようになればいい！とピンポイントで解説してくれる本って少ないなと思います。
この本は広く浅くWebサイト制作の流れと、必要な知識を網羅してくれているので「Webサイト制作の全体像が知りたい」「どんなことを学べばいいのか概要が知りたい」という方にもおすすめです。
デメリットとしては、コンパクトにまとめられているので1つ1つの解説が深いところまでされていなかったり、コーディングの部分はある程度知識があったほうが理解しやすいかなと思います。
ただ、後述していく本やサイトでもっと深く学ぶことができるので、この本でサイト制作の概要を掴みつつ、「ここをもう少し知りたい」と思う部分を別の本で補っていくと良いのではないかと思います。
Webデザイン独学におすすめの本やツール：デザイン編
「私はセンスがないし、デザインは無理・・」私も勉強する前はそう思っていたのですが、デザインはセンスは不要です。
デザインってあくまで手段の１つであり、伝えたい相手に正しく情報を伝えるための「情報設計」なんです。
「落ち着いた余裕のある印象を持たせたい」と思ったら余白を多くとって細めのフォントを使ったり、「力強い印象を持たせたい」と思ったら配色は黒や濃いめの色で、太いゴシック体を使ったり・・などなど、デザインには理論があります。
そんなデザインの理論を学べる本をいくつかご紹介していきます。
デザイン入門教室［特別講義］ 確かな力を身に付けられる ～学び、考え、作る授業～
初心者の方にもわかりやすく、デザインの理論を例となる画像と一緒に解説してくれている本です。
また、本の後半に「デザインのビフォーアフター」が載っていて、個人的にはこのビフォーアフターの解説が好きです。
自分で手を動かしてみて思うのですが、「なんかこのデザイン微妙だけど、どこを直せば良くなるのか分からない・・・」と思う場面が多々あります。
そんなときにこの本をパラパラめくってヒントをもらったりしています。
けっきょく、よはく。
この本もとても面白くて、新米デザイナーが作ったちょっと垢抜けないデザインを先輩デザイナーが「ここを改善すればよくなる！」とポイントを教えてくれるという設定になっており、デザインのビフォーアフターが沢山載っている本です。
余白を活かしたすっきりとしたデザイン例が多く載っているのと、数パターン改善案が載っているので、とても参考になります。
Phosohopの操作方法を習得するのにおすすめ
実はAdobeの公式サイトが操作の解説ブログやチュートリアル動画を出してくれていて、Phosohopを契約すれば誰でも見ることができます。
こちらはブログの連載記事になっていて、Phosohopの基本設定から丁寧に解説してくれています。
こちらは動画で解説してくれているチュートリアルです。
簡単なバナー制作の方法はこのチュートリアルが参考になると思います。
あとは、Adobe公式以外にも、YoutubeでPhosohopの使い方を解説してくれている方がたくさんいるので、操作方法がわからないときはYoutubeで検索してやり方を調べてみるのもおすすめです！
（すぐに必要とする情報にたどり着かないというデメリットはありますが、何より無料でお金をかけずに学習できるのでおすすめです）
デザイン上達の秘訣はパクること〜プロが作ったデザインを参考にしよう〜
ある程度本でデザインの基礎理論を学んだら、プロが作ったサイトやバナーを真似(トレース)してソフトの操作とデザインを学ぶのがおすすめです。
私も最初はそうだったのですが、「世界でたった１つ、自分のオリジナルのデザインでHPやバナーを作ろう！」と思って挫折した経験があります。
でも、実はデザインって真似から始めていいんです。
もちろん自分のサイトを作るときに誰かが作ったサイトを丸パクリをするのはNGですが、例えば
・このサイトのヘッダーのレイアウトが参考になるからレイアウトを参考にしよう
・このサイトの配色が素敵だから配色を参考にしよう
・このサイトのボタンのデザインが素敵だからこれを参考にしよう
などなど、自分が素敵だなと思った要素のアイデアを借りてくることは全く悪いことではないです。
むしろ、Webサイトってある程度パターンが決まっているので、ユーザーが見たときに「このWebサイトはこうやってスクロールすれば次に進めるんだな」と直感的にわかるデザインにしたほうがわかりやすいサイトになります。
まずはバナートレースから
おすすめはバナーの真似(トレース)から始めて、Photoshopの操作方法を習得しつつ、デザインの引き出しを増やしていくことです。
Pinterest でバナーと検索すれば色々なバナーが出てくるので、お気に入りのものを保存して、真似して作ってみるのが良いです。
作るときに、デザイン本で学んだ余白やデザインの原則がどんな風に活かされているのか考えながらトレースするとより勉強になると思います。
LPのトレースはPhosohopの操作に慣れてからがおすすめ
Webデザイナーになるためにはランディングページ(LP)と呼ばれる1枚ペラのサイトが作れるようになる必要があります。
Pinterestで検索しても沢山出てきますし、このようなLPまとめサイトがあるのでぜひ覗いてみてください。
LPのデザインを極めていくのもトレースは有効な手段なのですが、Phosohopの操作方法がうまく分かっていない状態からLPのトレースを始めてしまうと恐らくつまずいてしまうので、バナートレースでフォトショの操作に慣れつつ、デザインの引き出しを増やしてから取り組みましょう。
Webデザイン独学におすすめの本やツール：コーディング編
ドットインストール
無料で動画を見ながらコーディングを学習できるサイトです。Webデザインを習得したい場合は「ウェブサイトを作れるようになろう」のレッスンを受講すると良いです。
1本の動画が3分程度にまとめられているので、隙間時間に学習を進められます。
また、コーディングに必須のエディタのダウンロードの仕方から解説してくれているのがポイントです。
途中から有料プランに契約しないと動画を見ることができないのですが、無料で見られるHTML/CSSの概要理解の動画だけでもかなり勉強になると思います。
これからはじめる HTML & CSSの本
私、実は一度コーデイングが苦手すぎて挫折しているのですが、この本をやってそれでも理解できなかったらWebデザイナーは諦めようと思って購入した本がこちらです。
「ここでクリックする」のレベルで解説をしてくれていて、本のとおりに進めれば1つサイトを完成させることができるので、達成感も得られます。
本の中ではメモ帳機能を使ってコーディングをしているのですが、ドットインストールで解説してくれる「Visual Studio Code」を使って書いてももちろんOKです。
デメリットはコードの書き方がやや古いこと。ですが学習の入り口として、「コーディングって意外と簡単！」と苦手意識を持たずに取り組めるのではないかと思います。
コーディングの基礎の基礎を習得できたら、次はこの本がおすすめ
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
ある程度HTMLとCSSの仕組みと基礎が理解できたら、この本を進めるのがおすすめです。
個人的に、「本のとおり進めるだけで1つのサイトが作れる」内容の方が終わったあとに形になって達成感が得られるので好きなのですが、この本は読み進めながらHTML&CSSを打ち込むだけでおしゃれなサイトが1つ作れます。
また、要素を横並びにする方法に「flex」という便利なコードがあるのですが、flexを用いて解説してくれている点も良いと思いました。
デメリットはjqueryの解説がないこと。jqueryを使うと写真がふわっと動いて表示されたり、ボタンを押すとメニューが出てきて・押すと閉じる ような動きのあるサイトが作れるのですがその解説はないのがデメリットかなと思います。
しかし、最初から全部詰め込みすぎると初心者の方はパンクしてしまうと思うので、まずは入門書としてこの本を1冊完了させてからjqueryの学習を進めていけば良いと思います。
コーディングをある程度習得できた方向け
６ステップでマスターする「最新標準」HTML CSSデザイン
HTMLとCSSの基礎がマスターできたらこちらの本がおすすめです。
この本はコーディングの基礎知識をある程度習得した方向けの本です。HTMLのしくみなど、細かい解説はないのですが、これも本のとおりにコードを書いていけば1つのサイトが作れる(下層ページも一緒に作れる)ので、非常に参考になります。
1つサイトを作成したあと、レイアウトを変えるテクニックなども紹介されているので他のサイトにも応用することができます。また、jqueryを使って開閉できるメニューを作る方法も解説されています。
私はこの本を1冊終えてから自分のポートフォリオサイトを作りました。
最初からオリジナルのデザインでサイトを作ろうと思うと「このデザインはどんなコードを書けばいいんだろう・・」と悩んでしまうと思ったので、ほぼこの本を参考にして作りました。
番外編：最初に少しまとまったお金をかけられる方は
デジハリのAdobeマスターコース
Webデザインに必須のツールといえばPhotoshopですが、Photoshop単体だと月額1000円程度でAdobe公式サイトから契約することができます。
また、Photoshop以外のAdobeソフトを全部なんでも使える「コンプリートプラン」だと月額5,680 円/月 (税別：2020年6月現在)の契約が必要です。(高い！！)
でも、クリエイティブな仕事を始めると、ロゴや紙物を作るならIllustratorのほうがいいし、動画編集をしたいならPremiereproを使えた方がいいし、Webサイト作るならXDも使いやすいし・・と、どんどん使いたいAdobe製品が出てくるので結局コンプリートプランを契約した方がお得なんですよね・・
そんなAdobeソフトを月額約半額で使うことができ、しかもソフトの使い方まで動画で教えてくれるめちゃめちゃお得な神のようなサービスがあります。
それがデジハリのAdobeマスター講座です。
https://online.dhw.co.jp/course/adobe/
一括で約4万円(2020年6月現在)を支払えば、
・1年間Adobe製品を使うことができる(コンプリートプランに契約したのと同じ内容でソフトを使うことができる)権利がついてくる
・Photoshop、Illustrator、PremierePro、Dreamweaver(HTMLとCSSの解説)動画がついてくる
めちゃくちゃお得なプランです。
私はこれに契約して、Photoshopの使い方とDreamweaver(VScodeと同じようなAdobeが提供しているエディタ)の使い方を勉強しました。
Photoshopのレイヤー構造って？RGBって何？というレベルから解説してくれているので初心者の方もすぐに理解できる内容になっていると思います。
ただし、デメリットもあります。
・動画の視聴期間は1ヶ月間
・動画内で使っているAdobe製品のバージョンが古いので、今と若干操作が異なる部分がある
それでも、Adobe製品を使えるおまけと思えば十分すぎるくらい丁寧にわかりやすく解説してくれているので、個人的にはこの動画で学習を進めて良かったなと思います。
最後に
以上、独学でWebデザインを進めるためのおすすめ本やサービスをご紹介させていただきました。
自分でやってみて、「もっとデザインを極めたい！」「コーディングの方が得意だから、フロントエンドエンジニアを目指すのも良いかも？」と思ったら、目的に合わせたスクールに通うのも１つの手です。
ぜひご自身に合った方法でWebデザインの学習を進めてくださいね。
