Resource - Webデザイナー向け

線で描かれたシンプルなアイコン200以上を配布する・「Iconbros」

Iconbros Iconbrosは線で描かれたシンプルなアイコンを配布するプロジェクトです。現在までで200以上のアイコンがPNGとSVGフォーマットで配布されています。数はまだ増えているようです。ライセンスポリシーに同意すればダウ...

Bootstrap 4向けのモダンで軽量なUIキット・「Shards」

Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...

UI制作の際に役立ちそうなツールやリソース等の情報をまとめた・「designer lynx」

designer lynx designer lynxはUI制作の際に役に立つかもしれない情報をキュレーションしているWebサイトです。デザインギャラリーやカラーツールやプロトタイプツール、アイコンやタイポグラフィの情報などなど。施工...
Ads

任意の画像をデバイス画像に合成し、任意の画像やテキストも挿入できるモックアップ作成ツール・「MOCKUP GENERATOR」

MOCKUP GENERATOR MOCKUP GENERATORはさまざまなデバイスのモニタ画面に任意の画像を合成してモックアップを作成できるジェネレーターです。先発サービスとの相違点は、合成だけでなく、任意のテキストや画像も挿入で...

手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」

PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...

Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」

jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...

UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」

Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...

シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」

Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...

URL入力だけでスマフォやタブレットで閲覧した際のスクショをまとめて撮れる・「Responsive Screenshots」

Responsive Screenshots Responsive ScreenshotsはURLを入力するとそのアドレスをスマフォやタブレット、ノートやデスクトップPCで閲覧した際のスクリーンショットをまとめて撮ってくれるWebサー...

ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」

pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...

CSSのみで手軽に実装出来るモーダルウィンドウライブラリ・「Light Modal」

Light Modal Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニ...

音声付きのプレゼンテーションを作成できるサービス・「Draftsend」

Draftsend DraftsendはPDFファイルに音声を付けたプレゼンテーションを作成、公開できるWebサービスです。PDFをアップロードし、タイトルと説明文を入力すると、音声挿入画面に移行しますので、マイクで音声を追加していく...

MarkdownやLaTeXをサポートしている超シンプルなWebテキストエディタ・「Writing」

Writing Writingは超シンプルなブラウザ上で動くWebテキストエディタです。MarkdownやLaTeXをサポートしています。上図はTeX Wikiさんで書かれていたコードです。左ペインに書くと右ペインに出力されます。多く...

豊富なコンポーネントを揃えたモジュール式のオープンソースUIツールキット・「One-Nexus」

One-Nexus One-NexusはオープンソースのUIキットです。豊富なコンポーネントを揃えているだけでなく、UIモジュールを作成するためのフレームワーク、Synergyを導入する事でモジュール形式にされたパワフルなキットとして...

著名なWebサービスやツールの代替となりそうな類似サービスを紹介する・「Product Alternatives」

Product Alternatives Product Alternativesは様々な著名サービス等の代替となりそうな類似サービスを紹介してくれるWebサービスです。スタートアップ企業がどんなツールを使っているかを教えてくれるサー...

jsfiddleライクなエディタやカラーパレット作成ツール等を公開する・「Liveweave.com」

Liveweave.com Liveweave.comはjsfiddleライクなHTML/CSS/JavaScript実行ツールやカラーパレットを生成してSVGやPNGでダウンロードできるツール、CSSツールやベクターツールなどを公開...

css gridのコードを生成できる・「Griddy」

Griddy Griddyはcss gridのコードを手軽に実装できるツールです。実行結果を確認しながらdisplay: grid;のコードを生成してくれます。よくあるやつですね。css gridはちょっと複雑でとっつきにくい感あるの...

Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」

Froala Design Blocks Froala Design BlocksはBootstrapで使えるフォームや地図コンテンツ、フッターや「値段表」、「製品詳細」のようなよく見かけるコンテンツなどをブロック単位にして170種ほ...

編集可能のシンプルなtableを実装するスクリプト・「jquery-fulltable」

jquery-fulltable jquery-fulltableは編集可能のシンプルなtableを実装できるスクリプトです。jQueryに依存します。編集ボタンを押すと編集可能になる、行を追加できる、というシンプルな機能のみになりま...

ユニークなエフェクトを要素に付与できるCSSアニメーションライブラリ・「mimic.css」

mimic.css mimic.cssはユニークなエフェクトを要素に付与できるCSSアニメーションライブラリです。よくあるエフェクトや需要の高そうなエフェクトは先発のライブラリがすでに実装してるので、という事みたいです。どれも使いどこ...

inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」

file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...

CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」

Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...
Ads