# ウェブデザインリソース

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

### フォント
- **Google Fonts**  
  Free, open-source font library with 1500+ font families.  
  [アクセス →](https://fonts.google.com/)  
- **Font Squirrel**  
  Free fonts with commercial-use licenses and a webfont generator.  
  [アクセス →](https://www.fontsquirrel.com/)  
- **Fontshare**  
  Free, high-quality fonts from the Indian Type Foundry.  
  [アクセス →](https://www.fontshare.com/)  
- **Fontsource**  
  Self-host open-source fonts via NPM packages.  
  [アクセス →](https://fontsource.org/)

### アイコン
- **Heroicons**  
  Beautiful hand-crafted SVG icons by the Tailwind CSS team.  
  [アクセス →](https://heroicons.com/)  
- **Lucide**  
  Beautiful & consistent open-source icon set, fork of Feather Icons.  
  [アクセス →](https://lucide.dev/)  
- **Phosphor Icons**  
  Flexible icon family with 6 weights and 1000+ icons.  
  [アクセス →](https://phosphoricons.com/)  
- **Tabler Icons**  
  5000+ free SVG icons with consistent stroke width.  
  [アクセス →](https://tabler.io/icons)  
- **Simple Icons**  
  SVG icons for popular brands and products.  
  [アクセス →](https://simpleicons.org/)

### イラスト
- **unDraw**  
  Open-source illustrations with customizable colors.  
  [アクセス →](https://undraw.co/)  
- **Humaaans**  
  Mix-and-match illustration library of people.  
  [アクセス →](https://www.humaaans.com/)  
- **Open Peeps**  
  Hand-drawn illustration library by Pablo Stanley.  
  [アクセス →](https://www.openpeeps.com/)

### カラー
- **Coolors**  
  Fast color scheme generator with export options.  
  [アクセス →](https://coolors.co/)  
- **Color Hunt**  
  Curated collection of beautiful color palettes.  
  [アクセス →](https://colorhunt.co/)  
- **Realtime Colors**  
  Visualize your color palette on a real website layout.  
  [アクセス →](https://www.realtimecolors.com/)  
- **OKLCH Color Picker**  
  Modern OKLCH color picker for perceptually uniform colors.  
  [アクセス →](https://oklch.com/)

### Lottieアニメーション
- **LottieFiles**  
  The largest library of free Lottie animations and tools.  
  [アクセス →](https://lottiefiles.com/)  
- **IconScout Lottie**  
  Animated Lottie icons and illustrations.  
  [アクセス →](https://iconscout.com/lottie-animations)

### CSSツール
- **CSS-Tricks**  
  Articles, tutorials, and reference on CSS and frontend dev.  
  [アクセス →](https://css-tricks.com/)  
- **Can I Use**  
  Browser support tables for modern web features.  
  [アクセス →](https://caniuse.com/)  
- **Tailwind CSS**  
  Utility-first CSS framework with design system built in.  
  [アクセス →](https://tailwindcss.com/)  
- **CSS Gradient**  
  Free CSS gradient generator tool.  
  [アクセス →](https://cssgradient.io/)  
- **Clippy**  
  CSS clip-path maker for custom shapes.  
  [アクセス →](https://bennettfeely.com/clippy/)

### アクセシビリティ
- **WebAIM**  
  Web accessibility resources, training, and evaluation tools.  
  [アクセス →](https://webaim.org/)  
- **The A11Y Project**  
  Community-driven effort to make digital accessibility easier.  
  [アクセス →](https://www.a11yproject.com/)  
- **WCAG 2.1 Guidelines**  
  Official W3C Web Content Accessibility Guidelines.  
  [アクセス →](https://www.w3.org/TR/WCAG21/)  
- **Axe DevTools**  
  Automated accessibility testing tool.  
  [アクセス →](https://www.deque.com/axe/)

### デザインシステム
- **Design Systems Repo**  
  Collection of design systems, style guides, and pattern libraries.  
  [アクセス →](https://designsystemsrepo.com/)  
- **Storybook**  
  UI development environment for building component libraries.  
  [アクセス →](https://storybook.js.org/)  
- **Design Tokens Community**  
  Community and spec for design tokens standardization.  
  [アクセス →](https://www.designtokens.org/)

### インスピレーション
- **Dribbble**  
  Design community for sharing and discovering creative work.  
  [アクセス →](https://dribbble.com/)  
- **Awwwards**  
  Awards for the best web design and development.  
  [アクセス →](https://www.awwwards.com/)  
- **Mobbin**  
  Real-world mobile and web design references.  
  [アクセス →](https://mobbin.com/)  
- **Godly**  
  Curated collection of the best web design inspiration.  
  [アクセス →](https://godly.website/)  
- **SaaS Landing Page**  
  Collection of the best SaaS landing page designs.  
  [アクセス →](https://saaslandingpage.com/)

## あらゆるウェブサイトからデザインアセットを抽出  
MiroMiroのChrome拡張機能で、あらゆるライブウェブサイトからCSS、カラー、フォント、画像、SVG、Lottieアニメーションを抽出できます。  
[Chromeに追加](https://chromewebstore.google.com/detail/miromiro/kpmkikjpclolhodgckeogmiiaehpfjhl)