Design tools
10 browser-based design and accessibility tools — check color contrast, simulate color blindness, preview font pairs, generate CSS code, optimize SVG, create favicons, resize icons, and more. No signup, no cloud, nothing leaves your device.
Design Tools
-
色覚シミュレーター
画像をアップロードして第2・第1・第3色覚異常の見え方を確認。100% ブラウザ内で処理。
ツールを開く →
-
カラーコントラストチェッカー
前景色と背景色のWCAG 2.1コントラスト比を即座にチェック。AA/AAAの合否を即表示。
ツールを開く →
-
フォントペアプレビュー
Google Fontsから見出し・本文フォントを選び、サンプルテキストでリアルタイムプレビュー。
ツールを開く →
-
CSSシャドウジェネレーター
ライブスライダーでbox-shadowとtext-shadowをビジュアル設定し、ワンクリックでCSSをコピーできます。
ツールを開く →
-
CSS Clip Pathジェネレーター
インタラクティブなポイントエディタでCSS clip-pathのポリゴン形状を作成し、コードを即出力します。
ツールを開く →
-
SVGオプティマイザー
SVGファイルのメタデータ・コメント・空白を除去してファイルサイズを削減。
ツールを開く →
-
絵文字ファビコンジェネレーター
任意の絵文字を16・32・48・64・128・192pxのファビコン用PNGに変換してすぐダウンロードできます。
ツールを開く →
-
アイコンリサイザー
PNG・SVGアイコンを複数サイズに変換。アプリアイコンやfaviconの作成に最適。
ツールを開く →
-
画像からアイコンセット変換
任意の画像をiOS・Androidアプリ用の全標準サイズアイコンセットに変換。100%ブラウザ内処理。
ツールを開く →
-
ASCIIアートバナー
複数のフォントスタイルでテキストをASCIIアートバナーに変換。コードやREADMEにそのまま貼り付け可能。
ツールを開く →
Why browser-only design tools?
Design files, brand assets, and client icons are valuable intellectual property. Uploading them to a third-party service creates unnecessary risk. Every tool on this page runs entirely in your browser — paste freely, audit safely, share nothing.
From accessibility checks (color blindness simulation, WCAG contrast ratios) to code generation (CSS shadows, clip paths) to asset optimization (SVG minification, emoji favicons, icon resizing), every tool is built for the moments designers and developers need quick, private answers.
よくある質問
- Do these tools upload my files anywhere?
- No. Every design tool on this page runs entirely in your browser. Your images, SVG files, and color choices never leave your device — not even temporarily.
- What is WCAG color contrast?
- WCAG (Web Content Accessibility Guidelines) defines contrast ratio thresholds for readable text. AA level requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA level requires 7:1 and 4.5:1 respectively.
- Can I use generated favicons commercially?
- Yes. The Emoji Favicon Generator renders standard system emoji onto a canvas in your browser. The resulting PNG files are yours to use freely.