保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで

Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。

定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。

Awesome Design Tools -GitHub

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• アクセシビリティのツール
• アニメーションのツール
• AR（拡張現実）のツール
• コラボレーションのツール
• カラーピッカーのツール
• デザインのフィードバックツール
• デザインのハンドオフツール
• デザインパターンとインスピレーションのツール
• デザインシステムのツール
• デザインをコードにするツール
• エクスペリエンスのモニタリングツール
• フォントのツール
• スクリーンショットのツール
• アイコンのツール
• イラストのツール
• 情報アーキテクチャのツール
• ロゴのデザインツール
• モックアップのツール
• マウスのトラッキングツール
• ピクセルアートのツール
• プロトタイプのツール
• スケッチのツール
• 無料写真素材
• UIデザインのツール
• UIのインスピレーション
• ユーザーフローのツール
• デザイナー用バージョン管理ツール
• デバッグを視覚的に行えるツール
• リファレンスとインスピレーション

説明文の後にあるアイコンは、下記の通りです。

	フリー
	オープンソース
	macOS用

アクセシビリティのツール

アクセシビリティとは、視覚障害、運動障害、聴覚障害、言語障害、認知障害のある人を含む、すべての人が使用できるWebサイトおよびアプリケーションを作成することです。デベロッパーとデザイナーのためのWebアクセシビリティツール、アクセシビリティテストツール、アクセシビリティアプリをまとめました。

• ANDI: Webコンテンツのアクセシビリティテストツール（ブックマークレット）。アクセシビリティの問題を自動的に検出し、オンラインのアクセシビリティを改善するための提案、508コンプライアンスをチェックします。
• Axe: 最新のすべてのブラウザで動作するように設計されたアクセシビリティエンジン。あらゆるツール、フレームワーク、ライブラリ、環境で動作します。デベロッパー向けの自動化されたアクセシビリティテストツール。
• ColorBox: アクセス可能なカラーシステムをアルゴリズムで構築するWebアプリ。
• Contraste: WCAGに準拠したテキストのアクセシビリティをチェックするためのアプリ。
• Contrast: デザイナーやデベロッパー向けのmacOSアプリ、WCAGカラーコントラスト比に素早くアクセスできます。
• Hex Naw: コントラストとアクセシビリティについてカラーシステム全体をテストするのに役立ちます。
• Pa11y: Webページの問題を見つけるアクセシビリティのテストツール。プログラムによるアクセシビリティレポートのためにコマンドラインからHTML CodeSnifferを実行します。アクセシビリティのデベロッパー向けツールです。
• Sim Daltonism: macOS, iOS用の色覚異常シミュレーター。色をさまざまな種類の色覚異常で認識したときに色を視覚化できます。
• tota11y: アクセシビリティ可視化ツールキット。ちなみに、「ally」とはアクセシビリティの略語で、aとyの間に11文字あるという意味です。
• WAVE: Chrome, FirefoxでWebコンテンツのアクセシビリティ問題を評価できます。 Webアクセシビリティチェッカー。

アニメーションのツール

アニメーショントランジション、マイクロインタラクション、スクロールベースのアニメーションを作成するツールです。

• Adobe After Effects: ビジュアルエフェクト、モーショングラフィックス、合成アプリケーション。
• BeatFlyer: マルチレイヤー対応、非常に素早くキャッチーなアニメーションを作成することを可能にするWebツール。
• Flare: デザイナーやデベロッパーが自分のアプリやゲーム用のアニメーションを作成することを可能にする強力なデザインとアニメーションツール。
• Flow: Sketch用のプロフェッショナルなアニメーションツールで、iOS、Web、SVGファイル用のプロダクション対応コードもエクスポートします。
• Haiku: デベロッパーが簡単に使用できるコードに生成する、キーフレームベースのアニメーション。
• Keyshape: アニメーション対応のSVGのエクスポートが可能な2Dアニメーションツール。
• Kite Compositor: macOS, iOS用の強力なアニメーションおよびプロトタイピングアプリケーション。
• LightBox: 2D、手描きアニメーションのパッケージ。
• Lottie: Android, iOS用のモバイルライブラリ。Bodymovinを使用してjsonとしてエクスポートされたAdobe After Effectsアニメーションを解析し、それらをモバイルおよびWeb上でネイティブにレンダリングします。
• Spirit: ブラウザでアニメーションをリアルタイムで作成および管理するのに役立つアニメーションツール。
• Tumult Hype: macOS用のHTML5アニメーション/インタラクティブ作成アプリ。

Principle, Framer, Invision Studio, Flintoもアニメーションを作成できるツールです。

AR（拡張現実）のツール

AR（拡張現実）とは、現実の世界をデジタル情報のレイヤーに追加する技術です。 ARの使用は日ごとに増えています。そのため、ARを中心としたアプリの作成、投影、プロトタイプ作成のためのさまざまな拡張現実アプリをここに集めました。

• Lens Studio: Snapchat用の独自のARエクスペリエンスをコード付きまたはコードなしで作成、公開、共有します。
• Lightform: AR用のデザインツール。
• Spark AR Studio: コードは無しで、Instagram用のARを作成します。
• TORCH: モバイルのARにフォーカスした、クラウドベースの3Dデザインおよびプロトタイピングアプリ。
• Vectary: Webサイト用の3DとARを作成します。

コラボレーションのツール

生産性の向上、計画の改善、リモートプロセスの円滑化、デザイナーと開発者のコ​​ラボレーションの容易化、そしてチーム全体のストレスの軽減。最適なコラボレーションツールを見つけてください。

• Airtable: スプレッドシート、データベース、そして完全に柔軟なチームは、Airtableを使用して作業を整理します。
• Gallery.io: デザイン作業のアップロード、フィードバック、リビジョン管理を行うための共同作業ツール。
• Jira: agileチームが使用するソフトウェア開発ツール。
• MURAL: いつでもどこででも、視覚的に考えて共同作業ができます。
• Notion: これ一つで書く、計画する、共同作業、そして組織化ができます。コンセプトはあなたが必要とするすべてです
• Realtime Board: チームコラボレーションのためのホワイトボードのプラットフォーム。
• Slack: コラボレーション用のハブ。会話ができ、決断が下され、情報が常にあなたの指先に届く場所にあります。
• Trello: Webベースのプロジェクト管理アプリケーション。楽しく柔軟でやりがいのある方法でプロジェクトを整理して優先順位を付けることができます。
• Visual Inspector: Webサイトのフィードバックとデザインのバグ修正のためのコラボレーションツール。
• Whiteboard: 共同作業のためのシンプルなリアルタイムホワイトボード。
• Wrike: タスクを可視化し、管理することを可能にするオンラインのプロジェクト管理ソフトウェア。

カラーピッカーのツール

カラーのスポイトツール、カラー識別ツール、カラーキャプチャツールです。

• Adobe Color: カラーホイールで配色を作成でき、コミュニティで何千ものカラーの組み合わせを閲覧できます。
• Chroma: カラーを識別することができる無料のWebアプリ。
• Coolors.co: 超高速のカラースキームジェネレータ。
• Colourcode: オンラインのデザイナー向けツール。カラーを簡単に直感的に組み合わせることができます。
• Color Hexa: 任意の色に関する情報を提供し、デザイン用のマッチングカラーパレットを生成する無料のカラーツール。
• Colour Cafe:Instagramのモダンカラーパレットを選択した色のインスピレーション。
• Color Deck: HSL対応のカラーパレットコレクション。
• Colorpicker: ピッカーを備えたカラーツール。
• Instant Eyedropper: Windows用のスポイトツール、デザイナー・デベロッパーの両方のために複数のカラーフォーマットをサポートします。
• Just Color Picker: 無料のオフラインカラーピッカーとカラーエディタ。
• Khroma: あなたの好みに基づいてカラーパレットを生成するAIベースのツール。
• Material Colors Native: macOS対応、Google Material Designのカラーパレット。
• Paletton: うまく機能するカラーの組み合わせを作成するためのデザイナーツール。
• Pikka: macOS用、カラーピッカーとカラースキームジェネレータ。
• React Color: Sketch, Photoshop, Chromeのカラーピッカーのコレクション。無料でオープンソース。
• Sip: カラーを収集、整理、共有するためのMacOS用のスポイトツール。
• Skala Color: Web, iOS, Android, macOSの開発に必要なすべてを網羅し、多種多様なフォーマットで動作します。
• Swatches: 日常生活で刺激するカラーを集めて、調べて、共有することを可能にするiOSアプリ。
• uiGradients: デザイナーやデベロッパーのための美しいカラーグラデーションの厳選コレクション。

デザインのフィードバックツール

開発のプロセス中にフィードバックが必要ですか？ UIの問題や視覚的なバグについてより構造的なフィードバックを得たい時に役立つツールです。

• Flawless Feedback:
  iOSアプリをレビューして注釈を付けてから、JiraまたはTrelloでフィードバックを共有できます。

デザインのハンドオフツール

デザイナーの作業が終了し、デベロッパーに結果を渡すときに、作業の引き継ぎが行われます。これらのハンドオフツールを使用すると、効率的に渡せます。

• Avocode: PhotoshopやSketchなどのデザインツール無しでだいるを開けます。レイヤーを用意せずに画像をエクスポートしたり、コードを取得できます。
• inVision Inspect: デベロッパー用のデザインを準備します。
• Sketch Measure: Sketch用のプラグイン、要素の距離とサイズに注釈を付けます。
• Specctr: Photoshop, Illustrator, inDesign対応の注釈ツール。
• Sympli: Sketch, Photoshop, Adobe XDからの自動スペックとアセットのハンドオフツール。
• Zeplin: 正確なスペック、アセット、コードスニペットを使用したデザインとスタイルガイドのハンドオフツール。

デザインパターンとインスピレーションのツール

インスピレーションを得るために、人気のあるアプリのデザインパターンとユーザーフローを探検することを可能にするツール。

• Mobbin: 人気のあるアプリのデザインパターンがまとめられており、オンボーディング、サインアップとログイン、コア機能など、一般的なユーザーフローを調べられます。
• Page Flows: 160を超えるさまざまなタスクのためのモバイルおよびWebデザインパターンを発見してください。
• pttrns: 人気のあるモバイルアプリのデザインパターン。
• UX Archive: 120のモバイルアプリ、400を超えるユーザーフローを閲覧できます。

デザインシステムのツール

独自のデザインシステムを構築、維持、整理するのに役立つツール。

• Brand.ai: 自動的に管理可能なUIコンポーネントのスタイルガイド。
• inVision Design System Manager: inVisionのデザインシステム マネージャー。
• Frontify: グラフィックのガイドライン、パターンライブラリ、デザインシステムを作成します。
• Lingo: チーム全体と共有アセットライブラリを作成します。
• Lucid: デザインシステムを作成、管理、共有するためのツール。単純なコンポーネントライブラリからスタイルの詳細な説明まで。
• zeroheight: デザイナーによって作成され、デベロッパーによって拡張され、誰でも編集可能なスタイルガイド。

このリストにSketch, Figma, Framer Xを追加することもできます。

デザインをコードにするツール

適切なWebサイト構築ツールを探している時はチェックしてください。ランディングページをブラウザで簡単に作ることができます。

• Blocs: コードを書かずにレスポンシブWebサイトを作成できる、速くて使いやすく強力なビジュアルWebデザインツール。
• Bootstrap Studio: Bootstrapを使用してレスポンシブWebサイトを作成するための強力なWebデザインツール。
• Mobirise: Bootstrap 3/4とGoogle AMPに基づくオフラインのドラッグ&ドロップで作成できるWebサイトビルダー。
• pinegrow: CSS Gridをサポート。Bootstrap 3/4, Foundation、レスポンシブデザイン、HTMLおよびCSS用のプロフェッショナルビジュアルエディタ。
• px.div: デベロッパーとデザイナーのためのサイト構築ツール。
• Readymag: ランディングページをはじめ、マルチメディアのロングリード、プレゼンテーション、ポートフォリオまで、Web上でデザインするための視覚的に楽しいツール。
• STUDIO: ゼロからデザインし、リアルタイムでコラボレーションし、Webサイトを公開します。
• Tilda: 無料でWebサイト、ランディングページ、オンラインストアを作成し、その日に公開できます。
• Webflow: ブラウザでレスポンシブWebサイトを構築し、Googleでホストするか、コードをエクスポートしてどこにでもホストできます。

エクスペリエンスのモニタリングツール

分析ツールは、データを分析し、結果やパフォーマンスを向上させるために使用できる関連情報を抽出するのに役立ちます。

• Amplitude: ユーザーを理解し、より良い製品エクスペリエンスを迅速にリリースし、そしてビジネスを成長させます。
• Fathom: ユーザーの個人データを追跡または保存することなく、シンプルで便利なWebサイトの統計情報を提供します。
• FullStory: すべてのカスタマーエクスペリエンスデータを1つの強力で使いやすいプラットフォームに取り込むアプリ。
• Google Analytics: 広告の投資収益率を測定し、ソーシャルネットワーキングのサイトやアプリケーションを追跡します。
• HEAP: Web、モバイル、クラウドのすべてのインタラクションを自動的にキャプチャし、コードを書かずにデータを遡及的に分析します。
• Hotjar: ビジターがどのようにあなたのサイトを実際に使っているかを調査し、ユーザーからのフィードバックを集めて、より多くの訪問者を顧客に変えましょう。
• inspectlet: ビジターがあなたのサイトを使用しているときにビデオを記録するので、ビジターの行動をすべて見ることができます。
• LogRocket: ユーザーが自分のサイトで何をしているのかを確認し、バグの再現と問題の迅速な修正を支援します。
• Mixpanel: ユーザー中心のデータすべてについて洞察を得て、より賢明な決定を下し、カスタマーがどのようにプロダクトやサイトを使用しているかに基づいて行動を早めます。
• Pendo: アプリ内のカスタマーエクスペリエンスを測定し、向上させます。

フォントのツール

商用でも無料で利用できるフォントをはじめ、フォントの管理や作業を可能にする無料のフォントジェネレータおよびフォント検索ツールを見つけることができます。

• 2019年用、日本語のフリーフォントのまとめ: 当ブログのフリーフォントをまとめたものです。商用サイトだけでなく紙や同人誌などの利用も明記。
• Adobe Fonts: 何千もの美しいフォントが利用できます。
• FontBase: フォント管理が簡単になります。
• FontPair: Googleフォントを組み合わせるのに役立つシンプルなツール。
• Fontface Ninja: Webサイトでどのフォントが使用されているかを調べるためのブラウザ拡張機能。
• FontSpark: デザイナーが自分のプロジェクトに最適なフォントをすばやく見つけるのに役立つシンプルなツール。
• Font Squirrel: 商用無料のフォントがダウンロードできるサイト。
• Google Fonts: 素晴らしいタイポグラフィを通して、Webをより美しく、速く、そしてオープンにします。
• Google Webfonts Helper: Googleフォントをセルフホストする手間のかかる方法。無料でオープンソース。
• RightFont: フォント管理アプリ。フォントのプレビュー、同期、インストール、整理に役立ちます。
• RightFont: フォント管理アプリ、iCloud, Dropbox, OneDrive, Google Drive上でのフォントのプレビュー、同期、インストール、および整理に役立ちます。
• Sans Forgetica: 研究ノートを思い出すのを助けるように設計されているダウンロード可能なフォント。
• Typeface: ライブフォントプレビューとタグ付けでデザインワークフローを改善するフォントマネージャー。
• Webfont: カスタムSVGアイコンフォントの作成と管理、アイコンの共有ライブラリの作成。

スクリーンショットのツール

macOS, Windowsで利用可能ないくつかの強力なスクリーンショットのツール。

• Camtasia: 本格的なエディター内蔵のスクリーンレコーダー。
• CloudApp: 録画、Webカメラ、スクリーンショットへの注釈付け、GIFの作成、クラウドへの保存ができます。
• GYPHY Capture: 画面の一部をキャプチャしてGIFまたはMP4としてエクスポートします。
• Greenshot: 選択した領域、ウィンドウ、フルスクリーンのスクリーンショットを撮ります。さまざまな方法でエクスポートできます。 Windowsは無料です。
• Kap: GIF, MP4, WebM, APNGにエクスポートするオプションを備えたオープンソースのスクリーンレコーダー。
• Lightshot: 画面をすばやくキャプチャするためのスクリーンショットアプリ。
• Monosnap: スクリーンショットを作成し、注釈を付けてクラウドにアップロード。
• OBS: スクリーンショット、gif、チュートリアルビデオを作成。
• QuickTime: スクリーンを録画するために使用できるビデオプレーヤー。
• Screenie: 画像マネージャとして機能するスクリーンショット作成ツール。画像をフィルタ処理して検索したり、スクリーンショットのファイルタイプを変更したりできます。
• ScreenToGif: スクリーンの一部をgifで記録するためのオープンソースツール。Windowsでのみ利用可能。
• Snipping Tool: Windows用の無料スクリーンショットツール。
• Snappy: すばやく写真を撮り、あなたのためにコレクションにまとめるツール。
• Teampaper Snap: 選択領域のスクリーンショットを撮ることを可能にするモダンなスクリーンショットアプリ。

アイコンのツール

すべてのアイコンはSVGで利用できるので、簡単にカスタマイズして個人・商用で使うことができます。

• Font Awesome: Webで最も人気のあるアイコンセットとツールキット、オープンソースです。
• Fontello: アイコン付きのカスタムフォントを作成するためのツール、オープンソースです。
• Iconfinder: ベクターアイコン（SVG）のマーケット。 IconJarフォーマットで利用可能なアイコンセット。
• IconJar: すべてのアイコンを1つのアイコンマネージャに保存。
• Icons8: iOS、Android、Windowsスタイルの無料アイコン。
• Material Design Icons: Material Designをベースにしたオープンソースのアイコン。
• Noun Project: あらゆるアイコンが揃っています。
• Nucleo: アイコンを収集、カスタマイズ、エクスポートするためのmacOS, Windowsアプリ。
• Svgsus: SVGアイコンの管理ツール。

イラストのツール

帰属なしで使用できる美しいsvg画像の常に更新されたコレクション。

• Absurd Design: あなたのプロジェクトのためのアブストラクトな無料イラスト。
• unDraw: 美しいSVG画像のコレクション。
• LUKASZADAM: 無料のベクターアート、イラストとアイコン。

情報アーキテクチャのツール

視覚的なサイトマップを作成し、Webサイトの情報アーキテクチャと使いやすさを向上させるための素晴らしい情報アーキテクチャツール。

• OptimalSort: UIで人々がどのようにコンテンツを分類しているか理解することを可能にするカード分類ツール。
• Treejack: 作成したサイトマップをアップロードして、ユーザーがサイトをどのように移動するかを確認できます。

ロゴのデザインツール

これらの使いやすいロゴのデザインツールを使用してオンラインであなた自身のロゴを作成してください。

• Logo Lab: ロゴにビジュアルのテストをすることができます。
• Logo Package Express: 5分で、クライアント用に数十種類のロゴのバリエーションとファイルタイプを自動的にエクスポートおよびパッケージ化します。
• Logo Rank: ロゴをアップロードすると、いくつかの客観的な基準でどのように評価されるかをチェックできます。

UIデザインのツールに記載されているAdobe Photoshop、GIMP、Inkscape、Krita、Vectrを使用してロゴをデザインすることもできます。

モックアップのツール

ワイヤーフレーム、モックアップ、ダイアグラム、プロトタイプの作成と共同作業を支援するモックアップツール。

• Cleanmock: iPhoneなどの最新のデバイスフレームを使用して、モックアップを作成。
• Rotato: アプリデザインのためのアニメーション3Dモックアップ。
• Screely: Webページのデザインを最小限のブラウザウィンドウにすばやく組み立てます。
• ScrennSpace: モーションデザイナーのための3Dデバイスビデオ。
• Smartmockups: 数回クリックするだけで、モックアップを作成できます。

マウスのトラッキングツール

マウスのトラッキングツールは、マウスポインタとクリックの動きを記録して、ユーザーが興味を持っているポイントを見つけるのに役立ちます。

• Mouseflow: マウスカーソルの動きを記録します。

ピクセルアートのツール

ピクセルアートは、色を個々のピクセルに適用して画像を作成するデジタルアート形式です。

• Piskel: アニメ化されたスプライトとピクセルアートのためのオンラインエディタ。
• Aseprite: アニメ化されたスプライトエディタとピクセルアートのツール。

プロトタイプのツール

プロトタイピングのツールを使用することで、デザイナーとクライアントは同じコンテキストにいながらもコラボレーションを強化できます。ワイヤーフレーム、プロトタイピング、コラボレーションに使用できる優れたプロトタイピングツールを集めました。

• Alva: コードコンポーネントを使ったプロトタイプを作成、オープンソースです。
• Axure RP: ワイヤーフレーム、プロトタイプ、コラボレーション、仕様書作成。
• Balsamiq: ワイヤーフレーム、コラボレーション。
• Creo: プロトタイプ、コードのエクスポート、組み込みのモバイルアプリビルダー。
• inVision: プロトタイプ、コラボレーション、ワークフロープラットフォーム。
• Flinto: アプリのインタラクティブでアニメーションのプロトタイプを作成するためのmacOSアプリ。
• Framer X: インタラクティブプロトタイプを視覚的にデザインするためのツール。
• Keynote: プロトタイプにも使用できるプレゼンテーションを作成するためのmacOS内蔵アプリ。
• Marvel: 共同デザインのプラットフォーム。ワイヤーフレーム、プロトタイプ、オンライン設計、設計スペックの作成を1ヵ所で行えます。
• Maze: inVisionプロトタイプのための実用的なKPIで分析結果を与えるデザイナーと開発者のためのツール。
• Principle: アニメーション化されたインタラクティブなユーザーインターフェースを簡単にデザインできます。
• ProtoPie: Hi-Fiインタラクションを組み合わせて、センサー支援プロトタイプを構築できます。
• Proto.io: インタラクションで忠実度の高いプロトタイプを作成するためのツール。
• UXPin: コードのコンポーネント、ロジック、ステート、デザインシステムの力で、リアルに感じるプロトタイプを構築します。

この後のUIデザインのツールに記載されているFigma, Adobe XD, InVision Studioを使用してプロトタイプを作成することもできます。

スケッチのツール

アプリやWebサイトの作成を始めるのに、鉛筆と紙が必要な場合があります。あなたの創造的なプロセスをスピードアップするために素晴らしいスケッチシートテンプレートです。

• Sketchsheets: ワイヤーフレームのために最新のデバイスとプラットフォームの無料の印刷可能なテンプレートを提供しているオープンソースプロジェクト。
• Sneakpeekit: グリッドとデバイスのフレームを取ったメモを印刷できます。

無料写真素材

ロイヤリティフリーの写真素材がダウンロードできます。

• BURST: Webサイトや商業用のフリー写真素材。
• FreePhotos.cc: 商業用フリー写真素材。
• Pexels: 多くのフリー写真素材集の集まり。
• Pixabay: 独自ライセンスの下で写真、イラスト、ベクターグラフィック、動画を共有できるWebサイト。
• PxHere: 無料写真素材。
• Unsplash: 無料写真素材。
• #WOCinTech Chat Photos: 女性技術者のフリー写真素材。
• Zoommy: クリエイティブ製品やインスピレーションのための素晴らしいフリー写真素材。

UIデザインのツール

完璧なユーザーインターフェースを作り上げようとしていませんか？ ガイダンスとインスピレーションのためにここをチェックしてください。

• Adobe Illustrator: ロゴ、アイコン、タイポグラフィをはじめ、印刷物、Web、ビデオ、モバイル用のイラストを作成できます。
• Adobe Photoshop: グラフィックデザインソフトウェア。
• Adobe XD: Webサイトやモバイルアプリから音声対話まで、あらゆるユーザーエクスペリエンスをデザイン、プロトタイプの作成、および共有ができます。
• Affinity Designer:
  macOS, iOS, Windows用のベクトルグラフィックエディタ。
• CleverBrush: ブラウザベースのベクターエディタとデジタルパブリッシングツール。
• Figma: ブラウザベースのデザインツールで、リアルタイムのコラボレーションでデザインとプロトタイプを作成できます。
• GIMP: オープンソースのイメージおよびグラフィックデザインのソフトウェア。
• Gravit Designer: macOS, Windows, Linux, ChromeOS対応、ブラウザで利用可能な無料のベクターデザインアプリ。
• Inkscape: オープンソースのベクターグラフィックエディタ。イラスト、図、線画、チャート、ロゴ、複雑な絵などのベクターグラフィックを作成・編集することができます。
• inVision Studio: デザイン、プロトタイプ、コラボレーションを1つのワークフローにまとめました。
• Krita: 無料のグラフィックデザインソフトウェア。Adobe Photoshopに代わる良い方法。
• Photopea: Photoshopに代わる無料のブラウザベースのグラフィックデザインアプリ。
• Sketch: macOS用に設計されたUIデザインツール。
• Vectr: 簡単かつ直感的にベクターグラフィックを作成するためのシンプルなWebおよびデスクトップ用のツール。

UIのインスピレーション

完璧なユーザーインターフェースを作りたいですか？ あなたのワークフローをアップグレードするための最高のフリーでオープンソースのUIデザインツールをチェックしてください。

• CodeMyUI: コードスニペットとWebデザインとUIインスピレーションの厳選コレクション。
• Inspiration UI: Web制作に携わる人々に最高のデザインリソースを提供することを目的としたコミュニティ。

ユーザーフローのツール

ユーザーフローのダイヤグラムは、顧客の移動経路を計画し、ユーザーエクスペリエンスを向上させるために最適な方法です。ユーザーフローダイヤグラム、ユーザーフローマップ、サイトマップを作成する必要がある場合は、これらのツールをチェックしてください。

• Draw.io: フローチャート、プロセス図、組織図、UML、ERおよびネットワーク図を作成するための無料のオンラインツール。
• FlowMapp: サイトマップやユーザーフローを作成するためのオンラインツール、ユーザーエクスペリエンスを効果的に設計および計画するのに役立ちます。
• Google Drawings: 無料でダイアグラムやチャートを作成できます。
• Lucidchart: ダイアグラム、フローチャート、サイトマップなどを作成するためのオンラインツール。
• MindNode: ブレインストーミングをシンプルで簡単にするマインドマッピングアプリ。
• NinjaMock: ワイヤーフレームとユーザーフローのオンラインツール。ビューをリンクしてロジックフローのプロトタイプを作成します。フリーハンドのビジュアルスタイルです。
• OmniGraffle: macOS, iOS用の図表作成およびデジタルイラストレーションのアプリケーション。
• Overflow: デザインをストーリーで伝えるプレイ可能なユーザーフロー図に変えましょう。
• Sketch.system: インタラクティブなステートマシンによるUIとフローの設計。
• Whimsical: フローチャート、ワイヤーフレーム、付箋を簡単に作成できます。
• Wireflow: 美しいユーザーフローとプロトタイプを作成するための無料オンライン・オープンソースのツールです。
• yEd -Graph Editor: 図を作るための無料のデスクトップツール。多種多様なユースケースに使用でき、フローチャートを作成するときに自動レイアウトは非常に役立ちます。

デザイナー用バージョン管理ツール

すべてのプロジェクトはバージョン管理システムを正しく選択することから始まるので、バージョン管理ツールは非常に重要です。デザイナーやチームのためのバージョン管理システムを見つけてください。

• Abstract: デザインチームがSketchファイルのバージョン管理、共同作業を行うためのプラットフォーム。
• Folio: デザインチーム用のシンプルなバージョン管理システム。 Gitベースです。
• Kactus: ツールを変更せずにデザインのバージョン管理ができます。変更を管理し、作業を文書化し、チーム内で同期させます。
• Plant: デザイナーとチームに完全なバージョン管理を提供するmacOSアプリとSketchプラグイン。
• Relay for Figma: Figmaから最新のアセットをあなたのコードベースに直接プッシュします（まだリリースされていませんが、アーリーアクセスで利用することができます）。
• Versions: デザイナーのための視覚的な差分、マージ、競合解決をおこなうバージョン管理ツール。 GitHub, Bitbucket, GitLab, Azure Devopsと連携します。

デバッグを視覚的に行えるツール

• LogRocket: サイトでユーザが行ったことを記録するためのツールで、バグを再現し、問題をより早く修正できます。

• VisBug: あらゆるWebページで、視覚的にデバッグする、スタイルや外観をすばやく調べる、CSSを視覚的に変更します。

リファレンスとインスピレーション

このレポートはデザインコミュニティの記事と私の親友Graemeによって作られたPrototypr.io Toolboxに触発されました。