ウェブデザインリソース

デザイナーと開発者のための厳選された最高の無料リソース。フォント、アイコン、カラー、アニメーション、CSSツールなど。

フォント

• Google Fonts
  Free, open-source font library with 1500+ font families.
  アクセス →
• Font Squirrel
  Free fonts with commercial-use licenses and a webfont generator.
  アクセス →
• Fontshare
  Free, high-quality fonts from the Indian Type Foundry.
  アクセス →
• Fontsource
  Self-host open-source fonts via NPM packages.
  アクセス →

アイコン

• Heroicons
  Beautiful hand-crafted SVG icons by the Tailwind CSS team.
  アクセス →
• Lucide
  Beautiful & consistent open-source icon set, fork of Feather Icons.
  アクセス →
• Phosphor Icons
  Flexible icon family with 6 weights and 1000+ icons.
  アクセス →
• Tabler Icons
  5000+ free SVG icons with consistent stroke width.
  アクセス →
• Simple Icons
  SVG icons for popular brands and products.
  アクセス →

イラスト

• unDraw
  Open-source illustrations with customizable colors.
  アクセス →
• Humaaans
  Mix-and-match illustration library of people.
  アクセス →
• Open Peeps
  Hand-drawn illustration library by Pablo Stanley.
  アクセス →

カラー

• Coolors
  Fast color scheme generator with export options.
  アクセス →
• Color Hunt
  Curated collection of beautiful color palettes.
  アクセス →
• Realtime Colors
  Visualize your color palette on a real website layout.
  アクセス →
• OKLCH Color Picker
  Modern OKLCH color picker for perceptually uniform colors.
  アクセス →

Lottieアニメーション

• LottieFiles
  The largest library of free Lottie animations and tools.
  アクセス →
• IconScout Lottie
  Animated Lottie icons and illustrations.
  アクセス →

CSSツール

• CSS-Tricks
  Articles, tutorials, and reference on CSS and frontend dev.
  アクセス →
• Can I Use
  Browser support tables for modern web features.
  アクセス →
• Tailwind CSS
  Utility-first CSS framework with design system built in.
  アクセス →
• CSS Gradient
  Free CSS gradient generator tool.
  アクセス →
• Clippy
  CSS clip-path maker for custom shapes.
  アクセス →

アクセシビリティ

• WebAIM
  Web accessibility resources, training, and evaluation tools.
  アクセス →
• The A11Y Project
  Community-driven effort to make digital accessibility easier.
  アクセス →
• WCAG 2.1 Guidelines
  Official W3C Web Content Accessibility Guidelines.
  アクセス →
• Axe DevTools
  Automated accessibility testing tool.
  アクセス →

デザインシステム

• Design Systems Repo
  Collection of design systems, style guides, and pattern libraries.
  アクセス →
• Storybook
  UI development environment for building component libraries.
  アクセス →
• Design Tokens Community
  Community and spec for design tokens standardization.
  アクセス →

インスピレーション

• Dribbble
  Design community for sharing and discovering creative work.
  アクセス →
• Awwwards
  Awards for the best web design and development.
  アクセス →
• Mobbin
  Real-world mobile and web design references.
  アクセス →
• Godly
  Curated collection of the best web design inspiration.
  アクセス →
• SaaS Landing Page
  Collection of the best SaaS landing page designs.
  アクセス →

あらゆるウェブサイトからデザインアセットを抽出

MiroMiroのChrome拡張機能で、あらゆるライブウェブサイトからCSS、カラー、フォント、画像、SVG、Lottieアニメーションを抽出できます。
Chromeに追加