01 / Selected
人気！Design Assistant Tools01
デザイン制作
アシスタントツール
色選び・UI実装を瞬時に解決
デザインの現場で発生する「色の組み合わせが決まらない」「CSSの記述が面倒」といった悩みを解決する、AMIXオリジナルの制作支援ツール群です。インスピレーションを刺激するカラーパレット生成から、コピペで使える実用的なコード作成まで、初心者からプロフェッショナルまで幅広く使えるユーティリティを用意しました。あなたの制作フローを加速させるツールボックスとして、ブックマークしてご活用ください。
- Tools
- 20
- Fields
- 05
- Install
- 0
Color / UI / BrandDesign
Utility Field↗︎
Jump to field
As featured on
電ファミニコゲーマーCGWORLD.jpイマコレキニ｜ほぼ日ブレーン캐릿 Careetおたくま経済新聞ドワンゴ DESIGNKAI-YOUITmediaTBSテレビ
Selected Utilities 02
迷いを、制作の推進力へ。
用途の違う代表的なツールから、AMIXのデザイン支援の幅を見渡せます。
Design Toolkit Index 03
用途から選ぶ。
色、アクセシビリティ、UI、ブランド、作画。目的ごとに現在公開中のツールを探せます。
20 / 20
Palette & Color
カラーパレット・配色
- 01↗︎
グラデーション提案ツール
お好みのテイストから美しいグラデーションを簡単に見つけられるツールです。Webデザインや資料作成に使えるCSSコードもコピー可能。配色選びのインスピレーションに。
- 02人気！↗︎
配色パターンジェネレーター
配色パターンジェネレーターは、ベースカラーを選ぶだけで、補色、類似色、トライアドなどの美しい配色パターンを簡単に作成できる無料ツールです。ウェブデザインや資料作成に最適な色の組み合わせを見つけるヒントとして。
- 03↗︎
気分で決めるカラーパレット：Mood Palette
今の気分を選ぶだけで、最適なカラーパレットを自動生成。Webデザイン、イラスト、インテリアの配色のヒントに。
- 04↗︎
画像から生成する美しいカラーパレット：PALETTE SYNC
Palette Sync（パレットシンク）は、画像をアップロードするだけでおしゃれな3色のカラーパレットを瞬時に生成・抽出できる無料の配色ツールです。Webデザイン、イラスト、写真加工の配色選びに。
- 05↗︎
偶然の出会いを楽しむカラーパレット生成：BLND
BLND（ブレンド）は、直感的な操作で美しいカラーパレットを生成する無料のデザインツールです。タップするだけで色が混ざり合い、Web制作やイラストに使えるおしゃれな配色パターンを作成できます。
- 06↗︎
カラーコード変換ツール
16進数、RGB値、HSV値の相互変換が簡単にできる無料ツール。デザイナーやウェブ開発者に最適なカラーコンバーターです。
- 07↗︎
写真の主要色パレットをHEXで取り出す：画像から配色抽出
画像をアップロードすると、写真やイラストの主要な色を解析してカラーパレット（HEX）を抽出する無料ツールです。抽出数の変更、個別・一括コピー、CSSカスタムプロパティ出力に対応。
- 08NEW↗︎
影色・ハイライト色を提案：光陰パレット
基準色から、イラストの影色3色・ハイライト色3色を7段階で提案する無料カラーパレットツール。アニメ塗り、環境光、夜・暗闇、炎や魔法の演出光を調整でき、HEX・CSS・設定JSONを保存できます。
Accessibility
アクセシビリティ・色検証
UI & CSS
UI部品・CSS素材
- 01↗︎
おしゃれな見出しジェネレーター
H2, H3, H4用のおしゃれな見出しデザインをCSSで簡単に作成・カスタマイズできるツール。豊富なテンプレートから選び、色、フォントサイズ、テキスト配置を調整してコードをコピー＆ペーストできます。
- 02↗︎
ウェブボタンジェネレーター
簡単にウェブボタンをデザイン＆生成できるジェネレーターツールです。様々なデザインからボタンを選び、色、サイズ、角丸などをカスタマイズしてコードをコピー＆ペーストできます。
- 03↗︎
CSSローディングアニメーション素材集
CSSローディングアニメーション素材集では、豊富なCSSローディングスピナーやアニメーションをライブプレビューで簡単にカスタマイズできます。軽量でおしゃれなローダー集をコピペして、Webサイトやアプリのユーザー体験の向上に。
- 04注目！↗︎
コピペで使えるHTML&CSSパーツ集（Web BENTO CSS）
ボタン・見出し・グラデーション・ローディングなど、コピペするだけで使えるHTML/CSSパーツを192種類以上収録。全16カテゴリ、商用利用OK・登録不要・すべて無料のWebパーツギャラリーです。
- 05注目！↗︎
コピペで動くJavaScript UIパーツ集（Web BENTO JS）
モーダル・タブ・アコーディオン・トースト通知など、コピペするだけで動くJavaScript UIパーツを180種類以上収録。全15カテゴリ、バニラJS・依存ライブラリなし・商用利用OK・登録不要の無料パーツ集です。
- 06↗︎
レスポンシブなフォントサイズCSSを生成：clamp() 流体タイポ計算
最小・最大のフォントサイズとビューポート幅を入力すると、CSSの clamp() を使った流体タイポグラフィ（レスポンシブなフォントサイズ）を自動計算する無料ツールです。rem/px切り替え、ライブプレビュー、任意の画面幅での結果表示に対応。
- 07↗︎
グラデ・メッシュ・box-shadow・glassmorphism：CSSジェネレーター
グラデーション（線形・放射・メッシュ風）、box-shadow（影）、glassmorphism（すりガラス）のCSSをライブプレビューしながら作れる無料ジェネレーター。値を調整してそのままコピーできます。Webデザイン・コーディングの効率化に。
Brand Assets
ブランディング・アセット
Drawing Support
創作・作画サポート
該当するツールが見つかりませんでした。別の言葉でお試しください。
Why We Build 04
デザイン制作で「あと一歩」を埋めるツール群
デザイン制作の現場では、レイアウトやコピーライティングに注力する一方で、 配色選び や CSSの細かな実装 といった周辺作業に意外な時間を取られることがあります。AMIXのデザイン制作アシスタントツールは、こうした制作フローの”つまずきポイント”にフォーカスして開発されています。
色の組み合わせに迷ったとき、闇雲に試すのではなく「補色」「類似色」「トライアド」といった 色彩理論に基づいたアプローチ で候補を絞り込めます。グラデーション提案ツールやMood Paletteでは、直感的な操作でプロフェッショナルな配色パターンを短時間で見つけることが可能です。既存の写真やブランドカラーからパレットを抽出したい場合は、PALETTE SYNCやBLNDが役立ちます。
Web制作において、WCAGガイドラインへの準拠は必須要件になりつつあります。コントラスト比チェッカーでは、文字色と背景色の組み合わせがAA・AAAレベルに適合するかを即座に判定。色覚多様性シミュレーターを併用すれば、多様なユーザーにとって見やすいデザインかどうかを事前に確認できます。
見出しやボタンのCSSを一から書く手間を省きたいときには、見出しジェネレーターやボタンジェネレーターで数クリックのカスタマイズ後にコードをコピー＆ペーストするだけ。ロゴからブランドガイドラインを自動生成するツールもあり、クライアントへの納品物作成にも対応しています。
Release Notes 05
新しく生まれたもの。
現行ページに掲載されているリリース・改訂情報です。
Release
録音された音楽ではなく、いま生まれている音楽を。無料ツール “輪音 RINNE” を公開しました。
↗︎
Release
釣られる側から、釣る側へ。無料ゲーム「逆FISHING」を公開しました。
↗︎
Release
カニが干潟を爆走する！？無料ゲーム “KANI CHASER” を公開しました。
↗︎
Release
下絵にパースのアタリをすっと引ける。無料ツール “パース定規 – Perspective Ruler” を公開しました。
↗︎
Release
切って、ガビらせて、貼るだけ。無料ツール「GABIKORA（ガビコラ）」を公開しました。
↗︎
Release
引き波を追って60秒、ハイスコアに挑戦！無料ゲーム「がんばれ！ミユビシギ」を公開しました。
↗︎Frequently Asked 06
よくある質問
ツールの選び方、アクセシビリティ、利用範囲について。
A目的によって最適なツールが異なります。 特定の色から調和する組み合わせ を見つけたい場合は「配色パターンジェネレーター」、 気分やイメージ から色を決めたい場合は「Mood Palette」、 既存の写真やロゴ から色を抽出したい場合は「PALETTE SYNC」がおすすめです。偶然の組み合わせを楽しみたいなら「BLND」をお試しください。
AWCAG（Web Content Accessibility Guidelines）では、テキストと背景のコントラスト比に最低基準を定めています。 AAレベル は通常テキストで4.5:1以上、大きなテキストで3:1以上。 AAAレベル はそれぞれ7:1以上、4.5:1以上です。コントラスト比チェッカーで簡単に判定できます。
Aはい。見出しジェネレーター、ボタンジェネレーター、ローディングアニメーション素材集で生成・コピーしたCSSコードは、個人・商用問わず自由にご利用いただけます。詳しくは ツールの利用規約 をご確認ください。
Aすべてのツールがブラウザ上で動作するため、PC・スマートフォン・タブレットのいずれからでもご利用いただけます。ただし、CSSコードのコピー＆ペースト作業はPCのほうが効率的です。