Resource - Webデザイナー向け

CSS-Tricksによるコーディングに最適なフォントのまとめ・「Coding Fonts 」

Coding Fonts Coding FontsはCSS-Tricksによるコーディングに最適なフォントのまとめサイトです。 先日ご紹介したDev Fontsと異なり、肝心のコードは確認出来るものの、画像となっていて実際に打...

高性能なコラボレーションホワイトボードWebアプリ・「BeeCanvas」

BeeCanvas BeeCanvasは高性能なコラボレーションホワイトボードWebアプリです。複数人で使えるチーム向けとなっています。 SSのように一応日本語化されていますので英語が苦手な方でも使えそうですね。UIもシ...

任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリ・「Font of Web」

Font of Web Font of Webは任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリです。 解析したいWebサイトのURLを入力すると、そのサイトで利用されているWebフォントや...
Ads

各SNSやWebアプリなどのアイコンを全て1KB以下で作られた軽量SVGアイコン集・「Super Tiny Icons」

Super Tiny Icons Super Tiny Iconsは各SNSやWebアプリなどのアイコンを全て1KB以下で作られた軽量SVGアイコン集です。 TwitterやInstagram、Tumblrなどお馴染みのSNSや...

任意のSVGファイルをアップロードして色を変更したり背景を追加したりできるオンラインSVGエディタ・「Iconscout Icon Editor」

Iconscout Icon Editor Iconscout Icon Editorは任意のSVGファイルをアップロードして色を変更したり背景を追加したりできるオンラインSVGエディタです。 アップロードするSVGを選択するか...

シンプルなものからユニークなものまで様々なSVGパターン背景を作れるオープンソースのWebアプリ・「Pattern Monster」

Pattern Monster Pattern Monsterはシンプルなものからユニークなものまで様々なSVGパターン背景を作れるオープンソースのWebアプリです。 波状や罫線、レンガ状、方眼紙、、サークルを使ったものやスクエ...

シンプルで視認性の高いオープンソースのアイコンフォント・「Essentials」

Essentials Essentialsはシンプルで視認性の高いオープンソースのアイコンフォントです。GPLライセンスの元で配布されています。 300ほどのアイコンフォントが用意されており、インストールする事で設定された文字を...

任意の写真から複数の色を抽出してカラーコードをコピーしたり、まとめてJSONでエクスポート可能なOSS・「Color Pick.」

Color Pick. Color Pick.は任意の写真から複数の色を抽出してカラーコードをコピーしたり、まとめてJSONでエクスポート可能なカラーピッカーWebアプリです。 任意の写真を読み込むと表示され、写真の好きな場所か...

多数のコンポーネントも用意されたFlexboxベースのモダンなCSSフレームワーク・「OrbitCSS」

OrbitCSS See the Pen eYzLLbZ by kachibito (@kachibito) on CodePen. OrbitCSSは多数のコンポーネントも用意されたFlexboxベースのモダ...

ロゴのダミー画像を無償配布するミニプロジェクト・「Placeholder Logos」

Placeholder Logos Placeholder Logosはロゴのダミー画像を無償配布するミニプロジェクトです。 ダミー用に作られたロゴが8種類、それぞれ6色、テキストありと無しの2種、各種SVGとPNGが用意されて...

沢山のオープンソースなアイコンプロジェクトを収集し、横断検索したりオリジナルのパックを作成してダウンロードできる・「Icônes」

Icônes Icônesは沢山のオープンソースなアイコンプロジェクトを収集し、横断検索したりオリジナルのパックを作成してダウンロードできるWebアプリです。 90種近いアイコンプロジェクトが纏められており、それぞれのプロジェク...

コンポーネントとユーティリティ重視のCSSフレームワーク・「Cirrus.CSS」

Cirrus.CSS Cirrus.CSSはコンポーネントとユーティリティ重視のCSS(SCSS)フレームワークです。ラピッドプロトタイピングを目的に開発したそうです。 レスポンシブで軽量、モジュール式なので無駄もなく、既存の人...

ゆるいタッチのシンプルなSVG線画アイコンセット・「Streamline free DSP package」

Streamline free DSP package Streamline free DSP packageはゆるいタッチのシンプルなSVG線画アイコンセットであるStreamlineの無料版です。 Streamlineでは3...

必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワーク・「Screen」

Screen See the Pen gOMvVwb by kachibito (@kachibito) on CodePen. Screenは必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワークです。 ...

ジグザグや方眼紙、ストライプなど、シンプルなパターン背景をCSSのコードで提供する・「CSS Background Patterns」

CSS Background Patterns CSS Background Patternsはジグザグや方眼紙、ストライプなど、シンプルなパターン背景をCSSのコードで提供するシンプルなWebアプリです。 オブジェクトのサイズ...

任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」

dragmove.js See the Pen WNxjgOe by kachibito (@kachibito) on CodePen. dragmove.jsは任意の要素をドラッグ移動の操作が出来るようにする軽量ス...

アートな背景パターンを生成できるパターンジェネレーター・「PatternPad」

PatternPad PatternPadはアート風の背景パターンを生成できるWebアプリです。色やデザインも指定する事が出来ます。 設定できる項目は色、カラム数、スタイルとなっています。スタイルは既に用意されている雛型から選ぶ...

マウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張・「CSS Spider」

CSS Spider CSS Spiderはマウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張です。 起動するとマウスホバーで要素のCSSを自動解析し、その場にclassやI...

RoughJSを使ったラフなタッチのFontAwesome・「Rough Awesome Font」

Rough Awesome Font Rough Awesome FontはRoughJSを使ったラフなタッチのFontAwesomeアイコン集です。RoughJSを使ってFontAwesomeの無償版のアイコンをラフ絵に変換したSV...

カスタマイズ性、拡張性を重視して設計された非依存型のメディアプレーヤー・「vime.js」

vime.js vime.jsはカスタマイズ性、拡張性を重視して設計された非依存型のメディアプレーヤーです。 基本的には単体で動作しますが、ReactやVue、Svelteなど他フレームワークもサポートされています。 動画...

小さなサイズでも形状を認識できるようデザインされたオープンソースのミニマルなアイコンセット・「Radix Icons」

Radix Icons Radix Iconsは小さなサイズでも形状を認識できるようデザインされたオープンソースのミニマルなアイコンセットです。 15×15のとても小さなサイズで設計されていますが、どれも視認性を損なう事無く、ど...

ブラウザでTailwindのカスタマイズテストが出来る・「Tailwind Play」

Tailwind Play Tailwind PlayはブラウザでTailwindのカスタマイズテストが出来るWebアプリです。公式サイトが公開してるみたいです。 CSSとHTMLの編集は勿論、エリアの分割や異なるモニタサイズで...
Ads