50種類以上の無料ツールとリソースで素晴らしいUIを作成しよう
「使っている道具があなたの実力を決める」
この言葉は何年もの間に渡って言われてきて、その仕事に正しいツールを使用することの重要性を浮き彫りにしています。このモットーは、デザインを含む何百もの異なる分野に当てはまるのは幸運なことです。
シニアプロダクトデザイナーとしての私の経験から言えば、素敵なユーザーインターフェースを作成するのに正しいツール以上に重要なことはおそらくありません。適切な写真のセットやバランスのとれたカラーパレットは、貧弱なUIとまずまずのUIとの間で大きな差を生むことができます。
私のクライアントや私のプロジェクトCruipやSaaS Landing Pageでのウェブサイト、ランディングページ、ウェブアプリケーションなどのユーザーインターフェースを毎日作成するために私が使っている無料で非常に役立つリソースやツールのリストを紹介します。
特定のリソースやツールを簡単に見つけられるように、リストを異なるカテゴリに分けました：
もし無料のアイコンセットを探しているなら、アイコノグラフィカテゴリまでジャンプしてください。
最後に：このリストにはUnsplash（写真＆動画カテゴリ用）、Google Fonts（タイポグラフィカテゴリ用）のようなユーザーインターフェースを作成するための最も人気のあるリソースは含まれていません。なぜですか？おそらくあなたはすでにそれらを知っているからです。
50種類以上の素晴らしいUIを作成するための無料ツールとリソース：
写真＆動画
Coverr
ホームページの背景に美しい無料動画。
Mixkit
最高の無料ストック動画クリップ、ストックミュージック＆プレミアプロテンプレート、全部無料！
Pexels
才能あるクリエイターが共有する最高の無料ストック写真＆動画。
Photo Creator
何千ものモデル、オブジェクト、バックグラウンドからリアルなストック写真を作成。
Unscreen
動画やGIFの背景を100%自動で削除。
Remove Background
どんな写真も背景を100%自動で取り除く。
Generated Photos
商業コンテンツに最適な質の高い生成された顔をゲットする最も実用的な方法。
Duotone
どんな写真も秒でデュオトーンに変換。
イラスト
Notioly
美しいNotionスタイルのイラスト。
Open Peeps
100%無料の手書きイラストライブラリ。
Smash Illustrations
無料で組み合わせ自由なイラストコンストラクタ。
Open Doodles
無料のスケッチ風イラストのコレクション。
Control Illustrations
カスタマイズ可能なキャラクターを含む108種類の無料フラットイラスト。
Ouch!
プロジェクトにクラスを追加する無料ベクターイラスト。
Avataaars Generator
手書きアバターを生成するためのシンプルなウェブアプリ。
Faux Code Generator
実際のコード（Github Gist）を偽コード（SVG画像）に変換。
パレット
Parametric Color Mixer
オーディオパラメトリックイコライザーにインスパイアされたカラーパレットコンポーザ。
CSS Gradient
シンプルでカラフルなCSSグラデーションジェネレータ。
Colorsinspo
クリック一つで使える美しいカラーパレットが数千種類。
Color Hexa
任意の色についての情報を提供し、デザイン用に色合いやトーンを生成する無料のカラーツール。
Color Space
次のプロジェクトに適した色合いのパレットやグラデーション、カラースキームを生成。
Palettte App
なめらかなカラーパレットを作成、分析、編集する。
Colorable
色の組み合わせのコントラストテスター。
タイポグラフィ
Freebiesbug (無料フォント)
ウェブやグラフィックデザイナーのための手選び無料フォントとタイポグラフィ。
Fonts Arena
無料フォントやプレミアムフォントの無料代替品。
Befonts
個人または商業目的で使える無料のフォントをダウンロード。
Font Squirrel
完全に合法で高品質の無料フォントを何千種類もダウンロード。
Fontjoy
Googleフォントを簡単にミックスして、完璧なペアリングを見つける。
Type Scale
プロジェクトに適したタイプスケールをプレビューして選ぶ。フォントサイズ、スケール、異なるウェブフォントで実験する。
アニメーション＆エフェクト
Smooth Shadow Generator
イージングカーブを使ってなめらかな影を作る。
CSSeffectsSnippets
Vue.jsを使ったCSSエフェクトのコレクション。
Separator Generator
コードを簡単にコピーできるカスタマイズ可能なCSSセクションセパレータのコレクション。
Animista
使用する準備ができたCSSアニメーションのコレクションで遊び、それらを微調整して実際に使用するものだけをダウンロードする場所。
Draggable
軽量でレスポンシブ、モダンなドラッグ＆ドロップライブラリ。
Block Reveal Effects
箱のような見た目でコンテンツを明らかにするアイディア。
アイコノグラフィ
IconStore
一流のデザイナーがデザインした無料ベクターアイコンのライブラリー。個人も商業プロジェクトでも使用可能。
CSS Icons
SVG Sprite、styled-components、NPM & APIで利用可能なオープンソースCSS、SVG、Figma UIアイコン。
Icon Transition Generator
二つのアイコン間のスナッピーなトランジションを作り、SVGコードをダウンロード。
Tilda Icons
ランディングページ用の700以上の無料アイコンのコレクション。
Ikonate
完全にカスタマイズ可能でアクセス可能なベクターアイコン。
Eva Icons
一般的なアクションとアイテム用の480以上の美しい手作りオープンソースアイコンのパック。
Animated Icons
Lottie、GIF、After Effectsフォーマット用のJSONでダウンロード可能な400種類の無料アニメーションアイコン。
パターン＆形
CSS Patterns
美しいパターンで空の背景を埋めるためのCSSのみのライブラリ。
Get Waves
毎回ユニークなSVGウェーブを生成するシンプルなウェブアプリ。
Blob Maker
数秒でオーガニックなSVGシェイプを作成する。
Rad Lines
プロッティング用の多角形SVGを生成するためのウェブツール。
Patterns
すべてのベクターフォーマットの美しいパターンの無料コレクション。
Scribbbles
デザインプロジェクトを引き立たせるための100以上のベクター化された書きなぐり。
ユーティリティ
Nucleo App
すべてのアイコンを収集、カスタマイズ、そしてエクスポートするための強力なアプリケーション。
Checklist design
最高のUXとUIの実践集。
Design System Repo
インスピレーションに使えるデザインシステム、スタイルガイド、パターンライブラリの包括的でキュレーションされたリスト。
CSSPeeper
シンプルで整理された美しい方法でスタイルを検査。
AI Image Upscaler
AIを使用して自動的に画像を拡大・向上させる。
まとめ
この無料のツールとリソースのリストが役に立ったと思います。もっと欲しい？パート2はこちらです。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/cruip/50-free-tools-and-resources-to-create-awesome-user-interfaces-1c1b
