肩肘張って文章を書きすぎたので、気になっているデザインシステムの感想を書きます。 随時更新。
Material Design
- 今のところ一番好きなデザインシステム
- 「デザインシステムを作るデザインシステム」なところが好き
- 2014年の動画でだいたい言いたいこと言ってる
- M2のタイミングで「使われること」に全力を出し始めたのがすごい
- ソフトウェアが、少人数の開発者の当たり前を世間の当たり前にする力があることを理解している気がする
- FlutterがMaterial Designを採用しているのか、Material DesignがFlutterを用意しているのか、どっちなのか気になる
- M3で企業のあるべきとプラットフォームのあるべきの思想バトルを仕掛けているので、今後に注目
Human Interface Guideline
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.- Webがサポートされていないので、コンポーネントがWebで見れないデザインシステム
- Figmaにも公式には提供されていないデザインシステム
- 実装も運用も、全てApple platform用なんだなって気がする
- iOSのバージョンごとに振る舞いが変わるので、改変することは(あんまり)想定されていない気がしている
- Androidエンジニアでも、「ここはiOSっぽく」と言われるのでHIGを読んだことのある人は多い印象
Fluent 2
- いつの間にかFluentからFluent 2になってた
- 複数プラットフォーム対応がすごい
- 対応するために必要な覚悟が参考になる
- MDみたいなSpecが見当たらないので、どうやってコミュニケーションしているのか不思議
- 自分みたいな社外の人が使える環境にあるけど、使うことが想定されているのかはよくわからない
- layout見てると、プラットフォーム対応が大変そう
- アクセシビリティにキーボード操作のフォーカスがあるのは、デスクトップ対応してるなって印象
USWDS
- How to use USWDS | U.S. Web Design System (USWDS)
- デザインシステムの構築と適用の教科書みたいなページ
USWDS includes over 40 accessible, mobile-friendly components out of the box, ensuring consistency and saving teams the need to build everything from scratch for their web-design and -redesign projects.とあって、モバイルにも本気
- Introducing patterns | U.S. Web Design System (USWDS)
- "The 21st Century Integrated Digital Experience Act" (21世紀統合デジタル体験法案)が超党派で成立しているのがベース
- 法案で目的がバチっと定まっているのが、良い影響を及ぼしている気がする
- 弊も真似できればよかったのに。。。
GOV.UK Design System
- 2012年から開発しているらしい、アツい
colorではなくcolourが単語として使われている、アツい- GOV.UK Prototype Kitを開くと、terminalとeditorを使う講座に飛ばされる、アツい
- Communityがメーリングリストベースっぽい、アツい
- Government Design Principles を読んでいくと、ポスター掲示用のPDFとか出てくる、アツい
Spectrum
- デザインといえばAdobe
- Principles - Spectrum
Spectrum considers all platforms — for both desktop and mobile — from the ground up.なので、desktopとmobileがSpectrumにとってのPlatformsっぽい
- Inclusive design - Spectrum
Assume nothing is perfectが最初に記載されている、いいGive people a choiceとかMake documentation a priorityとか、大事なことがちゃんと書いてある- Adobe Color だけでも利用シーンありそう
- 2024年にSpectrum 2がリリースされるらしい
- Introducing Spectrum 2: Our vision for the future of Adobe experience design
- Spectrumが登場してからの10年を踏まえた、次のSpectrum(Spectrum 2)の紹介
- こっちは
macOS, Windows, iOS, Android, and webがPlatformsに含まれている様子 Today, every platform has strong conventions that we want to follow more closely, so Spectrum 2 needs to supply specific variants for each.
- コンポーネントを見るのが楽しみ
Arco Design System, Semi Design System
- みんな大好きBytedance社のデザインシステム
- 紹介ページは英語と中国語が用意されている
- 紹介ページの画像やFigmaを見ていくと、中国語が結構多い
- 開発している人、使っている人にとっての便利さがしっかり確保されている様子
- TiktokやLemon8のデザインとは別物の雰囲気がある
- ReactやVue向けのコンポーネント
- 画像の中に出てくるブラウザに、見慣れないものが混じっているような……？
- SemiのWriting principlesが面白い
- エラー文言の出し方について、避けるべき事例と言い換えのパターンをしてしている
- 中国語と英語の列挙があるのは、日本のデザインシステムに合っても良さそう
- ArcoのPfinciles of terminologyと比べると、Arcoの方がより理念的な印象になる
