独学で勉強する

独学でwebデザイナーになるための方法と、学んでおきたい内容についてまとめています。

独学でwebデザイナーになるための学習方法

webデザイナーになるには、スクールに通うだけでなく独学でスキルを身につける方法もあります。webに関する知識がまったくない段階からの勉強は大変ですが、好きなときに自分のペースで学べるのがメリットです。

以下に独学でwebデザイナーを目指す方法をまとめましたので、ぜひ参考にしてください。

webサイトの仕組みと基礎を学ぶ

まずは、webサイトのベースとなるHTML・CSSの仕組みを知る必要があります。これらを習得していないと、webデザイナーとして仕事をしていくことはできません。知識を身につけるには、HTML・CSSに関する初心者向けの書籍がおすすめ。

3~4冊ほど熟読すれば、HTML・CSSがどんなものなのかをあらかた理解できるでしょう。ネットでも情報を得ることはできますが、中には間違った情報を掲載しているサイトもあるので気をつけてください。

グラフィックソフトを使いこなせるようにする

webデザインに必要なグラフィックソフトは、web業界でも広く使われているPhotoshop・illustratorからスタートすると◎。これらを使いこなせないと、仕事としてのwebデザインはほぼ不可能だからです。使い方に関しては、1つのソフトにつき2~3冊ほどの書籍を参考にするとよいでしょう。実際にソフトを使用しながら読み進めると習得が早くなります。

優良なサイトをトレースしてみる

webに関する基本的な知識を学んだら、実際にwebデザインに挑戦してみましょう。実践でもっとも効果的なのは、自分が「素敵だな」「こういうサイトを作りたいな」と思うwebをトレース(模写)してみること。クオリティの高いデザインをトレースすることで、より技術とセンスを磨くことができます。トレースしていくうちにスキルがしっかりと身につき、1からwebサイトを立ち上げる力がつくはずです。

webデザインを学ぶ際に陥りがちな罠

独学でいざwebデザインを学ぼうとして、学習を進めると手が止まってしまうことも。受験勉強などと同じ感覚で始めようとすると、スキルが身についている感覚がしないので、露頭に迷ってしまうという方も多いようです。

HTMLやCSSを学ぶと、多くのタグが出てきます。それらを丸暗記しようとすると、確実につまずきます。タグの種類は膨大で、似た記述も散見されるためごっちゃになってしまうことも。実際に、頻繁に使うタグもあれば使用頻度の多くないタグもあり、それらをまとめて覚えようとすると大事なものが覚えられないこともあります。

重要なのは、実際に手を動かしてwebページ上の変化を楽しみながら進めること。実践を重ねていかないと、身につくスキルではないのがwebデザインです。分からないことを調べながら進め、課題を解決することで知識もスキルも身についていきます。

webデザインを身につけるまでのステップ

学習する方法が分かったら、手順を踏んで学んでいきます。ここでは、ステップに沿いながら便利なツールなどについても紹介しています。

先に準備しておくもの

webデザインを学ぶにあたって、あらかじめ用意しておきたいものがあります。

  • デザインソフト(Photoshop・illustratorなど)
  • 教材(デザイン全般に関するもの、webデザインの専門のもの)
  • テキストエディタ

デザインソフトは体験版があるものも多いですが、腰を据えて学習するのであれば購入してしまいましょう。Adobeのソフトなどは、年間契約であれば少し費用がお得になったりします。AdobeのCreative Cloudコンプリートプランでは、Photoshop・illustrator以外にもDreamweaverなどAdobeソフト全てが使えます。もちろんソフトごとの契約も可能ですので、どこまでデザインを突き詰めたいかによって、揃えるソフトを決めましょう。

教材に関しては、webデザイン専門の書籍はもちろんのこと、webに限らないデザイン全般についてのものがあるとベター。デザインを学ぶにあたっては、webや紙など媒体が違っても共通点は多いです。web以外でデザインを学んできたという方は、ここを省略しても大丈夫です。

テキストエディタは、フリーでダウンロードできるものがありますので探しておきましょう。サクラエディタやSublime Textがおすすめです。サクラエディタは日本語対応のフリーエディタです。Sublime Textは無料お試しが無制限で使えます。基本は英語版ですが、プラグインで日本語表示も可能となっています。他にもテキストエディタはたくさんありますので、いろいろ試して自分に合うものを使いましょう。

まずはデザインの基礎から

webデザインというとHTMLやCSSなどをイメージしがちですが、まずはwebに限らないデザインの基礎を学びましょう。

web上でできることが増えても、配色やレイアウト、文字組みといったイメージができなければデザイナーとしては失格です。自分が作りたいものをイメージするためにも、書籍や雑誌などを読んで基礎を身につけます。4つの基本原則などは、基本中の基本として押さえておくべきですね。

  • 近接
  • 整列
  • 反復
  • コントラスト

インターネット上にも、多くのデザインに関する情報が掲載されていますが、ここは書籍などで体系的に語られるものから学ぶことをおすすめします。レイアウトなど、webでよく見られるものに捉われてしまうと、デザインの幅もおのずと狭まってしまいます。媒体を超えたデザインの基礎を身につけましょう。

HTML・CSSを手を動かしながら学ぶ

デザインの基礎を学んだら、ようやくHTML・CSSにいきます。とはいえ、何から手をつけていいか分からないという方もいらっしゃるはず。書籍で学びながら、web上の学習ツールで手を動かしてみるのも一つの手です。

  • Progate
  • ドットインストール

Progateは実際に操作画面に入力しながら進めていく学習ツールです。無料会員では初級編までしか学べないですが、有料会員になれば月額980円で無料会員の4倍以上のコースを受講できます。月額制なので、早く進めれば1ヶ月でも完了することは可能です。

ドットインストールは動画を見ながら進める講座です。HTMLであれば3分動画で全24回、1時間強で見終えることができます。3分程度なので、移動時間などでも有効活用ができます。

実際に基礎を学んだら、ネット上にあるテンプレートなどを使いながらソースを組んでみましょう。実際にページを1つ作ってみると、どんなことができるかが分かってくるはずです。最初は書籍に書いてあるソースを書き写すだけでも、HTMLやCSSの仕組みについて理解を深めることができます。

難しいと感じたら…

実際に進めてみると、イメージ通りにならないこともあります。費用はかかりますが、スクールに通うのも一つの手です。体系的に学ぶことができますし、何より疑問点を解決してくれるインストラクターがいるのが強み。独学に限界を感じたら、スクールで必要な講座を受けるのがおすすめです。とはいえ、スクールに通うにしても基礎的な部分が分かっているだけで理解するスピードは異なってきますし、学習ツールなどを使ってあらかじめ基礎に触れておくことが必要です。

独学でwebデザイナーを目指すための心構えと目標

独学でもwebデザイナーを目指すことは可能ですが、そのための勉強は非常に大変です。1つのスキルを習得するまでに多くの時間を費やしますし、勉強のスケジュールも自分で管理しなければなりません。独学でwebデザインを学ぶなら、「何でも自分でやること」を楽しむ姿勢を持つようにしましょう。webデザイナーとして仕事をするときも、自分から学び・問題を解決していく力はとても重要となってくるからです。

また、独学でwebデザイナーを目指す場合も、スクール通いと同じく最終的には「ポートフォリオ(作品集)」を作成することが目標となります。ポートフォリオがないと自分のスキルをアピールすることができず、就職・転職活動もできません。自信を持ってプレゼンができる、そんなポートフォリオを作れるよう独学に励んでください。

独学でWebデザイナー資格取得におすすめの参考本5つご紹介

独学でwebデザインを習得するのはかなり大変ですが、決して不可能というわけではありません。Webデザイナーの資格を取得するのにおすすめの参考本をご紹介しますので、独学での資格取得を目指す方はぜひ参考にしてみてください。

初心者向け!HTMLとCSSを学ぶ『スラスラわかるHTML&CSSのきほん』

まずはwebデザインの基本とも言えるHTMLとCSSについて学びましょう。

『スラスラわかるHTML&CSSのきほん』は、初心者向けのかなり易しい内容になっています。実際に小さなサイトを作りながらHTMLとCSSを学ぶことができますよ。タグやレイアウトなど今後も役に立つ知識を身に付け、どんどん活用していきましょう。

HTML部門、CSS部門とわかれて記載されてあり、それぞれの章の分け方も非常に丁寧です。かなり初心者向けの内容となっているのである程度の知識がある方には物足りない印象がありますが、一冊手元にあると何かにつまずいたときにヒントを与えてくれるかもしれません。

辞書代わりに!実践的なデザインを掲載『HTML5&CSS3レッスンブック』

HTMLやCSSの基礎が身に付いたら『HTML5&CSS3レッスンブック』をチェックしてみましょう。かなり分厚く読み応えのある内容になっています。分厚いのですべて読もうとすると挫折してしまいそうですが、気になるところだけに重点を置いて読み進めればスムーズでしょう。つまずいたときの辞書代わりにもなってくれます。

こちらも実際にホームページを作りながら動作を確認していくという内容のもの。応用テクニックなど、ワンランク上を目指せるコツも紹介されています。

この本の内容が理解できるようになったら、より踏み込んで本格的なデザインを学べる『HTML5&CSS3デザインブック』も登場していますので、併せて読んでおくことをおすすめします。かゆいところに手が届くような実践的なデザインが多く掲載されており、今後webデザイナーとして活躍したい方には非常におすすめの一冊となっています。

4つの基礎から具体的な作品例まで『ノンデザイナーズ・デザインブック』

Webデザインの基礎が分かりやすくまとめられているのが『ノンデザイナーズ・デザインブック』です。タイトルにあるように、デザイナーではない人に向けて書かれているので初心者でもスっと理解することができるでしょう。

デザインの4つの基礎から具体的な作品例まで掲載されており、今後デザインをしていく上で役に立つこと間違いなしの内容になっています。 Webサイトの他、チラシやメッセージカードにも活用できるようなデザインが多く掲載されていますので、就職を考えたときにこの一冊があれば様々な仕事で活用できることでしょう。

JavaScriptの基本から!『確かな力が身につくJavaScript「超」入門』

Webデザイナーを目指すならJavaScriptについての理解も深めておく必要があります。その点では『確かな力が身につくJavaScript「超」入門』はかなりおすすめ。基本的な使い方はもちろん、実用的なテクニックも多数掲載されています。プログラミング初心者でまったく分からない!という方にも易しい内容になっているので、まずはこちらの内容に一通り目を通しておくと良いかもしれませんね。 JavaScriptは様々な活用方法がありますが、難しい参考本を読むためにも一冊手元にあると便利でしょう。

WordPressのデザインがよくわかる!『WordPressデザインブック3.x対応』

本格的なホームページを手軽に作れるツールとして人気のWordPress。デザインを自由自在に扱えるので、これからwebデザイナーを目指す方にはぜひチェックしておいてほしいです。そんなWordPressのデザインについてよくわかるのが『WordPressデザインブック3.x対応』。これまでに紹介した本を読んでいればこの内容もかなりわかりやすくなっているかと思いますが、不安な方は『WordPress レッスンブック 3.x対応』も併せてチェックしておくとよりわかりやすくなるでしょう。

全ページカラーでCD-ROMも付属しており、非常に見やすいのが特徴的です。時間のあるときにパラパラと読み進めるだけでも、今後の活動のヒントになることでしょう。

エリア別おすすめwebスクール3選はこちら>>

関連するページ