CC0ライセンスの綺麗な写真をダミー画像として使えるOSS・「Unsplash It」
Unsplash It Unsplash Itは著作権放棄で綺麗な写真素材をダミー画像として使えるツールです。CC0の美しい写真を公開、配布しているUnsplashが手がけるダミー画像ツールで、のような簡単なURLのみでダミー画像を埋...
Resource - Webデザイン補助
サンプルコード付きのUIをgifアニメーションにしてギャラリー形式で収集している・「CodeMyUI.com」
CodeMyUI.com CodeMyUI.comはサンプルコードも紹介しているUIチュートリアル記事等をGifアニメを使ってギャッリー形式でまとめているTumblrサイトです。参照元へのリンク、またはCodePenに投稿されたよさ気...
SVGの最適化や操作法、アニメーション等の使い方をまとめた・「SVG ON THE WEB」
SVG ON THE WEB SVG ON THE WEBはSVGの使い方をまとめたガイドラインのドキュメントサイトです。SVGの準備、基本的な使い方、最適化法、CSSやJSによる操作、アニメーションエフェクトの付与やRWDへの対応な...
様々なデバイスの画面サイズ等の情報を一覧化した・「Device Metrics」
Device Metrics Device Metricsは各モバイルデバイスやタブレット、ウェアラブルデバイス（今は主に時計）などのそれぞれの画面に関する情報をまとめたWebサイトです。Google公式の情報ですが、Apple製品や...
モバイルサイト向けのWebサイトビルダー・「Mobirise」
Mobirise Mobiriseはモバイルサイト向けのWebサイトビルダーです。Win及びMac用がそれぞれ用意されており、ドラッグ&ドロップで構築出来るのでコーディングも不要でモバイルフレンドリーなWebサイトを構築出来るとの事で...
様々な企業が採用しているブランドカラーをまとめた・「BrandColors」
BrandColors BrandColorsは様々な企業がブランドカラーとして採用しているカラースキームを確認、各フォーマットでダウンロードできるWebサービスです。掲載されている企業はメーカーからWebサービス運営企業まで様々です...
Webサイトの背景用の動画をCC0ライセンスで公開している・「Coverr」
Coverr CoverrはWebサイトの背景用の動画をパブリックドメインで公開、配布しているWebサイトです。毎週月曜日に7つの動画を配布するみたい。動画を背景にする為のJavaScriptやCSS、HTML等のコードも書いてくれて...
商用利用も可能な動画やモーショングラフィックを無料配布するビデオストックサイト・「VIDEVO」
VIDEVO VIDEVOは動画やモーショングラフィックを無料で配布する動画ストックサイトです。結構な数が用意されてるみたいですね。商用利用も可能ですが、クレジットの有無等、詳細はそれぞれ異なるので利用の際はご確認下さい。ダウンロード...
スマフォTodoリストアプリのPhotoshopとSketch向けUIキット・「Free to-do app UI kit for Photoshop and Sketch」
Free to-do app UI kit for Photoshop and Sketch Free to-do app UI kit for Photoshop and SketchはスマフォTodoリストアプリの為のPhotos...
CSSのボックスモデルをインタラクティブに視覚化してくれる・「angular interactive box-model diagram」
angular interactive box-model diagram angular interactive box-model diagramはCSSにおけるボックスモデルをインタラクティブに視覚化してくれるツールです。サイズ...
背景色を指定するとWCAGのガイドラインに基づいたテキストカラーをピックアップしくれるカラーツール・「COLOR SAFE」
COLOR SAFE COLOR SAFEは背景色を設定すると、WCAGガイドラインに基づいたテキストカラーをパレットにして提出してくれるアクセシビリティカラーツールです。任意のテキスト、フォントの種類やサイズ、太さの指定も可能となっ...
閲覧中のWebページのワイヤーフレームをオーバーレイ表示出来るChromeエクステンション・「Instant Wireframe」
Instant Wireframe Instant Wireframeは閲覧中のWebページのワイヤーフーレムを表示するChrome拡張です。起動すると閲覧しているWebページの画像部分がダミー画像になったりコンテナがオーバーレイ表示...
レスポンシブWebデザインに対応している各CSSフレームワークや人気のライブラリの動作テストを手軽に行える・「Codeply」
Codeply CodeplyはBootstrapやFoundationなどのRWDに対応したフレームワークをベースに、jQueryやBackbone.js、Underscore.js、Angular.jsなどのライブラリの動作テスト...
FoundationやBootstrapを使用しているWebサイト上にグリッドを表示するブックマークレット・「Grid displayer」
Grid displayer Grid displayerはFoundationやBootstrapといった人気のフレームワークを使用したWebサイト上にグリッドを表示させるブックマークレットです。単純にグリッドを表示させるだけでなく...
llustratorで作成したAIファイルをHTMLにコンバートするスクリプト・「ai2html」
ai2html ai2htmlはAIファイルをHTMLに変換する為のスクリプトです。AIファイル内のオブジェクトを解析、処理してHTMLファイルにコンバートするみたいです。オプション機能としてコンバートの際に任意の拡張子への変更やjP...
emやpx、remなど、CSSで使う単位のサイズを比較出来る・「CSS Ruler」
CSS Ruler CSS Rulerはemやrem等のCSSで使う単位のサイズを比較出来るツールです。値を変えることでどの単位がどう変化するかを確認出来るようになっています。また、それぞれのエレメントにマウスホバーすれば簡単な説明も...
Sketchのプラグインやリソースをまとめている・「sketch.land」
sketch.land sketch.landはドローツールのSketchで使えるプラグインやリソースをまとめているハブサイトです。レイヤーのソートやオブジェクトのスケーリングツール、プラグインマネージャなど、ユーザーが開発・公開して...
2色を選んでマテリアルデザイン向けのカラースキームを作成してくれる・「Material Palette」
Material Palette Material Paletteは用意された色から2色を選ぶと自動でマテリアルデザイン向けのカラースキームを作成してくれるツールです。選択するとスマフォで実際に使ったようなサンプルとカラースキーム、ダ...
ブラウザで使えるモダンデザインなインタラクションデザインツール・「Plexi」
Plexi Plexiはブラウザで動作するモダンデザインなUIのインタラクションデザインツールです。シンプルで分かりやすい印象です。プロトタイプを作成出来る・・・はずなんですが、Windowsでは動作しませんでした。OSXもWinもサ...
Webサイトのスタイルガイド作成の為のリソースをまとめている・「Website Style Guide Resources」
Website Style Guide Resources Website Style Guide ResourcesはWeb[サイトのスタイルガイドを作成する為のリソースをまとめているWebサイトです。チームで管理する際に作業を円滑...
閲覧中のWebページに使われているCSSを解析してくれるChromeエクステンション・「CSS Dig」
CSS Dig CSS Digは閲覧しているWebページに使われているCSSを解析してくれるChromeエクステンションです。どのプロパティがどのように扱われているかを分析し、左カラムにリストにして返してくれます。クリックすれば右カラ...
SASS向けのカラーライブラリ・「Color Me SASS」
Color Me SASS Color Me SASSはSASS用のカラーライブラリです。彩度や明度等の指定をする事でカラーコードを書ける、というもの。色の混合も出来るみたい。一部の方には便利かも。ライセンスは・・・ ☺ライセンス、と...