コーディングが遅い人の4つの特徴とは。時短するコツを副業で月70万円稼いだWeb制作者が紹介

インタビュアーのワカジツです！本日はよろしくお願いいたします。

早速ですが、こうだいさんが考える、コーディングが遅いWeb制作者の特徴について教えてください。

コーディングが遅い人によくある特徴は、次の4つです。

1. 過去に実装したコードを保管していない
2. 何をどう実装すればいいか迷っている
3. 時短できるツールを知らない・活用していない
4. CSS設計を行っていない

それぞれ詳しく解説します！

Web制作の仕事は、過去に作ったコードを使いまわしたり、少しだけ改変したりするケースがかなり多いです。

体感だと8割くらいの案件では、どこかの場所で過去のコードを利用します。

もし過去に実装したコードを見やすく保管していないと、また1からコーディングし直しになるので、かなり時間がかかってしまいます。

確かに同じものを毎回作っていると、非効率かもしれませんね。

過去に使ったコードを保管していない理由には、どのようなものが考えられるでしょうか？

1番は時間がないことですね。

Web制作の学習中は「早く新しいことを学ばないと！」とドンドン先に進んでしまいますし、案件には納期があるので、なかなかコードの保管まで手が回らないという人が大半だと思います。

私は今になっても「Web制作の学習中からコードを保管しておけばよかった…」と思うことがあるので、これからWeb制作を始める方には、ぜひ学習中から保管するクセをつけておいてほしいですね。

経験が少ないせいで、LPやホームページのそれぞれの要素を、どのように実装していけばいいかわからないという方も多いです。

「わからない点を調べる時間」は、Web制作の作業効率が落ちる大きな要因だといえます。

不明点を調べたせいで納期がギリギリになって、コードの保管ができない…という悪循環に陥っている人は多そうです。

おっしゃるとおりです。特に駆け出しのころは不明点だらけなので、調べることにかなり時間を取られますね。

コーディングを時短できるツールはたくさんあるのですが、意外と活用していないケースがあります。

たとえばCSSで三角形を作るのって、自力でやろうとするとけっこう手間なんですよね。

そのときに、自動で指定した形のコードを出してくれるジェネレーターの存在を知っていれば、コードを考える手間をグッと減らせます。

ツールの存在は、知っているだけで時短になりそうですね。

かなり便利だと思ったのですが、使っていない方も多いのでしょうか？

そもそもツールの存在を知らないという理由で、使っていない人は多いですね。

コーディングの時間を短縮していくには、時短につながるツールや新しいサービスの情報を常にチェックすることが大切です。

コードの書き方やクラス名のルールをあらかじめ決めておく「CSS設計」ができていないコーダーは、作業効率が悪くなっている印象です。

CSS設計ができていないと、作業効率にどのような影響があるのでしょうか？

CSS設計を行っていないと、Webページのなかで何度も使う要素を、ひとつひとつ修正しなくてはなりません。

たとえば「ボタンリンクの色を変えたい」と思ったときに、あらかじめCSS設計を行っていれば、1箇所を修正するだけで終わりです。

ところがCSS設計ができてないと、それぞれのボタンのコードを書き換えて、色を変更していく必要があります。

なるほど。反復作業が増えてしまうということですね…！

それぞれの作業時間は短くても、積み重なると膨大な時間を要してしまいます。

作業を時短していくうえでは、CSS設計が欠かせません。

それでは、こうだいさんが考える、コーディングのスピードを上げるコツを教えてください！

1. コードを保管して使い回す
2. クライアントに確認すべき内容をまとめておく
3. 品質チェックは最後にまとめて行う
4. ツールを活用する

です。それぞれ詳しく解説します。

先ほどもお伝えしましたが、コードを保管していないとかなり効率が落ちてしまいます。

面倒でも、実装したコードはわかりやすく保管して、後から見返せるようにしましょう。

コードを保管するおすすめのツールはありますか？

いまからまとめるのであれば、Notionが最もおすすめです。

シンプルに見やすいですし、実装時に参考にしたブログURLを掲載したり、入力したコードの表示確認ができるCodePen（コードペン）が使えたりと、機能が豊富です。

また自分でコードを保管するだけでなく、他の人が作ったコード集を参考にするというのも、時短になるのでおすすめです。

たとえば私のBrain「【コーディング時短】Notionスニペットコーディング実践集」では、私が過去4年間で実装したコードを、解説画像やCodePenと共に記載しています。

コピペで使えるだけでなく、実装方法を勉強することも可能なコード集です。持っておくだけでかなり時短につながると思いますので、ぜひ手に取ってみてください。

ただコピーするだけじゃなくて、勉強ができるのはスキルアップ面でも嬉しいですね！

最初のヒアリングで、クライアントに確認すべき内容を漏らさないように、事前にチェックリストなどを用意してまとめておくことをおすすめします。

確認に不備があって後から手直しすることになると、二度手間につながってしまうからです。

特に、どの部分を確認すればいいでしょうか？

色々あるのですが、たとえばWordPress制作の場合だと、「クライアントが自分で更新したい場所を聞いておく」というのは大切です。

後から「ここ更新したいんだけど…」と言われて、作り直しになるケースはよくあります。

コーディング作業を効率化するのはもちろん大切ですが、その前の準備段階で、クライアントと意思疎通をしておくことも重要です。

コーディングしたWebページの品質チェックは、最後にまとめて行いましょう。

途中途中でチェックを入れてしまうと作業効率が落ちるので、まずはバーっと作ってから、最後に確認するのがおすすめです。

チェックを効率化する方法はありますか？

私は「品質チェックリスト」を作って、確認すべきポイントをまとめています。

漏れがなくなりますし、リストを上から見ていくだけなので、効率よく確認することが可能です。

Web制作を行うなかで、クライアントから指摘された事項については、チェックリストに入れていきましょう。

こちらも繰り返しになりますが、コーディングを効率化するツールはたくさんあります。

先ほど例に出した三角形のジェネレーターだけでなく、フォントメーカーや配色ツールなど様々です。

コーディングで時間がかかっている部分がある場合は、時短できるツールがないかを探してみてください。

常に改善の意識を持つことが大切ですね。

「【コーディング時短】Notionスニペットコーディング実践集」では、コードのまとめの他に、品質チェックリストや効率化できるツール集など、時短に使える特典を7つ用意しています。

効率化によって作業時間が半分になれば、時給単価は2倍です。案件をひとつ効率化すれば回収できるくらいの価格設定なので、コーディングが遅くて悩んでいる方は、ぜひご確認ください！

ありがとうございました！