文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
React 向けヘッドレスUIライブラリの紹介
昨今様々なヘッドレスUIライブラリ登場しています。ヘッドレスUIは特定のスタイルがなく、UIコンポーネントの基礎となるロジックと機能のみを提供することに焦点を当てたものです。 この記事ではRadixUIをはじめとするいくつかのヘッドレスUIライブラリを紹介していきます。 RadixUI ヘッドレスUIの代表格で、効率的な実装、容易なメンテナンス、アクセシビリティを優先しているUIライブラリです。開発者が完全にスタイルを制御できるプリミティブを提供し、複雑なアクセシビリティのロジックや状態管理を抽象化しています。32のコンポーネントが利用可能で、設定を排除することで開発を効率化しプロジェクトにコンポーネントを迅速に組み込めるようになっています。 GitHub stars: ~13.5k Npm weekly downloads: ~1,345,900 コンポーネント数: 32 Headles
Tailwind CSS製UIデザインのHTMLコードをコピペできるFlowrift（便利ツールまとめも公開）
Tailwind CSSという言葉、最近よく耳にするようになっています。 カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。 そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。 そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。 ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコ
「ゼルダの伝説 BtoW」ユーザーインターフェイスのコンセプトは「なければないほうがいいUI」だった
9月1日に開催された開発者向け技術系イベントCEDEC 2017にて、任天堂企画制作部プログラマーの北山茂寿氏、企画制作部アーティストの長谷隆広氏が登壇した。「ゼルダの伝説 ブレス オブ ザ ワイルド」のユーザーインターフェイス（以下、UI）を担当した両氏は、同作のUIのコンセプトを「なければないほうがいいUI」と表現し、その開発過程を語った。 UIとは、ゲームの世界とプレイヤーの現実をつなぐ境界面だ。同作でいえば、主人公リンクの体力をあらわすハートマーク、地図、タイトルロゴ、さらにはゲーム上に存在するあらゆるテキストまでが含まれる。広義には、ゲームの世界に直接存在しているわけではない情報は、すべてUIの範疇に含まれると言ってよい。 「ゼルダのアタリマエを見直す」という開発全体のコンセプトから、「なければないほうがいいUI」という方向性が編み出された。全体として、これまでの同シリーズの装飾
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jxom/awesome-react-headless-components: Awesome list of React headless components!
Top Headless UI libraries for React in 2024 | Blog
Industrial-ui – styleless, pure functional UI components
Radix UI
GitHub - peterpeterparker/stylo: Another kind of rich text editor
GitHub - DioxusLabs/dioxus: Fullstack app framework for web, desktop, and mobile.
Reakit – Toolkit for building accessible UIs
Blueprint - A React-based UI toolkit for the web
GitHub - c8r/kit: Tools for developing, documenting, and testing React component libraries
Ant Design
GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
GitHub - pure-css/pure: A set of small, responsive CSS modules that you can use in every web project.
GitHub - uikit/uikit: A lightweight and modular front-end framework for developing fast and powerful web interfaces
Semantic-Org/Semantic-UI: Semantic is a UI component framework based around useful principles from natural language.
GitHub - gabrielbull/react-desktop: React UI Components for macOS High Sierra and Windows 10
GitHub - infernojs/inferno: :fire: An extremely fast, React-like JavaScript library for building modern user interfaces
