見出し画像

l Webデザイン 制作に役立つ最新オンラインツールまとめ 01

Webデザインに限らず、デザイン制作に役立つ最新オンラインツールを紹介していきます。お気に入りのツールを制作フローに取り入れ、制作スピードやクオリティのアップを目指していきたいです。

l オンラインツール

Transition.CSS

画像1

40種類以上のトランジション向けCSSアニメーションを表現できる便利ツール。

Charts.css

画像2

HTMLとCSSのみでグラフやチャート図表現できるCSSフレームワーク。

Screen Sizes

画像4

あらゆるAppleデバイスのサイズや詳細スペックをまとめて確認できるチートシート。

CSS Icon Animated

画像3

CSSのみで作成されたアイコンコレクション。
シェイプが変化するモーフィング・アニメーションエフェクトを作成できる。

Animated Icon 3

画像5

3,000種類を超えるアニメーションアイコンが公開されていて、
GIFファイルの他に、After EffectsやLottis向けJSONファイルで提供。

Calendso

画像6

予約カレンダー機能を作成できるオンラインツール。

Haikei

画像7

ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツール。

Tabbied

画像8

オリジナルのデザインパターンをオンラインで作成、編集できるツール。

Free Mockup Generator

画像9

3Dモックアップをオンラインで作成できる無料ツール。

Mockup Generator

画像10

プロダクトモックアップを作成できるオンラインツール。

Responsive Image Breakpoints Generator v2.0

画像11

画像をアップロードすると、複数のブレイクポイントに合わせて画像サイズを自動変換し、出力コードもコピペ可能。

Designify

画像12

人物の切り抜き、さらに様々な背景を追加した写真を自動作成できるオンラインツール。

Pixelhunter

画像13

写真をアップロードして、あらゆるソーシャルメディア用画像サイズに自動変換してくれる便利ツール。

Color Selector

画像14

オシャレな色合いばかりなので、配色に迷ったときに。。

Website Screenshot API

画像15

URLを入力するだけで、スクリーンショットを作成してくれるオンラインツール。


l 最後に

役立つ情報はありましたでしょうか?是非今後のデザイン制作のワークフローに取り入れてみてください。

この記事が気に入ったらサポートをしてみませんか?