スクロールと動画を同期させるJavaScriptライブラリ・「ScrollyVideo.js」
ScrollyVideo.js ScrollyVideo.jsはスクロールと動画を同期させるJavaScriptライブラリです。スクロールすると動画が再生する、ではなくて、スクロールに応じて動画が進む感じです。 このライブラリは...
Resource - Webデザイナー向け
開発者向けや各計算機、金融系など300以上の様々なWebツールを開発、公開している・「kodytools」
kodytools kodytoolsは開発者向けや各計算機、金融系など300以上の様々なWebツールを開発、公開しているツールハブサイトです。 数か月で300以上のツールを開発してきたそうで、これらはその結果を公開したものにな...
イラストメーカーも用意、様々な業種も用意された人物イラストがメインで1万点以上用意された国産イラスト配布サイト・「KuKuKeKe」
KuKuKeKe KuKuKeKeは様々な業種も用意された人物イラストがメインの国産イラスト配布サイトです。同じタッチのイラストを自分の希望通りに生成できるイラストメーカーも用意されています。 主に人物を扱っており、多様な業種や...
ローカルフォントのスタイルを任意のテキストで一括テストできるWebアプリ・「Localfonts」
Localfonts Localfontsはローカルフォントのスタイルを任意のテキストで一括テストできるWebアプリです。自身の端末にインストールされているフォントをブラウザでテストできる、というもの。 Local Font A...
Tailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリ・「Sailboat UI」
Sailboat UI Sailboat UIはTailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリです。150以上の汎用的でシンプルなコンポーネントが揃えられています。 具体的には、アコーディオ...
AIによるシームレスなパターン背景を生成できる・「PatternedAI」
PatternedAI PatternedAIはAIによるシームレスなパターン背景を生成できるパターン生成Webアプリです。生成にはユーザー登録（Googleアカウントでログイン）が必要です。 左右上下のどこに並べても繋ぎ目の無...
ダイアグラム生成用言語のD2の使い方をオンラインで学べる・「D2 Playground」
D2 Playground D2 Playgroundはダイアグラム生成用言語のD2の使い方をオンラインで学べるWebアプリで、D2公式のアプリとなっています。 D2は宣言型ダイアグラム（Declarative Diagramm...
任意のWebページの静的プレビューを取得し、共有できるブラウザ拡張・「Mirrorful」
Mirrorful Mirrorfulは任意のWebページの静的プレビューを取得し、共有できるブラウザ拡張です。スクリーンショットのやり取りを無くして表示の共有を簡単にしよう、というもののようです。 いわゆる魚拓的なツールで、任...
モダンで美しいオープンソースのTailwind.cssコンポーネント集・「Ripple UI」
Ripple UI See the Pen Untitled by kachibito (@kachibito) on CodePen. Ripple UIはモダンで美しいオープンソースのTailwind.cs...
開発者やデザイナー、マーケター、ライターなど向けのツールを無料で使えるもののみ収集している・「Mr. Free Tools」
Mr. Free Tools Mr. Free Toolsは開発者やデザイナー、マーケター、ライターなど向けのツールを無料で使えるもののみ収集しているコレクションサイトです。 無料といって形態は多様化していて一概に言えませんが、...
WebフォントやSVGの他、FigmaやVue、React、Flutterなどもサポートされている2300以上のオープンソースアイコンプロジェクト・「Atlas Icons」
Atlas Icons Atlas Iconsは2300以上もの多種多様なアイコンを大量にまとめたオープンソースのアイコンプロジェクトです。ベーシックなものからニッチなニーズに応えたものまで多岐にわたります。 アイコンはSVGで...
アニメーション付与も可能な、ピクセルアートなどローポリ専用のオープンソース3Dモデルエディター・「Blockbench」
Blockbench Blockbenchはアニメーション付与も可能な、ピクセルアートなどローポリ専用のオープンソース3Dモデルエディターです。 マイクラ的なローポリゴンな3Dモデルを直感的な操作でデザイン出来る、というものでフ...
Web上での様々な活動に貢献してくれそうな無料ツールを大量に公開している・「1Tools」
1Tools 1ToolsはWeb上での様々な活動に貢献してくれそうな無料ツールを大量に公開しているWebアプリコレクションサイトです。他サイトの紹介ではなく、全て自サイトで開発し、全て無料で利用できるよう公開されています。 ...
クロスプラットフォームで動作するオープンソースのリモートデスクトップツール・「HopToDesk」
HopToDesk HopToDeskはクロスプラットフォームで動作するオープンソースのリモートデスクトップツールです。Windows、Mac、Linux、Android、iOS、Raspberry Piなどで動作するそうです。 ...
Tailwind.css+ Alpine.jsのコードをプレビューとエディター付きで探せる・「Windl」
Windl WindlはTailwind.css+ Alpine.jsのコードをプレビューとエディター付きで探せるWebサイトです。オープンソースのコミュニティベースとなっているそうです。 パンくずやフォーム、カード、モーダルや...
ダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSS・「Bahunya」
Bahunya Bahunyaはダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSSです。ナビゲーションはネストにも対応しています。 セマンティックなHTML要素でWebサイトやWebアプリを設計...
WCAG に準拠した色の組み合わせを簡単に作成できるWebアプリ・「Accessible color palette generator」
Accessible color palette generator Accessible color palette generatorはWCAG（Web Content Accessibility Guidelines）に準拠した...
最新テクノロジーに関するアイコンをフォントで提供するアイコンセット・「Futicons」
Futicons Futiconsは最新テクノロジーに関するアイコンをフォントで提供するアイコンセットです。最新テクノロジーという言葉に反応される方も少なくないかもしれませんがまぁさほど深い意味を成さないタイトルなのでご容赦ください。...
Material Designの原則に従ってデザインされたオープンソースのアイコンライブラリ・「Circum」
Circum CircumはGoogleのMaterial Design及びIBMのCarbon designの原則に従ってデザインされたオープンソースのアイコンライブラリです。ReactやVue、Svelteなどもサポートされていま...
開発者やマーケター、デザイナー等に有益なツールやリソースを探せる・「Resource.fyi」
Resource.fyi Resource.fyiは開発者やマーケター、デザイナー等に有益なツールやリソースを探せるキュレーションサイトです。 従来のこの手の際と同様、カテゴリやキーワードから探す形になります。カテゴリはAPIや...
汎用的で使いやすいオープンソースのSVGアイコンのセット・「Slim icons」
Slim icons Slim iconsは汎用的で使いやすいオープンソースのSVGアイコンのセットです。100のベーシックなアイコンがSVGで揃えられています。 ハンバーガーやメール、サーチ、ホーム、アラートや矢印など一般的な...
任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Quality CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを...