独学でWeb制作を学ぶロードマップ
CCコミュニケーションズ 編集部
独学でWeb制作を学ぶロードマップ
順番を知れば、
挫折しない。
ROADMAP
「独学で始めたけど、何から学べばいいか分からず挫折…」
学ぶ順番を知れば、独学でもWeb制作は身につきます。
「独学で始めたけれど、教材ばかり増えて手が動かない」「何から学べばいいのか分からず止まってしまった」——この記事は、Web制作の全体像が見えてきた方が、実際に手を動かし始めるための1本です。読み終わる頃には、今日から1か月で何をやるかが、順番つきで決まります。
先に結論から。独学が続かないのは、才能でも根気でもなく順番のせいです。HTML→CSS→1ページ完成→WordPress。この4段を下から順に登れば、途中で迷子になりません。
自転車は、教本を読み切っても乗れない
自転車に乗れるようになった日のことを思い出してください。バランスの取り方を本で学んだ人は、たぶんいません。とりあえずまたがって、よろけて、少し進んで、また転んで。乗りながら覚えたはずです。Web制作もまったく同じで、コードは読むだけでは身につきません。書いて、表示して、思った通りにならなくて、直す。この繰り返しが「乗れるようになる」瞬間を連れてきます。
だから、この記事のロードマップは「読む順番」ではなく「作る順番」です。各段のゴールは、知識を覚えたことではなく、画面に何かが出せたことに置いています。
挫折は、たいてい3つの形でやってくる
| よくある止まり方 | 起きていること | 抜け出す一手 |
|---|---|---|
| 教材を集めて満足する | 買った時点で進んだ気になる | 教材を1つに絞り、残りは閉じる |
| 最初から全部きれいに作ろうとする | 1行目から手が止まる | 文字だけの画面で公開し、あとで整える |
| 作りたいものが無いまま学ぶ | 覚えた知識を置く場所がない | 題材を1つ決めてから次の教材を開く |
どれも、能力の問題ではありません。やり方を1つ変えるだけで抜けられる種類のつまずきです。もし今どれかに当てはまっているなら、右の一手を今日試してみてください。
登る順番は、この4段
1段目のHTMLは、文章に「これは見出し」と印をつける言語。2段目のCSSは、その骨組みに色や配置をつける言語。ここまでで、自分の書いた文字が思った見た目で画面に出せます。3段目で設計から公開までを1ページ分やり切り、4段目でWordPressを使い、書いた人が自分で更新できる形に整える。仕事として受けられるのは、この4段目からです。
大事なのは、飛ばさないことです。CSSでつまずく人の多くは、実はHTMLの骨組みがあいまいなまま登っています。1段下に戻れば、たいていの詰まりは解けます。
1日30分を、読む10分・書く20分に分ける
学習時間は長さより配分です。おすすめは、読む10分・自分の手で書き換える20分。読んだ内容をそのまま写すのではなく、色の数字を変える、文字を自分の名前に置き換える、1行消してみる——このいたずらが、いちばん記憶に残ります。平日だけ1か月続ければ10時間。1ページを作り切るには十分な時間です。
詰まったときは、言葉の粒を細かくして調べる
調べても答えが出ないときは、たいてい聞き方が大きすぎます。「CSS 効かない」ではなく「CSS ボタン 中央に寄らない」。何が・どこで・どうなっているかの3つを言葉にすると、同じ悩みを解決した人のページに一発でたどり着きます。この言い換えは、そのまま先輩への質問の仕方にもなります。
CCの制作現場で、実際にあった話
私たちCCコミュニケーションズに未経験で入った人の最初の1か月は、いきなりお客様の案件ではありません。1週目は、自社サイトの既存ページを見ながら、同じ形に自分で組み直すところから。2週目に、実際に運用しているページの文章差し替えを1件。3週目に画像の入れ替えとスマホでの見え方の確認。そして1か月後に、1ページまるごとを任せます。
わざと小さく区切っているのは、「できた」の回数を増やすためです。独学でいちばん枯れやすいのは知識ではなく、続ける気持ちのほうです。実際、この順番にしてから、最初の1か月で手が止まる人はほとんどいなくなりました。
学ぶゴールは、誰か1人の役に立つサイトを1つ仕上げること
独学のゴールを「資格」や「作品の数」に置くと、終わりが見えません。私たちがおすすめするのは、実在する誰か1人のために、サイトを1つ仕上げることです。友人の教室のページを作って、問い合わせが1件でも増えたなら、それはどんな教材の修了証より確かな実力の証明になります。技術は、その先の人の役に立って初めて意味を持ちます。
今日からできる、たった1つのこと
紙に4段の階段を書いて、今の自分がいる段に丸をつけ、次の段で最初にやることを1行だけ書く。
「2段目のCSS。次は文字の色を青にしてみる」——このくらい小さくて大丈夫です。段が見えていれば、迷ったときに「1段下に戻る」という選択肢が持てます。書いた紙はパソコンの横に置いて、1つ終わるたびに線を引いて消してください。進んだ量が目で見えます。
まとめ
独学の成否を分けるのは順番です。HTML、CSS、1ページ完成、WordPress——この4段を下から登り、1日30分を読む10分・書く20分に分ける。詰まったら言葉の粒を細かくして調べ、それでも解けなければ1段下に戻る。次は「WordPressとは？」から、4段目の世界に入っていきましょう。私たちCCコミュニケーションズは、この順番をそのまま研修に落とし込んだ環境で、未経験から始める仲間を探しています。
