コーディングが早くなる6つの方法【目指せ時給5000円!】

今回は「コーディングのスピードを上げたいけど具体的に何をすればいいのかわからない。」

という方向けにコーディングが早くなる6つの方法というのを紹介したいと思います。

【本記事の内容】

  • コーディングが早くなる6つの方法
  • そもそも「コーディングが早い」の基準とは?

最近Web制作(HTML、CSSなど)を勉強され始めた方には、そもそもコーディングが早いの基準がわからないし、コーディングが遅いと何が悪いのかよくわからないという方もいるかと思うので、そういったことも含めて解説していきたいと思います。

(そんなことは知ってるわ!という方は読み飛ばしてください)

スポンサードサーチ

コーディングが早くなる6つの方法

コーディングが早くなる6つの方法見出し画像

では早速コーディングが早くなる6つの方法について解説していきたいと思います。

コーディングが早くなる6つの方法とは以下の感じ。

  1. デザインツールを使いこなすこと
  2. コーディングの数をこなすこと
  3. テンプレートを用意すること
  4. 画面を分割してコーディングする
  5. Emmetを使う
  6. Sassを使う

では詳しく解説していきたいと思います。

デザインツールを使いこなすこと

まず1つ目はデザインツールを使いこなすことです。

「え?コーディングなのにデザインツール使いこなせるかが大事なの?」と思った方もいるかとおもいます。

これは模写や基礎学習をやっていると気づけないのですが、実際のコーディングの案件ではデザインデータをもとにコーディングしていくことになります。

具体的に言うとデザインデータから字体や余白、フォントサイズ、色などを取得してコーディングするのですが、この作業がスムーズにできないとコーディングのスピードが非常に遅くなるのです。

なのでデザインツールを使いこなせるかがコーディングを早くするには大事になってくるのです。

使いこなすといっても、最低限XDを使って余白などの必要なデータを取得し、素材の書き出しがスムーズにできれば大丈夫です。

コーディングの数をこなすこと

2つ目はコーディングの数をこなして手を止めずにコーディングできることです。

コーディングを早くするには便利なツールやテクニックが数多くありますが、一番大事なのは数をこなしてデザインを見たらHTMLの構造や、CSSを何を使ったらいいのかが瞬時にわかるようにして手を止めないことです。

じゃあ具体的にどれだけコーディングしたらいいのかというと、実案件をまだこなしていない方はとりあえずProgateとflex-boxは習得している前提で模写を5〜10、デザインデータからのコーディングの経験を3つくらいを実案件までに終えているのがいいですね。

すでに実案件をこなしている方は、引き続き実案件をこなしつつ、手が空いてる時に難しめのサイトの模写をやったりしてとにかくコード書き続けるのがコーディングを早くするには大事だと思います。

テンプレートを用意すること

3つ目はテンプレートを用意することです。

テンプレートとは具体的には

  • HTMLのheadタグの記述
  • CSSのよく使うコードをまとめておく
  • アコーディオン、スムーススクロール等のjQueryのコード

などをまとめて用意しておくことです。

こうすることで、コード書く時間をかなり短縮できます。

参考までに私のテンプレを紹介します。

「HTML↓」

HTML雛形

「CSS↓」

CSS雛形

画面を分割してコーディングする

4つ目は画面を分割してコーディングをするということです。

なぜ分割するのかというと、よくHTMLを書き終えていざCSSを書こうとなった時に「あれここなんてクラス名つけたっけ?」となってCSSファイルとHTMLファイルを行き来するのを避けるためです。

こういった小さな無駄な時間を削ることは軽視しがちですが、そういった小さな無駄な時間の積み重ねでかなりの時間を無駄にするので結構大事です。

ちなみに私はBracketsを使っており下記の感じでいつも画面を上下に分割してコーディングしています。

画面分割画像

Emmetを使う

5つ目はEmmetを使うことです。

EmmetとはHTML、CSSの記述をサポートしてくれるプラグインで、省力記法によってコーディングのスピードを格段に上げてくれるツールです。

これを使うのと使わないのではかなりコーディングのスピードが変わってくるので、まだ導入していない方は早く導入しましょう。

具体的私がよく使うのは

  • section>.inner>ul>li*5>a
  • fz20 (font-size:20px;と出力される)
  • p20 (padding:20px;)
  • m20(margin:20px;)
  • h200(height:200px;)
  • w1110(width:1110px;)
  • bgc (background-color: ;)

なんかをよく使います。

「Emmet」でググれば詳しい使い方がたくさん出てくるかと思います。

Sassを使う

6つ目はSassを使うことです。

*ここでいうSassとはSCSS記法のことを指しています。

Sassを使えるとCSSの記述量を減らせますし、使いこなせればかなり便利です。

私はSassの機能でネスト、mixin、変数なんかを使うことが多いです。

Sassに関してはProgateの方でもレッスンがあるのでそちらで詳しい使い方を学んでいただければと思います。

 

「いやー、俺はSassそんな便利だと思わないしめんどいから使わなくていいや。」と思った方へ

クラウドソーシングではまだSassを使った案件は少ないですが、制作会社の外注案件だとほとんどがSassでのコーディングを指定されるので、「めんどい」「そんなに便利だと思わない」という方もSassでのコーディングをできるようにすることをお勧めします。

「コーディングが早い」の基準とは?

「コーディングが早い」の基準とは?見出し画像

コーディングの学習初期の頃だと、いまいちどのくらいのスピードだとコーディングが早いと言えるのかがよくわからないですし、自分が今どの立ち位置にいるのかよくわかりませんよね。

ということでコーディングの早さの目安と、コーディングが遅いと何が悪いのかということも解説していきたいと思います。

簡単なLPなら1〜2時間でコーディングできる

コーディングが早いと言える目安は具体的に言うと下記のようなサイトのコーディングがレスポンシブ対応込みで1時間〜2時間で終えれることです。(画像はサイト全体の一部分のみ表示しています)

LP参考画像

もっとボリュームのある長いLPでもだいたい1日でコーディングを終えれるのが「早い」の目安だと思います。

ちなみに上記のようなサイトのコーディングが1〜2時間で終えれると、LPのコーディングの相場はだいたい30,000円〜50,000円くらいなので報酬を時給換算した時に時給5000円は簡単に超えれます。

コーディングが遅いと何がダメなのか?

ではコーディングが遅いと何が悪いのか?というと

先ほども話に出ましたが、Web制作をやっているフリーランスの場合だと固定報酬制なことが多いので、コーディングが早くないと時給換算した時の報酬が少なくなるんですね。

例えば、LPのコーディング一件30,000円の案件の場合

  • 3時間でコーディング終えれる人なら時給10,000円
  • 20時間でコーディングを終えれる人なら時給1,500円

となるわけです。

さらにフリーランスの場合は、まず仕事をとるのに時間と労力がかかりますし、クライアントとのコミュニケーションコストもかかるので、より正確に時給換算すると後者の20時間かかる人は最低賃金を切るかどうかというレベルでしょう。

なのでコーディングは早ければ早いほどいいわけです。

スポンサードサーチ

まとめ

では記事のポイントをまとめたいと思います。

「コーディングが早くなる6つの方法」

  • デザインツールを使いこなす
  • 数をこなして手を止めないようにする
  • テンプレートを用意する
  • 画面を分割する
  • Emmetを使う
  • Sassを使う

コーディングのスピードの目安は簡単なLPなら2〜3時間で終えれること。ボリュームのあるものでも1日で終えれるのを目標にすべし。

となっています。

まずは今すぐできる「テンプレートを用意する」「画面を分割する」「Emmetを使う」なんかから始めてみることをお勧めします。

では今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。