Webデザイナー向け

Webデザイン補助

大学の学生や教授が共同で作った3000以上の絵文字を公開するオープンソースのemojiプロジェクト・「OpenMoji」
JavaScript

Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」
ジェネレーター

カラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれる・「Accessible Color Generator」
Ads
CSS/HTML

高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」
CSS/HTML

クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」
Webデザイン補助

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

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

mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」
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」
次のページ