シンプルで見やすいHTMLリファレンス・「htmlreference.io」
htmlreference.io htmlreference.ioはシンプルで見やすいHTMLリファレンスサイトです。トップページではタグが一覧になっており、ブロック要素、インライン要素、metaタグなどがひと目で分かるようになってい...
Resource - Archives
美しいグラデーションを大量に収集、CSSをコピーできる・「WebGradients」
WebGradients WebGradientsは美しいグラデーションを大量に収集しているWebサイトです。CSSをコピーできたりPNGでダウンロード出来る他、SketchファイルやPSDも配布してくれています。特にカテゴリで分けて...
データの可視化に関するツールや知識、リソースをまとめている・「dataviz.tools」
dataviz.tools dataviz.toolsはデータの可視化に関するツールやリソース等をまとめているキュレーションサイトです。色や管理画面、ライブラリ、アプリケーションなどに分けられています。かなりよくまとまっていますね。デ...
ディープラーニングでHTMLにclassを自動付与してくれる・「CSSRooster」
CSSRooster CSSRoosterはディープラーニングでHTMLコードを分析し、適切なclass名を自動付与してくれるWebツールです。1000以上のWebサイトのHTML構造を学習し、適切なclass名を自動で与える、という...
液体の流れをリアルに再現したOSSのペイントツール・「Fluid Paint」
Fluid Paint Fluid Paintは流体の流れをリアルに再現したペイントツールです。筆も表現されていますが、こちらはなんか筆に見えないので個人的には微妙ですね・・ｗ でも動きは面白いです。こんなのリアルじゃ有り得ないって感...
任意のWordPressのテーマのスタイルをチェックできるテスト用データ・「WP Test」
WP Test WP Testは任意のWordPressテーマのスタイルをチェック出来るテストデータです。純正のユニットテストデータもありますが選択肢の一つとして。使い方は同じようにWPのインポート機能を使ってデータを入れればテスト用...
さまざまなフォームのスタイルサンプルとコードを大量にまとめた・「77 CSS Forms」
77 CSS Forms 77 CSS Formsは大量のフォームスタイルをまとめたWebページです。CSSで作られたフォームのサンプルが大量に紹介されています。各フォームはCodepenで動作デモを作成してあります。一般的なコンタク...
Sketch向けのフローチャートキット・「uxflow」
uxflow uxflowはSketchで使えるフローチャートのキットです。フローチャート作成に必要な要素が、3種のスタイルテーマ毎に用意されています。WebデザイナーやWeb開発者、プロジェクトマネージャの方がサイトマップ作成にかけ...
個人/チームで使える、クリエイティブなアイデアをまとめるノートアプリ・「Milanote」
Milanote Milanoteは個人/チームで使えるアイデアノートアプリです。クリエイティブな活動をする個人やチームに貢献するのが目的のアプリのようです。デバイスを選ばず、UIもシンプルで分かりやすい印象でした。ホワイトボード感覚...
大量のメールマガジンを収集、検索出来る・「Discover」
Discover Discoverはさまざまなメールマガジンを大量に収集、自分好みのメルマガを探せるWebサービスです。テクノロジーやニュース、マーケティングなどさまざまな種類のメールマガジンを収集、探せるようになっています。僕も最近...
商用でも無償で使えるCC0ライセンスの写真を配布するストックフォトサイト・「NegativeSpace」
NegativeSpace NegativeSpaceは商用でも個人でも無償で使えるCC0ライセンスの写真を配布するストックフォトサイトです。サイト名のようにネガティブスペースを意識した写真のみを・・といった事ではなく、概念を意識して...
手軽で簡単、使いやすい国産の動画用モーダルウィンドウスクリプト・「modal-video.js」
modal-video.js modal-video.jsは手軽で簡単に動画をモーダルウィンドウです。jQueryに依存しています。開発元は国産CMSを開発するa-blog cmsの方。スクリプトとCSSを読み込み、任意の要素に用意さ...
ゲームアプリ等に使えそうなファンタジーな世界のマップイラストを作れるユニークなWebサービス・「Inkarnate Worlds」
Inkarnate Worlds Inkarnate Worldsはゲームアプリ等に使えそうなファンタジーなマップを作成出来るWebサービスです。上図のように古地図のようなテイストのマップを手軽に作成出来る、というもの。用意されている...
任意の要素に表示/非表示時のアニメーションエフェクトを付与出来るスタイルシート・「tuesday」
tuesday tuesdayは任意の要素にアニメーションエフェクトを手軽に付与出来るスタイルシートです。上デモのように、CSSによるアニメーションエフェクトを、classを与えるだけでアニメーションによる表示、非表示が出来るようにな...
UberやLyftのような、配車サービスアプリを作成する為のOSS・「LibreTaxi」
LibreTaxi LibreTaxiはUberやLyftのような配車サービスアプリの為のOSSです。バッテリーにも優しい設計で多言語化にも対応しているようです。なにかと話題の両アプリですが、法律も関わってくる業種を扱うサービスになり...
任意の要素にマウスの動きに合わせてパララックス効果を表現出来るスクリプト・「Tilt」
Tilt Tiltは任意の要素にパララックス効果を与えられるスクリプトです。jQueryに依存しますので軽量なスクリプトとは言えないかもですが、本スクリプト自体は圧縮版で1.45kbほどのようです。オプションもいろいろ揃えられていまし...
Pinterest風でレスポンシブWebデザイン対応のレイアウトを作れてドラッグで位置移動やソートも出来るスクリプト・「MUURI」
MUURI MUURIはPinterestライクなレイアウトを構築出来るスクリプトです。MUURIという名はフィンランドの言葉で壁を意味するそう。レスポンシブWebデザインにも対応しており、任意のキーワードでソートも可能。Hammer...
地図と連動して任意のテキストや画像をスライド表示するスクリプト・「StoryMapJS」
StoryMapJS StoryMapJSは地図と連動して任意のテキストや画像をスライド式に表示できるスクリプトです。地図はOpenStreetMapが使われ、ストーリー形式でスライドを作成する事ができる、というもの。地図にはアイコン...
よく出来たHTMLメールを紹介するデザインギャラリー・「Really Good Emails」
Really Good Emails Really Good Emailsは出来の良い企業のHTMLメールを紹介するデザインギャラリーです。レスポンシブなHTMLメールを紹介しています。SSのみではなく、コードをCodePenで書いて...
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」
Progress Nav Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの...
レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」
Pizza Amore! Pizza Amore!は様々なデバイスで折れ線グラフや円グラフ、棒グラフ等を表示出来るスクリプトです。Foundationを提供するZURBが開発、公開しています。マークアップは簡単なリストにカスタムデータ...
Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」
CoreUI CoreUIはBootstrapベースのUIフレームワークです。レスポンシブな管理画面の基礎を用意してくれており、開発スピードを補うものとして公開されています。各コンポーネントも揃えられており、キレイめで見やすい印象でし...