インタビュー Web制作

初心者必見！CSS設計とは？コーディングを効率化して時給アップを目指す！

2024年1月31日

※ 当サイトではアフィリエイト広告を利用しています

もっと効率よくコーディングできるようになりたいなぁ

コーディングをしていると、過去に実装したことがあるようなデザインなのに苦戦したり、思ったようにスムーズにコーディングできないことはありませんか？

それは、コーディングの効率化ができてない証拠です。

そこで今回は、コーディングの効率化のプロフェッショナルである、ゆうきさん(@yuki_web126)にインタビューしました。

この記事を読めば、コーディングの効率化に何が必要なのか、分かると思います。

じゅんぺいさん、よろしくお願いします！

ゆうきさん

この記事がおすすめな人

  • 自分のコードに自信がない
  • コーディングスピードが遅い
  • 毎回同じような実装で苦戦する
  • class名を付けるのに時間がかかる
  • 修正地獄にウンザリしている
  • 効率よくコーディングして時給をアップしたい
じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

コーディング初心者によくある悩み

コーディング初心者のよくある悩みってある？
今まで約100人のコードをレビューしてきましたが、以下のような人が多いです！

ゆうきさん

 

コードに自信がない

みんな口を揃えて『自信がない』と言いますが、これは正常です。

始めから自分のコードに自信を持てる方なんていません。

自信はなくて当然なんです！

ゆうきさん

仕事やスポーツでも、そうではなかったですか？

始めから早々上手くいくはずなんてないはず。

だからこそ一生懸命練習するし、人から教わったりしましたよね？

コーディングも同じです。

自信を持てるようになるためにも、下記のような行動を取っていきましょう。

  • 仲間を作って情報交換する
  • 教材などで正しい知識を身に付ける
  • 結果の出している方からフィードバックを受ける

 

コーディングルールが決まっていない

こちらもめちゃくちゃ多いです。

その場しのぎで、コーディングしている方ですね！

ゆうきさん

これだとclass名やCSSの当て方に統一性がないため、下記のような状況になりやすくなります。

  • class名が被りすぎて、CSSが他の要素に影響しちゃっている…
  • コーディングを進めれば進めるほどコードがぐちゃぐちゃ…
  • 下層ページをコーディングしていたら、知らぬ間にTOPページが崩れている…
  • ピクパしたいのに全然合わない、むしろどんどん表示がズレていく…

これが続くと、手戻り・修正が多発して、永遠に終わりが見えない『修正地獄』にハマってしまいかねません。

ここで、

コーディングルールってどんなのがあるの？

と思った方もいると思います。

具体例については、僕の過去のポストでいくつかご紹介させていただきました。

気になる方はご覧ください👇

 

コーディング速度が遅い

コーディングルールが決まっていないと、無駄に悩んだり迷ったりしますし、修正や手戻りも多くなってしまいます。

よって、コーディング時間がどんどん長くなり、

自分、コーディング遅いなあ…

となるわけです。

つまり、

『ルール化できていない ＝ 効率化できていない』

となるわけです。

コーディングの効率化を図るのであれば、ルール化は必須です。

 

コーディングの効率化ができるとどうなるか？

コーディングの効率化ができるとどうなるの？
コーディングの効率化ができると、たくさんのメリットがあります！

ゆうきさん

 

コーディング速度がアップして時給が上がる

ルールを設けることで『こういう時はこれ！』という感じで、作業を進めることができます。

class名やよくあるレイアウトパターンのコーディングでは、無駄に悩んだり迷ったりすることも無くなり、修正や手戻りも最小限に抑えられます。

よって、コーディング時間もどんどん削減でき、結果として時給アップに繋がります。

 

修正なく素早く納品してクライアントからの信頼がアップする

スピード感を持って、かつクオリティの高い成果物を納品すれば、クライアントからの信頼度もアップします。

この信頼を獲得ができるかで、継続案件に繋がるかが決まると言っても過言ではありません！

ゆうきさん

複数のクライアントから継続案件をご依頼頂ける関係性が築ければ、コーディングのみでも月50万円ほどの安定収入を実現することもできます。

 

時間に余裕ができる

効率化を徹底すると、コーディング時間を1.5〜2倍は圧縮することができます。

仮に、今あなたが時給1,500円であれば、時給2,250〜3,000円にアップするという感じですね！

ゆうきさん

その結果として、時間に余裕が生まれます。

僕は時間に余裕ができたことで、以下のような新しいチャレンジをすることができました。

  • 学習支援コミュニティ（学サポ）の運営
  • コンテンツ制作（Brain）

コーディングの効率化は、メリットしかありません。

 

コーディングの効率化に必要なこと

コーディングの効率化に必要なことって何？
コーディングの効率化の方法は、いくつかあります！

ゆうきさん

コーディングの効率化に必要なことは、主に以下になります。

  • CSS設計の習得
  • コードストックの作成
  • ジェネレーターやChatGPT、CursorなどのAIツールの活用

この中でも特に重要なのが『CSS設計』です。

 

CSS設計とは？

CSS設計って何？
CSS設計について簡単に解説しますね！

ゆうきさん

CSS設計と聞くと難しく聞こえると思いますが、簡潔にまとめると『class名やCSSの当て方にルールを設けましょう』と言うことです。

お気づきの方もいると思いますが、ここでCSS設計とルール化が紐づきます。

まず、CSS設計には『良いCSS設計』と言う考え方があります。

覚える必要はありませんが、『こんな考え方があるんだ』くらいの感覚で、頭の片隅に置いといてください。

全部で4つあるので、1つずつ解説します。

 

予測しやすい

第三者がclass名を見て、それがどこで使われているのかある程度予測できることです。

例えば、

  • class="titleA"
  • class="titleB"

この場合、タイトルであることは予測できますが、どこで使われているのは分かりません。

それでは、次の場合はどうでしょう？

  • class="title-main"
  • class="title-sub"
主要なタイトルと、サブ的なタイトルだなと言うのが見て取れますね！

ゆうきさん

また、単語を略して書くのは予測低下に繋がるので、なるべく避けるのが好ましいです。

英単語を略した例

❌ title → ttl
❌ category → cat
❌ message → msg

知らない人が見たら『cat？キャット？猫？？』ってなるよね・・・

 

再利用しやすい

共通パーツ（使い回しするパーツ）がある場合、コードを修正する必要がなく、再利用できるようにしておくことです。

例えば共通のタイトルに付けるclass名の場合、

  • service-title

コレだとserviceセクションでは使用できますが、他のセクション（worksセクションなど）では、class名に矛盾が生じるため使えません。

それでは、次の場合はどうでしょうか？

  • common-title

『common-』とすることで、どのセクション（serviceセクション・worksセクションなど）でも、問題なく使用できますね。

『common』は『一般的・通常』って意味だよ

 

保守しやすい

サイトを改修するにあたり、コードを追加・更新した時に既存のコードに影響が出て書き直したりする必要がないことです。

既存のコードに影響が出るケースとしては、下記の通りです。

  • class名被り
  • CSSの影響による表示崩れ

 

拡張しやすい

コーディングを1人で行った時も複数人で行った時も、成果物のクオリティは同一であると言うことです。

例えば、

  • 書き方にルールを定める
  • コメントを残す

などして、複数人でコーディングしたとしてもクオリティを担保する工夫が必要になります。

 

CSS設計手法の種類

CSS設計手法ってどんな種類があるの？
主なCSS設計手法をご紹介します！

ゆうきさん

 

OOCSS

これは『Object Oriented CSS』の略称になります。

構造と見た目を分離して、定義します。

構造

  • width
  • height
  • display

見た目

  • color
  • border-color
  • background-color

定義したclass名のうち、必要なものを組み合わせてコーディングします。

これは、マルチクラスを用いて使うことが多いのが特徴です。

この考えを取り入れたものの例としては、Bootstrapが挙げられます。

 

BEM

これは『Block、Element、Modifier』の頭文字をとった、略称になります。

ロシアのYandex社によって提唱されました。

ゆうきさん

厳格なclass命名規則が特徴です。

BEMは、3つの要素で構成します。

  • Block：構成のルートとなる要素
  • Element：Blockを構成する子要素
  • Modifier：BlockまたはElementの状態変化

そして、class名の命名規則は下記の通りです。

『Block__Element--Modifier』

例えば『class="about__item--red"』みたいな感じだよ

 

SMACSS

これは『Scalable and Modular Architecture for CSS』の略称になります。

CSSを5種類に分類して、それぞれの考え方や記述ルールを取り決めます。

Base

基本的なタグに対して、デフォルトのCSSを定義します。

例）reset.css、base.css

Layout

レイアウト調整するためのCSSを定義します。

接頭辞『l-』を付与します。

例）l-header、l-footer

Module

再利用可能なパーツを定義します。

State

Layout、Moduleの状態変化です。

JavaScriptなどで、classを付けたり外したりする際に使用します。

接頭辞『is-』を付与します。

例）is-active、is-hidden

Theme

サイト全体の見た目（主に色）に関するスタイルを定義します。

接頭辞『theme-』を付与します。

例）theme-border、theme-background

 

FLOCSS

これは『Foundation、Layout、Object、CSS』の略称になります。

日本人が提唱した方法で、GitHubも日本語で解説されています。

OOCSSやBEM、SMACSSのメリットを取り入れたCSS設計手法です。

CSSを5種類のフォルダに分類して、それぞれの考え方や記述ルールを取り決めます。

Foundation

基本的なタグに対して、デフォルトのCSSを定義します。

例）reset.css、base.css

Layout

レイアウト調整するためのCSSを定義します。

接頭辞『l-』を付与します。

例）l-header、l-footer

Object

  • Component：それ以上分解することのできないパーツを定義します。
    接頭辞『c-』を付与します。
    例）c-title、c-btn
  • Project：複数の要素で構成されているパーツを定義します。
    接頭辞『p-』を付与します。
    例）p-header、p-card
  • Utility：ピンポイントでスタイル調整するための便利クラスを定義します。
    接頭辞『u-』を付与します。
    例）u-desktop、u-color

 

初心者におすすめな手法は？

個人的におすすめの手法は、BEMとFLOCSSです！

ゆうきさん

BEMは今回ご紹介したCSS設計手法の中でも、比較的ルールが簡潔で1番導入しやすいです。

なので、まずはBEMから学習を進めるのが良いでしょう。

FLOCSSも、各CSS設計手法の良いとこどりをしたものなのでおすすめです。

BEM → FLOCSSの順番で学習を進めていくと、すんなり内容も入っていくと思いますよ！

ゆうきさん

まとめ：コーディングの効率化にはCSS設計を学ぼう！

コーディングの効率化ができると、メリットしかありません。

そして、効率化するためにはCSS設計の習得がマストです。

今回お話しさせて頂いたコーディングの効率化について、約2年以上コーダーとして活動してきて得た知識・経験を全て詰め込んだのが、僕がBrainで販売している教材です。

コーディング効率を上げたい方は、必須アイテムと言っても過言ではありません。

この記事を執筆している現在では、

  • 販売部数：300部超え
  • レビュー件数：200件超え
  • 平均レビュースコア：

と、ありがたいことにたくさんの高評価を頂いています。

また、

  • たった1人で8案件コーディングを進めたり
  • 3日間で13ページコーディング仕上げたり
  • ライブコーディングでも皆さんからスピード感で驚かれること多数あったり

なぜ僕が上記のように、爆速でコーディングできるようになったのか？

その理由を無料部分でネタバレしているので、気になる方はぜひ読んでみてください！（画像クリックで商品ページにアクセスできます👇）

CSS設計編

コーディングの効率化したい人はこちら！

時給アップに直結！

 

学習支援コミュニティ『学サポ』のご紹介

最後に、学習支援コミュニティ（学サポ）についてお知らせです！

ゆうきさん

去年までの1年間は、しめじさん（@simeji_pro）が運営している『しめサポ』限定で活動してきました。

そんな中、『一般募集はしないんですか？』と言うご相談も、ありがたいことに多く頂いていました。

そこで、満を持して一般募集もスタートします！

ただいま急ピッチで募集の準備をしていますので、今しばらくお待ちください！

ゆうきさん

学サポの特徴

  • 結果を出しているメンターが直接指導
  • コードの中身まで確認してフィードバック
  • 実務で通用するスキルが身に付く
  • 教材以外の質問・相談もいつでも可能
  • 長く活躍するための自走力が身に付く

まだまだありますがこの辺で・・・

気になる方は、ぜひ募集する際の説明会にご参加下さい（Twitterをフォローしてお待ち下さい → @yuki_web126）

楽しみにしていて下さいね！

ゆうきさん
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X（旧Twitter）フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-インタビュー, Web制作