新卒でフリーランスになって月144万円かせぐまでの全てをnoteにまとめました

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

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

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

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

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

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

そこでこの記事では、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この方法のメリットは、

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

など、サイトを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などを学びましょう。これにより、サイトに動きをつけたり、サーバーとデータのやり取りをしたりと、ウェブデザインの幅が一気に広がります。

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

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

JavaScriptやjQueryを学ぶなら…
  1. Webサイト制作者のための JavaScript入門講座」で書き方など基本を勉強
  2. 作りながら学ぶjQueryデザインの教科書」でjQueryをガッツリ学ぶ
  3. 自分で作ったサイトやLPに導入してみる
PHPやWordPressを学ぶなら…
  1. PHPしっかり入門教室 使える力が身につく、仕組みからわかる。」で書き方など基礎を勉強
  2. WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」でWordPressをひと通り学ぶ
  3. PHPを使いつつ、自分でWordPressテーマを作ってみる

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

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

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

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

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

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

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

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

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

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

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

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

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

身につくスキル

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

料金・コース紹介

Webデザインコース(社会人)
  • 4週間プラン:129,000円
  • 8週間プラン:179,000円
  • 12週間プラン:229,000円
  • 16週間プラン:279,000円
  • 最大24回分割で月5,375円から受講可能
Webデザインコース(学生)
  • 4週間プラン:89,000円
  • 8週間プラン:119,000円
  • 12週間プラン:149,000円
  • 16週間プラン:179,000円
  • 最大24回分割で月3,708円から受講可能

受講スタイル

  • 完全オンラインでいつでもどこでも受講できる!
  • 現役エンジニアからの無制限サポート!

こんな人におすすめ

  • これからウェブデザイナーとして活躍したい学生や社会人
  • コーディングはすでにできるけど、デザインはわからない方
  • ウェブデザインで時間も場所も自由な働き方を実現したい方

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

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

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

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

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

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

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

身につくスキル

  • HTML5
  • CSS3
  • PHP
  • JavaScript
  • jQuery

料金・コース紹介

無料会員
  • 初心者向けのレッスンのみ
  • 料金:無料

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

受講スタイル

  • 完全オンラインで、3分動画を視聴してスキマ時間に受講

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

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

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

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

身につくスキル

  • HTML5
  • CSS3

料金・コース紹介

サイトなので全て無料です
  • HTMLとCSSの基礎
  • サルワカは個人のブログサイトなので全て無料です

受講スタイル

  • 自分が気になるところだけ練習する

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

ウェブデザインでNGな勉強法は「暗記」

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

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

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

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

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

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

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

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

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

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

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

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

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

  • プロの講師から直接アドバイスをもらえて、疑問もすぐに解決する
  • 通うタイプのスクールであれば、他の受講生もいてモチベーションが上がる
  • お金を払うため、気合が入る(これが地味に大事)

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

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

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