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

2021.03.03

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

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

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

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

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

1.Webデザイン初心者の卒業生Sさんが取り組んだこと
- 1-1.デザインの勉強
- 1-2.コーディングの勉強
- 1-3.JavaScriptの勉強
- 1-4.オリジナルサイトの作成
2.初心者におすすめのデザインの勉強方法
- 2-1.作品を作りながらグラフィックソフトの使い方を学ぶ
- 2-2.徐々に作る作品をレベルアップする
- 2-3.デザインをオリジナルで作ってみる
3.初心者におすすめのコーディングの勉強方法
- 3-1.HTMLとCSSの基礎を学ぶ
- 3-2.参考になるWebサイトを見ながらコーディングしていく
- 3-3.デザインしたWebサイトのコーディングをする
4.初心者におすすめのJavaScriptの勉強方法
- 5.まとめ

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

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

上記の図は、一般的な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というものがあり、それを組み込むことで動きがつけられるのです。

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

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

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

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

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

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

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

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

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

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

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

初めは「バナー」のような小さな作品から作っていくべきですが、慣れてきたら徐々に「Webサイト」などの制作物にステップアップしていきましょう。

初めから自分でデザインするのは難しいので、何か参考になる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で何を記述すればいいのかという手順がわからなくなります。
最低限の基礎知識は必要なので、コーディングをする前に基礎について学ぶようにしましょう。

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

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

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

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

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

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

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

【2-3.デザインをオリジナルで作ってみる】で作成したデザインを、実際にコーディングしましょう。
参考にするサイトがないことで、今までのコーディングとは違い、応用となる知識やスキルが必要になります。
それを調べならがら自分でコーディングすることで、新たに学ぶことがあるはずです。

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

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

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

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

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

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

5.まとめ

今回は、デジタルハリウッドSTUDIO横浜の卒業生Sさんを例に、Webデザイン初心者がどのようにして勉強すれば良いのかをお話しました。
Webデザインに興味をお持ちになられた初心者の方には、まずはやってみるというのが一番大事なことだと思います。

実際にWebサイトを作ることでWebデザインを学ぶことは、より効率的な初心者向けの勉強方法です。
Sさんもパソコンが苦手な初心者から自分でWebサイトを作れるようになりました。

ただ、より効率よく学ぶということであれば、デジタルハリウッドSTUDIO横浜のようなWebデザインスクールで学ぶことがおすすめです。
デジタルハリウッドSTUDIO横浜では、初心者の方でも６か月でWebデザインが作れるようになるカリキュラムが整っています。興味をお持ちの方はお気軽にお問合せください。