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

本記事では、HTML&CSSの勉強を始めたての方向けに、コーディングが早くなる6つの方法を紹介しています。

【本記事の内容】

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

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

スポンサードサーチ

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

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

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

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

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

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

「え?コーディングなのにデザインツール使いこなせるかが大事なの?」と思った方もいるかとおもいます。これは模写や基礎学習をやっていると気づけないのですが、実際のコーディングの案件ではデザインデータをもとにコーディングしていくことになります。

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

したがって、デザインツールを使いこなせるかがコーディングを早くするには大事になってきます。しかし、使いこなすといっても、最低限XDを使って余白などの必要なデータを取得し、素材の書き出しがスムーズにできれば大丈夫です。

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

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

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

では、具体的にどれだけコーディングしたらいいのかというと、実案件をまだこなしていない方はProgate(HTML&CSSコース)と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日でコーディングを終えれるのが「早い」の目安だと思います。

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

ではコーディングが遅いと何が悪いのか?というと、Web制作をやっているフリーランスの場合だと固定報酬制であることが多いので、コーディングが早くないと時給換算した時の報酬が少なくなってしまいます。

例えば、LPのコーディング一件30,000円の案件の場合、コーディングにかかる時間によって下記のような差が出ます。

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

さらにフリーランスの場合は、まず仕事をとるのに時間と労力がかかりますし、クライアントとのコミュニケーションコストもかかるので、より正確に時給換算すると後者の20時間かかる人は最低賃金を切るかどうかという水準になってしまいます。なのでコーディングは早ければ早いほどいいわけです。

スポンサードサーチ

まとめ

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

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

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

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

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

コメントを残す

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

ABOUTこの記事をかいた人

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