Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
同僚である@akira_motomuraにオススメされて、上野学(@manabuueno)さんのオブジェクト指向やOOUIに関する記事を読んでみたのですが、 個人的にサービスをつくる際の視点がガラリと変わったのでまとめてみたいと思います。 オブジェクトベースなUIとは？オブジェクトベースなUIとは、オブジェクト（ユーザの関心の対象物）を手がかりに操作設計されたユーザーインターフェースのことを言います。 （OOUIとも呼ばれている） 代表的な例としてApple製品が取り上げられることが多いのですが、例えばiPhoneの写真アプリだと、ある写真に対して何らかの処理を行いたい場合、ユーザーはまず対象のオブジェクト（写真）を選び、その後にアクション（編集、送信、お気に入り、削除）を選ぶ、という流れになります。 ソフトウェア（アプリ）は実態がないのでわかりにくいのですが、基本的には自分を拡張する道具
JRの駅にある券売機のユーザーインタフェースが話題だ。下記のツイートは一例だが、一般的な利用者が考える切符購入の“導線”とは異なるトップメニューから目的の切符を選ぶことになり、初見で理解するのは難しいのではないかという声もある。筆者が個人的に購入難易度が高いと思っている、ドイツをはじめとした欧州鉄道の券売機と比べてもとっつきにくいといわれると、うなずく部分もある。 大都市圏の利用者であれば交通系ICカード利用の比率の方が高く、すでに「もう何年も券売機に近づいてない」という人も少なくないかもしれない。ただ新幹線であったり、在来線特急であったりと、長距離移動をする場合には磁気切符が必要になるため、券売機または窓口などのお世話にならざるを得ない。普段使いの交通系ICでは近距離区間の移動にしか利用できないからだ（東海道・山陽・九州新幹線の「スマートEX」などのサービスは除く）。 そこで券売機の登場
Tailwind CSSで実装されたWebページやスマホアプリ用のUIコンポーネント・レイアウト・ページテンプレートを紹介します。 公式のUIコンポーネント（Tailwind UI）は有料だったり、他にも有料のものが多数ありますが、オープンソースで利用できるものもたくさんあります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hacker UI - 開発者向けのWeb UIフレームワーク
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
「Flutter」を自分で1から実装し直してその魔法を理解・体感する解説書が発売／現役大学生が執筆した『再実装Flutter UIフレームワークをゼロから自作する』【Book Watch/ニュース】
オブジェクトベースなUI設計を学んだら視点がガラリと変わった話｜Yutaro Murakami
JRの券売機が「使いづらい」と話題 なぜ今のUIになったのか？
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました