任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成する・「Alwane」
Alwane Alwaneは任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成するWebアプリです。 抽出したいWebサイトのURLを入力すれば、そのサイトを解析してカラーコードを自動生成してくれま...
Resource - Webデザイン補助
JavaScriptを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめた・「Patterns.dev」
Patterns.dev Patterns.devはVanillaなJavaScriptやReactなどを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめたWebサイトです。 チェックリストでは無く、パター...
ダミー画像をイラストで生成してくれるダミー画像生成サービス・「Doodle Ipsum」
Doodle Ipsum Doodle Ipsumはダミー画像をイラストで生成してくれるダミー画像生成サービスです。他のダミー画像サービスと同様にURLとパラメーターで制御する事も出来ます。 テイストは日本向けじゃないかもしれま...
アニメーションするユニークな背景を作れるコードを配布する・「Animated Backgrounds」
Animated Backgrounds Animated Backgroundsはアニメーションするユニークな背景を作れるコードを配布するWebサイトです。 配布されている背景のデザインは基本的にはHTML/CSS/JavaS...
Tailwind.cssで利用できる様々なUIのHTMLコードを配布する・「Flowrift」
Flowrift FlowriftはTailwind.cssで利用できる様々なUIのHTMLコードを配布するWebサイトです。Tailwind.cssが読み込まれたWebページにHTMLを貼るだけで使う事が出来ます。 コードはブ...
Webデザイナーや開発者向けのツールやリソースを手作業で大量に収集したコレクション・「Toolkit」
Toolkit ToolkitはWebデザイナーや開発者向けのツールやリソースを手作業で大量に収集したコレクションサイトです。 とても細かくカテゴライズされていていたりキーワード検索出来たりログイン不要でお気に入り機能を使えたり...
150以上のコンポーネントを備えたFigma/Sketch用のUIキット・「Deca」
Deca Decaは150以上のコンポーネントを備えたFigma/Sketch用のUIキットです。 チャートやボタン、ドロップダウンなどなど基本的なものやプライスカード、プログレスなど需要の高いUIなどが揃えられています。 ...
CC0で配布される250以上のコンポーネントを有したfigmaやXD、Skech向けのワイヤーフレームキット・「Bloo」
Bloo BlooはCC0で配布される250以上のコンポーネントを有したオープンソースのワイヤーフレームキットです。figmaやXD、Skech向けとして公開されています。モバイルファーストとなっていますが、PCサイトでも利用でき...
任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリ・「Font of Web」
Font of Web Font of Webは任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリです。 解析したいWebサイトのURLを入力すると、そのサイトで利用されているWebフォントや...
ロゴのダミー画像を無償配布するミニプロジェクト・「Placeholder Logos」
Placeholder Logos Placeholder Logosはロゴのダミー画像を無償配布するミニプロジェクトです。 ダミー用に作られたロゴが8種類、それぞれ6色、テキストありと無しの2種、各種SVGとPNGが用意されて...
マウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張・「CSS Spider」
CSS Spider CSS Spiderはマウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張です。 起動するとマウスホバーで要素のCSSを自動解析し、その場にclassやI...
アクセシビリティに関するツールやリソースなどをカテゴリに分けて大量にまとめている・「a11yresources」
a11yresources a11yresourcesはアクセシビリティに関するツールやリソースなどをカテゴリに分けて大量にまとめているキュレーションサイトです。 書籍やブログ、記事などの情報やブラウザ拡張、ブックマークレットな...
デザイナーに必要なツール等のショートカットのチートシートを1か所に集約した・「Shortcuts.design」
Shortcuts.design Shortcuts.designはデザイナーの方向けに必要なツール等のショートカットのチートシートを1か所に集約したプロジェクトサイトです。 SketchやFigma、各Adobe製品、Affi...
コピー&ペーストで使えるシンプルなアイコンのセット・「Indie Icons」
Indie Icons Indie Iconsはコピー&ペーストで使えるシンプルなアイコンのセットです。アイコンごとにSVGやCSSのコードをコピーする事が出来るようになっており、アイコンをわざわざDLせずとも即利用できるようになって...
画像のメイン部分を残し、自動で背景を削除するオンラインの切り抜きツール・「Slazzer」
Slazzer Slazzerは画像のメイン部分を残し、自動で背景を削除するオンラインの切り抜きツールです。 以前にご紹介したremove.bgやSocialBook Free Background Removerなどの後発...
デザイナーの業務をサポートするツールやリソースを集約した・「Design Resources」
Design Resources Design Resourcesはデザイナーの業務をサポートするツールやリソースを集約したキュレーションサイトです。 多くの役割を担う各業界の様々なデザイナーの方の業務をサポートしてくれるような...
ベースカラーを入力するだけで良い感じのカラーパレットを複数提案してくれる・「ColorSpace」
ColorSpace ColorSpaceはベースカラーを入力するだけで良い感じのカラーパレットを複数提案してくれるカラーツールです。 任意のカラーを選択するだけで自動でその色と相性の良い様々なタイプの良い感じのカラーパレットを...
レスポンシブ対応の動的なダミー画像を提供する・「TwicPics Placeholders」
TwicPics Placeholders See the Pen Placeholders by TwicPics (aspect ratio padding trick) by kachibito (@kachibito...
サクサク使えるシンプルなカラーパレット生成ツール・「Color Palette Generator」
Color Palette Generator Color Palette Generatorはサクサク使えるシンプルなカラーパレット生成ツールです。 5色固定のランダム生成ですが基本的にspaceキーとCキーの2つのキーボード...
アートライクな背景パターンを配布する・「Paaatterns」
Paaatterns Paaatternsはアートライクな背景パターンを配布するプロジェクトサイトです。 いくつかのアートなパターンがSketch,やFigma、Adobe XD、Illustrator用のファイルやpng、sv...
Webサイトやアプリのデザインや開発の際に役立つリソースやツールを各カテゴリに分けて集約した・「Undesign」
Undesign UndesignはWebサイトやアプリのデザインや開発の際に役立つリソースやツールを各カテゴリに分けて集約したキュレーションサイトです かなり細かいカテゴリに分けられているので迷うことなく目的から必要なツール等...
デザインが苦手な開発者向けのツール等をまとめている・「Nodesign.dev」
Nodesign.dev Nodesign.devはデザインが苦手な開発者向けのツール等をまとめているキュレーションサイトです ノンデザイナーズ・デザインブックなどのように基礎を学ぼう、みたいなものではなく、ツールに任せようとい...