Webデザインを独学で３ヶ月以内にモノにする７ステップ勉強法

Webデザインを独学で勉強しようと思ったら、できるだけ効率良く、短時間でマスターしたいと思いますよね？

でもそのためには何から勉強したらいいんやろ？とかどんな本がええの？とかって色々考えることも多いです。

そこで今回はWebデザインを独学でも短時間でマスターするために、僕が考える一番効率のいい勉強方法をお伝えします。

僕はこの方法でプロになったし、そのために買った本は１〜２冊だけです。

後はネットで全て調べられるから、こんなに独学で勉強するのにいい環境は無いと思いますよ。

Webデザインの勉強って、何となく本を読んで頭で理論を覚えてから実践していくってイメージだと思うんですけど、ハッキリ言ってそのやり方は効率が悪いです。

以前の記事で「ルールを覚える必要はない」って書いたんですけど、まさにその通りで、手っ取り早くマスターするためには体に叩き込むことです。

頭で覚えると言うよりは、体に覚えさせる方が断然早いです。

だって結局頭で覚えても、手を動かさないとコーディングはできないわけだから、先に頭に叩き込む必要はありません。

Webデザインは習うより慣れろ

どんなことでも同じだと思うけど、本を読んでるだけで出来るようにはなりません。

勉強してるだけでは、上達はしないわけです。

Webデザインに関して言えば、知識は後からいくらでも付いてきます。

だから初めは「何でそうなるのか？」なんて考える必要は全く無くて、「こうすればこうなる」ということを体に覚えさせることを優先します。

プログラミングの場合は、ある程度「何でそうなるのか？」を知っておかないと書くことができないけど、Webデザインのコーディングの場合は必要ありません。

んなもんは出来るようになってから覚えればいいことで、まずは作ってみることです。

元同僚の２人にWebデザインを教えた時の話

以前僕が元会社の同僚２人にWebデザインを教えた事があって、その時オモシロイことが起きました。

まず初めに、僕が簡単なHP（ホームページ）を作って、「これと同じものを作ってみて」と言って、そのHPに使った画像等の素材を渡しました。

２人には初心者用の本を１冊ずつ渡して「期限は３日。出来ても出来なくても見せてもらうよ」と言って放置しました。

１人は全くの素人で、パソコンは使えるけど、プログラミングとかコーディングなんてやったこともない人でした。

もう１人は、以前に少しだけプログラミングを独学で勉強したことがあるってレベルの人でした。

３日後、どこまで出来たかを見せてもらうと、全くの素人の方は、ほぼ完成していました。

見栄えは少し雑だったけど、ある程度形にはなっていました。

そうしてもう１人のプログラミング独学男の方は、マークアップすら出来ていませんでした。

方や素人男の方ははほぼ完成してるのに、プログラミング独学男はマークアップすら終わってなかったんですよ。

この２人の決定的な違い

何がこの差を生んだと思いますか？もうわかりますよね？

素人男の方は、とにかく手を動かして、何も分からないなりに本を読んだりネットで調べたりして、コードを書いていたんです。

でもプログラミング独学男はまず本を片っ端から熟読して、理解できなかった部分をネットで調べて、そしたらまた分からないことが出てきて・・・。

という具合で、一歩も前に進まず、立ち止まって勉強していたんです。

「手段が目的になる」の典型的なパターンに陥っていたんです。

素人男は、完成させることを目的として、その手段としてわからないことを調べ、知識を仕入れていました。

でもプログラミング独学男は、本を読んでいるウチに知識を入れることが目的になってしまって、本来の目的を見失っていました。

この件を教訓に、僕はそれ以降、人にWebデザインを教える時は、とにかく手を動かすことに集中させるようにしています。

知識の差も生まれていた

しかもこの話には更なるオチがあって、その２人と話をしていたら、明らかに素人男の方がWebデザインの知識が増えていました。

３日間手を動かしていた人間と、３日間勉強していた人間で、普通なら勉強していた方が知識を持ってる気がするけど、実は逆でした。

手を動かしていた人間は、
【書く→分からない→勉強する→書く→覚える】の流れを繰り返します。

わからないことが出てきて、その解決法を探して勉強することで、より実践的な知識が身についていたんです。

分かりやすい例で言えば、自転車に乗らずに構造の勉強をしているだけの人間と、何度も転けながら練習して乗れるようになった人間。

どっちの方がより実践的な知識を持ってると思いますか？

前者はペダルやタイヤの構造、自転車が走る原理は知っていても、バランスのとり方や、ペダルを踏む力加減、ブレーキの制動距離とかっていう実践的な知識は全くありません。

でも後者は、自転車が走る原理は知らなくても、ペダルをこの力で踏めばどれぐらい進む、という事は知っています。

この速度ならブレーキをかけたらどれぐらいで止まれるのかを感覚として知っています。

生きていく上で、どっちの知識の方が大切かは言わなくてもわかりますよね？

Webデザインでも同じです。

「何でそうなるのか？」を知っているより、「こうすればそうなる」を知っている方がよっぽど実践的で使える知識です。

だからとにかく手を動かして、分からない部分を埋めるために勉強をするようにしましょう。

独学７ステップ勉強方

っとまぁ、手を動かすことの重要性は理解してもらったと思うから、今から独学７ステップ勉強法を解説していきます。

この７ステップは「守破離」の考えに基づいていて、１番効率が良いと思っています。ぜひ参考にしてください。

守破離（しゅはり）は、日本での茶道、武道、芸術等における師弟関係のあり方の一つ。日本において左記の文化が発展、進化してきた創造的な過程のベースとなっている思想でもある。個人のスキル(作業遂行能力)を3段階のレベルで表している。
まずは師匠に言われたこと、型を「守る」ところから修行が始まる。
その後、その型を自分と照らし合わせて研究することにより、自分に合った、より良いと思われる型をつくることにより既存の型を「破る」。最終的には師匠の型、そして自分自身が造り出した型の上に立脚した個人は、自分自身と技についてよく理解しているため、型から自由になり、型から「離れ」て自在になることができる。

by Wikipedia

１．モデルを決める

まずは自分が良いなと思うWebサイトを見つけてきます。

何でも良いですが、余り凝りすぎたデザインとかはハードルが高いんで、一般的な会社やお店のHPとかをモデルにすると良いと思います。

２．サイトに使う素材を集める

そのモデルサイトで使われている画像を保存しておきましょう。

個人として誰にも公開しないし、勉強用に使うだけだから問題ありません。

もし保存できなかったら、それに似た感じの画像等を用意しておきます。

コーディングしながら素材を集めるのは効率が悪いから、予め全て揃えておきましょう。

３．コードは気にせずとにかくマネて作る

素材が揃ったら、モデルとなるサイトと同じになるように作ってみましょう。

まずはマークアップからです。

一番上にロゴが有って、その下にキャッチコピーが有って、その下に・・・

という具合で、文言もまるっぽそっくりマネてしまってOKです。

とにかく見た目だけを同じになるように作っていきます。

ここで注意するPOINTは、「分からない事が出てきてからその解決法を探す」と言うことです。

たとえば、画像を表示させる方法を知らないからと言って、先に画像の表示方法を勉強してはイケません。

画像を貼り付ける順番が来てから初めて、画像の表示方法を調べます。

右側にサイドバーがあるから、要素を右側に持っていく方法を調べておくのはヤメてください。

いよいよ、サイドバーを右側に回り込ませる番になってから、そこで初めて要素を右側に持っていく方法を調べてください。

じゃないと、先に勉強してもどうせ覚えてないし、結局その時になってまた調べるんでは２度手間になってしまうからです。

しかも、必要に迫られた状況で勉強した方が、学習効率が高くなるから、事前知識は０で挑んでください。

４．モデルサイトのコードをDeveloperToolで確認する

完コピサイトが出来上がったら、最後に答え合わせです。

ブラウザのDeveloperToolで、モデルサイトのコードを確認してみましょう。

コードの確認の仕方は下の記事で詳しく解説しています。

まぁ見た目を完コピできたんなら、それで正解なんだけど、人（プロ）が書いたコードを見ることで色々と学ぶことができます。

「この横並びはfloat:leftで回り込ますんじゃなくて、inline-blockでやってるのか」みたいな。

５．答え合わせで盗んだテクニックを使ってもう１度作る。

４番でプロのコードを見て、自分とは書き方が違った部分があるはずです。

今度はそれを踏まえて、もう１度同じページを作ってみます。

次はもっとスムーズに短時間で出来るようになってるはずです。

完成したら、また１〜５を繰り返してあらゆるデザインをマネて作っていきましょう。

６．ちょっとアレンジを加える

マネっこWebデザインを繰り返して、ある程度自分の中で理解度が上がってきたら、次は完コピでは無く少しアレンジを加えていきます。

最初はサイトの幅を変えたり、表示している要素の順番を変えたり、間隔を変えたり、左右を反転させたり、っといった具合です。

アレンジを加えてもキレイな見栄えになるように気を遣って作っていきます。

初めはちょっとマージンを変えるだけでもバランスが悪くなったりすると思います。

すると、何でその間隔（ｐｘ）で空けてあったのかが理解できてきます。「ここを開くと、ここも調整がいるのか」という感覚を肌で感じることが出来るはずです。

そうやって、Webデザインのセンスを磨いていきます。

７．自分オリジナルを作ってみる

何度もマネっこWebデザインを繰り返していくウチに色々なアイデアやテクニックが自分の中にストックされていきます。

そしたらそのストックを使って、自分オリジナルのサイトを作ってみましょう。

「この部分はあのサイトのアイデアを」「ここはあのサイトを参考にしよう」という感じです。

後は色んなサイトを見て回って、アイデアをパクって自分のデザインに取り込んでいきます。

たぶん、初めて作ったオリジナルデザインは見窄らしいと思います。でもそれでいいんです。

「キレイなサイトと何が違うのか？」「どうすればもっとキレイになるのか？」を研究して、修正していきます。

この試行錯誤が大切です。試行錯誤することで真に理解が深まって、感覚が研ぎ澄まされていきます。

これを３ヶ月も繰り返していれば、もう立派なWebデザイナーになってますよ。

勉強は終わらない

ある程度出来るようになったからって、手を止めたらそこで成長も止まります。

超一流のWebデザイナーでも、日々勉強を惜しみませんし、書かなければ鈍ってきます。

独学でも３ヶ月もあればプロのWebデザイナーになれるけど、一流選手になるには努力し続けないとイケません。

まぁ自分の目標とする位置がどこかはわからないけど、Web制作会社に転職を目指しているなら、日々努力して成長を続けましょう。

とりあえず自分のHPを作れるようになりたい。と思っているんなら、今回解説した方法で勉強すれば３ヶ月もあればそれなりのモノが作れるはずです。

楽しむことが１番

兎にも角にも、独学でWebデザインの勉強をするなら、心から楽しいと思えることが１番です。

楽しいと思えないとやる気が出ないし、学習効果も下がります。

だからこそ、僕は教科書を読むより、手を動かして実際に作ることに集中して教えます。

教材読んでるだけなんて全く楽しくないですからね。やっぱり作ってなんぼです。試行錯誤してる時が１番楽しいと思うんですよ。

人それぞれ楽しいと感じる部分は違うだろうけど、嫌な事はできるだけやらずに、楽しいと思えることを中心に勉強していきましょう。

それが１番の近道だと思いますよ。

まとめ

僕はこの方法で完全に独学でプロになりました。

今でもたくさん練習としてサイトを作ってますし、当然お金を貰って作ることもあります。

もちろんその原動力となってるのは、「楽しい」って感情です。

集中モードに入ると３日徹夜でコーディングしてることもあります。

それぐらい楽しいんですよ。ワクワクするんですよ。

これが１番だと思うから、独学で勉強してる人は、「楽しむ」気持ちを大切にしてたくさんサイトを作ってください。

では良いWebデザインライフを。