WEB制作でよく使うツール・サイトを19個紹介！

ブックマークの整理がてら、普段よく使うツールやサイトをまとめてみました。
誰かのお役に立てば幸いです。

Chrome拡張

デザインデータを透かしてズレを確認

参考

PerfectPixel by WellDoneCode (pixel perfect) – Chrome Web Store

PerfectPixel。コーディングに必須のChrome拡張。

サイト

クリップパスジェネレーター

参考

Clippy — CSS clip-path maker

Clippy。
平行四辺形や五角形など少し複雑な形に切り抜きたいときに使用しています。

先ほど紹介したPerfectPixelを使って切り抜きたい形を透かして、それに合わせて点の位置を調整しています。

メッシュグラデーションジェネレーター

参考

CSS mesh gradients generator: Mesher Tool by CSS Hero

CSS mesh gradients generator: Mesher Tool。

CSSでメッシュグラデーションを表現できます。グラデーションを画像にすると地味に重く、軽量化すると汚くなるので、そこまで厳密にデザインに合わせなくて良い時に使用しています。

CSSプロパティの各ブラウザの対応状況を確認

参考

Can I use… Support tables for HTML5, CSS3, etc

参考

The Embed for CanIUse Data

Can I use… Support tables for HTML5, CSS3, etc。

新しめのプロパティを使用するときにこちらで確認しています。

マークアップが正しいか確認

参考

The W3C Markup Validation Service

The W3C Markup Validation Service。

かなりお世話になっています。閉じタグやalt抜け、古い記述などを指摘してくれます。

グーグルフォント

参考

Browse Fonts – Google Fonts

Google Fonts

様々な言語のフォントが揃っていて使いやすいです。グーグルフォントのおかげで日本語のWEBフォントの選択肢が一気に増えてほんとうにありがたいです。

文字化けをある程度修復

参考

文字化けから元の文字を推測するツール 面倒な人向けの自動判別変換 – ぺんたん info

たまにファイル名が文字化けしている素材があり、再請求するほどでもないときに使用しています。

ブックマークレット

OGPタグを確認

参考

ブックマークレットでOGPタグを確認する【javascript】

えむ家のメモ帳

かなりお世話になっています。

PHPでメタを出し分けしている際にちゃんとできているか確認するのに使用しています。

ALTの値を確認

参考

マークアップ後の画像やmetaをチェックするブックマークレットを作ってみた

cly7796.net

LPなど大量の画像を使用した際にこちらで確認しています。

URLの?以降を削除

参考

URLの?以降を削除するブックマークレット

Gist

地味によく使うブックマークレットです。

本番環境とテスト環境のURLを切り替え

参考

ブックマークレットで本番環境とテスト環境のURLを切り替える【javascript】

えむ家のメモ帳

個人的にブックマークレットの中で一番使用回数が多いです。作業効率かなり上がります！

ブックマークレット変換

参考

Bookmarklet スクリプト変換

jsを書くとブックマークレット形式に変換してくれます。

チャットのテンプレ文をブックマークレットにする際に使用しています。

読み物(コーディング)

MDN

参考

HTML: ハイパーテキストマークアップ言語 | MDN

MDN Web Docs

セマンティックなHTMLを意識して書きたいときに読んでいます。

Zenn

参考

Zenn｜エンジニアのための情報共有コミュニティ

Zenn

暇つぶしの際に読んでいます。新しいプロパティやメディアクエリの情報が手に入りやすいです。

読み方わかるくん

参考

IT・web用語の読み方わかるくん

webliker（ウェブライカー）

CSSやHTMLタグの読み方が列挙されたサイトです。

読み物(デザイン)

デザインの制作中に役立つまとめ検索 | デザイン研究所

参考

デザインの制作中に役立つまとめ検索 | デザイン研究所

デザイン研究所

デザインの引き出しを増やしたいときに読んでいました。

今見てもとてもわかりやすいです。

ギャラリーサイト

参考

Pinterest

Pinterest

参考

【総数8023件】BANNER LIBRARY | デザインの参考に！おしゃれなバナーだけを集めたギャラリーサイト

BANNER LIBRARY

参考

SAMUNE｜良質なデザインのサムネイルを集めたギャラリーサイト

SAMUNE

あまりデザインはやらないのですが、作業があったときはこちらを参考にしています。

その他

ショートカット練習

参考

COMMAND LAB

COMMAND LAB

新卒のときめちゃめちゃ練習しました。

フォトショップとVScodeのショートカットを叩き込んだおかげで作業時のUIを探すイライラが少し減った気がします。

VScodeスニペット

参考

HTML・CSSコーディングでよく使うVScodeスニペット集

Zenn

魔法使いになったみたいで楽しいです。

主にSCSSの@include pc {}系やJSだとclick等のイベントを登録しています。

さいごに

WEB制作に便利なツールやサイトを19つ紹介しました。
とても長くなってしまいましたが、本当におすすめできるものたちなので、気になったらぜひ試してみてください！