Webデザインの初心者がすべき勉強法はこれ！断言します【現役デザイナーが解説】

「これからWebデザインを学びたいけど、初心者は何を勉強したらよいんだろう…」

というお悩みを解決します。現役Webデザイナーのくろぽん(@ktsuyoc)です。

Webデザインに限らず、勉強には正しい方法があります。逆にNGな勉強法をしていると、どれだけがんばっても伸びないことも。

とはいえ、WebデザインにはHTML/CSSやJavaScript、PHP、さらにはillustratorやPhotoshopなど、勉強すべきことがたくさんあります。

その結果、初心者はどこから手をつけたらよいのかわからなくなり、挫折することも。ぼくも最初はそうでした。

そこでこの記事では、

• Webデザイン初心者がまず目指すべきゴール
• Webデザイン初心者の勉強法3ステップ
• 無料でWebデザインの基礎を学べるサービス&サイト3選
• WebデザインでNGな勉強法は「暗記」

の順に、これからWebデザイナーになりたい方むけの勉強法を紹介します。

Webデザインはやるべきことが多いと思うかもしれませんが、目指すべきゴールも勉強法もシンプルです。

まずはこの記事で、Webデザインの勉強法についておさえましょう！

Webデザイン初心者がまず目指すべきゴールは「サイトを1つ作ること」

結論から言うと、Webデザイン初心者がまず目指すべきゴールは「サイトを1つ作ること」です。HTMLを勉強するとか、デザインの法則を学ぶとかは最短ルートではありません。

「初心者が最初からサイトを1つ作るなんてムリでしょ。まずは基本的な知識をつけなきゃ！」

と思うかもしれませんが、ぼくに言わせれば最初に基本的な知識をひと通りつけるためにも、まずはサイトを1つ作ってしまうべきなんです。

HTMLとCSSのコードをひたすら写すのは意味がなかった

初心者って何を勉強すべきかがわかっておらず、結果として意味がない勉強をしがちです。

ぼくの場合、最初はHTMLとCSSのコードをひたすら写していましたが、あんまり意味がなかったと思います。しいて言えば、タイピングが早くなったくらいですかね…。

途中で「これはいつまでたってもサイトが作れるようにならない！」と思ってスクールに行ってから、最初にサイトを1つ作る勉強法にたどりつきました。その結果、今はWebデザイナーとしてバリバリ活動しています。

続いては、Webデザイン初心者の勉強法について紹介します。

Webデザイン初心者の勉強法3ステップ

Webデザイン初心者の勉強法は、以下の3ステップです。ここでは独学での勉強を想定しています。

1. お手本のサイトを見つけて、完全にコピーする
2. 自分でオリジナルのLPを作ってみる
3. JavaScriptやjQuery、PHPで表現の幅を持たせる

ここから詳しく説明します。

1. お手本のサイトを見つけて、完全にコピーする

最初に「このサイトいいなあ」と思うサイトを見つけて、方法を検索しながら完全にコピーします。コピーなのでネット上に公開したらアウトですが、練習に使うだけなら問題ありません。

この方法のメリットは、

• HTMLやCSSの書き方
• よいWebデザインの構成(幅や高さ、色など)
• ウェブサイトを公開する方法

など、サイトを1から作るために必要なことをまとめて学べる点です。

コピーしたいサイトを見つけるのが難しい、サイトをコピーする方法を探すのが大変という方は「作りながら学ぶ HTML/CSSデザインの教科書」を使って見てください。”1からサイトを作りつつ学ぶ”スタイルの本で、説明もわかりやすくておすすめです。

ただ、この本でコードの知識はつきますが、デザインについての知識は正直つかないので「WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版)」も合わせて使うとスムーズかなと。

お手本のサイトをコピーできたら、その時点でウェブサイト制作に必要な知識がなんなのかはおおよそわかってきます。次は、自分でオリジナルのLPを作ってみましょう。

2. 自分でオリジナルのLPを作ってみる

ステップ2ではオリジナルのLPを作ります。LPとは「ランディングページ(LandingPage)」の略で、ある特定の商品を紹介することを目的とした、1枚の縦長ページです。

ウェブサイトのように何ページもあると、いきなりオリジナルを作るのはハードルが高いんですよね。LPのように1ページだけであれば、初心者もなんとか作れるレベルなので、ちょうどよいと思います。

LPの内容で迷うかたは自己紹介をLP風にしてみましょう。今後、実績をのせることで仕事を取るさいのポートフォリオとしても使えます。

LPの構成は「ランディングページの教科書 売上をガンガンあげるWeb制作 8つのコツ」で学ぶのがおすすめです。

3. JavaScriptやjQuery、PHPで表現の幅を持たせる

1からLPを作れるようになったところで、JavaScriptやjQuery、PHPなどを学びましょう。これにより、サイトに動きをつけたり、サーバーとデータのやり取りをしたりと、Webデザインの幅が一気に広がります。

制作のバリエーションを増やす意味では、WordPressもおすすめです。HTML/CSSとPHPで作られたシステムなので、自由度の高いカスタマイズがカンタンにできます。

それぞれの学習法は以下の通りです。

独学でもしっかりした技術書を選べばスキルはすぐに身につきます。とはいえ、まずはステップ1で紹介した、お手本のサイトをマネするところからはじめていきましょう！

次は、Webデザインを学べるサービスやサイトを紹介します。

無料でWebデザインの基礎を学べるサービス&サイト3選

ここからは「本は好きじゃないから他の方法でWebデザインを学びたい」と思っている方に向けて、

1. TechAcademy
2. ドットインストール
3. サルワカ「HTML&CSS入門」

の順に、無料でWebデザインの基礎を学べるサイトやサービスを紹介します。

1. TechAcademy:1週間無料で質問し放題はココだけ

TechAcademy(テックアカデミー)の無料体験では、1週間どれだけ質問してもよく、HTMLとCSSの基礎をしっかり習得できます。無料でプロの講師からいくらでも教えてもらえるのは、TechAcademyだけです。

また、講座はいつでもどこでもオンライン完結で受講できます。完全オンラインではありますが、

• 週2回メンターがマンツーマンで面談して、自分に合った目標・やり方を考えてくれる
• 毎日15時〜23時まではチャットでのサポートで、疑問点をすぐに解消できる
• もらった課題は回数無制限でレビューしてもらえる

という手厚さが魅力です。

Webデザインコースの最後にはオリジナルのウェブサイトを公開することができ、一人前のWebデザイナーとしての第一歩をふみ出すことができます。

無料体験だけでもHTMLとCSSは習得できてしまいますし、受けて損はしません。

身につくスキル

• Webデザインの原則・考え方
• レイアウト
• 配色
• タイポグラフィ
• Photoshop
• Cacoo(ワイヤーフレーム)
• HTML5
• CSS3
• Sass
• Compass
• JavaScript
• jQuery
• Git
• GitHub

料金・コース紹介

受講スタイル

こんな人におすすめ

くり返しになりますが、TechAcademyには1週間の無料体験があります。1週間の体験は他のスクールと比べても長く、じっくり体験することができてオススメです。

無料体験だけでもHTMLとCSSの基本を習得できるので、これからWebデザインをはじめたい方は今すぐにでもチャレンジしましょう。

2. ドットインストール：無料の3分動画で基礎をマスター

ドットインストールでは、HTMLやCSSの基礎を無料で学ぶことができます。

1つのレッスンが3分の動画にまとまっており、スキマ時間でスキルアップすることが可能です。スマートフォンからでも動画の視聴はできるので、移動中に動画を見て、帰ってから実際に手を動かすこともできます。

ぶっちゃけ、基礎的なことだけなら本当に無料で学べてしまいますよ。

ただし、フィードバックをもらう講師はいないので、自分でエラーを直す必要があるのはデメリット。動画を見て自分でガツガツ学べる人におすすめのサービスです。

身につくスキル

• HTML5
• CSS3
• PHP
• JavaScript
• jQuery

料金・コース紹介

また、月額1,080円のプレミアム会員になると、ソースコードや素材ファイルを見たり、レッスン動画の速度を変更したりできます。

受講スタイル

3. サルワカ「HTML&CSS入門」：HTMLとCSSの練習にぴったり

サルワカの「HTML&CSS入門」では、HTMLとCSSの基礎を丁寧にわかりやすく説明しています。

とはいえ、サイトを1から作れるようになるかと言うと…正直ビミョーです。それぞれのレッスンがつながっておらず、最終的な成果物はないので…。

サイトをいったん作れるようになってから、練習用として使うのがベストかと。

身につくスキル

• HTML5
• CSS3

料金・コース紹介

受講スタイル

次は、Webデザインを学び始めるときにNGな勉強法を紹介します。

WebデザインでNGな勉強法は「暗記」

Webデザインで絶対にしてはいけない勉強法があります。それは「暗記」です。

学校の勉強では例えば英単語や漢字など、暗記をがんばった方も多いと思います。が、これと同じ感覚でHTMLのコードを覚えても意味がありません。

なぜなら実践でしかWebデザインは上達しないからです。例えるなら、Webデザインはスポーツに近いですね。

いくら野球の本を読んでルールを覚えたところで野球がうまくなるわけじゃありませんよね。それと同じように、いくらWebデザインの本を読み込んでコードを暗記したところで、Webデザイナーになれるわけではないのです。

HTMLもCSSもサイトを作りながら学べ！

ウェブサイトを作るときには、最低でもHTMLとCSSの2つを使います。なので、まずはこれを”勉強すべき”と思ってしまう方が多いんです。

が、勉強はサイトを作りながらすることをおすすめします。なぜなら、作りながら勉強したほうがサイトを作るために必要なHTMLとCSSだけを学べるからです。

HTMLとCSSには初心者にとって使いどころがあまりない技術もあります。例えば、要素の数を数える方法とか、幅をCSSで計算する方法とか。

初心者がHTMLとCSSを学ぼうとすると、こういうマニアックなところに迷い込むことが少なくありません。もっと学ぶべきことがたくさんあるのに、です。

だからこそ、まずはサイトを作りながら、HTMLとCSSの基礎をつけるべきという結論であります。

独学よりもスクールのほうが最短で学べて、結果コスパがよいです

ここまで、Webデザイン初心者におすすめの勉強法を紹介しました。まずはお手本となるサンプルサイトを1つ作り上げることからはじめていきましょう！

Webデザインを学ぶ目的にもよりますが、やはりスキル習得の最短ルートはスクールに通うことです。文中では独学の方法を中心にお伝えしましたが、スクールには以下のようなメリットがあります。

上記で紹介したTechAcademyはこの3つを満たしていておすすめです。TechAcademyには、1週間の無料体験がありますのでまずは体験してみましょう。

いきなりスクールに申し込むとなるとハードルは高いですが、1週間の無料体験があればじっくり決めることができます。あなたがWebデザインに向いているかどうかがわかるのはもちろん、HTMLとCSSの基本は無料体験だけで身につくのでぜひ体験してみてください。

また、おすすめのスクールは「【2018年版】おすすめのWebデザインスクール比較ランキング9選！初心者も迷わない料金・内容まとめ」で紹介しているので、気になる方はチェックしてみてください。