CSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクション・「CSS Stock」 CSS Stock CSS StockはCSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクションサイトです。 現在、ボタンやローディング、アコーディオンやFAQ、ツールチップ、TOC、モーダルウィ...2023.04.25 | 10時01分48秒
FigmaやFigjamのテキスト入力にChatGPTを使えるFigmaプラグイン・「FigGPT」 FigGPT FigGPTはFigmaやFigjamのテキスト入力にChatGPTを使えるFigmaプラグインです。要はダミーテキスト生成のプラグインですが、ChatGPTで自然な言葉で自動生成できるのは良いですね。 使い方は簡...2023.03.30 | 10時03分27秒
ベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめた・「UI Buttons」 UI Buttons UI ButtonsはベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめたWebサイトです。 ボタンが押された時やマウスホバー時などの様々なエフェクトが用意されており、それぞれのペ...2022.07.25 | 10時08分50秒
Tailwind.cssのチートシートをその場で表示、検索も可能なオープンソースのChromeエクステンション・「Tailwind Cheat Sheet inside Chrome Extension」 Tailwind Cheat Sheet inside Chrome Extension Tailwind Cheat Sheet inside Chrome ExtensionはTailwind.cssのチートシートをその場で表示、...2022.06.29 | 10時05分53秒
Googleフォントと互換性を持ったGDPR準拠のプライバシーを重視したWebフォントプラットフォーム・「Bunny Fonts」 Bunny Fonts Bunny FontsはGoogleフォントと互換性を持ったGDPR準拠のプライバシーを重視したWebフォントプラットフォームです。オープンソースを謳っていますが開示されたソースがどこか分かりませんでしたので後...2022.06.22 | 10時03分48秒
様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」 AnimatiSS AnimatiSSは様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできるWebサイトです。 スクロールアップ/ダウン、回転、回転+拡大縮小、スィング、スライド、シャドウなどなど大量の...2022.05.25 | 10時04分30秒
様々なタイプのWebサイトのUIテンプレートをFigmaやPS用ファイルで無償配布する・「DopeUI」 DopeUI DopeUIは様々なタイプのWebサイトのUIテンプレートをFigmaやPhotoshop用ファイルで無償配布するプロジェクトサイトです。 いろいろな業種や目的に別にFigma或いはPhotoshopで作成されたW...2022.05.01 | 10時06分35秒
様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできる・「Iconer」 Iconer Iconerは様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできるWebアプリです。 FeatherやIonic、Heroiconsなどなど頻繁に利用されているアイコン...2022.04.08 | 10時09分09秒
画像内の消したい部分を指定するだけでAIで自動消去してくれる・「Magic Eraser」 Magic Eraser Magic Eraserは画像内の消したい部分を指定するだけでAIで自動消去してくれるWebアプリです。 もはや珍しいものでは無くなったこの手のAIによる画像加工ツールは当ブログでも何度かご紹介していま...2022.03.13 | 10時00分09秒
やや緩いタッチで描かれた手書きの線画アイコンのセット・「Doodle Icons」 Doodle Icons Doodle Iconsは、やや緩いタッチで描かれた手書きの線画アイコンのセットです。手書き風ではありますがしっかり認識できるようにデザインされています。 アイコンは400以上用意されており、PNG、S...2022.02.27 | 10時09分16秒
デザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクション・「Toools.design」 Toools.design Toools.designはデザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクションです。 イラストやアイコン、写真素材、モックアップやタイポグラフィなどのほか、デザインやU...2022.02.18 | 9時56分51秒
任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成する・「Alwane」 Alwane Alwaneは任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成するWebアプリです。 抽出したいWebサイトのURLを入力すれば、そのサイトを解析してカラーコードを自動生成してくれま...2022.01.12 | 10時06分52秒
JavaScriptを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめた・「Patterns.dev」 Patterns.dev Patterns.devはVanillaなJavaScriptやReactなどを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめたWebサイトです。 チェックリストでは無く、パター...2021.12.22 | 10時04分29秒
ダミー画像をイラストで生成してくれるダミー画像生成サービス・「Doodle Ipsum」 Doodle Ipsum Doodle Ipsumはダミー画像をイラストで生成してくれるダミー画像生成サービスです。他のダミー画像サービスと同様にURLとパラメーターで制御する事も出来ます。 テイストは日本向けじゃないかもしれま...2021.11.26 | 10時21分34秒
アニメーションするユニークな背景を作れるコードを配布する・「Animated Backgrounds」 Animated Backgrounds Animated Backgroundsはアニメーションするユニークな背景を作れるコードを配布するWebサイトです。 配布されている背景のデザインは基本的にはHTML/CSS/JavaS...2021.10.01 | 9時59分49秒
Tailwind.cssで利用できる様々なUIのHTMLコードを配布する・「Flowrift」 Flowrift FlowriftはTailwind.cssで利用できる様々なUIのHTMLコードを配布するWebサイトです。Tailwind.cssが読み込まれたWebページにHTMLを貼るだけで使う事が出来ます。 コードはブ...2021.09.30 | 10時06分31秒
Webデザイナーや開発者向けのツールやリソースを手作業で大量に収集したコレクション・「Toolkit」 Toolkit ToolkitはWebデザイナーや開発者向けのツールやリソースを手作業で大量に収集したコレクションサイトです。 とても細かくカテゴライズされていていたりキーワード検索出来たりログイン不要でお気に入り機能を使えたり...2021.09.03 | 9時54分38秒
150以上のコンポーネントを備えたFigma/Sketch用のUIキット・「Deca」 Deca Decaは150以上のコンポーネントを備えたFigma/Sketch用のUIキットです。 チャートやボタン、ドロップダウンなどなど基本的なものやプライスカード、プログレスなど需要の高いUIなどが揃えられています。 ...2021.04.10 | 10時06分26秒
CC0で配布される250以上のコンポーネントを有したfigmaやXD、Skech向けのワイヤーフレームキット・「Bloo」 Bloo BlooはCC0で配布される250以上のコンポーネントを有したオープンソースのワイヤーフレームキットです。figmaやXD、Skech向けとして公開されています。モバイルファーストとなっていますが、PCサイトでも利用でき...2021.04.04 | 10時10分54秒
任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリ・「Font of Web」 Font of Web Font of Webは任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリです。 解析したいWebサイトのURLを入力すると、そのサイトで利用されているWebフォントや...2020.11.18 | 10時05分34秒
ロゴのダミー画像を無償配布するミニプロジェクト・「Placeholder Logos」 Placeholder Logos Placeholder Logosはロゴのダミー画像を無償配布するミニプロジェクトです。 ダミー用に作られたロゴが8種類、それぞれ6色、テキストありと無しの2種、各種SVGとPNGが用意されて...2020.11.05 | 10時03分43秒
マウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張・「CSS Spider」 CSS Spider CSS Spiderはマウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張です。 起動するとマウスホバーで要素のCSSを自動解析し、その場にclassやI...2020.10.24 | 10時17分32秒