昨年12月にProtocolテンプレートをリリースして以来、Tailwind UIのアップデートをお知らせしていませんでしたが、それは私たちが忙しくなかったからではありません。
この4ヶ月間、私たちは過去最高にTailwind UIに多くの取り組みを行ってきました。そして、目標としていたことをついにやり遂げたので、そのすべてを皆さんにお伝えできることを嬉しく思っています！
Commit: 次のアイデアに最適な、美しいchangelogテンプレート
数日前、Tailwind UI向けに設計した新しいchangelogテンプレートであるCommitをリリースしました。もちろんTailwind CSSとNext.jsで構築されています。
公開changelogは、取り組んでいることを人々に伝え続け、説明責任を果たし、開発力を高めるための非常に人気のある方法になりました。もちろん、決して新しい概念ではありませんが、Linearがchangelogサイトへの公開を開始するまで、他の人が企業ブログの代替としてchangelogを使用することに興奮することはなかったと思います。
Commitは、現代の製品changelogに対する私たちの解釈です。プロジェクトのホームページと、取り組んできたすべてのことのフィードの両方として機能するシングルページウェブサイトとして設計されています。
すべてのテンプレートと同様に、Commitには体験するのが楽しく、作業するのが喜びとなる機能と細部が満載です。
- ライトモードとダークモードのサポート。開発者が深夜2時に電気を消して読むことを想定して最適化しないわけにはいきません。
- 手作りのタイポグラフィスタイル。このテンプレート専用に設計された、綿密に選択されたフォントサイズ、スペーシング、リストスタイルなど。
- 組み込みのシンタックスハイライト。Shikiを搭載し、いくつかのCSS変数で簡単にカスタマイズできます。
- シングルファイル編集エクスペリエンス。すべてのエントリは単一のMDXファイルに存在するため、changelogの更新は、オープンソースプロジェクトの
CHANGELOG.mdファイルを更新するのと同じくらい簡単です。 - 美しいアニメーションとエフェクト。今回はMotion Oneを搭載しており、最先端の新しいライブラリでこれらの種類のトリックを実行する方法を学ぶための優れたリソースになります。
これまでと同様に、コードに飛び込んで独自のものにするのは簡単です。ここでは、ほんの少しの色を調整しただけで、まったく異なるウェブサイトのように感じられます。
ライブデモをチェックして完全な体験をしてみてください。また、Tailwind UI all-accessライセンスをお持ちの場合は、テンプレートのコピーをダウンロードして、次のプロジェクトで使用したり、ソースコードを調べて新しいトリックを学んだりしてください。
Tailwind UI向けに数百のコンポーネントを再設計
デザインは急速に進化しており、Tailwind UIを最初にリリースしてから3年以上が経過したため、顕微鏡で見て、それがまだ私たちの最高の作品であると感じられるようにする必要があると感じました。
嬉しい驚きでしたが、過去3年間で実際にデザインが向上していることがわかりました。そのため、4ヶ月間、すべてのコンポーネントとカテゴリを、新たに得た力で可能な限りピクセルパーフェクトにするために注力しました。
洞窟から出て再び日光を見たとき、数百の再設計されたコンポーネント、数十の完全に新しいアイデア、そしてそれらすべてを披露するための新鮮なページ例がありました。
以下に、私たちが行った改善の種類をいくつかご紹介します。
時代遅れに感じられた既存のパターンを再設計
Tailwind UIのコンポーネントパターンは、本当に時代を超越したアイデアが多いのですが、デザイントレンドが変化し、私たちがより優れたデザイナーになるにつれて、それらのパターンの具体的な実装は、別の時代のもののように感じ始める可能性があります。
私たちはすべてのコンポーネントを1つずつ確認し、もう一度挑戦したいパターンをたくさん見つけて、それらを2023年に持ち込むために最善を尽くしました。
ヒーローセクションカテゴリをご覧ください。これらの刷新されたパターンの外観の素晴らしい例がいくつかあります。
全体にわたって微妙なディテールを微調整
多くのコンポーネントは、完全な再設計が必要というよりも、少しばかりの追加の磨き上げが必要でした。
私たちは、間隔、タイポグラフィ、コントラストに微妙な改善を加えながら、多くのコンポーネントを確認しました。その結果、はるかにシャープでクリーンな感じになりました。
上記の例は、Description Listsカテゴリのものです。ブラウザでレンダリングされた完全な状態を確認したい場合は、そちらをご覧ください。
多数の真新しい例を設計
既存のすべてのコンポーネントを確認しているうちに、元のパターンセットから欠落していると感じられる新しいアイデアが次々と浮かび上がってきました。
そこで、私たちは多数の真新しいコンポーネントを設計し、私たちに目立った欠点をできるだけ多く埋めようとしました。
Feature Sectionsカテゴリのように、多くのカテゴリが2倍以上のサイズになりました。ここには、本当に素晴らしい新しいアイデアが満載です。
ダークバリエーションをさらに追加
最近見かける新しいウェブサイトはほとんどすべてデフォルトでダークモードになっているように感じられるので、ダークバックグラウンドに最適化された例をさらに提供することは、私たちにとって道徳的な義務のように感じられました。
私が本当に気に入っている例の1つは、これらの新しいダークバッジです。実際にはそれほど多くのことはありませんが、背景色のわずかな透明度がダークデザインに非常に良い効果をもたらします。
まったく新しいページ例
最後に、私たちはこれらすべての新しいものをまとめて、それらを披露するための多数の真新しいページ例を作成しました。その中には、マーケティングコンポーネントのスクリーンショットから誰もが私たちにせがんでいたアプリケーションUIの例も含まれています。
これらの新しいデザインのいくつかを見るには、更新されたホーム画面カテゴリをご覧ください。
というわけで、間違いなく史上最大のTailwind UIアップデートです。1月からこれらの改善点をゆっくりと公開してきましたが、Tailwind UI changelogにすべて記録されています。変更点の詳細を知りたい場合は、Tailwind UI changelogをぜひチェックしてみてください。
私たちの次のステップは、Tailwind CSS v4.0に向けて私たちが持っている多くのアイデアを掘り下げ、最初のNext.jsアプリケーションスターターキットを検討することです。今後数週間でさらに多くのことを共有できることを楽しみにしています！