Web制作を独学で初案件取得までにした勉強法

※当サイトはアフィリエイト広告を利用しています

Web制作

こんにちは。Nanaです。

独学でWeb制作の勉強を始めて、6ヶ月で初案件をいただくまでにした勉強法をお伝えします。

(※初案件までの期間が早ければいいとも思いませんので、参考までにご覧ください)

1ヶ月目

Progate

Web制作やプログラミングを勉強しようと思っている方は聞いたことがある方も多いのではないでしょうか。

スマホ版とPC版があります。

私はまず、自分に適性があるのか知りたかったので、

スマホ版をダウンロードして、

ゲーム感覚でHTMLコースを少し進めました。

面白い!と思えたので、その後PC版でHTML、CSSをそれぞれ途中まで進めました。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

Progateをある程度進めたところで雰囲気が掴めたので、

テキストベースで勉強を進めることにしました。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

初心者向けのわかりやすい本です。

おしゃれなカフェのサイトを作りながら学ぶことができるので、

楽しく進められます!

「私も自分でサイトが作れるんだー!!」とワクワクしながら進めたのを覚えています。

2ヶ月目

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

テキストの続きを進めて、1周目が終わりました。

オリジナルサイト作成

デザインはほどほどに、サイトの構成、コードの確認をしながら

オリジナルサイトをいくつか作りました。

自分でサイトを作ることで、コードを書くことにある程度慣れました。

ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座

「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」のレベルアップバージョンです。


ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 [ Mana ]

LP(ランディングページ)やコーポレートサイトなど、複数のサイトを作りながら、

よりアニメーションなど高度な技術を学ぶことができます。

私は、途中まで進めて、アニメーションのところで挫折しました笑

必要になった時にまた勉強しよう、ということでスキップしました。

デザイン入門

初心者向けのデザインの本といったら、「ノンデザイナーズデザインブック」みたいなところがあると思うのですが、

個人的には、こちらの方が学びやすかったです。


デザイン入門教室 [特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design &IDEA) [ 坂本 伸二 ]

3ヶ月目

1冊ですべて身につくHTML&CSSとWebデザイン入門講座(2周目)

ザーッと全体を復習しました。

ざっくりつかむCSS設計

サイトは、一度作って終わりではないので、

修正しやすい、他の人が見てもわかりやすいコードを書く必要があります。

よって、本のタイトル通り、CSS設計についてざっくり学びたいと思い購入しました。

ざっくりつかむ CSS設計 [ 高津戸 壮 ]

複数のルールがあるので、

一読で全てできるようにはなりませんが、

BEMなどはすぐに取り入れられそうと思いました。

コーディング練習

ネット上にある、AdobeXDなどで作られたデザインカンプを利用して、

デザイン通りにサイトを作るコーディングの練習をしました。

超入門編のデザインでも、

本やネットで色々調べながら完成させた時の満足感といったら最高でした笑

ここで、知り合いの方にこのサイトを見せたのが、初案件をいただくことに繋がりました。

自身のスキルを周りに伝えることの重要性を改めて感じました。

jQuery標準デザイン講座「使える」知識が身につく!

HTMLとCSSだけでも静的なサイトは作れますが、

動きをつけたいと思ったときには、

JavaScriptなどの知識が必要になります。

まずは、JavaScriptを手軽に取り入れられる、ライブラリのjQueryについて学びました。


jQuery標準デザイン講座 「使える」知識が身につく! [ 神田幸恵 ]

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

JavaScriptからはプログラミングの勉強になります。

変数、代入、演算など、つまづきやすい概念を理解するのに非常に役に立ちました。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く [ ENTACL GRAPHICXXX ]

4ヶ月目

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

JavaScriptの基礎を理解した上で、手を動かしながらもう少し詳しく学べるこちらの本を進めました。

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために [ サークルアラウンド株式会社 ]

一周して、JavaScriptってこんなものか〜というのは学べましたが、

言語の特性的に、自身には少しわかりづらい部分が残りました。

5ヶ月目

スッキリわかるJava入門

Java自体は、Web制作には不要ですが、

プログラミングを理解するために、勉強を進めました。

書くことが多いと言われるJavaですが、

裏返せば、書くことが多いので、理解がしやすかったです!

このテキストはとても気に入って、3〜4周しました。


スッキリわかるJava入門第3版 [ 中山清喬 ]

6ヶ月目

上記のように、

Web制作、プログラミングと勉強を進めていたところ、

以前、制作物を見ていただいた方から、新規のサイト作成のお声を掛けていただきました。

ありがたい…。

WordPressの勉強はまだしていなかったので、

HTML、CSSでフロムスクラッチで作りました。

サイトオープンまで時間がなかったので、

3週間でデザインからサイト作成、サイト公開までしました。

正直きつかったです笑

が、色々調べながら形にするのは非常にやりがいを感じましたし、

完成したものを喜んでいただけたときにはやらせていただいてよかったと心から思いました。

その後、

毎月保守という形で新しい記事の追加や、サイトの構成の見直しやSEO対策などを担当させていただいています。

さいごに

今回は、Web制作の勉強を始めてから6ヶ月で初案件をいただくまでの勉強法についてお話させていただきました。

これからWeb制作やWebデザインを勉強してみたいと思っている方々の参考になれば幸いです。

コメント

タイトルとURLをコピーしました