"雄弁なデザイン"
マイクロソフトのFluent Design Systemを指す場合に、"System"を省略してFluent Designと呼ぶこともある。
→ Fluent Design System
ラーニングパス「初心者向け Web 開発」で JavaScript の書き方をお勉強したので、練習がてら React と Fluent UI をつかってみた。 docs.microsoft.com これといって作るアプリは決めてなかったけど、「とりあえず UI まわりをいじれるようになったら面白いかなぁ」みたいな軽いノリで進める。ちなみに Fluent UI はマイクロソフトの UI フレームワーク。 developer.microsoft.com 準備 導入方法は上記のリンク先にあるので、それ通りに進める。まずは Fluent UI のパッケージを導入。 npm install @fluen…
Files v3.2がリリースされ、リストビューレイアウトやアルバムカバー編集などの新機能が追加 こんにちは、稗田利明です！ 「Files」は、Windows 11のデザイン言語「Fluent Design System」に準拠したファイル管理ソフトで、2月12日にv3.2へのアップデートが行われました。新機能としては、リストビューレイアウトの追加、プロパティウィンドウからのアルバムカバー編集、より高品質なサムネイルの改善などが盛り込まれています。また、内部設計の大幅な改善により、動作がよりスムーズになりました。さらに、フォルダービューの新しいレイアウトオプションや、OneDriveでのサムネ…
こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記事では、デザイン要素のうち、カラーに焦点を絞りご紹介させて頂きます。 デザイントークンとは？ なぜデザイントークンは必要なのか 今回デザイントークンを定義する上で意識したこと カラーのデザイントークンを定義してみる デザイントークンの手法 今回のお題に沿ってデザイントークンを定義してみる プリミティブトークン セマンティックトークン Figmaで実装する …
Windows 11 で全面的に導入された Fluent Design System は個人的には結構好みなので、自作アプリでも同じようなデザインを実現したいのですが意外に難しいです。コントロールだけに限れば Windows App SDK を使うとある程度は対応は可能ですが、まだ使いやすく提供されていない機能もあります。例えば以下は Microsoft Store アプリですが、タイトルバーからして大きく異なっています。全体的に Mica が適用されていて、完全にカスタマイズされたタイトルバーが実装されています。Windows 11 におけるタイトルバーのデザインについては、以下のドキュメン…
インストールと初期設定 補足（直接指定） 補足（テーマの指定） XAML からライブラリを利用するための設定 システムのテーマを適用する メニュー 参考 WPF の GUI ライブラリ「WPF UI」を使ってみる機会があったので、基本的な使い方をメモ。 WPF の GUI ライブラリは、以下のようなものが色々あります。（2023/08/09 時点） Material Design 13.9k Star MashApps.Metro 8.8k Star WPF UI 4.7k Star ModernWpf 3.8k Star もちろん他にも GUI のライブラリは、種類があると思います。GitH…
SharePoint Online の画面を見ていたら何やら違和感が、、、 今回はぱっとわからなかったのですが、どうも SharePoint 標準部品のデザインに変更が入ったようです。 Windows 11 関係のデザインといいますか、 Edge でも Build 2023 を終えたころから行われている、角をとった丸まったデザインに移行が行われているようです。 こんな感じですね。 そして、 Web パーツ編集画面については画面のイメージだけでなく、動作が軽快になっている感があります。 以下は Web パーツをポイントしたところ、枠が表示され、場所が分かりやすくなった画面です。 パーツ編集時のメ…
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つRe…
fluent2.microsoft.design
ascii.jp
gigazine.net
www.itmedia.co.jp
forest.watch.impress.co.jp
www.itmedia.co.jp
www.itmedia.co.jp
developers.srad.jp
www.microsoft.com
