SVGでダミー画像を生成できるサービス「Placeholder pics」

モックアップ制作などで役に立つ、ダミー画像(プレースホルダー)をちゃっちゃと生成することができるサービス「Placeholder pics」のご紹介。

陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」

暑い地域に見られる陽炎の表現や、ジェットエンジンやコンロでの熱気(歪み)を表現するエフェクト「Animated Heat Distortion Effects with WebGL」のご紹介。

SVGボタンに様々なエフェクトを実装できる「Distorted Button Effects」

歪み・振動・波紋とSVGならではのアニメーションを実装できるエフェクトセット「Distorted Button Effects with SVG Filters」のご紹介。

【CSS】スターウォーズのイントロを表現できるライブラリ「starwarsintro.css」

スターウォーズでおなじみのスクロールテキストを実装することができる軽量なCSSライブラリ「starwarsintro.css」の紹介です。

有名な企業・サービスのロゴをダウンロードできる「Instant Logo Search」

様々なサービスや企業のロゴを検索・ダウンロード(PNG・SVG)できるWebサービス「Instant Logo Search」のご紹介。

【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」

ベースになるフォントサイズを指定すると、px・em・%・ptと単位ごとに比較一覧することができるWebサービス「PXtoEM.com」のご紹介。

インストールしてるフォントを一覧表示できる「wordmark.it」

PCにインストールしているフォントを一覧表示できるWebサービス「wordmark.it」の紹介。特定のテキストをパッと一覧で比較したい時などに便利。

レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」

レスポンシブデザイン制作で役に立ちそうなブレイクポイント毎に画像を生成してくれるサービス「Responsive Image Breakpoints Generator」のご紹介。

様々なホバーエフェクトを実装できる「imagehover.css」

多くのサイトでよくみられる画像をマウスオーバーさせた時のエフェクトが40種以上も用意されているCSSで作れられたエフェクト集「imagehover.css」を紹介します。

スマホUIのアニメーションを確認できるサイト「appealing」

スマホアプリのUIをアニメーションで見ることができるギャラリーサイト「appealing」の紹介。カテゴライズされているので見たいアクションの動きをパッと見ることができます。

レスポンシブのチェックに役立つサービス「Resizer」

Googleが「Resizer」なるサービスを公開したので備忘録。ブラウザ・スマホの画面サイズでどうサイトが表示されるかをチェックしたい時に最適なサービスです。

Facebookのフリーデザインリソース「Design Resources」

Facebookのデザイナーによって制作されたモックアップとして使えるフリーデザインリソースのご紹介。UIやデバイスの素材が豊富に揃っています。

海外のストックフォトサイトから写真を横断検索できる「O-DAN」

クリエイティブの高い無料で使用できる写真素材を40サイト以上のストックフォトサイトから横断検索できる「O-DAN(オーダン)」の紹介。

リデザインのレビューを集めたWebサービス「reDSGN」

Webサイト・アプリ・企業ロゴからパッケージまでリデザインされた際のストーリーやレビューを集めたWebサービス「reDSGN」のご紹介。

jQueryプラグインをまとめた検索サイト「jQuery Cards」

Githubで公開されている1000個以上のjQueryプラグインをまとめた検索サイト「jQuery Cards」のご紹介。カテゴリー毎にまとめられた便利なサイトです。

RANDOM POST
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • 【Webデザイン】魅力的な動きをするレスポンシブメニュー
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • 【JS】要素をモーダルウィンドウに変化させる「cta.js」
  • ロゴやイラストの配色パターンをAIが生成してくれる「Color Wheel」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Photoshopで簡単に背景を伸ばすテクニック
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
PICKUP
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • WordPressにおすすめレンタルサーバー8選【初心者向け】
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • CSSで作成する吹き出しとデザインのアイデア
  • 導入しておきたいWordPressのおすすめプラグイン