2色を選んでマテリアルデザイン向けのカラースキームを作成してくれる・「Material Palette」
Material Palette Material Paletteは用意された色から2色を選ぶと自動でマテリアルデザイン向けのカラースキームを作成してくれるツールです。選択するとスマフォで実際に使ったようなサンプルとカラースキーム、ダ...
Resource - Webディレクター向け
CSSのみで作られたスマフォ向けのカレンダーアプリデザイン・「CSS-only Calendar App Concept」
CSS-only Calendar App Concept CSS-only Calendar App ConceptはCSSのみで作られたスマフォ向けのカレンダーアプリ用のスタイルです。日付の選択からカラー変更までをCSSのみで作れ...
HTML5製の軽量リッチテキストエディタ・「Squire」
Squire Squireは軽量なHTML5製リッチテキストエディタです。ケース次第では余計なものと扱われる部分を省いて軽量化を重視し、あくまでコンポーネントとして提供しているそうです。その為、ツールバーなどのUIは用意されていない（...
シンプルでミニマル設計なRWD対応の軽量CSSフレームワーク・「MNML」
MNML MNMLはシンプルでミニマルな設計のCSSフレームワークです。SASS、レスポンシブWebデザイン対応で2kbほどの軽量なものとなっています。悪く言えば特徴が有りませんが、特徴は自分の手で付加していきたい、という方には重宝さ...
モバイルアプリの為のUIフレームワーク・「Touchstone.js」
Touchstone.js Touchstone.jsはモバイルアプリのためのUIフレームワークです。React.jsベースのようですね。美しくハイブリッドなアプリの構築をサポートしてくれる・・との事ですが、まだロードマップを見る限り...
女性や子供の為に立ち上げられたWeb制作技術を学ぶ為のリソースを提供するプロジェクト・「Ladies Learning Code」
Ladies Learning Code Ladies Learning Codeは女性やキッズ向けのWeb制作を学ぶためのリソースを提供する、非営利団体の立ち上げたプロジェクトサイトです。WordPressやHTML5、Photos...
商用でも無料で利用可能なHD動画を配布する・「Distill」
Distill Distillは商用利用でも無料のHD動画を共有、配布するWebサービスです。やや短めではありますが映像のクオリティは高そうです。まだ数は多くはないので今後増えてくれるよう期待したい所ですね。所謂写真素材の配布サイト同...
Webサイトの様々なヘルプコンテンツを追加出来るスクリプト・「FAQtoid」
FAQtoid FAQtoidはWebサイトに様々なヘルプ機能を追加するためのスクリプトです。jQueryに依存しています。動画や開閉式のFAQ、送信フォームやWebサイトツアーを、モーダルウィンドウ内に複数収めることが可能で、モーダ...
ブラウザで使えるモダンデザインなインタラクションデザインツール・「Plexi」
Plexi Plexiはブラウザで動作するモダンデザインなUIのインタラクションデザインツールです。シンプルで分かりやすい印象です。プロトタイプを作成出来る・・・はずなんですが、Windowsでは動作しませんでした。OSXもWinもサ...
SASSとJekyllで構築されたフロントエンド開発フレームワーク・「Muffin」
Muffin MuffinはSASSとJekyllで構築されたフロントエンド開発のためのテンプレートです。インストール後すぐに開発作業を始められるような設計を目指したみたい。SVGアイコンやTwitter Bootstrapもサポート...
Web制作の際に作成するフローチャートやワイヤーフレームの為の素材集・「UI TILES」
UI TILES UI TILESはWeb制作プロジェクトの際に作成されるフローチャートやサイトマップ、ワイヤーフレーム作成時に使える素材のキットです。フォーマットもPSDやAI、Sketchなどが用意されています。シンプルで使いやす...
任意の画像をアップロードし、PCモニター画像に合成してモックアップを作成してくれる・「Magic Mockups」
Magic Mockups Magic Mockupsは任意の画像を、予め用意されているPCのモニター画像に合成してくれるジェネレーターです。以前ご紹介したPlaceItと同じようなサービスになりますが、Magic Mockupsは合...
ビジネス用Webアプリ構築の為のCSSフレームワーク・「Flakes」
Flakes Flakesはビジネス用のWebアプリ構築の為に公開されたCSS/JavaScriptフレームワークです。RWDやSASSにも対応済み。ダッシュボードに必要なUIやチェックボックス、フィルタ機能付きのテーブルなどのコンポ...
クレジットカードやPayPalなどの決済系のSVGアイコンフォントのセット・「PaymentFont」
PaymentFont PaymentFontは決済周りでよく使われるSVGアイコンフォントのセットです。基本的に海外サービスのアイコンが多いのですが円のアイコンやクレジットカードなどは使えるので備忘録として。フォントはOFL、CSS...
行単位でCSSを適応させるスクリプト・「LINING.JS」
LINING.JS LINING.JSは行単位でCSSを適応させる為のスクリプトです。非依存型で単体で動作してくれます。カスタムデータ属性を使って1行毎に任意のスタイルを作れる、みたいなやつ。上記のスクショは表示時に、1行毎にスライド...
Dropboxに置いているCSVやGoogleスプレッドシートのデータをグラフ化するOSS・「CHARTED」
CHARTED CHARTEDはDropboxに置いたCSVやGoogleスプレッドシートのデータを元にグラフに可視化するツールです。OSSとしてGithubでもソースコードが公開されています。Mediumのスタッフ作らしいです。...
任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」
CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...
Webサイトのスタイルガイド作成の為のリソースをまとめている・「Website Style Guide Resources」
Website Style Guide Resources Website Style Guide ResourcesはWeb[サイトのスタイルガイドを作成する為のリソースをまとめているWebサイトです。チームで管理する際に作業を円滑...
指定箇所のサイズを計測できるPhotoshopのスクリプト・「Size Marks」
Size Marks Size MarksはPhotoshop内で指定した箇所のサイズを計測するスクリプトです。サイズは新しいレイヤーに書きだされるみたいですね。縦はH、横はWが頭文字に付く形でレイヤー名が付けられるのも分かりやすくて...
閲覧中のWebページに使われているCSSを解析してくれるChromeエクステンション・「CSS Dig」
CSS Dig CSS Digは閲覧しているWebページに使われているCSSを解析してくれるChromeエクステンションです。どのプロパティがどのように扱われているかを分析し、左カラムにリストにして返してくれます。クリックすれば右カラ...
シンプルで軽量なモバイルファーストのCSSフレームワーク・「Furtive」
Furtive Furtiveはシンプルで軽量なモバイルファーストのCSSフレームワークです。2.5KBという軽さながら、必要最低限のスタイルを保っています。これは個人的に好きかも。ライセンスはMITとの事。 Furtive
CSS3+HTML5のアニメーションを作成出来るOSSのエディタ・「Mixeek」
Mixeek MixeekはCSS3やHTML5を利用したアニメーションコンテンツを作成する為のエディタです。ブラウザで動くツールになります。MITライセンスの元、オープンソースとして公開されています。便利っちゃ便利ですが個人的にはも...