Webサイト制作系便利ツールセレクション

サイト企画、設計支援

ワイヤーフレーム作成 2バイト文字入力時にかなりバグる。テキストエディタで文字をあらかじめ入力して、それをコピペしていけば動く。 UIは好印象。 whimsical.com

web-kanji.com

Free PSD Website Design Templates

freebiesbug.com

baigie.me

デザインシステム ant.design

SVG

Blobmaker Blobmaker は柔らかな曲線で構成された形状をSVGで生成するツールです。
www.blobmaker.app

Get Waves SVGで描画された「波」を生成するためのツール

getwaves.io

Clippy CSSの clip-path プロパティを使用したクリッピング領域を編集、定義することができるツール

bennettfeely.com

波型やジグザグ、矢印などさまざまなシェイプを使い、ウェブサイトのコンテンツわけに便利な境界線デザインを作成するWebアプリ。

www.shapedivider.app

CSSコーディング支援系

CSSの複雑な@keyframeアニメーションを、タイムライン付エディタで確認しながら調整、作成できるビジュアルツール。animationとかshadowとかいろいろある。

keyframes.app

コピペで簡単!box-shadow(ボックスシャドウ)生成(ジェネレーター)ツール!(Youtube使い方解説あり)

front-end-tools.com

ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。

hero-generator.netlify.app

HP-CODE コピペで簡単!Webパーツ屋

haniwaman.com

画像素材関連

※商用利用可の画像検索可能

o-dan.net

※基本有料、月10点6000円から。

www.shutterstock.com

stock.adobe.com

heroicons.com

tyoudoii-illust.com

tech-pic.com

その他ツール

ogp.buta3.net

www.freelogodesign.org

coliss.com

qiita.com

Cross Browser Testing, Selenium Testing, Mobile Testing | Sauce Labs

front-end.ai

tech-pic.com

redketchup.io

画像圧縮サービス

squoosh.app

サイト制作物フィードバックツール

アカウント作成は無料。asana、chatworkと連携可能(Wrikeは連携予定)、連携内容はHPではわからない。

monji.tech

無料アカウントプランあり、サービス連携は、slack、chatowork等、プロジェクト管理ツールとの連携はなし。 iPadアプリがある。

www.brushup.net