ビューポートなどで要素の可視性を検出できる「Emergence.js」

ビューポートまたは指定したエリアでの要素の可視化を検出することができる「Emergence.js」の紹介です。

デバイスごとのスクリーンショットを一括生成「Responsive Screenshots」

PC・ノート・タブレット・スマホのスクリーンショットをURLを入力するだけで一括生成できる「Responsive Screenshots」の紹介です。

anime.jsを使用したテキストエフェクト集「Moving Letters」

anime.jsを使用した心地よいアニメーションのテキストエフェクトを公開してるサイト「Moving Letters」の紹介です。

シンプルなチャートを実装できるライブラリ「Frappé Charts」

棒グラフや折れ線グラフなどシンプルでモダンなチャートを実装することができるチャートライブラリ「Frappé Charts」の紹介です。

水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」

水面や水中の歪みのエフェクトとアニメーションが秀逸な「Liquid Distortion Effects」のチュートリアルの紹介です。

動きのあるバブルを背景に設定することができる「bubbly-bg」

ランダムに動きのあるバブルを背景に設定することができる軽量で使いやすいスクリプト「bubbly-bg」の紹介です。

【jQuery】レスポンシブ対応のタブを実装できる「GridTab」

レスポンシブに対応した様々なタブを実装することができるjQueryプラグイン「GridTab」の紹介です。様々なスタイルが用意されておりカスタマイズも可能です。

データの視覚化(グラフ・表)をまとめたサイト「Data Viz Project」

様々なデータを視覚化(インフォグラフィック)をまとめたWebサービス「Data Viz Project」の紹介です。インフォグラフィック制作の際は見ておきたいサイトです。

Webサイト・アプリなどUIの配色を試せる「Pandacolors」

予め用意されているUIにカラーパレットより配色することで全体的なイメージを掴むことができるWebサービス「Pandacolors」の紹介です。

アップロードしたイメージからカラーを抽出するツール「Pictones」

画像をアップロードするだけで画像のカラーを元にカラーを抽出し、カラーパレットを表示してくれるWebサービス「Pictones」の紹介です。

モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」

ページ遷移のスライドアップアニメーションをモーフィング(SVG)で表現したデモ集「Morphing Page Transition」の紹介です。

AIがロゴを作成してくれるWebサービス「Brandmark」

ロゴに関するキーワードからAIが最適なロゴを提案してくれるWebサービス「Brandmark」の紹介です。

YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」

YoutubeやGoogleMapなどの埋め込みコードをレスポンシブに変換してくれるジェネレーター「Embed Responsively」を紹介します。

10年前の有名サイトを振り返ることができる「Ten Years Ago」

AppleやAmazon、Youtubeなど海外の有名なサイトの10年前のデザインを振り返ることができる「Ten Years Ago」の紹介です。

PSDファイルをSketchファイルに変換する「PSD to Sketch Design Converter」

Photoshopで作成したPSDファイルをSketchファイルに変換するWebツール「PSD to Sketch Design Converter」の紹介です。

RANDOM POST
  • ブロック要素をドラッグできるグリッドレイアウト「Muuri」
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
  • ラフな手書き風デザインのWebコンポーネント「Wired Elements」
  • スクリーンショットにブラウザ枠をつけてくれるWebツール「Screely」
  • Googleのモバイルサイト診断ツール「Test My Site」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント63選
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • 【2020年版】Google Fontsの使い方とおすすめ日本語フォント
  • Photoshopで簡単に背景を伸ばすテクニック
  • フォントを調べる時に役に立つツール・サイト10選
PICKUP
  • CSSで作成する吹き出しとデザインのアイデア
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア