Resource - Webデザイナー向け

任意の画像にフィルターを掛けたりリサイズ、切り抜き等の加工を施してダウンロードできるOSSの画像編集ライブラリ・「Filerobot Image Editor」

Filerobot Image Editor Filerobot Image Editorは任意の画像にさまざまなフィルターを掛けたりリサイズ、クロップ、回転などの加工を施したうえでダウンロードできるようにする、画像加工ライブラリです...

コピペで使えてカスタマイズもしやすいCSSアニメーションコードをまとめている・「CSS WAND」

CSS WAND CSS WANDはコピペで使えるように工夫されたCSSアニメーションコードのまとめサイトです。HTMLとCSSをそれぞれコピーして簡単に利用できるようになっています。 まとめと言ってもまだ数は少ないですが、...

CSSフレームワークを元に、直感的な操作でWebサイトを構築できる開発者向けのWebサイトビルダー・「Frontnd Builder」

Frontnd Builder Frontnd BuilderはCSSフレームワークを元に作られたテンプレートから、D&Dによるレイアウト調整やクリック→テキスト編集など、直感的な操作でWebサイトを開発できるWebサイトビルダーです...
Ads

Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」

Flex FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければな...

使いやすさを最重視した、ミニマルで直感的に操作できるUIのフローチャート作成ツール・「Zen Flowchart」

Zen Flowchart Zen Flowchartは使いやすさ重視のミニマルなフローチャート生成ツールです。直感的に操作、作成する事が出来るよう設計されています。出来ることはノードやテキストの追加または移動、ノード同士の接...

Bootstrapに基づいて設計されたミニマルデザインなオープンソース管理画面テンプレート・「Spur」

Spur SpurはBootstrapに基づいて設計されたダッシュボードテンプレートです。ミニマルなスタイルで装飾もほとんどありませんのでフレームワークライクに使う事が出来そうです。チャートを表示したい時はCharts.jsを読み込め...

1000以上ものシンプルなアイコンをsketchファイルやSVG、PSDやFigmaファイルなども同梱して無償配布するオープンソースのアイコンセット・「Material Icons Library」

Material Icons Library Material Icons Libraryは1000種以上のアイコンを無償配布するオープンソースのアイコンセットです。アイコンはSVGで配布されるだけでなく、sketchファイルやPSD...

カラーコードの文字に焦点を当てた実験的なカラーツール・「#c0ffee is the color」

#c0ffee is the color #c0ffee is the colorはカラーコードの文字に焦点を当てた実験的なカラーツールです。ABCDEFのいずれかを含む文字且つ、6文字か3文字の単語を辞書から抽出し、該当するカラーコ...

任意の動画ファイルをアップロードすると、指定したモバイル端末のモックアップに合成した動画ファイルを作成してくれる・「Mock」

Mock Mockは任意の動画ファイルをアップロードすると、指定したモバイルデバイスのモックアップ画像のモニター部分に合成した新しい動画ファイルを作成してくれるWebアプリです。作成された動画ファイルはアップロード時に指定したメールア...

Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」

Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...

レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」

maturity-radar See the Pen MdLMKo by kachibito (@kachibito) on CodePen. maturity-radarはレーダーチャートを作成できるスクリプトで...

複数のストックフォトサイトからCCやパブックドメインなどの写真を横断検索できる・「Image Finder」

Image Finder Image Finderは複数のストックフォトサイトからCC0やパブリックドメイン、そのほかのCCライセンスの写真を横断検索できるWebアプリです。 対象サイトはpicjumboやPixabay、Goo...

様々なWebアプリのコンテンツ単位のスクリーンショットをデザインギャラリーに収集している・「Webframe」

Webframe WebframeはさまざまなWebアプリのFAQページや料金表ページ、LPやログインフォームなどコンテンツ単位のSSをデザインギャラリーとして掲載しているWebアプリ専用デザインギャラリーです。 カテゴリはコン...

複数デザイナー向けコミュニティやインスピレーションサイトを任意のカラーコードやキーワードで横断検索できる・「Muzli Search」

Muzli Search Muzli Searchはさまざまなデザインインスピレーションサイトやコミュニティを任意のカラーコードやキーワード等で横断検索できるデザイン検索エンジンです。以前ご紹介したChromeエクステンションのMuz...

Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」

Fork Awesome Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont ...

Webデザイナー向けに役立ちそうなリソースをまとめている・「Neede Design Resources」

Neede Design Resources Neede Design ResourcesはWebデザイナーやUI、UXデザイナーなどデザイナー向けのリソースを大量にまとめているキュレーションサイトです。ブランディングやカラー...

自動で背景を除去してくれるremove.bgに、各OSに対応したデスクトップアプリが登場・「remove.bg for Windows/Mac/Linux」

remove.bg for Windows/Mac/Linux remove.bg for Windows/Mac/Linuxは自動で背景を除去してくれるremove.bgのデスクトップアプリ版です。先日Photoshopでも使えるよ...

大学の学生や教授が共同で作った3000以上の絵文字を公開するオープンソースのemojiプロジェクト・「OpenMoji」

OpenMoji OpenMojiは学生53人と2人の教授が共同で進めているオープンソースの絵文字プロジェクトです。現在3000以上ものSVGアイコンが本プロジェクトのスタイルガイドに従い、一貫したスタイルで作成、公開されてお...

Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」

DropCSS DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。 ...

カラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれる・「Accessible Color Generator」

Accessible Color Generator Accessible Color Generatorは任意のカラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれるWebアプリです。提案してくれるのは...

高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」

Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...

クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」

CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...
Ads