About this websiteこのサイトについて

バーンワークス UI ライブラリは、Tailwind CSS を使用した日本語ウェブサイト向け UI サンプル集です。各 UI は HTML と React 向けのソースコードがコピーできます。

ヘルプ」 ページに簡単な使用方法のヒントを掲載しています。あわせてご確認ください。

なぜこれを作ったのか

Tailwind CSS には公式の UI ライブラリである 「Tailwind UI」 が存在します。バーンワークス UI ライブラリは、この素晴らしい公式 UI ライブラリにインスパイアされ、作成されました。

公式 UI ライブラリは、有料の UI ライブラリで、現時点では、

  • アプリケーション
  • マーケティング
  • eコマース

の 3 分類、計 500 種類以上の UI コンポーネントが登録され、それぞれ HTML React Vue のソースコードがコピーできる、非常に利便性が高く、優れたライブラリです。

すべての UI のソースコードが取得できるコンプリートパックでも日本円で概ね 30,000 円程度 (詳しい価格はこちらをご確認ください) の買い切り価格で利用することができ、課金してでも利用する価値が非常に高いライブラリですが、すべて英語 (英語圏のウェブサイトのトレンドやテイストに合わせて) で作成された UI ということもあり、普段日本語で、特に企業のウェブサイトを制作している場合によく使いそうな UI は案外少ないなと感じる場合もあります。

そこで、最初から日本語に最適化され、日本の企業や団代のウェブサイトでよく使われそうな UI ライブラリが欲しいと考えて作成したのが、本 UI ライブラリです。

「Tailwind UI」 リスペクトで制作したライブラリではありますが、「Tailwind UI」 にはない、日本語のウェブサイトでよく使われそうな UI を数多く集めたライブラリを目指します。

まだ作り始めたばかりで、登録してある UI のバリエーションや数は少ないですが、今後拡充していく予定です。 「サポートする」 ページもあわせてご覧頂ければ幸いです。

バーンワークス UI ライブラリは、Tailwind CSS を使用しているものの、Tailwind CSS 開発者とは関係のない、完全に非公式の UI ライブラリです。本 UI ライブラリの使用方法などについて、公式のサポートに問い合わせたりする行為はおやめください。

ソースコードの使用について

個人利用、商用利用を問わず、本ライブラリのソースコード表示機能からコピーしたソースコードは自由に使用していただいて構いません。また改変等も当然問題ありません。さらに、クレジットの表記やリンクを張るといったことを義務付けることもありません。

一方で、もし気に入って使って頂けた場合に、クレジットを表記して頂いたり、リンクを張って頂くと作者は喜びます。参考までにリンクする場合の HTML サンプルを下記に掲載しますので、ご利用ください。

# 日本語
<a href="https://ui.burnworks.com/" target="_blank" rel="noopener">
  バーンワークス UI ライブラリ
</a>
# 英語
<a href="https://ui.burnworks.com/" target="_blank" rel="noopener">
  Burnworks UI Library
</a>

役に立ったので少しカンパしてもいいという気前のよい方がいらっしゃいましたら、「サポートする」 ページもあわせてご覧頂ければ幸いです。

作っている人

Yoshiki Kato

Web Developer @burnworksInc

バーンワークス株式会社 代表取締役

埼玉県出身。サッカー、フットサル (観戦 / プレー)、モータースポーツ観戦、格闘技 (主にボクシング) 観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。サッカー 4 級審判員、ウオッチコーディネーター(上級 CWC)資格認定者。好物はゼリー、グミ、お酒、ラーメン。

バーンワークス株式会社

バーンワークス株式会社は、ユーザーにとってアクセスしやすく、使いやすいウェブサイトをクライアントと共創します。

まじめにウェブサイトのユーザー体験(UX)を向上させたい、ウェブアクセシビリティへの取り組みを継続的に行いたい、本気でウェブサイト活用について相談できるパートナーが欲しい…… そんな企業の皆様の想いにバーンワークスは真剣に向き合い、最適解を提供いたします。