HOME  お役立ちブログ  独学でWebデザイナーになるには?!
お役立ちブログ

独学でWebデザイナーになるには?!

Webデザインを勉強したいと思う人は多いかもしれませんが、通常科目と違って特に決まった正解がないため、これといった勉強法があるわけではありません。独学で勉強することが比較的難しい分野です。
難しいと言われる理由はどんな勉強すれば良いのかが分かっていないことが主な理由である場合が多いです。段取り良く必須技能や知識を習得していけば誰でも独学でWebデザインを学ぶことができます。
効率的に独学でWebデザインを勉強するための方法をまとめました。

 

Webデザインの勉強は独学でも可能か

独学でWebデザインを勉強できるのか、という疑問があるかもしれませんが、結論から言うと独学でWebデザインを学び、身に付けることはできます。
明確に正しい方法というのはありませんが、勉強のための大体の方向性はあります。

  • なりたいWebデザイナーを想像し、ゴール設定
  • 勉強するための時間
  • 勉強する順序

ゴールを決めるということはとても大事です。ぼんやりとWebデザインの勉強をしようと思いついても、ゴールが決まっていなければ何をどれだけどんな順序で学べばいいのかが定まりませんし、やる気も起きません。そのため、なんとなくWebデザインを勉強したいと考えている方は、独学での勉強だと途中で飽きてしまうでしょう。
また、しっかりと時間を確保しなければ、いつまで経ってもスキルが身につかず、なんとなく惰性で続けているような状態になってしまいます。学校に通っての学習とは違い、自身で時間を作り出すことは独学でのWebデザインの学習を成功させるための秘訣です。
もちろん、時間にも金銭面にも余裕のある方は、Webデザインをオンラインスクールなどで勉強した方が、短期間で確実にスキルを身に付けることができるため、失敗しにくいというメリットはあります。
最後に、勉強する順序を間違えないという点ですが、HTMLやCSSがわからない状態でいきなりJavaScriptの勉強から始めても、分からないことだらけでほとんど知識が身につきません。
このブログで紹介する記事を参考にして、独学で効率よくWebデザインの学習を進めていただければ幸いです。

 

Webデザインに必要なスキル

Webデザインとひとくくりに言っても、デザイナーによってそれぞれ得意とする分野やできることできないことは色々です。そのため、どういったWebデザイナー目指すのかを決めて、自分の中での「ゴール」を決めておきましょう。
一般的にWebデザイナーと呼ばれる人たちは、下記をある程度使いこなすことができます。

  • HTMLとCSS
  • JavaScript, jQuery
  • デザインの基本スキル
  • UI/UXデザインのスキル
  • デザインツールのスキル

Web制作はただ見た目がかっこいいサイトを作ることが目的ではありません。公開後に役に立つWebデザインやWebサイトを作る必要があります。そこまでできるようになって、始めてWebデザイナーとして名乗れるようになります。そのためには、UIデザインやUXデザインのような基本的なスキルはもちろんのこと、HTMLやCSSと呼ばれる領域までできることを広げていかなければなりません。
独学ですべて身に付けることはそう簡単ではありませんが、どれも努力すれば必ず身に付けることができます。

 

HTMLとCSSを独学で身につける

HTML、CSSはWebサイト制作の基本です。これが扱えないと、Webサイトを作れません。
しかし、HTMLとCSSは他の言語と比べると独学でも学習を行いやすく、必要な時間は人それぞれかもしれませんが、比較的短期間で基本を覚えることができます。
HTMLはWebサイトの骨格を作る部分で、サイトに表示する内容は基本的にHTMLで記述されています。
CSSはWebサイトのデザインを整えるための部分で、サイトのレイアウト、文字の色、マージンなどはCSSで記述されています。

 

HTMLとCSS

最近ではプログラミングやコーディングを覚えるためのオンライン学習サービスが充実してきており、応用分野まで無料でしっかりと学習できるものも増えてきました。
オンライン学習サービスを使うことによって、知識のインプットを行いながら同時にアウトプットも行っていくことができるので、効率よくWebデザインの学習を進めることができます。

 

「Progate」

Progateはブラウザ上で実際にコーディングやプログラミングを行いながら、学習を進められるオンライン学習サービスです。実際にコーディングを行うことで、効率よく学習を進めることができます。

「Progate」はこちらから

 

「ドットインストール」

ドットインストールは色々なプログラミング言語を3分動画で学ぶことができる有名なサービスです。
実際にコーディングしている画面を見ながら説明を聞くことができるため、実際にコーディングのレッスンを受けているような感覚になります。
これだけ優れた内容を無料で視聴できるということで、利用しない手はありません。

「ドットインストール」はこちらから

 

JavaScriptとjQueryを独学で身につける

JavaScriptやjQueryはWebサイトに「動き」をつける役割を果たします。
基本的なWebサイトを作る場合はHTMLとCSSで完結させることもできますが、使いやすさやデザイン性を追い求めるとJavaScriptやjQueryが必要となってくる場合が多いです。
例えばクリックするとメニューが表示される「ハンバーガーメニュー」や、写真がスライド形式で表示される「カルーセル」の多くはJavaScriptを使って作られています。
jQueryはJavaScriptのライブラリという説明をされることが多いですが、簡単に行ってしまうとJavaScriptを使いやすくしたものです。基本的な文法はJavaScriptと同じですが、jQuery特有の書き方も存在していて、上辺の理解ではJavaScriptと混同してしまう方が多いです。
jQueryのプラグインには便利なものが本当に多く、使いこなせるようになると作成できるWebサイトの幅が広がります。優れたWebサイトを作るためには必須の知識ですね。

  • JavaScriptとjQuery
    JavaScriptとjQueryもオンライン学習サービスでコンテンツが充実しているので、上記でご紹介したドットインストール、Progate、Codecademyなどで基本を学ぶことができます。
    その他にも様々なサイトで扱われていますのでご自身で探してみるのも良いかもしれません。
  • 「ドットインストール」
    「ドットインストール」はこちらから

 

デザインスキルを独学で身につける

デザインスキルと言われても漠然として実感がわかないかもしれませんが、デザインにもコーディングと同じように押さえておくべき要点が存在します。
優れたデザインと言われるものは、装飾豊富であっても簡素であってもでも、デザインの基本は押さえ、その上であえて崩したりしています。
デザインは技術ではなく知識です。ただ見た目良く体裁を整えることはデザインではなくアートであり、それは「商品」ではなく感性のみに頼った、ただの独りよがりな「作品」でしかありません。
「対象をより機能的にすることで美しく見せる」という本質が身につけば、デザインの知識はWeb制作に限らず、印刷物制作やプレゼン資料作成など様々な分野で活かすことができるので、必ず役立ちます。

 

優れたサイトを参考にしてテクニックを覚える

実際のWebサイトから色々なテクニックを学びます。評価の高いWebサイトをたくさん閲覧し、「何故良いとされているのか」「これは何の目的で作られたのか」「使いやすさは」など疑問点を自分なりに紐解いて行くと良いでしょう。
いきなり自分で0からWebデザインを始めようと思っても、なかなか作れません。まずは世に出ているWebサイトから優れたアイデアやテクニックを学習し、盗んでいくことが必要です。
Webデザインのギャラリーサイトを活用すれば、優れたWebサイトに絞って見ていくことができます。

Webはトレンドが日々変わって行きます。ギャラリーサイトは定期的にチェックして、最新のデザインにアンテナを張りましょう。

 

実際に作ってみる

デザインスキルを身につけるのに最もおすすめなのは実際にデザインを作ることです。
オリジナルでいきなり作り始めるのも良いですが、最初は自分がかっこいいと思うWebサイトを真似て作ると勉強になります。
閲覧時の感覚とは違い「この要素がなぜここにあるのか」など作る側として気づくことがたくさんある筈です。そういった感覚は制作の上での武器になりますしまた、今後様々なWebサイトを閲覧する上でも目が肥えてより深い部分にまで意識が働くようになります。

 

デザインツールの使い方を独学で身につける

Webデザインを作るときは、UIデザインをデザインツールで作成し、そのデザインを元にしてHTML、CSSでコーディングをしていくという流れが一般的です。
デザインツールを使いこなせるようになることで、デザインの幅が広がるだけでなく、効率的にデザイン制作を行えるようになります。

 

Webデザインの現場でよく使われているツール

Webデザインのためのデザインツールは様々なものがありますが、下記に紹介するツールが人気です。

  • 「Sketch」
  • 「Adobe XD」

Sketch、Adobe XDはUIデザインツールと呼ばれるジャンルのツールで、どちらか1つ使いこなせればWebデザインの制作ができるようになります。

  • 「Photoshop」
  • 「Illustrator」

PhotoshopとIllustratorは、それぞれ高機能なデザインツールで、使えなくてもWebデザインを制作することはできますが、使いこなせるとより高度で複雑なデザインが制作できるようになります。

 

デザインツールの使い方

デザインツールの使い方については、別の記事で詳しくご紹介しています。下記を参考にして、デザインツールのスキルを身に付けてみましょう。

「初心者必見!Illustratorの使い方を学ぶ6つのステップとおすすめの勉強法・書籍」

「Sketchの使い方を効率よく勉強するために」

 

本で基本を覚える

デザインツールの基本はWeb上のサービスではなかなか覚えることはできません。しっかりと必要な内容がまとめられている本を参考にして身につけるようにしましょう。

 

まとめ

Webデザインを身につけるためには知識を増やせばいいということではなく、様々なツールの使い方やトレンドに敏感である必要があり、常に幅広くアンテナを張っていなければなりません。やることはたくさんあります。しかしながら、だからこそ面白いのがWebデザインです。
コーディングの知識が豊富で手早く仕事をさばけるWebデザイナーもいれば、独創的で美意識の高いWebデザインが得意なWebデザイナーもいます。
優れたWebデザイナーの形はこれといったものはなく、各々得意分野を伸ばしていくことで個性が生まれます。
まずは基本を押さえて、やりたいこと・できることを踏まえて自分なりのWebデザインを追求してみてください。


ページトップへ