WEB制作 イベント/店舗運営

独学でWEBコーダーになるには!現役コーダーがその手順と勉強項目をまとめる

みなさんはWEBコーダーという仕事を知っていますか?

何となく聞いたことがあっても、どんな仕事なのか詳しくわからないという人も多いのではないでしょうか。

 

WEBコーダーとは、わかりやすく表現すると、デザイン画を基に、実際のウェブサイトの骨組みを設計して装飾していく仕事です。

主にHTMLとCSSという言語を使います。

 

パズルが好きな人や、緻密な作業が得意という人にはうってつけの仕事です。

バチっとはまったときの満足感がクセになり、私はとても楽しく仕事させてもらってます。

 

在宅でもできるので、副業や子育て中の仕事としても人気のある職種です。

関連記事:【在宅で可能】サラリーマンにおすすめの副業8選!稼げる想定金額を事例と共に紹介

 

WEBコーダーとは!WEBデザイナーとの違い

厳密には、WEBデザイナーはデザイン画を作成する人、WEBコーダーはそれを基に骨組みを設計する人を指しますが、一般には兼務のことが多いです。

(もちろんそれぞれ専門にしている人もたくさんいます)

 

そのため、デザイン画を作成して骨組み、装飾まで行う人を総称してWEBデザイナーとしている場合があります。

なので、WEBコーダーの求人を探す場合には、WEBデザイナーの募集もくまなく探すと見つかることもありますよ。

 

ちなみに、細かくいうと「マークアップエンジニア」とも違います。

WEBコーダーの中でも、特にウェブのことを良く理解していて、ウェブサイトの設置目的を叶えるために一番良いコーディングができる人をマークアップエンジニアとして区別して呼ぶことがあるのです。

 

かんたんにいうとスペシャリストです。

WEBコーダーとの明確な線引きはないですが、WEBコーダーの上位職種にあたります。

 

WEBコーダーの独学は可能か?

結論から言うと、可能です。

たくさんの人が独学から始めて活躍しています。

 

ウェブ制作に携わりたいという人向けのサイトはたくさんあり、調べると難しい情報も飛び交っているので、それだけで尻込みしてしまいそうですが、

最低限身に着けるべきことは次の3つです。これを覚えてしっかり基礎を身に着けていればWEBコーダーになれます。

 

今はそれこそウェブサイトで調べるとたくさんの情報がありますので、基礎がしっかりできていれば、実務をしながら経験を肉付けしていくことができます。

私自身、リクエストを叶えるために調べて、初めて知るということが、今でもたくさんあります。「あれもこれも覚えなきゃ。。。」とならずに、まずは基本を押さえることをおすすめします。

 

WEBコーダーになるための勉強項目

  1. HTML言語
  2. CSS言語
  3. Adobe Photoshopの操作方法
  4. おまけ:Chromeデベロッパー・ツールを見るクセ

1:HTML言語

ウェブサイトの骨組みを作る言語です。

案件をいただいて作業を始めるとなると、見本ファイルを提示してもらえることが結構あるので、イチから書けなくても大丈夫なことが多いです。

 

まっさらな状態から作るとなった場合でも、エディターソフトに補助機能が入っているものがほとんどだと思いますので、重要なのは基本の概念を覚えることです。

 

2:CSS言語

HTMLに装飾を施すための言語です。

わかりやすいものでいうと、背景や文字の色、サイズ、配置などとなります。

 

どんな装飾があるのか覚えることが必要ですが、たくさんありすぎて現役でもわからないものも結構あります。

書き方のルールがわかっていれば、検索したり、似ているデザインのサイトを参考にしたりできますので、おおまかな装飾を一通り頭に入れたらあとは検索でカバー可能です。「こんなことができたな...」と思い出せるレベルで覚えていれば大丈夫!

 

3:Adobe Photoshopの操作方法

画像の書き出し時に使います。

ウェブデザインは、Adobe Photoshopというソフトで作られていることが多いです。

 

WEBコーダーは、デザイン画の中から画像として処理するものを抽出する作業も請け負うことがほとんどのため、かんたんな修正と、画像の書き出し方法程度の使い方は覚える必要があります。

 

おまけ:Chromeデベロッパー・ツールを見るクセ

いいな、と思うサイトを見つけた時に、構成を見てみたり、

自分で作っているサイトが思ったようにならなかったときに、その原因を探ったりするために使います。

 

日頃からデベロッパー・ツールで要素を見るクセを付けておくと、自分が制作する場面でとても役に立ちますよ。

使い方はかんたんなので、「デベロッパー・ツールを使う」というクセをつけておくと便利です。

 

WEBコーダーになる前に注意してほしいこと

ただし、コーディングだけという仕事はあまり多くありません。

WEBコーダーとして活躍したいという人は、「ゆくゆくはプラスでスキルを身に着けていく」という考えは持っていてください。

 

動きのあるサイトを作るには、JavaScriptやjQueryといった知識は必要ですし、

ウェブデザインやプログラム、サーバーなどの知識もある程度持っている人がやはり優遇されます。

 

それだけ覚えていれば安心というものではなく、始めるまでの最低限必要な知識ということです。

 

実際に実務をしてみないとわからないことはたくさんあり、どんな需要があるのか、どういったことが求められているのか、いただく仕事によっても変わってきますので、まずはWEBコーダーになって仕事をしてみて、そこから必要な知識をどんどん身に着けていくことになります。

活躍するためには、学ぶことはたくさんあります。

 

WEBコーダーになるための独学!具体的な方法

それでは、どのように勉強したらよいのかという話になります。

具体的には次のような方法が挙げられます。

 

学習サイトに登録して学ぶ

有名な学習サイトでは、ドットインストールやprogateなどがあります。

 

ドットインストール

ドットインストールは動画を見ながら自分で同じ環境を用意して進めていくという方法です。

実際に使うソフトで学習していくので、ソフトやパソコンの操作にも慣れていきやすいというメリットがあります。

 

progate

一方progateはスライドを見て学習した後に、ウェブ上に用意された環境に入力していくという方法が取られています。

スライドなので自分に合わせたスピードで読み進めることができ、またパソコンに新しいソフトを入れたりする必要がなくそのサイトで完結するという利点があります。

どちらのサイトも無料で学んでみることが出来るので、試しにやってみてもいいのではないでしょうか。

 

学習サイトで学ぶメリットは、無料で学習してみることができる、自分のペースで進められる、実際に操作してみるので身に着きやすい、情報にメリハリがあるので大事なポイントが入ってきやすい、などが挙げられます。

(最後まで履修したい場合は有料になります。)

 

一方デメリットとしては、操作でわからなかったときにすぐに聞ける相手がいるわけではない(どちらのサイトも質問できる環境は整えられています)、こういう場合はどうだろうと思った時の逆引きができない、などが挙げられます。

 

書籍で学ぶ

サイト学習は要点を絞り簡潔に学ぶことができるのに対して、書籍学習では情報量が多いのがメリットとして挙げられます。

知らないワードが出てきたときに用語から検索したり、補足として書かれていたことが思いがけず役に立つということがあります。

 

ただし、情報量が多い分、要点がわかりにくい、実際の操作と結びつきにくい、積極的に学ぶ姿勢が必要、などがデメリットではないでしょうか。

個人的には、ある程度基本を理解した上で、知識を深めるために書籍を利用するのがおすすめです。

 

Adobe社製品はチュートリアルがある

ウェブ制作をしていると、必ずと言っていいほど使用する機会の多いAdobe社製のソフトですが、契約したソフトにはたくさんのチュートリアルが用意されています。

使う機会が増えるとだんだん覚えてくるものですが、少しでもすんなり取り掛かれるよう、チュートリアルを見て学んでおくことをおすすめします。

 

「いいな」と思うサイトをとにかく見る

これは私は今でもこまめに行うようにしています。

現在の主流のデザインはどのようなものか、どういった装飾を適用すると再現できるのか、これは常にアンテナを張っている必要があります。

 

WEBコーダーはWEBデザイナーと兼務になる場合も多いですから、デザイン面でも役に立ちますし、知らなかったCSSを知るきっかけにもなります。

良いサイトは、知識の少ない人にも読みやすいものです。読みやすいと思ったサイトを良く観察してみましょう。

 

コピーサイトを作ってみる

これは、基本が備わったらぜひやってみてもらいたい方法です。

作ってみたいサイトを探して、ソースを見ずにイチからコーディングしてみると実践的な練習になります。

 

実在のサイトがあるわけですから、迷った時はソースを見れば答えが手に入ります。

実際に作ってみると、どういうところがわからないか、ここはこうすればよかったのか、など具体的な課題も見えてきます。

また完成したとき、自信にもつながります。

 

たとえば見本と違う組み方をしたとしても、ちゃんと再現されていればそれは正解です。次は良い方を採用してコーディングできるようになるだけです。

 

独学が難しければこんな方法も

スクール

私はスクールを受講したことがありませんが、スクールで学んだという知人を見ていると、実践の場面でとても吸収が早いなぁと感じます。

しっかりと基礎が身に着いているのだと思いました。

 

また、初級のコーダーはあまり使わないような知識も、しっかりと教えてもらえるんだろうなと感じています。

スクールは、料金面ではやはりそれなりの金額がかかりますが、しっかりと学びたい人には安心ですし、自発的に学ぶのが苦手な人、すぐに活躍できる人材になりたい人、わからないところはすぐに聞いて解決したい人にもいいのではないでしょうか。

 

未経験OK求人を探す

求人数としてはとても少ないですが、未経験者歓迎の求人が稀にあります。

私はこの方法でWEBコーダーになりました。

 

お給料は正直とても安かったですが、働きながら知識を得られるという点が魅力でした。

わからないところは上司に聞ける、必要に迫られるのでやらざるを得ない、そういう環境で知識は自然に身に着いていきました。

 

デメリットとしては、求人数がそもそも少ない、その会社でしか通用しない知識が思いのほか多い、などが挙げられます。

 

まとめ

いかがでしたか?この記事では、WEBコーダーになるためにはどのようなことが必要かをご紹介しました。

WEBコーダーになるための知識を学ぶ方法はたくさんありますが、本番はWEBコーダーになってからで、どれだけ学べるかが重要だと思います。

 

自分に合った方法でしっかり基礎を身に着けたら、実務を重ねてたくさん経験を積んでください。

 

コーディング作業はパズルをしている感覚で楽しんでできますし、自分の作ったサイトがウェブ上に公開されているのを見ると、達成感も感じられます。

やりがいがあって楽しい仕事ですよ。少しでも、WEBコーダーになりたい人の参考になりましたら嬉しいです。

-WEB制作, イベント/店舗運営
-, ,

Copyright© 株式会社takeroot , 2021 All Rights Reserved Powered by takeroot.