900以上のシンプルなSVGアイコンをオープンソースで提供するアイコンプロジェクト・「Iconoir」
Iconoir Iconoirは900以上のシンプルなSVGアイコンをオープンソースで提供するアイコンプロジェクトです。900という数は、同じアイコンで線画と塗りがある、というものではなく純粋に900種以上のアイコンが用意されています...
Resource - Webデザイナー向け
スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」
animon See the Pen RwpWBqd by kachibito (@kachibito) on CodePen. animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非...
手軽に使えるAIベースのオンラインフォトエディタ・「PhotoKit」
PhotoKit PhotoKitは手軽に使えるAIベースのオンラインフォトエディタです。細かい調整が出来ませんが、基本的に全ての作業を自動で行います。 特定のオブジェクトの切り取り、逆に特定のオブジェクトの除去、各レタッチ、フ...
カスタマイズ性と柔軟性を意識したセマンティックで扱いやすいフロントエンドフレームワーク・「Madosel」
Madosel Madoselはカスタマイズ性と柔軟性を意識したセマンティックで扱いやすいフロントエンドフレームワークです。 レイアウトや各所サイズ、マージンなどを細かくclassで用意したユーティリティメインのCSSフレームワ...
オープンソースとして公開されているBootstrap5ベースの管理画面テンプレート・「Soft UI Dashboard」
Soft UI Dashboard Soft UI Dashboardはオープンソースとして公開されているBootstrap5ベースの管理画面テンプレートです。 名前通り、柔らかい印象のスタイルで長時間見ていても疲れを感じさせな...
任意のWebサイトにコードエディタを実装できるスクリプト・「Copenhagen Editor」
Copenhagen Editor Copenhagen Editorは任意のWebサイトにコードエディタを実装できるスクリプトです。 highlight.jsとfeather iconsが内蔵されていますが、その他のライブラリ...
軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリ・「WinBox.js」
WinBox.js See the Pen GRrzXoo by kachibito (@kachibito) on CodePen. WinBox.jsは軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリで...
ファイルのサイズや数に制限なくユーザー登録等も不要で無料利用できるセキュアなリアルタイムファイル転送サービス・「DirectShare」
DirectShare DirectShareはファイルのサイズや数に制限なくユーザー登録等も不要で無料利用できるセキュアなリアルタイムファイル転送サービスです。転送はファイル選択後に発行されるQRコード、やアクセスコード、URLなど...
150以上のコンポーネントを備えたFigma/Sketch用のUIキット・「Deca」
Deca Decaは150以上のコンポーネントを備えたFigma/Sketch用のUIキットです。 チャートやボタン、ドロップダウンなどなど基本的なものやプライスカード、プログレスなど需要の高いUIなどが揃えられています。 ...
色に関する問題を解決してくれる様々なツールを公開している・「Dopely Colors」
Dopely Colors Dopely Colorsは色に関する問題を解決してくれる様々なツールを公開しているWebサイトです。 Webアプリはパレットツール、グラデーションツール、カラーコードコンバーター、トーンツール、カラ...
軽量で非依存のカスタマイズ可能なパーティクル生成ライブラリ・「tsParticles」
tsParticles See the Pen tsParticles - Monocromatic confetti explosions by Matteo Bruni (@matteobruni) on CodePen...
CC0で配布される250以上のコンポーネントを有したfigmaやXD、Skech向けのワイヤーフレームキット・「Bloo」
Bloo BlooはCC0で配布される250以上のコンポーネントを有したオープンソースのワイヤーフレームキットです。figmaやXD、Skech向けとして公開されています。モバイルファーストとなっていますが、PCサイトでも利用でき...
任意の画像にCSSとSVGによるフィルターをプレビューを見ながら作成できる・「CSS Filters Generator」
CSS Filters Generator CSS Filters Generatorは任意の画像にCSSとSVGによるフィルターをプレビューを見ながら作成できるWebアプリです。 画像はサンプルが用意されていますが、アップロー...
独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」
transition.css transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。 CDNも用意されていますが、配布サイトで数値を調整してコードをコピーす...
任意のCSSアイコンから別のCSSアイコンへの遷移アニメーションのコードを提供する・「CSS ICON animate」
CSS ICON animate CSS ICON animateは任意のアイコンから別のアイコンへの遷移アニメーションを、アイコンも含めて全てCSSで作れるサービスです。 以前ご紹介した、CSSのみで出来たアイコン集のCSS ...
立方体で作るボクセルアートを簡単な操作で作成、公開できる・「VOXELCANVAS」
VOXELCANVAS VOXELCANVASは立方体で作るボクセルアートを簡単な操作で作成、公開できるオンラインのボクセルアートエディターです。 マイクラのような立方体で作るコンテンツを直感的に作成できる、というもの。作成だけ...
Tailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレート・「Cleopatra」
Cleopatra CleopatraはTailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレートです。 最近のCSSフレームワークでは最も注目されているであろうTailwind.cssがベースのダ...
さまざなデザインシステムのUIコンポーネントサンプルを収集している・「The Component Gallery」
The Component Gallery The Component GalleryはさまざなデザインシステムのUIコンポーネントサンプルを収集しているハブサイトです。 様々なデザインシステムは例えばA11YやMozillaな...
大量のコンポーネントが用意されたTailwindベースのUIキット・「TUK」
TUK TUKは大量のコンポーネントが用意されたTailwindベースのUIキットです。Tailwind.cssで設計された様々な手プレートやコンポーネントが用意されており、開発をサポートしてくれます。 全てのコンポーネントは主...
ダミーのテキスト、画像、動画をそれぞれURLで提供する・「ipsm.io」
ipsm.io ipsm.ioはダミーのテキスト、画像、動画をそれぞれURLで提供するダミーコンテンツ生成サービスです。 各々、とてもシンプルで手軽に使えますし、フォーマットも分かりやすいので生成されるURLのルールさえ覚えてし...
ユニークなSVG背景を簡単に作成できるWebアプリ・「Haikei」
Haikei HaikeiはユニークなSVG背景を簡単に作成できるWebアプリです。いくつかの雛形から選んで形状や色、サイズやオブジェクトの数などを決定してDLする、というもの。 用意されている雛型は波状のものやサークル、アメー...
プレーンテキストでフローチャートを作成できるシンプルなOSSのフローチャート作成アプリ・「flowchart.fun」
flowchart.fun flowchart.funはプレーンテキストでフローチャートを作成できるシンプルなOSSのフローチャート作成アプリです。 テキストとインデントと少しの簡単なルールだけで手軽にフローチャートを作成する事...