いい感じのUIをサクッと作れるReact用ライブラリ「Tremor」を使ってみた
プログラミング能力とUIのデザイン能力を両方兼ね備えているスーパーマンはともかく、一般的な開発者であればウェブアプリの開発時にUIのデザインで頭を悩ませた経験があるはず。もちろん、そうした需要に応えて世間にはさまざまなUIライブラリが存在しているわけですが、今回は「Tremor」というReact用UIライブラリで大きなアップデートがあったとのことなので、実際に使ってどんなUIが使えるのかを試してみました。 Tremor – The React library to build dashboards fast https://www.tremor.so/ Tremorを利用するためにはnode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https:
ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう考えて Radix UI と Stitches の採用に至ったのか、採用してみてどうだったのかをご紹介します。 UIコンポーネントを開発していて思うこと 世の中にはUIコンポーネント集とでも呼ぶべき便利なライブラリがたくさん公開されています。 例えば以下のようなものがあり、他にも把握しきれないほどあると思います。 MUI (Material UI) Ant Design Chakra UI Vuetify これらのUIコンポーネントライブラ
モダンiOSナビゲーションパターン 日本語訳
モダンiOSナビゲーションパターン 日本語訳Modern iOS Navigation Patterns (Japanese Text Ver.) この資料は、Frank Rausch 氏による Modern iOS Navigation Patterns の、日本語訳版です。オリジナル版 “2023-03-07” を基にし、CC BY-NC-SA 4.0 ライセンスによって公開しています。 オリジナルを日本語に訳すにあたり、なるべく元の表現を尊重するように心がけていますが、一部の表現については、訳者による解釈の補足や文言調整を加えています。 目次 目次 はじめに 1. 構造的なナビゲーション ドリルダウン (Drill-Down) フラット (Flat) ピラミッド (Pyramid) ハブ・アンド・スポーク (Hub-and-Spoke)2 2. オーバーレイ型ナビゲーション 強いモー
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
2020年 UIデザイナーが読んで良かった本 9冊｜kassy
こちらは dely #2 Advent Calendar 2020 の12/22の記事になります。 昨日はyuaoさんのデザインの指示に迷った時は、「要素に分解」がいいかもという記事でした！ 現在、delyではエンジニアやデザイナーが日替わりで記事を投稿しています。どれも読み応えがありますので、よかったら下記のリンクもご覧ください。 dely #1 Advent Calendar 2020 - Adventar dely #2 Advent Calendar 2020 - Adventar ーーーーー PRおわり ーーーーー UIデザイナーのkassyです。あっという間に年末ですね。 今年も読んで良かったUIデザイン関連の本を中心に紹介したいと思います。気になる本があったら、年末年始のお供にぜひどうぞ！ 前回書いた記事もよかったらぜひご覧ください。 1.『オブジェクト指向UIデザイン──使
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
WebサイトやスマホアプリのUIデザインに必要な要素・あると便利な要素がまとめられたリスト -Checklist Design
Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。 ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けていないか確認することができます。 Pages: Login このページに必要な要素 ロゴ 完全なロゴ、もしくはシンボルマークのどちらか。 タイトル ユーザーに何をさせたいかに関するコンテキスト。 アカウントの識別 ユーザーの一意の識別子。 パスワード 自分のアカウントにアクセスを許可するための安全なプライベートコード。 パスワードのリセット ユーザーは自分のパスワードを忘れてしまうかもしれません。 登録するためのリンク ユーザーがアカウントを持っていない場合は、このページにアクセスします。 オ
フロントエンドエンジニアが UI 設計〜実装で考えていること | MEDLEY Developer Portal
2019-03-27フロントエンドエンジニアが UI 設計〜実装で考えていることおはこんばんちは、開発本部エンジニアの大岡です。 先日、TechLunch という社内勉強会で「フロントエンジニアが UI 設計〜実装で考えていること」という内容で発表しました。UI 設計から実装の細かい話ではなくどういう気持ちで望んでるかという話で、基本的なことしか書いていませんが紹介させていただければと思います。 UI 設計UI 設計をデザイナーがして、それをエンジニアが実装する場合とエンジニアが単独で UI 設計から実装までする場合があります。今回はそれぞれのケースで、フロントエンドエンジニアがどういうことを考えてるかを紹介します。 とその前に、他人と UI について話すときに気をつけてる言葉で分かりやすくまとまっているツイートがあったので紹介します。 自分が他の人に UI デザインの説明をするとき、あま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Refactoring UI
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Figmaで簡単に作成できる！ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ
宣言的UI