webデザイン初心者は何から始める?初心者がやるべき3つの勉強とは

Webデザイナーとは

Webデザイン初心者の勉強の仕方

初心者がWebデザインを始めるなら、何から始めれば良いのでしょうか。

そもそもWebデザインをする上で何を知っておけば良いのか、何から始めればWebデザインができるようになるのかわかりにくいです。
もしかするとあなたも「どうすればWebデザインが出来るようになるのか」疑問に思っているのかもしれません。

Webデザインは、勉強の順番や勉強する内容を間違わなければ、初心者でも出来るようになります。
実際に、デジタルハリウッドSTUDIO札幌に通うほとんどの人がWebデザイン初心者ですが、卒業する頃にはWebデザインが出来るようになって卒業しています。

Sさんもその1人でデジタルハリウッドSTUDIOに通う前は、全く関係のない職業についていました。
パソコンが苦手でも順序よく勉強することで、Webデザインができるようになり現在は卒業制作(オリジナルサイトの作成)に取り組んでいます。

そこで、今回はSさんを例に、Webデザイン初心者はまず何から始めると良いのかお伝えしていきます。
読み終えて頂ければ、どのようにしてWebデザインを学んでいけば良いのかも理解できるはずです。

1.Webデザイン初心者の卒業生Sさんが取り組んだこと

Sさんは主に3つのことに取り組んできました。

一般的なWebサイト制作の流れは

上記の図は、一般的なWebサイト制作の流れと同じ順番ですが、Webデザイン初心者はこの順番で学んでいくのがもっとも基本的です。
デジタルハリウッドSTUDIO札幌でもこの順番で学びますが、Webデザインの基礎を理解しながら勉強が進めるので、勉強に困ることが少ないのです。

それでは、ここからSさんが勉強した内容をあなたにお伝えしていきます。

1-1.デザインの勉強

Sさんはまず、デザインの勉強から取り組みました。
デジタルハリウッドSTUDIO札幌では、PhotoshopやIllustratorといったグラフィックソフトを使ってデザインを勉強していきます。

デザインの勉強をしているところ

初めから自分でオリジナルのデザインを作るのではなく、サンプルとなるWebサイトを手順通りに作っていくことで、デザインを勉強をしていくのです。

また、Webサイトのデザインを一つ作り終えたら、手順を思い出しながら「指示書」を参考に自力でWebサイトを一つデザインをしてもらいます。
そうすることで、グラフィックソフトの使い方やデザインの基礎を実践的に学ぶことができます。

「Webデザイン」を学ぶ上でもっとも大切なのは「実際にWebサイトを作っていく」ことなので、まずはデザインから学ぶ仕組みになっています。
デザインができなければWebサイトの完成図がないので、コーディングができません。
そのため、先にデザインの勉強をしてコーディングに備える必要があるのです。

1-2.コーディングの勉強

デザインの基礎を身につけた後は、次にコーディングの勉強に取り組みました。
コーディングは「HTML」と「CSS」といった言語を使って、デザインした通りにWeb上で見られるようにするための作業です。

コーディングの勉強をしているところ

ただし、いきなりコーディングを行うのではなく、HTMLとCSSの基礎から学びました。
HTMLとCSSはそれぞれ役割や書き方のルールがあるので、最低限の基礎がわかっていないとコーディングができないからです。

タグの意味

デジタルハリウッドSTUDIO札幌ではコーディングもデザインと同様に、サンプルとなるWebサイトを手順通りに作っていくことで勉強をしていきます。

こちらもWebサイトのコーディングを終えたら、デザインパートと同様に「指示書」を参考に自力でWebサイトをコーディングをしてもらいます。
これを繰り返すことで、コーディングのルールを1つ1つ覚えていけるので初心者でもわかりやすいのです。

1-3.JavaScriptの勉強

最後に取り組んだのがJavaScriptの勉強です。

JavaScriptは、Webサイトに動きをつけるためのプログラミング言語です。
JavaScriptにはライブラリと呼ばれる、あらかじめ書かれたコードやJavaScriptをより簡単に実装するためのライブラリであるjQueryというものがあり、それを組み込むことで動きがつけられるのです。

JavaScriptの勉強をしているところ

SさんはデジタルハリウッドSTUDIO札幌のカリキュラムで、JavaScriptの基礎を学び、実際にハンバーガーメニューやスライドショーなどの組込み方を実践しました。

1-4.オリジナルサイトの作成

デジハリではカリキュラムをひととおり学び終えたら、卒業制作としてオリジナルサイトの作成を行います。

卒業制作は、できるだけクライアントのいる実案件を推奨しています。
Sさんは初心者からWebデザインを初めて5か月、ここで初めて出来上がっているWebデザインではなく、ゼロからオリジナルのサイトを作ります。

2.初心者におすすめのデザインの勉強方法

webデザインに興味があっても、いきなりスクールなどに通って勉強するのではなくまずは自分で勉強してみようと思う人もいるかもしれません。
自分で勉強をするなら、ここからご紹介する勉強方法を試してみましょう。

デザインは配色やレイアウトの前に、PhotoshopやIllustratorといったグラフィックソフトの使い方を学ぶ必要があります。
なぜなら、グラフィックソフトの使い方がわからないと、デザインができないからです。
初心者は作品を作りながらその都度使い方を調べてくことで、、グラフィックソフトが使えるようになっていきます。

2-1.作品を作りながらグラフィックソフトの使い方を学ぶ

まずは何か作品を作りながらグラフィックソフトの使い方を学びましょう。
プロが使用するグラフィックソフトは機能がとても豊富なので、ツールの使い方をひとつひとつ覚えようとすると数が多くて挫折しがちです。

ツールボタンがたくさんある画像

それよりも実際に作品を作りながら「こういうときはこの機能を使う」といった覚え方のほうがわかりやすく、使い方を覚えやすいのです。
おすすめは「バナー」から作ることです。
バナーのような取り組みやすいものから作ることで、徐々に使い方を学べます。

バナーを作っている画像

2-2.徐々に作る作品をレベルアップする

初めは「バナー」のような簡単な作品から作っていくべきですが、慣れてきたら徐々に難しい作品に変えていきましょう。

初めから自分でデザインするのは難しいので、何か参考になるWebサイトを見つけて真似するようにします。

真似してデザインをしている画像

レベルアップした作品になるほどよく使うツールなどがわかってくるので、自然とツールの使い方が身につくのです。
そして、難しい作品になるほど配色やレイアウトに幅が出てくるので、構成力なども身につきます。

2-3.デザインをオリジナルで作ってみる

いくつかのデザインを真似しながら作れるようになったら、自分で考えたWebサイトのデザインを作り上げましょう。
仮想でも良いので、美容室など相手を想定して作ってみると良いです。

これまでは既にあるWebサイトの真似をするだけだったので、配色やレイアウトに関しては考える必要がありませんでした。
しかし、今回は構成を自分で考えなければ、デザインは出来上がりません

このとき、参考になるWebサイトを見つけて、構成などを参考にするとどうデザインすれば良いのか悩むことが少なくなるでしょう。

3.初心者におすすめのコーディングの勉強方法

コーディングは、参考とするWebサイトがどのようにコーディングされているのかを見て真似てみるのが初心者にもっとも良い勉強方法です。
Webサイトを作る過程で必要なタグや、コードの書き方を覚えることができるので参考にするサイトを決めて真似をしてコーディングしましょう。
最初はシンプルな1ページサイトを参考にするのがおすすめです。

3-1.HTMLとCSSの基礎を学ぶ

コーディングをする前に、HTMLとCSSの基礎について学んでおきましょう。
主に学ぶべきなのは以下の3つです。

①HTMLとCSSの違い
②HTMLとCSSのルール
③それぞれの基本構造と基本要素

まずはこの3つのことがわかっていないと、デザインした通りWeb上に表示させるようにコーディングをしていくことはとても難しいです。

HTMLとCSSの役割分担がわかる画像

例えば、HTMLとCSSの役割分担がわからないままコーディングをしようとすると、上記のように、まずはHTMLで何を記述すればいいのかという手順がわからなくなります。
最低限の基礎知識は必要なので、コーディングをする前に基礎について学ぶようにしてください。

3-2.参考になるWebサイトを見ながらコーディングしていく

コーディングを勉強するときも参考になるWebサイトを探して、そのサイトを見ながらソースを真似してコーディングを行いましょう。

真似してコーディング

そうすることでどんなコードを書けば「どういう表示がされる」のかわかります。

基本を覚えた後は、実践の中でコーディングを覚えていくのがもっとも初心者向きの勉強法です。
デジタルハリウッドSTUDIO札幌のカリキュラムでも、実際にWebサイトをコーディングしていくことでタグなどを覚えてもらっています。
逆を言えば、HTMLやCSSのコードを全て覚えてからWebサイトを作ろうとすると、覚えることが多く感じてしまって挫折しやすいです。

必要なタグやコードの書き方を覚えるためにも、参考サイトを真似して作れるようになりましょう。

※最低でも3つくらいのサイトをコーディングすることをおすすめします。

3-3.デザインしたWebサイトのコーディングをする

デザインを1人で作り上げるで作成したデザインを、実際にコーディングしましょう。
参考にするサイトがないことで、今までのコーディングとは違い、応用となる知識やスキルが必要になります。
それを調べならがら自分でコーディングすることで、新たに学ぶことがあるはずです。

例えば、参考サイトを真似する時は余白や行間の取り方などは、全て既に値が決まっているのでその通りにコーディングをすれば良いです。
しかし、自分でデザインしたWebサイトをコーディングするなら、余白や行間の取り方などは自分で計算してコーディングする必要があります。

このように自分で1からWebサイトをコーディングすることで、よりコーディングのスキルが高まります。

4.初心者におすすめのJavaScriptの勉強方法

初心者がJavaScriptを勉強するなら「JavaScriptでどんな動きがつけられるか」を学ぶようにします。

JavaScriptはHTMLやCSSと異なる「プログラミング言語」になりますが、jQueryと呼ばれるJavaScriptを扱いやすくしたライブラリというものや、プラグインと呼ばれる拡張機能が存在するので初心者でも扱いやすくなっています。

JavaScriptでつけられる動きをまとめた画像

そのため、デザインをする際にどのような動きをつけたいのかイメージをしておき、それを実現できるプラグインを探して組み込めるようにしておくとよいです。

5.まとめ

今回は、デジタルハリウッドSTUDIO札幌の卒業生Sさんを例に、Webデザイン初心者がどのようにして勉強すれば良いのかお話してきました。
実際にWebサイトを作ることでWebデザインを学ぶことは、より効率的な初心者向けの勉強方法です。

Sさんもパソコンが苦手な初心者から自分でWebサイトを作れるようになりました。

効率よく学ぶということであれば、カリキュラムが整っているデジタルハリウッドSTUDIO札幌のようなWebデザインスクールで学ぶことをおすすめしますが、せっかくWebデザインに興味をお持ちになられた初心者の方には、まずはやってみるというのが一番大事なことだと思います。