Design
Google Material Design¶
Code¶
- Material Design Lite
- An implementation of Material Design components in vanilla CSS, JS, and HTML.
- Material-UI
- A Set of React Components that Implement Google's Material Design - React でマテリアルデザインを実装する Material UI を試してみる - syonx
- Materialize
- A modern responsive front-end framework based on Material Design
- LumX
- The first responsive front-end framework based on AngularJS & Google Material Design specifications.
Tools¶
Samples¶
Icons¶
Articles¶
- Googleマテリアル・デザインをはじめよう!参考にしたい無料素材やアイデアまとめ - Photoshop VIP
- Google Design の Google Web Designer ツールを使ってみた ‹ nuuno
- マテリアルデザイン採用でUIを一新した「Sleipnir Mobile for Android 3.0」リリース - GIGAZINE
- マテリアルデザインを用いたデザインリニューアル [フリル編]
- Google Developers Japan: マルチ ウィンドウに対応したデザイン
Web Design¶
Style Guides¶
- Style Guides for Websites :: [ FLAT ] Design | ONO TAKEHIKO from aguije inc.
Webサイトのデザイン スタイルガイド- Next FontShop
- Lonely Planet Travel Guides and Travel Information
- Starbucks Coffee Company
- Sandstone introduction — Mozilla Style Guide — Mozilla
- BBC – GEL (Global Experience Language)
- Styleguides for the Web — Paul Robert Lloyd
- Style Guide South Tees Hospitals NHS Foundation Trust
- Styleguide | Clearleft · User Experience Consultants
- Code for America Style Guide
- Styleguide | Yelp
- Web | Ubuntu Design
- New York University
- Home – Ohio State Brand Guidelines
- Brand Identity Guidelines | Oregon State University
- Mapbox styleguide | Mapbox
- Style Guide Boilerplate
- Google Design
- Project NameStyle Guide
Articles¶
UI¶
Theme¶
和風¶
- 和菓子の造形から学ぶ、和風デザインのヒント | 簡デザ −かんたんデザインブログ−
- 和モダンの作り方~Road to modanyaki~ | 簡デザ −かんたんデザインブログ−
- 和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました | Webクリエイターボックス
- 日本の伝統色 和色大辞典 - Traditional colors of Japan
- NIPPON COLORS - 日本の伝統色
Gothic & Lolita¶
Font¶
Image¶
Photo¶
- → Photo
イラスト¶
Texture / Pattern¶
- Subtle Patterns
- Free textures for your next web project
- Freepik
- Find Free Vectors, PSD, Icons and photos
- PatternBolt
- SVGの背景パターン
- 商用利用無料、細かいパターンの繊細なざらっとしたパターン素材 -Arcandres Minimal Patterns | コリス
- 商用利用無料、64種類のさまざまな紙が揃ったプロ仕様の高品質なテクスチャ素材 | コリス
- 秘かに流行っているらしいポリゴンデザインが簡単に作れる無料アプリが本当に簡単すぎた! | ビットエーブログ - 株式会社BITA
最適化・軽量化¶
- OptiPNG
- PNG optimizer that recompresses image files to a smaller size, without losing any information.
PNGGauntlet¶
- Combines PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs
- No image quality is lost — only file size
- Converts JPG, GIF, TIFF, and BMP files to PNG
- Ultra-configurable
mozjpeg¶
Icon¶
- Iconic
- SVGアイコンライブラリ。CSSで部分スタイリング、属性による動的制御、3サイズ保持、レスポンシブ。(有償)
- Free Download : RetinaIcon 300 Free Icons ( following Apple’s iOS guidelines) | Designbeep
- 【保存版】デザインにも提案資料にも ”めっちゃ使える” アイコン素材サイト17選 | ビットエーブログ - 株式会社BITA
- UI8 — The marketplace for design resources
- UI Kits, Wireframes, Icons, Fonts and more, starting at $5
Effect¶
Movie¶
Photoshop¶
- 水彩絵の具ペイントの質感を実現!無料PSデザインキット「Aquarelle Designer Kit」 - Photoshop VIP
- 写真加工を完全マスター!すごい無料PSアクション40個まとめ 2015年3月度 - Photoshop VIP
- Photoshopの整列あれこれ(キーボードショートカット、キーオブジェクト、等間隔に分布、指定間隔で分布) - DTP Transit
- Photoshopで雑な作業の割に、プレデターを作らず建物を超速で消す(1分以内)《コンテンツに応じる塗りつぶし》
- 自分が撮った写真がアニメ背景に!「漫画の背景に使えそう」「フォトショ舐めてた」と絶賛のTL - Togetterまとめ