目的
- 文脈: デザインガイドライン、デザインシステム、デザインカタログ、スタイルガイド
- UIパーツの粒度 : Layout, Component, Widget など分類する
- UIパーツの命名 : WEB, iOS, Android、プラットフォームごとに整理
- カタログ化 : A3.定番機能、A4.定番画面 と同様にパターン化
- => デザイン仕様書として運用可能なモデルを作成する
プラットフォーム企業標準
Apple (Human Interface Guidelines)
- (英語) Themes - Overview - iOS Human Interface Guidelines
- (公式) Design - Apple Developer
- (日本語) 日本語ドキュメント - Apple Developer
Google (Material Design)
- (英語) Material design
- (日本語) マテリアル – 日本語
- (公式) Google Design
Microsoft (Microsoft Design)
- (公式) Inclusive - Microsoft Design
- (UWP) UWP app layout design - Windows app development - UWP app developer | Microsoft Docs
- (解説) Apple、Googleに続くデザインガイドライン、『Microsoft Design』について | DeNA DESIGN BLOG
Salesforce (Lightning Design System)
TODO
各社の方針を整理し、概要としてまとめる
ブラウザベース
フレームワーク・デザインシステム
sketch, npm, html/css, es6 の連携
- Clarity Design System - Get Started
- Ant Design of React - Ant Design
- Semantic UI
- Blueprint – Documentation
- Kendo UI HTML Framework Opt
- Frontify - Brand Guidelines & Design Collaboration Software
- Vue.js 2 Component Framework | Vuetify
スタイルガイド
国内の参考例
Sketch & React
- Style Guides – Design + Sketch – Medium
- Using React within a Design System – Buildit @wiprodigital – Medium
React & npm
Startup sample
Marvel, CodePen の運用例
- Creating and Maintaining the Marvel Style Guide in Sketch - Marvel Blog
- The CodePen Design Patterns and Style Guide
- 海外の人気サービスで使われているCSSスタイルガイド8選 | UX MILK
漏れるデザイン
- State
- loading, complete, empty, partial(few data)
- more(paging), refresh(pull to), filter, searching
- network error, api error
- sending, valid(notice), invalid(error)
- Action
- mouseenter, mouseover, mousedown, mouseup, mouseleave, mousemove
- swipe, pinch
- Image
- App icon, Favicon, Manifest.json
- SNS icon, SNS cover image
- OGP, Twitter Cards
- App Store Screenshot, Splash Image
- Link
styleguide
- davidhund/styleguide-generators: An overview of automatic living styleguide generators
- スタイルガイドジェネレータまとめ - Qiita
- HUGE Styleguide
- Carbon Design System
- Frontify
- aigis
- InVision Design System Manager | Developers.IO
- Fractal | Rriver
- ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素 - WPJ
Atomic Design
公式
国内の事例
- Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.com
- Atomic Design を分かったつもりになる | DeNA DESIGN BLOG
- Atomic Designの考え方と利点・欠点 - I’m kubosho_
- Atomic DesignはWeb開発を救うのか - DMM.comラボ デザイナーズブログ