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

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

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

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

ウェブデザインに限らず、勉強には正しい方法があります。勉強の時間を確保することも大切ですが、正しい勉強法も同じくらい重要です。

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

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

そこでこの記事では、

  • ウェブデザイン初心者がまず目指すべきゴール
  • ウェブデザイン初心者の勉強法3ステップ
  • よくある疑問:サイトを作る前にHTMLやCSSを勉強すべき?

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

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

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

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

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

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

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

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

ぼくの場合、最初は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を作ってみる

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で紹介した、お手本のサイトをマネするところからはじめていきましょう!

よくある疑問:サイトを作る前にHTMLやCSSを勉強すべき?

ウェブデザイン初心者によくあるのが「サイトを作る前にHTMLやCSSを勉強しないとムリですよね?」という質問です。まずはしっかり勉強してからじゃないと、ウェブサイトなんて作れませんよね、と…。

先にぼくの回答を伝えると「HTMLもCSSもウェブサイトを作りながら学べるから大丈夫」です。

ぼくの回答:HTMLもCSSもサイトを作りながら学べます。

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

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

HTMLとCSSには初心者にとって使いどころがあまりない技術もあります。例えば、要素の数を数える方法とか、幅をCSSで計算する方法とか。初心者がHTMLとCSSを学ぼうとすると、こういうマニアックなところに迷い込むことが少なくありません。もっと学ぶべきことがたくさんあるのに、です。

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

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

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

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

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

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