ドメイン理解と制作スピードを両立する、FACTEVでのUIデザインについて｜Cocoda
DeNAデザイン本部 UIデザイナーの山本です。2023年4月にリリースされた、EV（電気自動車）の実用航続可能距離やバッテリーの性能、EVの導入効果予測を見える化するEV転換シミュレータ「FACTEV（ファクティブ）」のUIデザインを担当しました。 FACTEVのプロダクトキャプチャ。主にPdMを中心に価値検証やプロトタイピングを行っていた状態から自分もアサインされ、UIデザインを担当していきました。今まで私は「PICKFIVE」や「WITH Fitness」など、C向けサービスのUIデザインを担当することが多くありましたが、FACTEVは一転してB向けのSasSツールです。 B向けサービスにおけるUIデザインの経験や、EV領域に関する知識、主なターゲットとなるオートリース会社での業務理解もあまりなかった状態から、スケジュールも短いなかで、どのようにUIをデザインすべきか迷うことが多くあ
Material-UI で並べ替え可能なリストを作る - Qiita
Material-UI では、Material Design Guidelines で定められているドラッグ＆ドロップで並べ替えられるリストが提供されていません。ドラッグ＆ドロップの機能を提供するライブラリと組み合わせることで、これを実現できます。 ドラッグ＆ドロップ React でドラッグ＆ドロップを実現するライブラリは数多ありますが、今回は以下の4つを比較・検討しました。箇条書きはあくまで個人的な感想です。 react-dnd react-dnd/react-dnd: Drag and Drop for React 一番有名どころ。オリジナルの作者は、React や Redux の Dan Abramov (gaearon) 氏。 拡張性が高いので、その気になればいろんなことができそう。一方で、アニメーションなど自力で実装しなければならない部分が多い。 記述量は多め。 react-be
Data Grid - Custom subcomponents - MUI X
The grid is highly customizable. Override components using the slots prop. Overriding componentsAs part of the customization API, the Data Grid allows you to override internal components with the slots prop. The prop accepts an object of type GridSlotsComponent. If you wish to pass additional props in a component slot, you can do it using the slotProps prop. This prop is of type GridSlotsComponent
Default theme viewer - Material UI
This tree view allows you to explore how the theme object looks like with the default values. If you want to learn more about how the theme is assembled, take a look at material-ui/style/createTheme.js, and the related imports which createTheme uses. You can play with the documentation theme object in your browser console, as the theme variable is exposed on all the documentation pages.
Color - Material UI
Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines. The Material Design color system can be used to create a color theme that reflects your brand or style. Picking colorsOfficial color toolThe Material Design team has also built an awesome palette configuration tool: material.io/resources/color/. This can help you create a color palette for
Material-UIでテキストフィールドをカスタマイズして実装する方法
こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。 今回は Material-UI でテキストフィールドを作る際にいくつかハマった点があったため、テキストフィールドの作成方法についてまとめたいと思います。 Material-UI でのテキストフィールドの作成方法Material-UI には標準で TextField というコンポーネントが用意されており、 import するだけで Material Design 準拠のテキストフィールドを使用することができます。 公式ドキュメントの TextField の解説ただし、TextField コンポーネントにはフィールドのラベル、フィールド本体、ヘルパーテキストの全てが同梱されているため、パーツそれぞれで細かいスタイル変更や挙動の変更を行おうとすると大変な手間がかかります。 TextField コンポーネント自体が FormCo
MUI v5 Theme ～基本の使い方からカスタマイズまで～
Vite + React + TypeScript 環境で MUI v5 を使用しています。 今回は MUI v5 の Theme についてTips的にまとめてみました。 テーマをアプリケーション全体に適用する Light モードと Dark モードを切り替える テーマの色を変更する テーマを一部のコンポーネントに適用する 適用されているテーマの一部を変更したテーマを作成し、一部のコンポーネントに適用する テーマに欧文フォント・日本語フォントを追加する テーマに独自のカラーキーワードを追加し、ボタンで使用する Themeの基本 デフォルトテーマ MUI には Light モード用のデフォルトテーマと Dark モード用のデフォルトテーマが用意されています。 それぞれのテーマに設定されている値などは 公式: Default Theme で確認できます。 テーマをアプリケーション全体に適用する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
