Resource - Webデザイナー向け

マテリアルデザイン向けのカラーコードをコピーして使える・「Material UI Colors」

Material UI Colors Material UI Colorsはマテリアルデザインの為のカラーパレットです。カラーコードはHEX、RGB、RGBAなどをサポートしており、使いたい色をクリックすればクリップボードにカラーコー...

CSSのみで作られたシンプルなアイコンセット・「ICONO」

ICONO ICONOはCSSのみで作られたシンプルなアイコンのセットです。CSS3や擬似クラスを用いて形成されており、エレメントにclassを振るだけでアイコンを表示できるようになっています。SVGもフォントも利用せずに作ったよ!と...

Evernoteライクなクリップツールを構築する為のオープンソースソフトウェア・「Paperwork」

Paperwork PaperworkはEvernoteやMSのOneNote、Google Keep等のクリップサービスを構築可能なオープンソースのソフトウェアです。PHP製のフレームワーク、Laravelをベースに、Angular...
Ads

インタラクションデザインの導入例をアニメーションで確認出来るWebデザインギャラリー・「Hover States」

Hover States Hover StatesはWebサイトに導入したIxD例をアニメーションで確認出来るWebデザインギャラリーです。うまくIxDを取り入れて設計されたWebサイトをアニメーション画像で紹介しています。開発者やデ...

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように...

CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」

Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...

モバイルアプリ開発向けのHTML5製フレームワーク・「Mootor」

Mootor Mootorはモバイルアプリ開発向けに構築されたHTML5製フレームワークです。オープンソースとして公開されています。と、ご紹介はしたものの、時間が取れず、まだあまり良く見ていません。デモを触った限りでは悪く無さそうです...

Bootstrapのひな形を手軽に作成出来る・「lollytin」

lollytin lollytinはBootstrapのひな形を手軽に作成できるツールです。大まかな型をドラッグ&ドロップで作成、コードを発行してくれます。1から作るよりは1を作ってくれるツールを使う方が工数稼げる、みたいな使い方にな...

Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」

Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...

Markdown記法をテキストに変換するjQueryのスクリプト・「jQuery.Markdown.js」

jQuery.Markdown.js jQuery.Markdown.jsはMarkdown記法で書かれたコードをテキストに変換するスクリプトです。jQueryに依存しています。シンプルで使い勝手も良さそうですね。日本の方が作成、公開...

Googleスプレッドシートのデータを元にチャートや地図、table等に変換するスクリプト・「Sheetsee.js」

Sheetsee.js Sheetsee.jsはGoogleスプレッドシートに書いたデータを元に、チャートグラフや地図、table等に変換してWebサイトに埋め込めるスクリプトです。動作にはjQueryが必要みたい。基本的にはコア必須...

オープンソースの Twitter Bootstrapのテーマ作成用ライブエディタ・「Cluckles」

Cluckles ClucklesはOSSとして公開されているTwitter Bootstrap用のライブエディタです。ファイルを読み込んだり全体やコンポーネントのスタイルを変更したり、CSSのカスタマイズ等が可能で、変更後即反映され...

フロントエンド開発のためのボイラープレート・「Front-end Boilerplate」

Front-end Boilerplate Front-end Boilerplateはフロントエンド開発をサポートするためのボイラープレートです。Web開発をより簡単に素早く行えるように設計している、との事。HTML5ベースでプリプ...

ドラッグしたテキストに検索や翻訳、地図検索等のサポート機能を付与するスクリプト・「textAssist」

textAssist textAssistはドラッグしたテキストにキーワード検索や翻訳、地図検索、Wikipedia等のサポート機能を付与するスクリプトです。jQueryに依存しています。デフォルトではGoogleマップ等が使われてい...

HTML5ベースの非依存型WYSIWYGエディタ・「wysihtml」

wysihtml wysihtmlはHTML5ベースのWYSIWYGエディタです。先日も同じようなリソースをご紹介したばかりですが・・jQuery等のライブラリに依存しないので導入はしやすそうです。コピペで挿入したコンテンツを自動でパ...

2色を選んでマテリアルデザイン向けのカラースキームを作成してくれる・「Material Palette」

Material Palette Material Paletteは用意された色から2色を選ぶと自動でマテリアルデザイン向けのカラースキームを作成してくれるツールです。選択するとスマフォで実際に使ったようなサンプルとカラースキーム、ダ...

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ほどの軽量なものとなっています。悪く言えば特徴が有りませんが、特徴は自分の手で付加していきたい、という方には重宝さ...

女性や子供の為に立ち上げられた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サイトツアーを、モーダルウィンドウ内に複数収めることが可能で、モーダ...
Ads