任意のWebサイトを編集可能なFigma用ファイルに変換できる・「html.to.design」
html.to.design html.to.designは任意のWebサイトを編集可能なFigma用ファイルに変換できるサービスです。 手順も簡単で、専用のChrome拡張をインストールし、変換したいWebサイトで実行すると、...
Resource - Webデザイン補助
CSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクション・「CSS Stock」
CSS Stock CSS StockはCSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクションサイトです。 現在、ボタンやローディング、アコーディオンやFAQ、ツールチップ、TOC、モーダルウィ...
FigmaやFigjamのテキスト入力にChatGPTを使えるFigmaプラグイン・「FigGPT」
FigGPT FigGPTはFigmaやFigjamのテキスト入力にChatGPTを使えるFigmaプラグインです。要はダミーテキスト生成のプラグインですが、ChatGPTで自然な言葉で自動生成できるのは良いですね。 使い方は簡...
ベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめた・「UI Buttons」
UI Buttons UI ButtonsはベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめたWebサイトです。 ボタンが押された時やマウスホバー時などの様々なエフェクトが用意されており、それぞれのペ...
Tailwind.cssのチートシートをその場で表示、検索も可能なオープンソースのChromeエクステンション・「Tailwind Cheat Sheet inside Chrome Extension」
Tailwind Cheat Sheet inside Chrome Extension Tailwind Cheat Sheet inside Chrome ExtensionはTailwind.cssのチートシートをその場で表示、...
Googleフォントと互換性を持ったGDPR準拠のプライバシーを重視したWebフォントプラットフォーム・「Bunny Fonts」
Bunny Fonts Bunny FontsはGoogleフォントと互換性を持ったGDPR準拠のプライバシーを重視したWebフォントプラットフォームです。オープンソースを謳っていますが開示されたソースがどこか分かりませんでしたので後...
様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」
AnimatiSS AnimatiSSは様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできるWebサイトです。 スクロールアップ/ダウン、回転、回転+拡大縮小、スィング、スライド、シャドウなどなど大量の...
様々なタイプのWebサイトのUIテンプレートをFigmaやPS用ファイルで無償配布する・「DopeUI」
DopeUI DopeUIは様々なタイプのWebサイトのUIテンプレートをFigmaやPhotoshop用ファイルで無償配布するプロジェクトサイトです。 いろいろな業種や目的に別にFigma或いはPhotoshopで作成されたW...
様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできる・「Iconer」
Iconer Iconerは様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできるWebアプリです。 FeatherやIonic、Heroiconsなどなど頻繁に利用されているアイコン...
画像内の消したい部分を指定するだけでAIで自動消去してくれる・「Magic Eraser」
Magic Eraser Magic Eraserは画像内の消したい部分を指定するだけでAIで自動消去してくれるWebアプリです。 もはや珍しいものでは無くなったこの手のAIによる画像加工ツールは当ブログでも何度かご紹介していま...
やや緩いタッチで描かれた手書きの線画アイコンのセット・「Doodle Icons」
Doodle Icons Doodle Iconsは、やや緩いタッチで描かれた手書きの線画アイコンのセットです。手書き風ではありますがしっかり認識できるようにデザインされています。 アイコンは400以上用意されており、PNG、S...
デザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクション・「Toools.design」
Toools.design Toools.designはデザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクションです。 イラストやアイコン、写真素材、モックアップやタイポグラフィなどのほか、デザインやU...
任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成する・「Alwane」
Alwane Alwaneは任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成するWebアプリです。 抽出したいWebサイトのURLを入力すれば、そのサイトを解析してカラーコードを自動生成してくれま...
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が用意されて...