こんにちは。デザイン事業部でデザイナーをしている野田です。
先日、初めてTailwind CSS（有料版）を活用した案件にWebデザイナーとして携わらせていただく機会があり、改めてTailwind CSSについてのおさらいと、Figmaでデザインする上で実施したこと、マークアップへの展開方法を備忘録も含めてここに綴りたいと思います。
Tailwind CSSとは
Tailwind CSS はユーティリティファースト（utility-first）なCSSフレームワークで、事前に用意されたクラス（例：text-center, bg-red-500, p-4）をHTML要素に直接適用して、見た目を整えるスタイルです。
特徴
- カスタマイズ性が非常に高い（テーマやブレークポイントなどを柔軟に設定可能）
- 再利用性より「即座に変更・構築」に強い
- スタイルがHTMLに直書きされる形になるため、CSSファイルが少なくなることも
Bootstrapとの違い
Tailwind CSSに似ているフレームワークとしてBootstrapが挙げられますが、大きな違いとしては、
Bootstrapは「すぐに使えるUI」が多い反面、Tailwindは「柔軟に自分のUIが作れる（オリジナルデザインを適用しやすい）」のが強みです。
学習コストは、Bootstrapと比べるとTailwindの方が時間がかかりますが、表現の幅がその分増えるという点では、お客様ニーズに沿ったデザイン提案がしやすいフレームワークなのではないかなと思います。
デザイナーなので開発サイドの気持ちを的確に伝えられませんが、実装そのものもしやすいという声を聞きます。
| 項目 | Tailwind CSS | Bootstrap |
|---|---|---|
| スタイル方式 | ユーティリティファースト | コンポーネントベース |
| デザインの自由度 | 高い（完全に自由に設計） | 中（見た目が統一されている） |
| 学習コスト | 最初は高め | 比較的低い |
| JavaScriptコンポーネント | なし（別ライブラリを使用） | あり（モーダル・ドロップダウン等） |
| クラスの量 | 非常に多い | まとまっている |
| デザインシステム | 自由に作成 | 既存のデザインに乗っかる形 |
Tailwind CSSを導入した案件について
今回このフレームワークを導入した案件は、某会社のゲーム開発におけるお金の流れを社内でより円滑に行えるように、元々エクセルで実施していたものをシステム化するというものでした。
各種設定フォームと膨大な計算テーブルを画面毎に設置していくUIで、デザインコンポーネントをよりシンプルにしてページの読み込みスピードを上げていく必要性がありました。
Tailwind CSSではシンプルなフォームやテーブル組のUIを提供しており、これらをベースにカスタマイズしながらUIを固めていきました。
Tailwind CSSの導入プラン
Tailwind CSSを導入するにあたって、Tailwind PLUS（2025.03以前のブランド名称はTailwind UI）のTeamsプランへチームで加入し、Tailwind PLUSのサイトで提供されている全てのコンテンツ（UI Block, Template, UI Kit）にフルアクセスできる環境でのスタートとなりました。
Tailwind CSS UIのFigmaへの取り込みについて
Figma公式デザインファイルやFigmaプラグインの提供は、かつては、Tailwind Labs（Tailwind CSSの開発元）から、Tailwind UI というコンポーネント集を販売しており、その中にFigmaファイルも付属していましたが、現在は、以下公式FAQに記載されている通り提供されていません。
Figma、Sketch、Adobe XD のファイルは含まれていますか？
いいえ、Figma、Sketch、Adobe XD などのツールのデザインアセットは含まれていません。
私たちは、自社のデザイン・開発プロセスの一環として高品質なデザイン成果物を作成していません。そのため、これらの追加リソースを構築すると、コード内で新しいコンポーネントやテンプレートを作成することに多くの時間を費やすことができません。コード内で新しいコンポーネントやテンプレートを作成することこそが、私たちが最も価値を提供できると考えている部分です。
引用元：Tailwind PLUS FAQ: https://tailwindcss.com/plus
Figmaコミュニティでは、Tailwind CSS の公式ファイルが今も公開されていますが、こちらに関しても新しいコンポーネントやテンプレとの提供に支障を来たすという理由で提供が終了しているため、2020年以降は更新されていません。
Official Tailwind CSS Styles (Tailwind Labs)：
→ https://www.figma.com/community/file/958383439532195363
ただ、
Figmaコミュニティでは、非公式でTailwind CSSのデザインファイルを公開しているユーザーもおり、今回の案件では、Tailwind CSSの公式ファイルをベースに、非公式のファイルを参考にしつつ、デザインのコンポーネントを肉付けしていくことにしました。
以下は非公式のTailwind CSS用デザインファイルです。
・Tailwind CSS UI (Florentin Eckl)：
→ https://www.figma.com/community/file/768809027799962739
・Tailwind CSS UI Design System (Free) (Codelevate)
（当時は提供がまだで参考にしなかったが、有料版もあり、購入しても良い！と思える内容です）:
→ https://www.figma.com/community/file/1274269619515529174
※Tailwind PLUSの全てのUIをカバーした有料版のプレビューはこちらから
※他にも非公式のデザインファイルがいくつか公開されていたと思うのですが、本記事を書いている時点（2025.05現在）では再度検索しても出てこなかったため、当時参考にしていた他のデザインファイルはここでは割愛します。
今後、公式が復活することが一番の希望ですが、非公式でもデザインファイルが増えることを願っています！
デザインから静的HTML制作・Component化への展開
デザインから実装までは、以下の工程で「1」から「4」まではデザインチーム内で進めていきました。
- Figmaでデザイン（デザインチーム内）
- 静的HTML制作（デザインチーム内）
- Component化（デザインチーム内）
- 静的HTMLからReactへの繋ぎこみ（デザインチーム内）
↓ - 実装（開発チームへ引き渡し）
「1. Figmaデザイン」 から 「2. 静的HTML制作 / 3. Component化」 までは、
- Tailwind CSS のUI Blockを応用しているコンポーネントは、デザインと共にTailwind PLUSの該当リンクを連携
- オリジナルで作成したコンポーネントについては別途連携
という方法を取り、画面単位で作成いただき、開発チームへ引き渡していったイメージです。
以下は、マークアップ側で参考にされていた独自クラス（コンポーネント）の作成方法やTailwindのチートシート（Chromeの拡張機能）です。
- Tailwind CSSで独自クラス（コンポーネント）を作成する
→ https://zenn.dev/takashi5816/articles/7d9d14a17a3ec0 - Tailwind Cheat Sheet Extension（Chromeの拡張機能）
→ https://chromewebstore.google.com/detail/tailwind-cheat-sheet-exte/jmggagicdeomaenmjjlphbamdaeojcol?pli=1
まとめ
Tailwind CSS をベースにデザインしてみて、導入時点での学習コストは確かに高かったものの、
- Tailwind CSSで提供している構築サンプルが豊富でそれらをそのまま応用しながらデザインにとりかかれたため、作業効率が上がった
- デザインの説明時に構築サンプルも紹介できたため、マークアップにも展開しやすかった
- 余白やフォントサイズ、色など、細かく調整でき、表現の幅は広げられた
- 提供しているアイコン「heroicons」がシンプルでわかりやすく、そこまで主張しないものなので使いやすかった
など、メリットの方が高いイメージでした。
一昔前にbootstrapでデザインを調整したことがありましたが、微調整が難しくスムーズに作業を進められていた記憶がないので、それと比べてもTailwind CSSはよりユーザーフレンドリーなツールなのかなと思います。
今回は初めての導入で網羅できていない箇所もあるかと思うので、今後また別案件で導入する機会がありましたら、作業効率・表現の幅の面でも、更に一歩踏み込んだ対応をしてみたいと思います。
簡単30秒