【売上アップ】もしかして遅い?コーディングスピードを上げるためにする事【証拠動画あり】

新米くん
progateとかで、HTMLは理解してきたけど、コーディングが早くならない、、

 

コーディングは早くてなんぼ!
早くないと利益がドンドン減っていく!

こんにちは。ゆーへーです。

コーディングが出来るようになって早8年くらいになります。
前の会社に入ってから独学で覚えました。人から何かの教わったりはほぼ無く、仕事を通して自分なりに最良の方法を模索し、フリーランスになってからは自分ルールだけでなく、命名規則など、一般的な事も取り入れつつ今に至ります。
自分でいうのもなんですが、コーディングはまぁまぁ早いほうです。
コーディングチェックサービスを今年から始めた事もあって、余計に意識するようになりました。

生徒さんの話などを聞いたので、時間がかかってるところなど解説していきます。

コーディングが早くならない理由

  • 素材の書き出しに時間がかかっている
  • デザインからHTMLが想像出来ていない
  • クラス名をつけるのに時間がかかっている
  • タイピングに時間がかかっている

だいたいこんなもんでしょうか。
これが遅いっていうより全体的に無駄な動きが多いで遅くなってるパターンが多そうです。

素材の書き出しに時間がかかっている

Illustrator、Photoshop、XDでもアセット書き出しを使ってサクッと書き出しましょう。
書き出す前にファイル名を入れておくのも良いです。何気に時間かかりますしね。

よく聞くのが、どこまで画像にしていいかわからないってことです。
どこまでかは、クライアントに聞きましょう。
ですが、基本的にテキストでいけるところはテキストです。
デザインフォントでも使ってない限りは基本テキスト化を意識しましょう。

ファイル構成ルールを決めましょう。
→仕事で使えるフォルダ名、ファイル名の付け方

デザインからHTMLが想像出来ていない

デザインを見た時HTML、CSSが想像できてますか?

想像出来てないのであれば遅いです。
ここは幅が統一されてるから一つのクラス名でOK
ここは2カラムだからこのクラス名他にも使えそうな共通クラスを作る
見た瞬間HTMLとCSSがある程度わかるくらいがベストです。

そのために必要なことはCSSライブラリを作る事。
BootstrapとかでもOKですが、案件であんまり使うことは無いです。
使うならカスタムBootstrapでいるものだけ使いましょう。

→Bootstrapが実案件で使えない理由

クラス名をつけるのに時間がかかっている

意外と時間がかかっているのがクラス名をつけること。
適当につけると覚えにくいからCSS書くときミスしたり、いちいち確認したりするんですよね。
BEMみたいにキッチリとか言いませんが、命名規則を決めましょう。

BEMとは
ブロック、エレメント、モディファイヤの略で命名規則の1種です。ブロックはブロック名、エレメントはtitle、Card、button、モディファイヤは装飾的なもの。

クラス名が異様に長くなったりするので、あんまり好きではないですけど、わかりやすくてメンテナンス性の高い付け方です。
知らない人は一度覚えておきましょう。

タイピングに時間がかかっている

タイピングが遅い。これも迷いからですね。
emmetとかコードスニペット(コードストック)使えばかなり早くなりますが、コードが想像出来ていないと早くなりません。
文字の打つスピードは、コーディングでは基本コピペなので打つこと日本語を打つことはあまりないです。なので、タイピングの練習をしても早くはなりません。英語が普通に打てるくらいであればOKです。

ちづみさんの模写コーディング

参考動画

レイアウト的にもかなり単純なデータになりますので、目標時間は1時間以内ってところでしょうか。
それ以上かかっていれば遅いと言えます。

上の動画で分かる通り、かなりスローペースですが、45分程度で完成しています。
emmetやCSSライブラリを使えば、それくらい短時間でのコーディングも可能になります。

ゆーへー
コーディングする前にイメトレをしよう。
コーディングする前にデザインをブロックで、色分けしてみよう。
コーディングチェックサービスも行っております。

コーディングが早くなるという事は売上が上がると言う事。

コーディングが早くなると単純に時給が上がります。
僕の場合だと今は時給一万くらいです。
仕事があるなら、コーディングだけで1800万くらいは利益がでるなぁと今年は特に思いました。

一日8万☓20日☓12ヶ月

チェックバックもあるので、そう単純なものではないですけど、そこまで難しくないですよね。

■フリーランスになってからの仕事がどこから来たかまとめてます。
参考程度にどうぞ。500円です。

まとめ コーディングを早くするためにすること

  • デザインからコードをイメージする事
  • 名前の付け方を意識する事
  • 自分のCSSライブラリを作ろう

以上!

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。