Resource - Webデザイナー向け

GIFアニメーションをHTML5にコンバートする・「gfycat」

gfycat gfycatはGIFをアップロードし、HTML5のVideo要素として動かせるようにするサービスです。ホスティングも可能で、iframeで他サイトに張ることも出来るようになっています。また、元のGIF画像とのサイズの比較...

Bootstrap向けのスライド式カラーピッカーを実装するスクリプト・「Bootstrap Color Picker Sliders」

Bootstrap Color Picker Sliders Bootstrap Color Picker SlidersはBootstrap向けのカラーピッカーを実装するスクリプトです。スライダーでカラーを選定する仕様となっています...

7日に一度、7枚の高品質な写真素材をパブリックドメインで公開する・「Little Visuals」

Little Visuals Little Visualsは7日に一度、パブリックドメインの写真素材を提供してくれるTumblrです。どれもハイクオリティで美しい写真ばかり。素材としてこういった写真を使うシーンは限られますけど、覚えて...
Ads

CSSで作られたアニメーションロードインジケーターのキット・「SpinKit」

SpinKit SpinKitはCSSによるアニメーションロードインジケーターのキット。Githubにてソースが公開されています。スマフォ用/一部ブラウザのみ対応のWebサイトのみになってしまいそうですがデザインもシンプルで動きも滑ら...

送信ボタンにプログレスバーを表示させる・「PROGRESS BUTTON STYLES」

PROGRESS BUTTON STYLES PROGRESS BUTTON STYLESは送信ボタンにプログレスバーを表示させる、というスタイルです。たまに見かけたスタイルですが、ユーザーにとっても分かりやすくて素敵です。スタイルは...

モバイル向けのWebアプリ開発用に作られた軽量フレームワーク・「Zoey」

Zoey Zoeyはスマフォ向けのWebアプリの開発用に作られた軽量なフレームワークです。zepto.jsに依存しています。HTML5とCSS3ベースで各種コンポーネントが揃えられています。ライセンスはMITです。 Zoey

オンラインでフォントを作成出来るWebツール・「FontArk」

FontArk FontArkはオンラインでフォントを編集、作成出来る高性能なフォントエディタです。マウスの操作で手軽にフォントを作成する事が出来ます。既存フォントを編集する事も可能です。登録は無料ですが、フォントのダウンロードにはク...

スマフォ向けの美しいデザインのUIキット・「Flatastic Mobile UI Kit」

Flatastic Mobile UI Kit Flatastic Mobile UI Kitはスマフォ向けの美しいデザインのUIキットです。よく使われるインターフェースは勿論、スマフォならではのUIなども含まれています。見やすくてい...

Googleフォントでどのフォントが人気かが分かる・「Google Fonts :Analytics」

Google Fonts Analytics Google Fonts AnalyticsはGoogleフォントでホスティングされているフォントで、どれが人気なのかが分かるツール・・・ツールではなく公式の機能ですが、今日初めて存在を知...

シンプルで丸みのあるデザインのアイコンセット・「IKONS」

IKONS IKONSはシンプルで丸みのあるデザインが可愛らしいアイコンセット。個人でも商用でも著作権表示不要で利用可能との事ですがご利用の際はご確認下さい。200以上のアイコンと、様々なフォーマットのデータも含まれています。最近はS...

CSSからブレークポイントを探して、その設定に応じた幅での表示状態をまとめて確認出来るブックマークレット・「BreakpointTester」

BreakpointTester BreakpointTesterは閲覧しているWebサイトのCSSからブレークポイントを探しだし、その設定幅で表示される状態をまとめて確認出来るブックマークレットです。ツールで決められたサイズで表示確...

手軽に画像を白抜き加工できるWebサービス・「ClippingMagic」

ClippingMagic ClippingMagicは画像を白抜き加工できるWebサービスです。切り抜く部分、残す部分を指定すれば自動で切り抜いてくれます。手軽な割になかなか精度が高いのが凄いですね。まだベータ版のようなので今後の開...

Flashを使わずに実装しているプリローダーアニメーションのギャラリー・「Preloaded」

Preloaded PreloadedはFlashを使わずに実装しているプリローダーのアニメーションを収集しているTumblrです。他サイトの例や、Codepenで書かれたモノなどがありますので一部のプリローダーはコードも参考に出来ま...

コンタクトフォームを簡単に作成出来るソフトウェア・FORMOID

FORMOID FORMOIDはコンタクトフォームを簡単に作成出来るデスクトップアプリです。ドラッグ&ドロップで簡単にコンタクトフォームを作成出来る、というもの。送信先等、細かい部分は作成後に書く必要があります。Windows版とMa...

フルスクリーン、入れ子、RWD対応などをサポートしたスライドコンテンツを実装するスクリプト・「SLIDEME!」

SLIDEME! SLIDEME!はフルスクリーンや入れ子、レスポンシブWebデザインなどにも対応したスライドコンテンツを実装するスクリプト。スライド内にスライドを入れ子で実装したりも出来ます。スライドに拘ったスクリプトですね。ちょっ...

手書き風のアプリ向けUIキット・「Basiliq」

Basiliq Basiliqは手書き風のアプリ向けUIキットです。各種コンポーネントもよく使われるものが揃っています。ワイヤーフレームを作る際に便利そうですね。ライセンスはCCです。 Basiliq

フォントとしても利用可能な大量のフラットなアイコンを配布する・「Flaticon」

Flaticon Flaticonは大量のフラットなデザインのアイコンを配布するWebサイトです。アイコンフォントとしても利用可能でSVGやPNG、PSDファイルも同梱されています。かなりの数があるので覚えて置いて損は無さそうですね。...

レスポンシブWebデザイン対応のHTMLメールのフレームワーク・「Ink」

Ink InkはRWDなHTMLメールのフレームワークです。スマフォの普及でモバイルからメールを確認する機会が増えた方も多いかもしれませんのでニュースレターに導入するのも良いかもしれません。 Ink

マークアップ不要でWebサイトのレイアウトから公開まで行える・「Webydo」

Webydo Webydoはマークアップ不要でWebサイトのレイアウトから公開まで行えるWebサービスです。マウスでエレメントを設置し、テキストや画像を施して公開さればWebサイトが出来上がる、というもの。マークアップをしないWebデ...

オープンソースで配布されているシンプルなアイコンフォントのセット・「Ionicons」

Ionicons Ioniconsはオープンソースで配布されているシンプルなアイコンフォントです。やや丸みを帯びたデザインで使いやすそうですね。MITで公開されており、SVGのソースファイルも同梱されています。 Ionicons

iOS7な色合いのカラーコードをコピペ出来る・「iOS 7 colors」

iOS 7 colors iOS 7 colorsはiOS7風の色合いのカラーコードをコピペ出来るようにまとめたWebサイトです。マウスを乗せるとカラーコードが表示されます。グラデーションの場合はそのグラデ用のカラーコードが表示されま...

ダミーのユーザー名と画像を生成する・「Random User Generator」

Random User Generator Random User Generatorはユーザー名とユーザー画像のダミーを生成してくれるツールです。JavaScriptで予め用意した空要素に埋め込んでくれる仕様みたいです。よくあるダミ...
Ads