HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。 各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。 AliveUI AliveUI -GitHub AliveUIの特徴 AliveUIのデモ AliveUIの使い方 AliveUIの特徴 AliveUIは、モーションを最優先にしたCSSのフレームワークです。WebサイトやスマホアプリのUIインターフェイスは視覚的に構造化されていますが、時間的な動きには乏しいのが現状です。 AliveUIはclassを一つ加えるだけで、あらゆる要素にモーション、奥行き、インタラクションを与えて
連載目次 AIコーディングエージェントの進化により、自然言語でWebサイトのUI（ユーザーインタフェース）が作れるようになった。しかし実際に使ってみると、「修正を頼むたびにボタンの形が変わる」「ページごとに色のトーンがバラバラになる」といった、デザインの一貫性が保てない問題に直面することがある。 この「AIがバラバラなUIを作る問題」に対し、Google LabsのStitchチームが、2026年3月18日（米国時間）に公式ブログで注目すべき解決策を提示した。それが、プロジェクトのルートディレクトリ（最上層のフォルダ）に置く設計図、DESIGN.mdファイルだ。 DESIGN.mdファイルは、AIが理解するために最適化されたデザインシステム（共通ルール）用のドキュメントである。Markdown（マークダウン：簡単な記号で構造化するテキスト形式）の見出しやリスト構造を活用することで、人間が読
The first UI framework for the agentic era A tiny, blazing-fast, zero dependency, type-safe framework with no build step required. ArrowJS ships with the ability to isolate component logic inside Web Assembly sandboxes while rendering full inline DOM directly in your app — no iframes, no pre-defined UI components. Use it to build fast, maintainable applications — or to ship safe, flexible, on-dema
TL;DR: The DuckDB team and MotherDuck are excited to announce the release of a local UI for DuckDB shipped as part of the ui extension. The DuckDB project was built to make it simple to leverage modern database technology. DuckDB can be used from many popular languages and runs on a wide variety of platforms. The included Command Line Interface (CLI) provides a convenient way to interactively run
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
最初に Solid.jsとは Solid.jsとはReactに大きく影響を受けたライブラリであり比較的新しいライブラリです。私が興味を持ったのも2021年のState of JSを見て、Solid.jsの満足度が以下の画像のようにReactやSvelteよりも上位であることに驚き、調べたからで、それまでは存在すら知りませんでした。 この記事の目的 Solidについて興味を持ったため簡単にSolidについて調査した結果を書いていこうと思います。また、Solidの認知度が少しでも上がり、開発手段の一つとして名前が上がるようになればと思っています。 SolidとReactの差 今回は主な違いでけを取り上げます。細かく知りたい方は公式サイトをご確認ください。 仮想DOM まず大きな差が仮想DOMを使っているのかどうかです。Reactで仮想DOMを使っているのは有名で、仮想DOMのおかげで高速なSP
Version 0.10.1 released → Build beautiful interfaces without reinventing the wheel. a17t is a Tailwind CSS plugin that provides atomic components like field, button, and card in a neutral design language that scales with your project. Atomic interface elements. Stop styling everything from scratch. Tailwind CSS is great. But do you really want to design all your interface elements from scratch for
HyperUI Free Open Source Tailwind CSS Components HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more. a>img]:rounded-lg! [&_.ea-cta]:text-sky-500! [&_.ea-domain]:text-right! [&_.ea-domain]:text-gray-500! [&_.ea-headline]:text-sky-500! [&_.
A collection of UI Components for React built with Tailwind CSS 3 Provides fully customizable UI Components compatible with Next.js, Remix, Gatsby, and others React meta frameworks.No installation needed, Just copy and paste a component you want to use Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Il allows you writing your style without leaving your HT
先日のヒューマンインタフェース学会で、このタイトルの講習会を開催したところ、多数の参加者を得ることができ、また熱心な質疑応答があった。やはり日本におけるユーザビリティ活動は、第一段階の立ち上げ期を経て、第二段階に入ったのだ、と実感させられた。そこで、その時の発表内容の概要をここで紹介することにする。 なお、当日の講演は、 人間中心設計の水準とドメイン特有、および業界構造に適合したアプローチのあり方 黒須 正明（独立行政法人メディア教育開発センター） 成熟度に関する考え方 堀部 保弘（三菱総合研究所） 水準に対応した取り組み方について 鱗原 晴彦（U’eyes Design） ドメインに対応した取り組み方について 小川 俊二（カイデザイン） だった。ここでは私の講演内容を紹介する。 まず、こういうテーマの講習会を開催するに至った経緯を説明した。10年前は皆同じだった、という見出しで、ISO1
手書き風UIを実装できるJavaScriptライブラリー手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！ Rough NotationWeb サイト｜GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。 導入方法JavaScript ファイルで import { annotate } from "https://unpkg.com/rough-notation?module"; または npm でインストールします。 npm install --save rough-notation 実装方法基本的には実装したい要素を指定して、装飾を指定し、show() で呼び出します。タイプは underl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
