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

Post on:2019年3月14日

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

アクセシビリティとは、視覚障害、運動障害、聴覚障害、言語障害、認知障害のある人を含む、すべての人が使用できる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: 広告の投資収益率を測定し、ソーシャルネットワーキングのサイトやアプリケーションを追跡します。

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