Webデザイナー向け

Webデザイン補助

プロトタイピングツールのFigmaで使えるBootstrap 4用のUIキット・「Figma Bootstrap 4 GUI Components」
JavaScript

textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」
JavaScript

mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」
Ads
Webデザイン補助

SVGアイコンを好みのカラーパレットに変更、ダウンロードできる・「SVG Colorizer」
JavaScript

SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」
JavaScript

jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」
JavaScript

JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」
Webデザイン補助

任意の画像から美しいカラーパレットを自動生成、エクスポートできる・「ColorKitty」
JavaScript

CMSやフレームワークとの統合を目的としたブロックベースのコンテンツエディタ・「Hyper Editor」
ジェネレーター

日本にも対応のシンプルな印刷用カレンダーを作れる・「Calendar Generator」
CSS/HTML

軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」
ソフトウェア

Markdownでナレッジを共有できるプラットフォーム・「CodiMD」
Webデザイン補助

ログインページや値段表、コンタクトフォームなどのUI/UXをより良くするためのチェックリスト・「Checklist Design」
Webデザイン補助

アクセシビリティツールやデザインバージョン管理、モックアップや3Dモデリングなど、様々なデザイナーに役立ちそうなツールやリソースのまとめ・「Awesome Design Tools」
Webデザイン補助

サンプルのUIを確認しながらカラースキームを作成、様々なコードでエクスポートできる・「Geenes」
CSS/HTML

よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」
ジェネレーター

任意のWebサイト等のスクリーンショットを、簡易的なモックアップ画像に変換してくれる・「mockdowns」
ジェネレーター

オープンソースのアバターイラスト作成ジェネレーター・「Avataaars Generator」
JavaScript

スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」
ジェネレーター

プレーンテキストでデータを入力すると自動でチャートを生成してくれるWebアプリ・「FastCharts」
Webデザイン補助

色とアクセシビリティの関係について、インタラクティブな操作で体感しながら学べる・「Color.review」
ソフトウェア

オープンソースのGoogle Image Charts代替・「QuickChart」
次のページ