.jpeg)
Client Firstとは
Webflowではクラスの作成が容易なため、方針なくクラス名をつけていくと、クラスが乱立し、あるデザインを修正した際に、意図しない他のデザインも変更されてしまうということに陥りがちです。
Client Firstとは、Finsweet社が開発した、Webflowのウェブサイト開発において広く採用されているクラス命名と構造設計の方法論です。このアプローチは、再利用可能でスケーラブルなコードベースを作成することが目的とされ、チーム開発やクライアントへはもちろんのこと、将来の自分への引き継ぎを円滑にする上で重要な役割を果たします。
ただ、日本語での情報発信が限りなく少なく、私自身も手探りで導入したこと際に苦労したので、私が学んだポイントをシェアしようと思います。私は東京渋谷のレンタルドレスEmpty Dressyで始めてClient Firstを導入し、効率の高さに気づきました。今回はエンプティ株式会社のコーポレートサイトであり、スモビジ総研のWebサイトでもある本サイトへの導入の過程を記すことで、同様の考えを持つ読者に有意義なものになればと考えています。
Client Firstに至るまで
Empty DressyはMirosというClient Firstの考えにある程度沿ったテンプレートをベースに開発しました。ただ、2025年3月中旬にMirosをベースとしたリニューアルを行ったのですが、当時はClient Firstの考えを知らなかったので、めちゃくちゃなクラス命名と構造設計でした。
どこかを修正したら別のどこかにばぐがでるという状況で、ページ毎に余白が微妙にずれる状況だったので、どのように管理すべきかを検討し、Chat GPTに尋ねたところ、Client Firstの考えを紹介されました（AIすごい）。Empty DressyをClient Firstに適用させるリファクタリングには、2週間ほどかかったのですが、結果保守性が目に見えて向上したので、今後開発するWebサイトは全てClient Firstに則って開発しようと思いました。
たまたま採用したMirosがClient Firstに則っており、Finsweet社はWebflow界隈では知らない人がいない会社であったので、あらゆるテンプレートがClient Firstに則っているものと思っていました。ただ、5月に入り、コーポレートサイトを開発しようとテンプレートを漁ると、デザイン的に良いと思える複数のテンプレートは、いずれもClient Firstに則っていないことが分かりました。
コーポレートサイトはEmpty Dressyのようなサービスサイトと比べ、コンテンツ量が少ないので、保守性は一旦置いておいてもいいという考えもよぎりましたが、今後のことを考え、まずはデザインを優先させ、Client Firstには自ら合わせにいくというアプローチをとることにしました。ちなみに、今回採用したテンプレートはVexorです。
Vexorをベースに意識して行ったポイントを記載していきます。
1. 不要なpageやsection、cms collectionを削除する
figmaと連携させて開発する方法もありますが、デザイナーが別にいる大規模なサイトを除いて、そのままWebflowで開発することをお勧めします。Client Firstではclassの数を絞り、保守性を高める必要があるものの、テンプレートは優れていればいるほど、pageやsectionが多いので、まずは不要なpageやsectionを削除します。
多くの場合、テンプレートのあるpageをそのまま使うのではなく、複数のpageの良さそうなsectionを組み合わせて1つのpageを作ると思います。それぞのれ組み合わせは実際にしてみないと分からないと思うので、細かいデザインは置いておいて、実際のテキストや仮画像を入れて、過不足ない、トータルのサイトをまず開発してみます。cms collectionも使わないものは削除することで、サイト全体の構成をなるべくシンプルに保ちます。
後から使うかもしれないsectionをとっておきたいと考える人もいるかもしれませんが、Webflowでは、購入済のテンプレートをベースにいつでも再作成できますので、安心してください。新しく作成したサイトから、特定のコンポーネントをコピーして、編集中の別サイトに貼り付けることも可能です。
2. 未使用のclassを削除し、使用中のclassに接頭語をつける
pageやsection、cms collectionを最小限にできた後は、未使用のclassを削除します。再度パネルにあるStyle Managerを開き、上部にある「Clean up unused styles」をクリックすることで、一括で削除が可能です。
使用中のclassは削除されませんが、それらには接頭語をつけることをお勧めします。Client-First Cloneableやその他のClient Firstに準拠したテンプレートのstyle情報を持ってくる際に、干渉しないようにするためです。仮に「text-span」というクラス名が存在しているところに、同じクラス名（大文字と小文字の違いや、半角スペースと-の違いがあっても同一と判断される）をコピペすると、 「text-span 2」という別のクラスが生成されてしまい、同じような名前のクラスが複数作成され、結果、適切なクラス名の選択が難しくなってしまいかねません。
使用中のクラスに一括で接頭語をつける手段はなく、Style Selectorsにおける各クラスの工具マークをクリックして、一つずつ変更する必要があるので面倒ですが、例えば今回は「ve-」という言葉を先頭につけましたが、全クラスをClient Firstに準拠するよう確認するという目的において、下記の意味を持ちます。
- ある要素をクリックしてクラス名が右サイドパネルに表示された際に、確認済のクラスなのかどうかが分かる
- Style Selectorsの検索フィールドで「ve-」と入力することで、未確認の一覧を見ることができる
