Resource - シンプル

正規表現のコードを図に可視化する・「Regulex」

Regulex Regulexは書いた正規表現のコードを図に可視化してくれるツールです。書いたコードがどのように動作しているかが把握しやすいので正規表現の勉強に良いかも。MITライセンスの元でオープンソースとしてGithubでも公開さ...

マテリアルデザインを取り入れたレスポンシブWebデザイン対応のCSSフレームワーク・「Materialize」

Materialize Materializeはマテリアルデザインを取り入れたRWD対応のCSSをフレームワークです。Sass対応で、各種コンポーネントも揃っていました。ベーシックで良いんじゃないでしょうか。ライセンスはMITとの事。...

指定箇所のサイズを計測できるPhotoshopのスクリプト・「Size Marks」

Size Marks Size MarksはPhotoshop内で指定した箇所のサイズを計測するスクリプトです。サイズは新しいレイヤーに書きだされるみたいですね。縦はH、横はWが頭文字に付く形でレイヤー名が付けられるのも分かりやすくて...
Ads

Webサイトのパフォーマンスチェックが出来るスクリプト・「PerfBar」

PerfBar PerfBarはWebサイトの簡単なパフォーマンスチェックが出来る非依存型のスクリプトです。任意のWebサイトに埋め込むことでロード時間や待ち時間等をチェック出来る様になります。フロントエンド側でチェックできるので自分...

シンプルで軽量なモバイルファーストのCSSフレームワーク・「Furtive」

Furtive Furtiveはシンプルで軽量なモバイルファーストのCSSフレームワークです。2.5KBという軽さながら、必要最低限のスタイルを保っています。これは個人的に好きかも。ライセンスはMITとの事。 Furtive

雨の音と一緒にジャズ等の音楽をランダムで流す・「Rain, Rhythm and Soul」

Rain, Rhythm and Soul Rain, Rhythm and Soulは雨の音と一緒にジャズやR&B音楽をランダムで流してくれるWebサービスです。リラックスしながら作業したいときに良さそうですね。似たようなサイトは結...

Gmail、Googleカレンダー、Googleドキュメントをまとめてチェック出来る・「Storyline」

Storyline StorylineはGmail、Googleカレンダー、Googleドキュメントの3つのサービスを一括チェック出来るサービスです。1つのタイムラインで更新状況をチェック出来る、というもの。シンプルなインターフェース...

CSSのみで作れるシンプルなチャート・「cssplot」

cssplot cssplotはシンプルなチャートを作る為のCSSです。指定されたカスタムデータ属性に値をいれると、その数値にあった長さでグラフを描けます。仕組みは単純に、1%毎にCSSを書いているだけなので小数点には非対応です。これ...

任意のWebサイトのスコアレポートを提出してくれる調査ツール・「Nibbler」

Nibbler Nibblerは任意のWebサイトのアクセシビリティやソーシャルメディアのサポート状況、害悪なコンテンツの有無、SEO的な部分の評価等を調査し、スコアレポートを提出してくれるツールです。ざっくり調査するなら手軽で良い...

AwwwardsやDribbble、Behanceなどの投稿をざっと見れるインスピレーション向上の為のChromeエクステンション・「Muzli」

Muzli Muzliはデザイナーのインスピレーション向上を目的としたChromeエクステンションです。基本的にはAwwwardsやCSS WinnerなどのデザインギャラリーサイトやDribbble、Behance等のデザイナーのコ...

画像をアップロードして色覚異常をシミュレート出来る・「Coblis」

Coblis Coblisは画像をアップロードして、色覚異常を持った方がどう見えるかをシミュレートできるツールです。異常タイプも選べるようですね。シミュレート可能とは言っても、Hacker Newsで議論されている通り、人によって症状...

シンプルなワイヤーフレーム作成ツール・「wireframe.cc」

wireframe.cc wireframe.ccはシンプルなワイヤーフレーム作成ツールです。既存のブラウザ風のキャンバス上にエレメントを配置し、ワイヤーフレームを作成する事が出来ます。エレメントはいくつかの色に変更したり、ボーダーの...

CSSのclip-pathプロパティで使うコードを手軽に作成出来る・「Clippy」

Clippy Clippyはclip-pathプロパティで使うコードを手軽に作成出来るツールです。用意されたサンプル画像に重ねて確認しながら作成するだけでコードを出してくれます。手軽で良いのでは。尚、画像をアップロードして~と言った類...

ブラウザ上で手軽にチャートを作成、公開出来るWebサービス・「 ChartBlocks」

ChartBlocks ChartBlocksはブラウザ上でチャートを作成、公開出来るWebサービスです。スプレッドシートをアップロードして読み込むか、本ツールで作成し、そのデータを元にチャートを作成、デザインしていきます。作成したチ...

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化しているようです。...

考えやアイデアを整頓してドキュメントとして管理するツール・「Thought Plan」

Thought Plan Thought Planは自分の考えやアイデアを文章化して管理、整頓する為のツールです。OneNoteをもっとシンプルにした感じみたいですね。他ユーザーとの共有・共同作業機能は無いのであくまで自分用になりそう...

少しずつ色が変わるグラデーション背景をCSSで作成出来る・「CSS GRADIENT ANIMATOR」

CSS GRADIENT ANIMATOR CSS GRADIENT ANIMATORは少しずつ色が変わるグラデーション背景をCSSで作成出来るWebサービスです。keyframesを使ってアニメーションさせているみたいですね。なかな...

オープンソースのプロジェクト管理システム・「Taiga.Io」

Taiga.Io Taiga.IoはOSSとして公開されているプロジェクトマネジメントシステムです。既に沢山のプロジェクト管理ツールがあるものの、どれも仕様が肥大化し、自分好みのサービスが見つからない、という理由で等ソフトウェアを構築...

GoogleスプレッドシートをWebサイトに埋め込む為のツール・「Brace Data」

Brace Data Brace DataはGoogleスプレッドシートのデータを任意のWebサイトに埋め込むためのWebサービスです。埋め込みたいスプレッドシートのURLを入力すると、認証を求められるので許可すればJavaScrip...

シンプルで動作も軽いアンケートツール・「Tally」

Tally Tallyはシンプルで軽量なアンケートツールです。質問と選択肢を入力すると、自動でURLが発行されるので投票して欲しい相手に渡せばいいだけ。気軽に使えて良さそうです。 Tally
Ads