匿名で任意のファイルを共有できるOSSなWebアプリ・「beam.cafe」
beam.cafe beam.cafeは匿名で任意のファイルを共有できるOSSなWebアプリです。ログインやユーザー登録などは双方とも不要で共有用のURLを伝えるだけで利用可能です。 ファイルはサーバー上に保存されるのではなく、...
Resource - Webデザイナー向け
様々なブランドのロゴに使用されているフォントを紹介する・「Font In Logo」
Font In Logo Font In Logoは様々なブランドのロゴに使用されているフォントを紹介するWebサイトです。有名なブランドのフォントを探せる検索エンジンとして提供しているそうです。 開発者の所属するデザインチーム...
Webサイトやアプリのデザインや開発の際に役立つリソースやツールを各カテゴリに分けて集約した・「Undesign」
Undesign UndesignはWebサイトやアプリのデザインや開発の際に役立つリソースやツールを各カテゴリに分けて集約したキュレーションサイトです かなり細かいカテゴリに分けられているので迷うことなく目的から必要なツール等...
成功したブランドのWebサイトに焦点を当てたUIデザインギャラリー・「Convertux Interfaces」
Convertux Interfaces Convertux Interfacesは成功したブランドのWebサイトに焦点を当てたUIデザインギャラリーです。 ブランドが何を持って成功しているかは認知の数値に尽きると思うので、特別...
色のコントラストが視覚障害を持つ様々な人にどのように影響するかについて教えてくれる・「Who Can Use」
Who Can Use Who Can Useは色のコントラストが視覚障害を持つ様々な人にどのように影響するかについて教えてくれるユーザビリティツールです。 任意の背景とテキストのカラーを指定すると、色覚異常の各症状のシミュ...
手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリ・「keen-slider」
keen-slider keen-sliderは手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリです。 他ライブラリを必要としない非依存型でタッチデバイスファーストな設計となっています。操作もシンプルで様々な用途に使...
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」
Josh.js See the Pen wvMzNYv by kachibito (@kachibito) on CodePen. Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニ...
ブラウザで動作するオープンソースのテキストエディタ・「Writty」
Writty Writtyはブラウザで動作するオープンソースのテキストエディタです。HTML/JavaScript/CSSで作られています ライティングに集中できるよう、ミニマルなUIでツールバーも最小限に、且つサイドに寄せられ...
チャートも含める事が出来るテーブルライブラリ・「AnyGrids」
AnyGrids See the Pen YzwWpoK by kachibito (@kachibito) on CodePen. AnyGridsはチャートも含める事が出来るテーブル生成JavaScriptライブラ...
SVGのカスタムシェイプを直感的に作れるシンプルなWebアプリ・「Shape Divider」
Shape Divider Shape Dividerはヒーローイメージやセクション間で使えそうなSVGのカスタムシェイプを直感的に作れるシンプルなWebアプリです 実際に完成図を見ながらセッティング、作成できるので特別な知識な...
class不要で基本的なスタイルを提供するCSSフレームワーク・「Basic.css」
Basic.css See the Pen GRooBMO by kachibito (@kachibito) on CodePen. Basic.cssはclass不要で基本的なスタイルを提供するCSSフレームワーク...
フォルダの構造をビジュアル化してくれるクロスプラットフォームのファイルマネージャ・「cryo」
cryo cryoはフォルダの構造をビジュアル化してくれるクロスプラットフォームのファイルマネージャです。Windows、Linux、MacOSなどで動作します 左ペインから任意のフォルダを右ペインにD&Dすれば自動でビジュアル...
任意の模様でシームレスなパターンを生成できるWebアプリ・「patternico」
patternico patternicoは任意の模様でシームレスなパターンを生成できるWebアプリです 好みの画像を散りばめたシームレスなパターン画像を完成図を見ながら直感的に作成できる、というもの 画像はFontAwe...
シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」
Grid.js Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指...
いびつな形の要素をSVGで作れるWebアプリ・「Blobs」
Blobs Blobsはいびつな形の要素をSVGで作れるWebアプリです。Web APIのBlobやBinary Large OBjectとは関係なく、単に形状表したものになります アメーバのようなはっきりしない形状のシェイプを...
uilangやAlpine.js等にインスパイアされた、簡単なDOM操作を手軽に行える超軽量スクリプト・「Fluor.js」
Fluor.js Fluor.jsはちょっとしたDOM操作を手軽に行える超軽量スクリプトです。uilangやAlpine.js等にインスパイアされたそう classの付与/除去やクリックイベント、トグルなどなど需要の高そうな操作...
Tailwind CSSで使えるコンポーネントを確認しながらコードをコピーできる・「tailblocks」
tailblocks tailblocksはTailwind CSSで使えるコンポーネントを確認しながらコードをコピーできるWebサイトです 色を変更できる以外に編集可能な箇所はありませんが、よく使うコンポーネントをビジュアルで...
Windows XPライクなUIを提供するCSS・「XP.css」
XP.css See the Pen jObdBOr by kachibito (@kachibito) on CodePen. XP.cssはWindows XPのようなUIを提供するCSSです。以前ご紹介した98....
シンプルで見やすいレイアウトをclass不要で作れるclasslessなCSSフレームワーク・「new.css」
new.css See the Pen oNjJXae by kachibito (@kachibito) on CodePen. new.cssはシンプルで見やすいレイアウトをセマンティックなHTMLだけで作れるcl...
Neumorphism(ニューモーフィズム)にインスパイアされたUIキット・「Neumorphism UI」
Neumorphism UI Neumorphism UIはNeumorphism(ニューモーフィズム)にインスパイアされたUIキットです。レイアウトにはBootstrapがベースに使われています Neumorphism、ニュー...
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」
Responsively ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示され...
任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタ・「Norde Source」
Norde Source Norde Sourceは任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタです 各OSに対応したデスクトップアプリで現在は無料で利用する事が出来ます ...