Webの最新トピックを配信中!

独学でWebデザインを勉強するための完全ガイド


「とにかくお金をかけずに独学でWebデザインを習得したい!」
という方のために、書籍とオンライン無料レッスン動画「ドットインストール」を最大限に活用した独学の方法を紹介します。

HTMLからPhotoshop、WordPressに至るまで、業界未経験からWebデザイナーになるために必要な一通りの知識をまとめました。

紹介する本やサイトはすべて僕自身が実際に勉強に使用したか、書店で読んでみて良いと思ったものなので安心してください。もちろん、ご自身で書店で読んでみて良いと思った本でもいいのですが、プロから見て実務に必要なことが網羅されているかという視点で選んでいます。もちろん初心者向けの本が対象です。

ここでは、下の順番で各スキルの独学方法を紹介していきます。

Photoshop → Illustrator → HTML/CSS → HTML5/CSS3/レスポンシブ対応 → jQuery → WordPress

この順番の理由は、まず、Photoshopでデザインに親しんだ後に、そのデザインを形にするHTML/CSSの学習に入るのが自然かと考えているからです。でも、HTML/CSSからやるか、Photoshopからやるかは、ご自身のモチベーションに合わせて選んでください。どちらからでも大丈夫です!

Photoshop(フォトショ)

Photoshopの入門書としては『Photoshop しっかり入門』がベストです。現場で実際に使う基本機能をほぼ網羅しているため、この一冊だけで十分です。

そう聞くと、けっこうボリュームがあって大変なのかな…と心配になるかもしれませんが、一つずつの機能をかなり丁寧に説明しているため、楽しくやり通せるはずです!

本文の解説で使用される画像ファイルはサポートページからダウンロードできるので、実際に本を開いて手を動かしながら学べるのでスキルの定着にもなります。おすすめです。

●本書の構成
Lesson 1 Photoshopの基礎知識
Lesson 2 はじめてのPhotoshop
Lesson 3 色調補正の基本
Lesson 4 選択範囲の作り方
Lesson 5 レイヤーの基本操作
Lesson 6 色の設定とペイント機能
Lesson 7 画像修正の基本
Lesson 8 フィルターの活用
Lesson 9 文字、パス、シェイプ
Lesson 10 総合演習
Lesson 11 便利な機能

「時間がない!もっとシンプルなやつを!」な方はこちら

上の本が「ちょっとボリュームがあってキツイ…」という方には、こちらの『デザインの学校 これからはじめるPhotoshopの本』が最適です!実はこの本は、僕が求職者支援訓練に通っていた時の教科書でした。

機能の紹介はよく使う必要最低限のものに絞られているため、Photoshopをとにかくまずは知りたい!人向けです。まぁとにかくやさしいわかりやすい本です。たぶんこの本で無理だったらちょっともう他に紹介できる本がないくらいですねw。

こちらもサンプルファイルをダウンロードできるので、Photoshopを触りながら勉強できる点がおすすめのポイントです。

Illustrator(イラレ)

Illustratorの勉強は『デザインの学校 これからはじめるIllustratorの本』でOKです。現場にもよりますが、Webサイトのデザインに使うソフトは、圧倒的にフォトショです。イラレの使用頻度は少なめです。だから、こちらの簡単な入門書で問題ありません。

こちらも僕が学校時代に教科書として使用していたものです。こちらもまぁめちゃくちゃわかりやすいです。文字も大きくページ数もそんなに多くないので、すぐにやり終えられるはずです。

ベジェ曲線が得意になりたい方へ

イラレでやや癖があるのが「ベジェ曲線」です。円やカーブなどの線を自在に書く機能なのですが、たいてい最初は面食らいますw。僕なんかまったくできずに当時けっこう落ち込んだものです。

ベジェ曲線の練習におすすめなのが『Illustrator トレーニングブック』です。丁寧に解説してくれています。もしイラストやアイコン制作が得意になりたいという方は、こちらの本もやってみてください。

あ、ちなみにベジェ曲線ができなくても落ち込まなくて大丈夫です!現場では、僕も他の同僚もちゃんと使えてないのでw。でもちゃんと仕事できているので大丈夫です。

HTML/CSS

HTML/CSSの本は、こちらの『スラスラわかるHTML&CSSのきほん』が断トツにおすすめです!架空のカフェサイトを作りながらHTMLとCSSを学べます。この「一冊を通して一つのサイトを作る」という学習スタイルが超おすすめポイントです。完成に近づくサイトを見ればモチベーションが断然続きやすいし、何よりサイトを作る楽しさを味わうことができます!

また、この手のコーディング系の本は、サンプルサイトが超ダサくて「なんでこんなサイト作らないとダメなの!?ヤダ!」となりがち(僕だけ?)ですが、サンプルの「KUJIRA Cafe」は、わりとイケてる方だと思いますw。第2版になりスマホ表示にも対応しました。実際こちらからアクセスできちゃいます。(タルトうまそ~)→KUJIRA Cafe

●本書の構成
・chapter01 Webサイト制作を始める前に
・chapter02 HTMLの基礎
・chapter03 制作の準備と基本のHTML
・chapter04 見出し、段落、リスト
・chapter05 リンクと画像の挿入
・chapter06 2ページ目以降を効率的に作成する
・chapter07 CSSの基礎
・chapter08 CSSでページのスタイルを調整
・chapter09 フロートとテーブルのスタイル
・chapter10 フォームの作成
・chapter11 Webサイトの公開

ドットインストールでHTML/CSSを勉強する(無料)

ドットインストールは、動画でコーディングやプログラミングを解説をしてくれるので、飽きずにわりとサクサクと勉強が進みます。「本よりも動画がいい!」という方はぜひこちらで勉強してください。無料です。
→HTML入門 (全24回)
→CSS入門 (全23回)

HTML5/CSS3/レスポンシブ対応

HTML/CSSでサイトが一つ作れるようになったら、さらにステップアップして最新のHTML5/CSS3に突入しましょう。

HTML5やCSS3は何をするものかといえば、簡単に言えば、角丸やグラデーションなどを実現できたり、メディアクエリーを使った「レスポンシブ(スマホ表示の最適化)」の対応ができたりと、コーディングのみで一気にできることが増える!とまずは思えば大丈夫です。現場ではどれもよく使うので、しっかり覚えてほしいです。

書籍は、『いちばんやさしいHTML5&CSS3の教本』がおすすめです。かなり内容は網羅されているため、これ一冊で基本は押さえられます。ちなみに、Kindle Unlimited(月額980円)に入っていると、なんとこの本はタダで読めるので、興味があればこの機会に加入してみてください。僕も入ってます。

「レスポンシブ対応をもっと勉強したい!」方はこちらもぜひ

「レスポンシブ」は、一つのコードで、PCとスマホの表示を実現するテクニックです。PCとスマホ版で別々のコードだと更新が大変ですよね。でもレスポンシブだとコードは一つなので、サイトの更新や管理がラクなのです。Googleも推奨している方法です。

レスポンシブの実装方法を詳しく解説しているのが、『HTML5&CSS3デザインブック』です。もっとレスポンシブを学びたい!という方はぜひこの本もやってみてください。レイアウトの組み方についてガッツリ踏み込んでいる内容なので、コーディングに強くなれます。

ドットインストールでHTML5/CSS3を勉強する(無料)

レスポンシブの動画レッスンもありますね。けっこう充実してますね。
→CSS3入門 (全19回)
→レスポンシブウェブデザイン入門 (全14回)
→CSSレイアウト入門 (全15回)
→実践!ウェブサイトを作ろう (全17回)

「実践!ウェブサイトを作ろう」はぜひ見てほしいです!サイトをゼロから作るので、サイト制作の流れがわかります。normalize.cssとは何か、faviconの設置方法、Webフォントの一種であるfontawesomeの使い方をここで覚えておくと良いでしょう。

jQuery

jQueryの入門書といえば、もう昔からこのドーナッツ本と呼ばれる『Web制作の現場で使うjQueryデザイン入門』が定番です。

僕の学校時代の時の教科書でもありました。とにかく中もカラフルで解説がわかりやすいのがおすすめポイントです。これ一冊やっておけば、jQueryの基本は押さえられます。

jQueryは一応プログラミングなので、苦手意識がある人はこのへんで少し辛くなるかもしれません。jQueryについてはあまり無理はし過ぎなくても大丈夫です。現場では、jQueryが書けないデザイナーもいます。フロントエンドエンジニアとして活躍したい方は、頻繁に使うことになるので、基本はしっかり習得しておいてください。

ドットインストールでjQueryを勉強する(無料)

→jQuery入門 (全20回)
→jQueryで作る先頭へのジャンプ機能 (全4回)

WordPress

WordPressは、こちらの『WordPressレッスンブック』がおすすめです。サイトを作りながらWordPressのカスタマイズが学べます。

WordPressの本を自分で選ぶ場合は注意してください。WordPressの使い方(投稿方法とか)の本と、オリジナルのテーマを作る本の2種類があります。後者の本を買ってください。Web制作の現場では、オリジナルテーマを作るスキルが重宝されています。

WordPressのオリジナルテーマを作る本ってあまりいいのが無いんですよね…。この本は少し情報が古いのですが、一番わかりやすいのでぜひやってみてください。

WordPressをカスタマイズする際には、PHPというプログラミング言語を少しかじる必要あるため、苦手な人はあまりやらなくても大丈夫ですよ。まずはHTML/CSS、HTML5/CSS3を習得することが先決です。Web制作会社に入ってから、WordPressを少しずつ勉強するのでも遅くはありません。

ドットインストールのWordPressレッスン動画もあるのですが、レッスンで使用されているWordPressのバージョンが3系と古いので、今回は紹介しません。今のWordPressは4系になります。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

“独学でWebデザインを勉強するための完全ガイド” への6件のフィードバック

  1. Tammy より:

    初めまして、ブログ拝見させて頂いております。
    現在大学四年生で就活中なのですが、悩み抜いた末にやっとWebデザイナーというお仕事をやりたいと思いました。というのも、自己分析が甘く、なかなか自分がやりたいことが見つけられなかったからです。
    Webデザイナーを目指していきたいのですが、未経験で勉強すら始めていませんので全く知識がない状態です。これからPhoto Shopの勉強を始めますが、このような常態からでもデザイナーとして採用してもらえると思いますか?
    また、もし厳しいと思われるならアドバイスをいただけると非常に有り難いです。お忙しいところ誠に申し訳ございませんが、何卒よろしくお願い致します。

    • ねこポン より:

      Tammyさん、はじめまして。
      もちろん誰もが未経験からなので、きちんと学ぶべきことを学べばWebデザイナーにはなれます。

      現在4年生なので、来年度(2019年度)からの就職はもしかしたら時間が足りなく間に合わないかもしれません。それなら、卒業前後に求職者支援訓練を利用し、その後に就職する手が良いかもです。
      大学生がWebデザイナーになる方法は下にまとめています。

      ◆新卒でWebデザイナーになる方法
      https://webdesigner-go.com/job/college-student/

      Webの基礎スキルを確実に身に着けて、ちゃんとした制作会社に入ろうとするなら↑の記事で紹介している「卒業してからWebデザインの求職者支援訓練か学校に通う方法」をオススメします。勉強時間をちゃんと確保し、確実な基礎スキルを蓄積した方がいいです。

      どうしても今年度中に内定したいのなら、
      ◆独学でWebデザインを勉強するための完全ガイド
      https://webdesigner-go.com/study/self-taught/
      こちらで紹介している書籍やProgateで独学で勉強し、Webの基礎の基礎を覚えたら、可能性は低いですが、どうにかして事業会社か制作会社のアルバイトなどに潜り込むことも可能かもしれません。まだお若いので、スキルが乏しくても会社によっては育成してくれる所も無くはないです。

      また何かあればコメントをください!

  2. あうとばーん より:

    はじめまして。
    ブログを拝見させて頂きました。
    ねこポンさんの履歴を拝見させて頂き、凄く似ていてコメントせずにはいられずお送りさせて頂きました。
    営業職の私は、3年前にwebデザイナーになりたいと思い、専門学校に通いましたが、諸事情がありwebデザイナーに転職しませんでした。
    その後、結婚を機に、給料アップを目指し営業職に転職し失敗し、前職の営業に戻る事になりました。
    難しいとは思いますが、手に職をつけたく、仕事をしながらもう一度勉強しwebを直したいと思っているのですが、仕事をしながら可能でしょうか?(29歳既婚)
    長文で申し訳ございませんが、ご確認の程宜しくお願い致します。

    • ねこポン より:

      あうとばーんさん、はじめまして!
      サイトを見ていただき、ありがとうございます。

      一度専門学校に通われていてWebの基礎スキルを持っているなら、仕事しながらでも可能だと思います。
      今はProgateや良質な書籍もあるので、仕事の合間に独学でも勉強できます。
      今後、Web系の仕事に転職を考えているのなら、スキルをブラッシュアップしつつ、ポートフォリオを作ります。

      副業のようにWebデザインをやりたいのなら、コーディングならランサーズなどで案件を得ることはできるかもしれませんが、
      デザインは厳しいです。デザインスキルは一度会社に入って実務でレベルアップをするべきだと僕は考えています。

      今度、本気で手に職ということを考えるなら、Web制作会社へ転職し、2年ほどスキルを磨くことをオススメします。

      またご質問があればいつでもコメントをください!

  3. 白鸞 より:

    諸事情で大学へは進まず高校卒業後直ぐに仕事をしていました。今はニートです。。。
    今までとは違う業種へ進みたいと考え、Webデザイナーの仕事をしたいと思います。
    こんな私でも独学で勉強して、アルバイトからWebデザイナーの仕事へ進めるでしょうか?

    • ねこポン より:

      白鸞さん、はじめまして!
      コメントをありがとうございます。

      僕の周りにも大学に行かずにWebデザイナーになっている方はいます。
      新卒で入社するわけでもなければ、学歴は問われないと思っていいです。
      大事なのはシンプルで「デザインかコーディングのスキルがあるかどうか」に尽きます。

      そして、Webデザイナーになれるかどうかは、
      「デザインかコーディングが楽しい!」
      あるいは
      「デザインかコーディングが苦ではない」
      のどちらかの状態になれるかどうかです。
      これでWebデザイナーになれるかどうかがほぼ決まります。それくらい淡々とした地味な作業だからです。

      なので、まずは独学なら勉強してみて、上の気持ちになれるかどうかです。
      なれたら、独学で基礎を身に着けたら、ポートフォリオを制作し、転職エージェントか転職サイトを通して就職(アルバイトなら見つかると思います)し会社で成長していくだけです。会社では学ぶことが多く最初は大変かもしれませんが、この気持ちがあれば楽しく乗り切れます。

質問や感想などお気軽にどうぞ!

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

  • なんでもWebの質問受け付け中 (^o^) /♪

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ