デバイス間のフォーム要素のスタイルに差異が出ないようにする為のライブラリ・「Formplate」
Formplate Formplateは異なるデバイスでもフォームの見栄えに差異が生じないようにする為のライブラリです。jqueryとmodernizrに依存しているみたい。スタイルを均一にしたい要素を指定されたclassで包括する必...
Resource - Webディレクター向け
マテリアルデザインのUIコンポーネントを構築する為のCSSフレームワーク・「material ui」
material ui material uiはGoogleの提唱したマテリアルデザインを導入したCSSフレームワークです。各UIコンポーネントも用意されています。Reactとセットになっているみたい。まだよく調べていませんがなかなか...
RWD対応の、Bootstrap向けダッシュボードテンプレート・「Dashboards by Keen IO」
Dashboards by Keen IO Dashboards by Keen IOはBootstrap用の管理画面テンプレートです。レスポンシブWebデザインにも対応しています。Keen IOというのはアクセス解析等のデータを扱う...
Gmail、Googleカレンダー、Googleドキュメントをまとめてチェック出来る・「Storyline」
Storyline StorylineはGmail、Googleカレンダー、Googleドキュメントの3つのサービスを一括チェック出来るサービスです。1つのタイムラインで更新状況をチェック出来る、というもの。シンプルなインターフェース...
任意のWebサイトのスコアレポートを提出してくれる調査ツール・「Nibbler」
Nibbler Nibblerは任意のWebサイトのアクセシビリティやソーシャルメディアのサポート状況、害悪なコンテンツの有無、SEO的な部分の評価等を調査し、スコアレポートを提出してくれるツールです。ざっくり調査するなら手軽で良い...
SASS向けのカラーライブラリ・「Color Me SASS」
Color Me SASS Color Me SASSはSASS用のカラーライブラリです。彩度や明度等の指定をする事でカラーコードを書ける、というもの。色の混合も出来るみたい。一部の方には便利かも。ライセンスは・・・ ☺ライセンス、と...
AwwwardsやDribbble、Behanceなどの投稿をざっと見れるインスピレーション向上の為のChromeエクステンション・「Muzli」
Muzli Muzliはデザイナーのインスピレーション向上を目的としたChromeエクステンションです。基本的にはAwwwardsやCSS WinnerなどのデザインギャラリーサイトやDribbble、Behance等のデザイナーのコ...
WordPressを使ったWebアプリ開発の支援を目的としたフレームワーク・「Themosis framework」
Themosis framework Themosis frameworkはWordPressをベースとしたWebアプリ開発のためのフレームワークです。カスタマイズされた複雑な構成のWebサイトやWebアプリの開発をサポートする、とい...
画像をアップロードして色覚異常をシミュレート出来る・「Coblis」
Coblis Coblisは画像をアップロードして、色覚異常を持った方がどう見えるかをシミュレートできるツールです。異常タイプも選べるようですね。シミュレート可能とは言っても、Hacker Newsで議論されている通り、人によって症状...
デザイナー向けのソーシャルなポートフォリオ・「socialdoe」
socialdoe socialdoeはデザイナー向けのソーシャルポートフォリオサービスです。投稿はPinterestライクなレイアウトで表示されます。フィードバックを送り合ったり、インスピレーションやアイデアを共有するのに役立ててて...
CC0のライセンスで自由に使える動画を配布する・「Life of Vids」
Life of Vids Life of VidsはCC0のライセンスで動画素材を配布しているWebサイトです。著作権が放棄されているので安心して自由に利用できますね。使い所は限られそうですが、覚えておいて損は無さそうです。動画はVi...
書いたHTMLを任意のデバイスでリアルタイムプレビュー出来る・「snap tomato」
snap tomato snap tomatoは任意のデバイスでHTMLをリアルタイムプレビュー出来るツールです。別タブで開いても即反映されるので任意のデバイスで開けば、PCでエディタに書いたコードをスマフォやタブレットで即時確認出来...
シンプルなワイヤーフレーム作成ツール・「wireframe.cc」
wireframe.cc wireframe.ccはシンプルなワイヤーフレーム作成ツールです。既存のブラウザ風のキャンバス上にエレメントを配置し、ワイヤーフレームを作成する事が出来ます。エレメントはいくつかの色に変更したり、ボーダーの...
ドラッグ&ドロップでHTMLメールのスタイルを作成出来る・「BeeFree 」
BeeFree BeeFreeはHTMLメールのスタイリングをD&Dで作成出来るWebサービスです。用意されたエレメントをドラッグして配置、テキスト等を入力するだけ。幅の設定等も出来ます。毎度作り直すケースも考えられるのでこの手のツ...
CSSのclip-pathプロパティで使うコードを手軽に作成出来る・「Clippy」
Clippy Clippyはclip-pathプロパティで使うコードを手軽に作成出来るツールです。用意されたサンプル画像に重ねて確認しながら作成するだけでコードを出してくれます。手軽で良いのでは。尚、画像をアップロードして～と言った類...
アナログ時計スタイルのタイムピッカー・「ClockPicker」
ClockPicker ClockPickerはアナログ時計スタイルのタイムピッカーを実装するライブラリです。jQueryに依存しています。Bootstrap向けのようですね。CSSで見た目もアナログ時計に似せることが出来そう。ライセ...
ブラウザ上で手軽にチャートを作成、公開出来るWebサービス・「 ChartBlocks」
ChartBlocks ChartBlocksはブラウザ上でチャートを作成、公開出来るWebサービスです。スプレッドシートをアップロードして読み込むか、本ツールで作成し、そのデータを元にチャートを作成、デザインしていきます。作成したチ...
Webサイトで使用されているフォントの情報を共有出来る・「Typ.io」
Typ.io Typ.ioはWebサイトで使用されているフォントの情報を共有出来るWebサービスです。使用フォントの名前や、そのフォントの販売先の共有や、タグ付け等が可能のようです。アカウントはTwtterとの連携で取得するみたいです...
OSSとして公開されているGoogle製マテリアルデザインのSVGアイコン・「Material Design Icons」
Material Design Icons Material Design IconsはGoogle製のマテリアルデザインSVGアイコンのセットです。OSSとしてGithubにて公開されています。結構な数が公開されていますね。ライセン...
複数Webサイトからフリーの高品質な写真を探せる・「Stock Up」
Stock Up Stock Upは複数の写真配布サイトから検索出来るフォト検索サービスです。UnsplashやSkitterphotoなどからCC0で高品質な写真を探すことが出来ます。楽でいいですね。ダウンロード前に一応ライセンスは...
シンプルなアイコンのSVGコードを公開する・「SVG Icons」
SVG Icons SVG Iconsはシンプルなアイコンを描いたSVGのコードを公開するWebサイトです。まだ3セットほどですが、分かりやすくて良いですね。dribbbleで公開されているフリーのアイコンをSVG化しているようです。...
CSSフレームワーク・Foundation5のチートシート・「Foundation CheatSheet」
Foundation CheatSheet Foundation CheatSheetはzurb製のRWD対応CSSフレームワークFoundation Ver.5のチートシートです。とても簡潔に、わかりやすく纏められています。実装例も...