calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

こういうの欲しかった、デザイン・コーディングが捗るツールまとめ

使用頻度は高くないけれど「こういうの欲しかった」と思えた、役立つWeb制作で使うツールやサービスをまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

アニメーション12の基本原則デモ

ディズニーによって開発されたアニメーションの12の基本原則(12 basic principles of animation - Wikipedia)デモ。イラストやキャラクターなどを動かすときにインスピレーションを得たいときに。モーション作成やアニメーションの参考にした12種パターンのgif動画を見ることができます。

[tool] THE ILLUSION OF LIFE

[参考] ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現! - CSS Animation

CSSで写真にフィルタ加工してコード出力

アップロードした写真にフィルタをかけたり、CSSの疑似要素を使いフィルタ加工するためのコードも出力してくれるというツール。サイトに掲載した写真にCSSでちょっと加工したい時なんかに便利だし勉強にもなります。コードまで出力してくれるサービスはあまり見かけなかったので。

cssFilters

gulpファイル出力

日本語で分かりやすいです。gulpファイルを簡単に出力してくれるオンラインツール。css/jsの結合・圧縮、プロパティ順など任意の箇所にチェックをつけてダウンロード可能。

gulp generator

クライアントの環境をチェック

先方にOS・画面解像度・ブラウザサイズ・IPアドレスなどを確認してもらいたいときに。

ご利用環境チェックツール

ソーシャルサービスを使用しているか確認したい場合は、こちらのサービスと併用して確認すればOK。

yourbrowser

gzipチェック

サイト高速化で必須のgzip圧縮がされているか調査してくれるサービス。圧縮されてないページに高速化の提案などいいかもですね。

GIDZipTest

transformプロパティを作成

要素に変形効果を付与するtransformプロパティ(移動・回転・傾斜・縮尺)のコードと間隔を出力。面倒な部分なので便利。これも勉強になる系ですね。

WAIT! Animate

メディアクエリ作成ツール

スマホ・タブレット・PCもしくはプラットフォーム等を選択するとメディアクエリを出力してくれます。最近URLが変わったようなのでメモしておきます。

Simple CSS Media Query Generator

ターミナル記録

ターミナル操作だけを動画で記録させて共有できるサービス。ブログなどに埋め込んだスクリプトのテキストはコピペ可能という面白い仕様。

asciinema ターミナル記録

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.