モックアップ作成用に作られたSILライセンスの棒状フォント・「MockFlowFont」
MockFlowFont MockFlowFontはモックアップ作成用に作られた棒状のフォントです。SILライセンスで配布されていますので商用でも利用できますね。同じようにBLOKKやRedactedなどの先発フォントもあります。 ...
Resource - Webデザイン補助
任意の色の組合せでアクセシビリティチェック出来る・「Hex Naw」
Hex Naw Hex Nawは任意のカラーの組合せでアクセシビリティチェックが出来るツールです。調べたいカラーコードを入力すればチェック結果を表示してくれます。カラーは12色まで追加可能のようです。この手のは他にもいろいろありますの...
accessibleなカラーパレットの作成をサポートしてくれる・「Accessible color palette builder」
Accessible color palette builder Accessible color palette builderはaccessibleなカラーパレットの作成をサポートしてくれるWebツールです。任意のカラーを5色設定...
美しいグラデーションを大量に収集、CSSをコピーできる・「WebGradients」
WebGradients WebGradientsは美しいグラデーションを大量に収集しているWebサイトです。CSSをコピーできたりPNGでダウンロード出来る他、SketchファイルやPSDも配布してくれています。特にカテゴリで分けて...
データの可視化に関するツールや知識、リソースをまとめている・「dataviz.tools」
dataviz.tools dataviz.toolsはデータの可視化に関するツールやリソース等をまとめているキュレーションサイトです。色や管理画面、ライブラリ、アプリケーションなどに分けられています。かなりよくまとまっていますね。デ...
任意のWordPressのテーマのスタイルをチェックできるテスト用データ・「WP Test」
WP Test WP Testは任意のWordPressテーマのスタイルをチェック出来るテストデータです。純正のユニットテストデータもありますが選択肢の一つとして。使い方は同じようにWPのインポート機能を使ってデータを入れればテスト用...
さまざまなタイプのチャートの特徴や用途、目的など、使い方を解説してくれる・「Chartopedia」
Chartopedia Chartopediaはいろいろなタイプのグラフの使い方を解説してくれるWebサイトです。本サイトはインタラクティブなチャートライブラリを提供するAnyChartが公開した情報で、棒グラフや円グラフ、ドットチャ...
WCAGのガイドラインに沿ったカラーコントラストを複数まとめて確認出来るコントラストテスター・「Colorable Matrix」
Colorable Matrix Colorable MatrixはWCAGのガイドラインに沿ったカラーコントラストを複数まとめて確認出来るテスターです。以前ご紹介したcolorableの進化版？みたいなもののよう。AAA等のスコアも...
Photoshopのツールやリソースを公開する・「UberPlugins」
UberPlugins UberPluginsはPhotoshopのプラグインを紹介するWebサイトです。まぁいわゆるプラグイン販売サイトなんですが、無料のものもちらほらあったので紹介してみます。公開されているプラグインはアバター挿入...
複数のストックフォトサイトやフォント、モックアップ、動画の配布サイトをその場で探せる・「TheStocks」
TheStocks TheStocksはロイヤリティフリーの写真を配布するストックフォトサイトやフォント配布サイト、モックアップ、カラースキームや動画を配布する各サービスをその場で探せるWebサイトです。以前ご紹介したのですが、以前は...
ブラウザで使える、Framer.jsを使ったプロトタイプのインタラクションテストツール・「Prototyp」
Prototyp PrototypはFramer.jsを使ったプロトタイプのインタラクションテストを行えるテストツールです。誰でも無料で利用する事が出来ます。作成したプロトタイプはURLを発行、モバイルデバイスで動作確認も可能です。そ...
任意のカラーを任意の名前で登録、クリップボードにコピーできるシンプルなカラーツール・「HexCandy」
HexCandy HexCandyは任意のカラーコードを任意の名前で登録出来るシンプルなWebアプリです。登録したカラーはクリックすればクリップボードにコピーされるのでカラーパレットとして利用できます。それだけのシンプルな機能ですが、...
任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」
tachyons-x-ray tachyons-x-rayは任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンションです。上図のように、Webページで起動させれば方眼紙のようなグリッドと要素のアウトライン...
Webデザイナー向けのリソースを目的別にまとめている・「Freestack」
Freestack FreestackはWebデザイナー向けのリソースキュレーションサイトです。無料のものを中心に収集しているようです。カラーツールやブラウザの拡張機能、モックアップやストックフォト、タイポグラフィ関連などなど。ざっと...
画像をアップロードすると、その画像内で使われているフォント名を割り出してくれる・「Matcherator」
Matcherator Matcheratorは画像をアップロードすると、その画像内で使われているフォントの名前を割り出してくれるWebサービスです。既存サービスのWhatTheFontやWhatFontIsよりも、優れた性能だそうで...
Web制作に役立つツールやリソースを厳選してまとめている・「StockJo」
StockJo StockJoはWeb制作に役立ちそうなツールやリソースを厳選収集しているWebサイトです。ストックフォトサイトやフォント、動画、モックアップ、音源、カラーツールなどのカテゴリに分けられています。よくある個人のキュレー...
DribbbleやBehanceでフリーで公開されているデザインリソースをまとめている・「DBFreebies」
DBFreebies DBFreebiesはDribbbleやBehanceでフリーで公開されているデザインリソースをキュレーションしているWebサイトです。リソースはアイコンやUIキット、フォント、モックアップ等に分けられています。...
任意のカラーパレットを保存、管理出来るシンプルなデスクトップアプリ・「ClickPalette」
ClickPalette ClickPaletteは任意のカラーパレットを管理できるシンプルなデスクトップアプリです。任意のカラーコードを登録、カラーパレットを作成して保存するだけのシンプルなものです。パレットは複数作成出来て、名前も...
フォント名から利用している主要Webサイトをリストにし、他の利用フォントも教えてくれる・「Font Reach」
Font Reach Font Reachはフォント名で検索すると、そのフォントを実際に利用(設定)している主要なWebサイトのリストを表示してくれるWebサービスです。(例：ヒラギノ角ゴ proを使用しているWebサイト一覧)リスト...
SVGで書かれたワイヤフレーム用のステンシルを検索、ダウンロードできる・「littleplaneapp.com」
littleplaneapp.com littleplaneapp.comはSVGで書いたワイヤーフレーム用のステンシルを探してDL出来るサービスです。SVGでワイヤーフレームを書くという発想が個人的にはあまり無かったのですがブラウザ...
モーショングラフィックスの基本要素を元素記号表で表現した・「モーション周期表」
モーション周期表 モーション周期表はモーショングラフィックスの基本要素を元素記号表で表現したプロジェクトサイトです。武蔵野美大の方の卒業制作作品みたいです。以下、引用。 モーション周期表はモーションへの理解を深めるために作成...
商用でも個人でも無料で利用できるロゴやアイコン、UI、写真、音源、動画などを配布するプロジェクト・「Stocky」
Stocky Stockyは商用でも個人でも無料で利用できる各ベクターグラフィックや高品質な写真、音源、動画などを配布するプロジェクトです。やや小規模なプロジェクトですので数はそう多くはありませんが、他に見ない素材が揃っている印象です...