Webデザイン初心者が独学で一気に上達する俺流勉強法

これからウェブデザイン※1（コーディング※２・プログラミング）を勉強しようと思っている人や、始めたばかりの初心者が独学でも一気に上達する方法をご紹介します。

僕も5、6年前にウェブデザインに興味を持って独学で勉強を始めました。

誰にも教わることもなく、書籍とインターネットの情報だけである程度の知識を身に着けました。

今ではクライアントからお金を貰って作れるレベルになっていますし、自分で作ったネットショップも運営して稼いでいます。

そんな独学でやってきた僕だからこそ出来るアドバイスもあると思います。

なので、これから独学でウェブデザインをやってみようと思ってる人にとってはスゴく役に立つ情報だから、ぜひ読んでみてください。

※1.ウェブデザインの定義は曖昧だけど、基本的に１人でウェブデザインする場合、見た目のデザインからコーディング、必要に応じてプログラミングもやることを指します。

※2.ウェブデザインに関してのコーディングとはHTMLでマークアップして、CSSで見た目を整えることを指します。プログラミングとは意味が違います。

２〜３冊の本からスタート

全くの０からスタートする場合は、まずは基礎的な知識を付ける必要があります。

と言ってもホントに基礎的なことだけ。

だから「HTML・CSS」に関する初心者用の本を２〜３冊買って読んでみてください。

分厚いのじゃなくていいです。ホントに基礎的な事が書いてある本でいいんで。

初心者用の書籍は基本的にコーディングに使うソフトの紹介やら、導入の仕方もしっかり説明してあるから、迷わずスタートラインには立てるはずです（ってかそうゆうやさしく説明してある書籍を選ぶようにしましょうね）。

本を選ぶポイント

本を選ぶ時はメインとなる初心者用の書籍を１冊選んでください。

軽く立ち読みをして自分の肌にあってる本を選べば良いです。

そしたら次に同じ初心者用だけど、メインで選んだ本には書いてない情報が載ってるサブの本を選びます。

そうすれば基礎的な部分の知識は補完し合えると思います。

とにかく手を動かす

コーディングを覚える一番の近道は手を動かして実際にやってみることだと思っています。

何となくコーディングとかプログラミングって、頭で覚えてやるってイメージだけど基本的には作業の部分だから頭より体で覚えるほうが早いです。

初心者用の書籍ならLessonとして「実際やってみましょう」的な事があるはずだから、メンドクサクても必ずやってみて体に覚えさせてください。

頭で覚えようとすると、初めての人にとっては馴染みがない呪文のような文字がたくさん出てくるから、なかなか覚えるのは難しいです。

だから覚えようとするんじゃなくて、指に馴染ませていくって感覚でとりあえずコードを打ってみましょう。

小さな成功体験でモチベーションアップ

本を読んで勉強してるだけではモチベーションは下がります。

モチベーションが下がっちゃうと勉強する意欲も下がるんで、効率が悪いです。

だから実際に手を動かして、コードを書いてみましょう。

書籍に書いてある通りに打っただけだけど、実際にブラウザに自分の打った文字が表示されてるだけでも嬉しくなります。

こうしたちょっとした成功体験が次の学習の意欲になるんで、勉強したことは必ずアウトプットして小さな成功体験を積み重ねていきましょう。

何も見ずに復習してみる

例えば、ブラウザに「Hello World」と表示する方法を勉強して表示できたら、次は今書いたコードを全部消して、本を閉じてもう一度書いてみましょう。

どうしても思い出せなかったら、ちょっとだけ本を見ます。んでスグに閉じて、また書き始める。

インプットとアウトプットのサイクルを出来るだけ早めて、すぐにアウトプットするようにします。

さっき書いたとこのコードだからある程度思い出せるはずです。

これを繰り返せば、体に覚えさせることができるし、上手く書ければ成功体験になります。

モチベーションは上がるし、早く覚えられるんで一石二鳥です。

インプットしたらすぐにアウトプットするように意識しましょう。

ルールを無理に覚える必要はない

コンピューター言語にはそれぞれルールや記述方法があって、その通りに記述しないと反応してくれません。

もちろんHTMLやCSSにだってルールがあります。

でも正直言って無理に覚える必要は無いと思っています。

実際僕も、全くの白紙の状態から「何も見ないでサイトを作り上げろ」って言われたら無理です。

多分プロとしてウェブデザインしてる人（僕も含めて）でも、０から何も見ないで作れる人はそう多くは無いんじゃないかな？

HTMLの冒頭の何だかわからない呪文も僕は覚えてません。

それでもプロとしてやっていけるんです。

だってネットで探せばいくらでも情報が出てくるし、本を見れば呪文の書き方だって説明してあります。一度書いておけばテンプレートとして使いまわせるし・・・。

だから全部を頭に叩き込む必要は全くありません。

ネットもつながらないテキストエディタしか入ってないパソコンで、しかも書籍も見れない状態でサイト作るなんてこと無いですからね。

常にスグに情報が手に入る状態でやるわけだから、覚えてしまう必要はないんです。

もちろん覚えてれば調べる時間は減るからスピードアップは出来ますけどね。

何が出来るのかを知っていればいい

ルールを覚える必要が無いんだったら何を覚えるのか？

それは、「何ができるか」です。

もちろん基礎的な部分（要素の概念とか）は覚える必要があります。

でも細かい所はどーだっていいんです。

それよりも重要なのが、何が出来るのかを知ってることです。

例えば今あなたはこの文章を読んでますよね？ホントに読んでる？ホントに読んでるって人は大きな声で「ハ～イ！」と言ってください。

・・・・・

おっ。読んでくれてるみたいですね（笑）

じゃぁこのページはなにで読んでますか？

パソコン・スマホ・タブレットの「ブラウザ」で読んでますよね？

SafariとかGoogleChromeとかFirefoxとか。

つまりあなたは「ブラウザはインターネットを見るもの」って知ってるわけです。

じゃぁスマホで写真を撮ろうと思ったら？カメラのアプリをタップすればいいですね？

これは、カメラのアプリを開けば写真が撮れると知ってるから出来るわけです。

スマホを見たこともない人に渡して「写真を撮ってくれ」って言っても撮れないですよね？

ウェブデザインでも同じことが言えます。

「段落を作れる、要素に名前が付けられる、クラス名を指定できる、文字を大きく出来る、画像を表示できる、色を変えられる、移動させられる、間をもっと広く出来る、消せる、etc…」

ってことを知ってれば、後は調べればいいだけです。

「文字を大きくするにはどうすればいいんだ？」という具合です。

調べればいくらでも答えは出てくるから、後はそのように記述すれば良いだけ。

それを繰り返していくうちにいつの間にか覚えて、見なくても書けるようになってきます。

だから、細かい記述の仕方は自然に覚えていくから、まずは「何が出来るのか？」を知ることに注力しましょう。

それが基礎的な部分だと思います。

まとめ

今回はこれから始める人に向けて、勉強法的な部分をお伝えしました。

「覚えなくてもいい」って言われたらちょっと安心できませんか？

多分全部覚えようと思って始めると面食らっちゃうと思います。

ホント何も知らない人からすれば呪文のように見えるからね（笑）

実際僕もこのやり方で覚えたわけだから、安心して僕のやり方に付いて来てくれていいですよ。

次回からは、もうちょっと踏み込んでお話していこうと思います。

とにかく楽しんでやることが重要です。楽しいと思えないなら、やる意味ないと思うしやれるようにもならないと思うんで。