llc.beReady

Art × Web Design

雑記

就活失敗した僕が未経験で独立して、web制作を学んだ4つの方法

numbers-and-letters-my-mac-put-1544832-640x480

就活を失敗してから、1年ほどたち、未経験のweb制作業界で独立してからもう8ヶ月ほどたちました。
全くの未経験から始めたのですが、案外これは勇気のいるようなことらしく(本人は気づいていない)、全くの未経験者が独学でどうやってweb制作を学んでいったのか、4つのプロセスのまとめてみました。

本当にこれをやったっていうものだけ、リストアップするのでよかったら参考にしてみてください。

1.ドットインストールを使って真似をする

dotinstall

知っている方も多いかと思いますが、ドットインストールという動画でhtmlやCSSの書き方や、プログラム言語を教えてくれるサイトがございます。

1つだいたい3分くらいの動画で、1つのセクションに10個ちょいくらいの本数で構成されています。
すっごくわかりやすく解説されていますし、htmlを使ってどのようにウェブサイトを作るのかという入りの部分を理解することにとても役立ちます。

僕も初めてウェブサイトを作ろうとしたときに、そもそもhtmlや、CSSをどのように使うのかという根本的なところもわからなかったし、どこに書いたらいいのか、書いたファイルをどうやって扱うのか、などわからないことだらけでした。
むしろわかることがないくらいの状況。

そんな右も左も、前も後ろもわからない僕が参考にしたのが、ドットインストールだったんですね。そのなかでも、僕はWordPress入門編を勉強していました。Wordpress入門編ではwordpressのオリジナルテーマを作ることができるのですが、これで実際に1つ作品ができるという点と、ウェブサイトを作るときの手順、wordpressの基礎知識が一挙に勉強できたので、初めてやる方には超おすすめだと思います。

html編とcss編も見るだけ見ておくと尚いいと思います。Wordpress入門編ではhtmlとcssの動画を見たことを前提に進んでいく感じです。僕の場合は、とりあえず自分が作りたいものの作り方をみたかったのでwordpress入門編からみていました。
僕が最初に頂いたお仕事が、wordpressオリジナルテーマの制作だったので。

他にも自分のPC内に開発環境としてローカルサーバーを作る方法や、jQueryの書き方とかも紹介されているので、とにかく初めてならこれを見ろ!って感じなくらいおすすめしています。

2.気に入ったサイトの一部分を真似して作る

スクリーンショット 2016-08-15 16.59.40

ドットインストールである程度htmlの知識や書き方がわかってきたところで、スキルアップをしていかなければなりません。そこで、僕がやったのは、お気に入りのデザインのウェブサイトの気に入った部分だけ、作れるように真似していきました。

例えば!

このサイトの、グローバルナビのデザインかっこいいなあと思ったら、そのデザインで、構造などまで真似して実際にテキストエディタに書いていきます。前回紹介した固定ヘッダーの記事のように、その部分だけ真似して書いていけるようにしていきます。そのときにjQueryの記述も必要ならその部分も勉強してみる。

ただしここで重要なのは深追いはしすぎないということです。あくまでも真似して作るところが大事なので、わからないところを調べていて、関係のない知識が出てきてもそれはあまり深追いしないほうがいいです。少しくらいはプラスアルファとして、知識が増えていくからいいのですが、深追いしすぎると、単純に調べることに疲れてきて、肝心の作品を完成させることはできません。

ですから、知らない知識は実際に作りながら覚えるということを意識の中で、徹底していくといいと思います。逆にこの知識をつけたいから、これを作ってみようとか、勉強の仕方にバリエーションも出てくると思います。

初めてやる作業において、面白味でもありつつ、億劫になりがちな点は、じぶんがやることの多さにめんどくさいと感じてしまうところです。言い方を変えると、覚えることがいっぱいで楽しいということも言えますが、たいていは前途多難というか、道のりの長さに気落ちしてしまう人が多いとおもいます。だから無理に気負わず、今回やる分だけ覚えることができればいいやってくらいの感覚で、作っていってほしいと思います。

ゆるく少なくとも今日やることだけは理解しておこうくらいの感覚でいれば、1ヶ月後くらいにはあきらかに技量が変わっています。ものすごく上達していると思います。

ちなみに真似して作るときに、必ず使うのがgoogle chromeのデベロッパーツールです。
右クリックをしたときに出てくる、検証というボタンのことです。

これを使って好きな要素が、どのように作られているのかを見ることができるので、自分で作るときにめちゃくちゃ参考になります。
スクリーンショット 2016-08-15 16.05.47

右側にhtmlとcssが表示されます。

右側にhtmlとcssが表示されます。

3.直接連絡をとっていく

contact-min

これもかなり重要なことだと思っています。始めのうちってとにかくググりまくりますよね。もうわからないことでてきてググって、ググっている最中にまたわからなくなってまたググってみたいなググり無限ループが起きてくるのですが、そのググってたどり着いたサイトの運営者さんに直接連絡を取ってみるのです。

内容は、運営者さんには申し訳ないのですが、なんでもいいと思います。僕はよく、「非常にわかりやすくて大変勉強になりました!!!!」っていう感動メールみたいなものをよく送っていました。自分も独立してwebの勉強をしているけど、わからないことだらけで、それでもこのサイトを見てかなり勉強になって、光明がさしたような気持ちですと思っていることをそのままストレートに書かせてもらっていました。そうするとお返事をくださる方がけっこういらっしゃるんですね。
その方はもちろん僕よりも技術もキャリアも上なので、質問させていただく機会も出来てきます。これがかなり自分の成長につながる。

ピンポイントで知りたいことを教えてもらえるので、すごく勉強になります。また、そのつながりでお仕事をもらえることもあります。これもすごく大きいことですよね!

いざ、始めるぞ!って言っても自分のことを知っている人は誰もいないわけで、少しでも自分のことを知ってくださる方を探すことが大事です。でもいきなり僕のことを知ってくれる人はいないので、自分から知ってもらうために行動をしていくことはとても重要です。

あと精神衛生上も誰か知り合いがいるってだけでかなり変わってくるものです。普通は同業者はライバルになるのが社会ですが、1人でweb制作をする人にとっては、同業者は大抵仲間になってくれます。だから安心感があるというか、一人で作業していて、誰も教えてくれないという状況で暗い気持ちになることも不安になることも軽減してくれます。

始めたばっかで、誰も自分のことを知ってくれていないのであれば、自分から知ってもらえるように直接声をかけるのは、当たり前のようであまりみんなやっていないことです。もし自分の元に、そうやって質問してくれる人がいたら、少し嬉しいですよね?言い訳はせずに、確実な1歩を進み続けることが重要なんですね。

LEAVE A REPLY

*
*
* (公開されません)