オンラインでスライドを作成してPWAとして公開できるオープンソースのスライドエディタ・「DeckDeckGo」
DeckDeckGo DeckDeckGoはオンラインでスライドを作成してPWAとして公開できるオープンソースのスライドエディタです。DuckDuckGoとは基本的に関係ないようです。 DeckDeckGoはよくあるスライドエデ...
Resource - Webデザイナー向け
CC0ライセンスの写真や動画を配布するストックサイト・「ISO Republic」
ISO Republic ISO RepublicはCC0ライセンスの、著作権放棄された高品質な写真素材や動画を配布するストックサイトです ドメインも名前もコンセプトも変わってしまいましたが、以前はFOODIE FACTORとい...
Bootstrapベースの管理画面テンプレートを探せる・「BootstrapDash」
BootstrapDash BootstrapDashはBootstrapベースの管理画面テンプレートを探せるWebサイトです 有料/無料が混在しており、有料版はプランによって使用制限があるみたいです。無料版は基本的にはOSSと...
200以上のアニメーションするアイコンを無料で配布する・「Animated Icons」
Animated Icons Animated Iconsは200以上のアニメーションするアイコンを配布するプロジェクトサイトです。 以前ご紹介したんですが、内容もライセンスも変わっていたので改めて こちらは音源配布サイト...
CSS GridとGradientsを使ってランダムにパターンを作成、コードをコピーできる・「CSS Grid-ient」
CSS Grid-ient See the Pen CSS Grid-ient by Jordan Marshall (@TheCSSKing) on CodePen. CSS Grid-ientはCSS GridとG...
CSSによるアニメーションエフェクトの動作確認しながらコードをコピーできる・「CSS Animo」
CSS Animo CSS AnimoはCSSによるアニメーションエフェクトの動作確認しながらコードをコピーできるWebサイトです コードはクリックのみでクリップボードにコピーされるので気に入ったエフェクトをコピペするだけで使え...
アスキーアートのラップトップを作って画像などを組み合わせて使えるCSS・「laptop.css」
laptop.css See the Pen RwbEorO by kachibito (@kachibito) on CodePen. laptop.cssはアスキーアートのラップトップを作って画像などを組み合わせて...
オートセーブ機能付きでMarkdownとプレーンテキストの両ペインでメモを取れるシンプルなOSSメモアプリ・「QuickJots」
QuickJots QuickJotsはオート保存機能が付いたシンプルなメモアプリです。Markdownとプレーンテキストの両ペインにそれぞれメモを残せます 左ペインはMarkdown、右ペインはプレーンテキストエリアで、記述と...
AIで生成された、現実に存在しない10万人の顔の画像を無料で配布する・「100,000 AI-Generated Faces」
100,000 AI-Generated Faces 100,000 AI-Generated Facesは現実に存在しない10万人の顔写真をAIで生成し、無料で配布するプロジェクトです。 写真素材（と言っていいか分かり...
Can I Use?のようにHTMLメールのタグ対応状況を各メールサービスで調査できる・「Can I email…」
Can I email… Can I email…は、Can I Useライクな使い方が出来るHTMLメールタグ対応状況調査ツールです。 HTMLメールで使えるタグは各メールサービスによって制限があったりなかったりして一貫性が無...
指定したWebページ内にあるリンクやボタン等のデフォルト時、ホバー時、フォーカス時のアクセシビリティチェックをしてくれる・「Button Contrast Checker」
Button Contrast Checker Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラ...
CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」
debugCSS.js debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを...
ブラウザでイラストを複数描いてGifアニメーションやmp4でダウンロードできるオープンソースのソフトウェア・「ANIMATE IT」
ANIMATE IT ANIMATE ITはブラウザでイラストを複数描いてGIFアニメやmp4の動画ファイルとしてダウンロードできるアニメーションドローツールです オープンソースとしてソースコードも公開されています。mp4には音...
React.jsによるアプリケーション開発の為のモジュール式UIコンポーネントライブラリ・「Chakra UI」
Chakra UI Chakra UIはReact.jsによるアプリケーション開発の為のUIコンポーネントライブラリです。モジュール式で必要なコンポーネントを必要な分だけ追加するタイプとなっています。 WAI-ARIAに準拠した...
閲覧中のWebページの任意の要素のHTMLとCSSを選択してコードをjsfiddleのようなエディタで確認できるブラウザ拡張・「SnipCSS」
SnipCSS SnipCSSは閲覧しているWebページの任意の要素を選択すると、その要素に使われているHTMLとCSSを検出してjsfiddleのようなエディタで確認できるChromeエクステンションです。 ブラウザの...
実際に使用した風のUIを確認できるカラーパレットジェネレーター・「Muzli Colors」
Muzli Colors Muzli Colorsは実際に使用した風のUIを確認しながらカラーパレットを作成できるカラースキームジェネレーターです。写真をアップロードしてカラーパレットを自動生成する事も可能です。 以前ご...
Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」
pagemap See the Pen KKPqwER by kachibito (@kachibito) on CodePen. pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスク...
任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」
SVG Artista SVG Artistaは任意のSVGにアニメーションエフェクトを付与するWebアプリです。 SVGのコードを貼るか、読み込ませると、コードを解析してCSSを作成、アニメーションさせてくれる、というもの。 ...
Markdownでドキュメントを書いてツリー形式で管理できる国産サービス・「Tree」
Tree TreeはMarkdownでドキュメントを書いてツリー形式で管理できる@sho_yamane氏による日本の国産サービスです。 マインドマップや情報の整理整頓、ストーリー構成やプランニングツールとしての利用を想定...
BootstrapベースでVueやReact、jQuery、Angularなど様々なライブラリに対応可能の、大量のコンポーネントを含んだダッシュボード/管理画面テンプレート・「Airframe」
Airframe AirframeはBootstrapベースのダッシュボードテンプレートです。BootstrapVueやng-bootstrapなどを使う事でVueやAngularなど様々なライブラリに対応できるとのことです。 ...
PHPで書かれたオープンソースのPocketクローン・「wallabag」
wallabag wallabagはオープンソースとして公開されているPocketクローンです。PocketやInstapaper、すでにサービスをシャットダウンしてしまったReadabilityなど、後で読む系サービスの代替アプリが...
SVGによる波状のラインをランダムで作成できるジェネレーター・「Get Waves」
Get Waves Get WavesはSVGによる波状のラインをランダム作成できるジェネレーターです。波は曲線やポリゴン風、凹凸型などを選択可能です。 また、波の色や起伏の頻度なども設定可能です。気に入ったらDLして使う、みた...