【2024年】Web制作会社20社のクラス名調べてみたら..

ニャンコ

恒例の「調べてみたら」シリーズです。
今回もWEB制作会社20社を調べました。

今回調べたのはクラス名です。

ワンコ

皆さんはクラス名を考えるときはどうしてますか？
しっかりとしたWeb制作会社の仕事を受注してる方は、ガチガチなコーディングルールがあるかもしれませんが、時には知り合いのデザイナーから仕事を受けたりして、特にルールがないような事もあります。

ある程度自分がいつもやってるパターンというのはありますが、ふと思いました。
みんなどんなクラス名にしてるのかなあ　と。

ということでいつも通りWeb制作会社20社を見てみましょう。
ちなみに調査方法はいつも通り、下記の方法で行います。

• 位置情報での検索結果の影響を防ぐため、アメリカ版googleで「Web制作会社」と検索
• １ページ目に表示された制作会社、もしくは「制作会社おすすめ○○選」といった記事から20社抜粋
• 制作実績ページから最新の２件を調査（合計40ページ）
• bootstrap等で作られたサイトは除外しいてます

調査1. カード型レイアウト

まずはWebサイトでは基本中の基本のデザイン。
画像とテキストで構成された、カード型やリスト型と呼ばれるようなデザインについてのクラスを確認しましょう。
調べたのは下記の部分のクラスです。

①画像とテキストを囲むコンテナのクラス名
②画像のクラス名
③テキストのクラス名

調査結果

※調査結果の中の「●●●」は、aboutやserviceなどのブロック名が入っていた部分です。
今回はその部分は本筋とは関係ないので置き換えています。

※調査結果の中の<img>のようになっているものはクラス名ではなく、タグ名でスタイルを指定していた部分になります。

調査結果について

コンテナのクラスは「item」が多い

ぱっとみ、一番多いのは「item」とついたクラスが多いでしょうか？
私も「item」派です。

これ一個が一項目～　と分かりやすい感じがして好きです。

後は、「box」とついたクラスや、<li>タグに直接スタイルを付けてるのもそこそこありますね。

画像は「img」派が少し多い

画像については、「img」や「image」とついてるクラスが少し多いように思います。
「thumb」もそこそこありますが、私はまず「これなんて読むの？」といつも思ってるのであまり使用しません。

txt派か、desc派か

「desc」はDescription（説明）の略ですね。
txtの方が書き易そうですけどね。

私は「txt」が多いです。なぜなら楽だから。

いくつか、「c-card」「c-card」など「c-」が付いてるものも多くありますが、これは「common」の「c」でサイト共通で使うクラスなどに良く用いられます

調査2. レイアウト幅

次に調査するのは、コンテンツの幅を指定しているクラス名。
インナーなどと呼ばれてますよね。

幅の指定、コンテンツの中央寄せなど大事なレイアウトに関するクラスですね。
これはどこも大体同じな気がしますが、さっそく見てみましょう。

調査結果について

結果は表のとおりですが、まあ予想通りというか、そりゃそうだろなという結果ですね。
だいたい「inner」です。

調査3. ボタン

続いてはボタンです。
今回の対象は複数ページで使用されている共通のボタン。
そのボタンのクラス名がどうなっているかを調べました。

調査結果について

「btn」、「button」と単純なクラス名、もしくは「c-btn」「c-button」といった共通のボタンを表すクラス名が多かったですね。

私は「c-btn」派です。
ただ、「btn」でも「c-btn」でも複数ページで使用するんだろうなと、ぱっと見で分かるのでどちらでも良さそうです。

後は、「icon_btn」「btn-blue」のようにボタンの特徴を表したクラス名もありますね。
これはこれで、ボタンのデザインがクラス名から読み取れるので良さそうです。

まとめ

以上。Web制作会社のクラス名調べてみたら。。　でした。
こういうクラス名を付けた方がいい、という推奨される命名規則はありますが、これが正解！というものはありません。

また、それぞれの会社やサイトの規模、Webアプリケーションかなど、様々な条件でもクラス名は変わってくると思います。

今回調べた結果は、あくまでもこういう感じで名前付けてんだな～　ぐらいに見て貰えればと思います。

それでは、次回もまた何か調べてみたいと思います。