【重要】コーディングの効率化はCSS設計が命！作業が遅い人の特徴や時短のコツを最高月商195万円のコーダーが解説

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

ゆうきさんはこれまでに300名以上のコード添削を行っていますが、そのなかで「コーディングの効率化ができていないな」と感じる人には、どのような特徴がありますでしょうか？

私が考える、コーディングが効率化できていない人の特徴は、次の3つです！

1. 資産になる積み上げをしていない
2. CSS設計を習得していない
3. 独学で学んでいる

それぞれ詳しく解説していきますので、コーディングが苦手だという方は、ぜひご確認ください。

コーディングの案件をこなしていくなかで、資産になるような積み上げができていない方は、効率が悪い印象です。

コーディング作業を繰り返していると、「このコードは前にも書いたことがあるな」「このデザインはよく出てくるな」という状況がけっこう出てきます。

そのような状況になった際に、以前に書いたコードをストックしていれば、新しくコードを書く必要はなくなりますよね。

なるほど！自分が過去に作った、よく使うコードをストックすること＝資産というわけですね。

そのとおりです。ただ現実として、0からコーディングしてもなんとかなってしまうため、コードをストックしている人は全体の半分にも満たないと思われます。

締切に追われて時間がない状態だとコードをストックする余裕がないのはわかりますが、資産を積み上げていないと、後々の作業が楽になりません。

「同じコードは2度書かない」というイメージを持って、コードを貯めていくことが大切です。

コーディングするうえでルールを設けることを、CSS設計と呼びます。

CSS設計を習得できていない状態＝ルールを決めずにコーディングをしているのと同じです。

ルールに基づいて作業を進めるのと、ルールを意識せず進めるのとでは、効率が大きく変わります。

そうですよね…。まったく何も決まっていない状態で作業を進めるのは、かなり非効率だと思います。

CSS設計はコーダー共通のルールでもあるので、クライアントがコードを見て「CSS設計を理解していないな」と判断すると、それだけで発注が来なくなることもあります。

またルールに沿うだけで修正回数を大きく減らせるので、効率化の面から見ると欠かせません。

CSS設計は、コーディングを仕事にするうえでは非常に大切な要素だと意識しておきましょう。

CSS設計がそこまで重要なのに、できていない人も多いのでしょうか？

そうですね。もちろんできている人もたくさんいるのですが、主に独学で勉強している初学者さんは、なかなかできていない印象です。

独学だと「正しい知識やルール」を勉強する機会があまりありません。

コーディングは特に、現場で実際に活躍している人のコードを見て勉強することが多いので、完全にひとりで学習しているとどうしても非効率になってしまいます。

確かに先輩が現場で使っているルールを、本で学ぶことは難しそうです。

独学でも学習サービスやコミュニティを活用している人なら学ぶ機会はありますが、完全独学だと厳しいですね。

ひとりだと「こんないい方法があったのか！」という気づきを得るのがどんどん遅れてしまいます。

知らぬ間に機会損失が発生して非効率化してしまうので、情報交換の場を持っておくことはおすすめです。

効率化できていない人の特徴でもお伝えしましたが、私はコーディングの効率化においては、CSS設計が最も大切だと考えています。

あらかじめルールが設定されていない状態だと、どこかで破綻してしまうからですね。

100歩譲って1ページだけのコーディングであればルールがなくてもなんとかなるかもしれませんが、それ以上の仕事だと、一気にやりづらくなってしまいます。

CSS設計ができていないと、どのようなトラブルが起きるのでしょうか？

例えば「トップページを完成させたあとに違うページを作っていたら、コードが干渉してしまい、トップページのレイアウトが乱れた」というような状況が起こり得ます。

このような無駄なエラーやトラブルは、CSS設計を学ぶことで回避可能です。

コーディングにおいて、エラーの解消にかける時間はかなり膨大なので、少しでも縮められるように対処する必要がありますね。

せっかく作ったページが崩れてしまうのはつらいですね…。

では、ゆうきさん的にCSS設計で意識すべきポイントはなんでしょうか？

私はとにかく「正しいコード」を知ることだと考えています。

CSS設計は色々な教材で解説されていて、

• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい

という概念は確かにあるのですが、座学だけだとなかなかイメージが湧かないですよね。

そうですね…僕は未経験ということもあって、さっぱりわからないです。笑

座学で勉強するのも悪くはないのですが、やはり実践で使われている「型」を把握したほうが、学習効率は大幅にアップします。

野球で例えると、本でボールの打ち方を勉強するよりは、実際にバットを振ってみたほうが絶対に理解スピードは速いです。

これから本格的に勉強するなら、まずは実際に使われているコードの型を見て、それから座学で勉強するという流れをおすすめします。

まずは実務的なコードを見て学ぶ、ということですね。

私が執筆したBrain「【パパッと効率化！】コーディング効率化講座 ~CSS設計編~」では、私が2年の実務を経験して活用してきたコーディングの考え方や、ストックしたコードを掲載しています。

Brainを活用することで「正しいコードとはなにか？」というのを具体的にイメージすることが可能です。もちろん、コードストックをそのままコピペしていただいても構いません。

正しいコードを理解することで、結果的に効率化へとつなげられるので、いまコーディングで行き詰まっている方は、ぜひ内容を確認してみてください。

最後に、CSS設計以外でコーディングを効率化する方法があれば教えてください！

1. Gulpの導入
2. ジェネレーターの活用
3. その他ツールの活用

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

Gulpとは、コーディングするうえでの軽作業を自動化してくれる、効率化のマストアイテムとも呼べるサービスです。

• Sassのコンパイル
• CSSの圧縮
• ファイルを編集したら即座にブラウザを更新・反映する自動リロード
• ベンダープレフィックスの自動付与
• 画像の自動圧縮

などが行えます。

学習中の人は使う機会がまだ少ないですが、今後効率化するうえでは大切なサービスなので、ぜひ覚えておいてください。

なお、私のBrainには特典でGulpのソースコードを用意しているので、導入すればすぐに使えるようになります！

ジェネレーターは、HTMLやCSSを自動化してくれるツールです。

表やボックスなど、手作業で入力すると大変なコードを自動で生成してくれるので、活用することで大きく時短につなげられます。

ジェネレーターのおすすめはありますでしょうか？

私のXのポストでまとめているので、気になる方はそちらをご確認ください！

Web制作の仕事はコーディングだけではなく、クライアントとの打ち合わせなど、様々な雑務があります。

これらの業務もツールを使って効率化しておくと、全体的な時短につながるのでおすすめです。

例えばよく使う言葉を辞書登録したり、エクセルのVBAでプログラムを組んで、雑務を効率化するなどが挙げられます。

コーダーの業務を効率化するテクニックに関しては、私のBrainの10大特典としてつけているので、ぜひご活用ください！

10個も効率化のための特典があるんですね…！

インタビューありがとうございました！