【webサイト制作に役立つ】業務効率化&実務に役立つ 便利ツールを調べてみた!

Frontend Toolkit

こちらはフロントエンド開発をサポートするツールです。

jpg・svgの最適化カラーコード変換CSSやJSなどのコードフォーマットを始めとした便利なツールがひとまとめになっています。

1つのツールで様々なことができるのは効率的ですよね。

Frontend Toolkit - Utilities for your recurring Frontend tasks
Frontend Toolkit is a customizable dashboard for your recurring Frontend tasks. Base64 encoder/decoder, SVG optimizations, SVG to JSX and many more!


Griddy

CSSのグリッドレイアウトを視覚的に設定できるツールです。

実際にツール内でカラムの数、高さ、幅、マージンを指定することができ、指定した条件のCSSが自動で表示されます。

そのままコードをコピーすれば視覚的に調整したレイアウトを作り出すことができる!

Griddy - CSS Grid System Education Tool
Learn the CSS Grid Spec


Neumorphism.io

ドロップシャドウの設定を視覚的に行えるツールです。

カラー、サイズ、角の丸み、シャドウとオブジェクトの距離、強度、ぼかし、形状など、細かく指定して理想の状態を作り出すことができます。

また、こちらも指定した条件のCSSに自動で反映してくれるので、コピーするだけで使えます。

Neumorphism/Soft UI CSS shadow generator
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.


まとめ

今回はwebサイト制作の業務効率化&制作に役立つ便利ツールを調べてみました!

1つのツールに様々なツールがまとめられている非常に便利で効率的なものや、視覚的にCSSの設定ができるものまで色んなツールがありました。

適した場面で活用することで、もっとwebサイト制作に役立てていきたいですね。

コメント

タイトルとURLをコピーしました