HOME/独学でwebデザイナーになるには

独学でwebデザイナーになるには

知識も経験もないけれど、独学でwebデザイナーになりたい!という方向けに情報をまとめました。

右も左も分からない状態から独学でwebデザインを学ぶなら、効率的な学習方法や注意しておきたいポイント、心構えを知ることが重要です。

ほかにも必要な資格やスキル、適性など、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デザインの勉強を始める場合、初心者が陥りやすいさまざまな罠に注意しなければなりません。知識が一切ない状態から独りでwebデザイナーを目指すわけですから、失敗しやすい勉強方法を知ってあらかじめ備えておきましょう。

何から手を付けていいか分からなくなる

webデザインに必要な知識は、HTMLやCSSなどのマークアップ言語に始まり、Photoshopやillustratorなどのグラフィックソフト、デザインスキルまで多岐に渡ります。

「今日からwebデザイナーになるために勉強を始めよう!」と意気込んだものの、HTML・CSSの膨大なタグの種類や使ったことがないソフトの操作でみるみるうちにやる気が奪われてしまった…というのはよくある話。

また、基礎を飛ばしていきなり応用から手を出してしまうのも失敗パターンです。

そうならないよう、独学で成功した人の勉強方法をマネしたり、初心者向けの参考本を読んだりすることから始めましょう。

最初からすべてを理解しようとする

webデザイナーは幅広い知識が必要なので「まずは片っ端から覚えなきゃ」と思っている人も多いのではないでしょうか。

初めて見る専門用語やタグを覚えることだけに集中すると、全体的な勉強の進みが遅くなりますし、何より楽しくありません。

特にHTMLやCSSはタグの種類が多いうえ、似たような記述も多いので初心者はつまずきがち。実際はよく使うタグ・あまり使わないタグがあるので、一度にすべてを覚える必要はないのです。

どうしても暗記すべき部分はありますが、「このタグを使ったらこうなるんだ」「色をこう変えたら見やすくなるんだ」というように、手も動かしながら学ぶことが継続のコツですよ。

質問できる人がいなくて詰まってしまう

独学で一番大きな壁となるのが、質問できる相手がいないこと。分からないところがあっても、インターネットや本から探して自分で解決しなければなりません。

すぐに見つかれば良いのですが、特にインターネット上にはたくさんの情報が溢れているので、正しい情報を選ぶ必要があります。

レベルが上がるにつれて分からないことと調べる時間が増え、勉強がなかなか進まなくなり、挫折の原因に…。

ずっと独りで勉強するのではなく、勉強会に参加したり、SNSで仲間を探してみるのも一つの手ですよ。

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デザイナーを目指すための心構えと目標

学習方法や注意すべきポイントが分かっても、勉強を継続させなければスキルは手に入りません。とはいえ、1つのスキルを習得するまでには、多くの時間を費やす必要がありますし、勉強のスケジュールも自分で管理しなければなりません。

独学でwebデザインを学ぶなら、「何でも自分でやる」姿勢を持つようにしましょう。webデザイナーとして仕事をするときも、自分から学び・問題を解決していく力はとても重要となってくるからです。

では独学でモチベーションを維持し続けるには何が必要でしょうか?答えは簡単です。目標を立てること。

では、一般的にwebデザイナーはどのような目標を立てるのでしょうか。

フリーランスで働けるレベルのスキルを身につける

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デザイナーとして取っておきたい資格・検定まとめ

数あるwebデザイナーとの差別化を図るために、おすすめの資格・検定を一覧にしました。

webクリエイター能力認定試験

株式会社サーティファイが主催している試験。一般知名度が高いので、資格を所持していると自己アピールに繋がります。合格率は65%とそこまで高くありません。腕試しに丁度良い試験です。

ウェブデザイン技能検定

国家資格に分類されているwebデザイン技能検定。1・2級は誰でも受験できるわけではなく、学校や専攻過程を修了していないと受験ができません。webについて幅広い知識が必要となります。

アドビ認定エキスパート(ACE)

受験料が18,900円とかなり高額な試験ですが、日本だけでなく万国共通の認定書が発行されるので、資格を所持しているだけでwebデザイナーとしてのスキル表明が十分できます。

HTML5プロフェッショナル認定試験

実際の現場で役に立つ資格を目指しているので、実践経験がないとかなり苦労する試験です。レベル1・2と2種類あるので、自分の能力に合わせてレベルを選択しましょう。

PHP技術者認定試験

この試験の面白い点は、正答率によって認定される級が変わることです。正答率が5~7割で準上級、7割以上で上級の資格が取得できます。

受験料や出題形式、サンプル問題をまとめたので、気になる資格・試験があった人はチェックしてみてください。

取っておきたい資格・検定についてこちら>>

webデザイナーに必要なスキル・条件とは

webデザイナーになるために必要なスキル・条件は一体どんなものなのか、またどんなWEBデザイナーが優秀と称されているのかまとめました。

webデザイナーとしての必要条件

webデザイナーとして仕事を受けるなら、HTMLやCSSといったマークアップ言語を知っておくべきです。それからデザインに欠かせないphotoshopやillustratorなどの画像処理ソフトを使いこなすスキルも必要です。

webデザイナーがスキルアップに必要な能力

webデザイナーとしてのスキルアップを望むなら、必要な能力が5つあります。それは、事前準備力・理解力・ライティング力・マーケティング力・問題解決能力です。なぜその5つが大切なのか解説しています。

成長しないwebデザイナーの悪例

変化が目まぐるしいWEB業界にとって、成長しない選択肢を取ることは絶対にNGです。どんな人に成長が見込めないのか、その悪例をまとめました。

独学から優秀なwebデザイナーになるには

独学で勉強して優秀なwebデザイナーを目指すなら、活躍しているwebデザイナーの姿勢を学ぶことです。優秀と称されているポイントを確認して、取り入れられる部分は吸収しましょう。

一人前のwebデザイナーを目指す際の参考にしてみてください。

取っておきたい資格・検定についてこちら>>

webデザイナーへの向き・不向きチェック

人には向き・不向きがあるものです。webデザイナーに向いている人・向いていない人の特徴をまとめたので、適性を知りたい人は確認してみましょう。

webデザイナーに向いている人はこんな人

webデザイナーに向いている人は、以下の通りです。

  • 人に喜んでもらうことが好きな人
  • 飽くなき探求心、コミュニケーション能力がある人
  • クライアントの依頼をしっかり理解できる人
  • チーム一丸となって仕事を進められる人
  • 細部にこだわり、ちょっとしたミスも見逃さない人
  • 集中力、精神力、体力があり何時間でも作業できる人
  • 柔軟な考えができ、新しいものが好きな人

好奇心が旺盛で、人と関わることが好きな人はWEBデザイナーに向いていると言えます。

webデザイナーに向いていない人はこんな人

  • コミュニケーション能力に自信がない人
  • 仕事に対してやる気がない人
  • 時間の管理ができない人
  • おおざっぱで細かい作業が苦手な人
  • 感受性が低い、自由な発想が思い浮かばない人
  • 仕事に安定性やコスパを求める人

webデザイナーはコンスタントに仕事ができる能力が求められるので、安定感がない人はwebデザイナーに向いているとは言えないかもしれません。

あくまで適性チェックなので、向いていない人で引っかかったからといって、落ち込む必要はありません。向いている人のチェックを増やせるように努力を重ねましょう。

webデザイナーの向き不向きを見極める適正についてこちら>>