web制作が捗りそうな便利なwebツール【随時更新】

  • 72
    いいね
  • 2
    コメント

概要

制作時にブクマしとけばいいのについ毎回検索しちゃうものや
ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ?」みたいなやつを防ぐ為に
自分及び社内用に作ったリンク集です。

ルール

会員登録やインストール無しで使える無料のwebツール等
※例外としてGoogleはログイン可能とします。

オンラインエディタ

コード共有

CodePen

HTML・CSS・JSをブラウザ上でサクッと試すのに便利。
右上の「New Pen」で無料で使える。
scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能

Diff

ウェブでdiff

オンラインで差分チェックができる

ブラウザツール

ブラウザバージョンによる対応状況のチェック

caniuse.com

cssとかのプロパティでどのブラウザに対応してるかチェックできるやつ

iwanttouse.com

↑それによって実際に影響があるユーザ数の割合が見れる

テストツール

ブラウザテスト

Browserling

クロスブラウザのオンラインチェック

レスポンシブチェック

Screenfly / レスポンシブチェック

レスポンシブのオンランチェック

閲覧環境チェック

Support Details

アクセスしたPCやブラウザのバージョンとかスクリーンサイズやその時のブラウザのサイズを取得してくれる
例えばクライアントの環境情報が欲しい時にリンクを送ってそのままメールしてもらったり

HTMLツール

HTML特殊文字

特殊文字の文字コード。

カラーコード変換ツール

PhotoShopを立ち上げるのがダルい時に便利

CSS

整形

css2sass

CSSからSCSSにコンバートしたりできる

styleneat

minifyされたCSSを整形してくれる

オンラインで作れるCSSパーツ

flexplorer

Flexbox Playground

話題のFlexboxをオンラインで試してコードをとってこれるやつ

Ultimate CSS Gradient Generator

グラデーションのジェネレーター。画像をアップロードしてコード取得も可能。

JavaScript

整形

Online JavaScript beautifier

minifyされたjsを見やすく整形

チェッカー

正規表現チェッカー

苦手な人が多いと言うあの正規表現をオンラインでチェックで動作チェックできる

regex101

コメ欄で教えていただきました。リファレンスも多くUIも見やすい

画像

圧縮

TinyPNG

画像圧縮。jpegも対応

比率計算

写真の縦横比を固定して拡大縮小値を計算するツール

元画像の縦横比をオンラインで計算してくれる。PhotoShop立ち上げるの重い時とかに便利

web計。

縦横比とか黄金比とか横幅に対する画像数とか算出してくれる

ジェネレーター、テスト

favicon.cc

半透過マルチアイコンfavicon.icoを作ろう!

画像をアップロードしたりしてfavicon作ってくれる

Web Clip シミュレータ

iPhoneとかのWeb Clipのシミュレータ

OGP画像シミュレータ

OGP画像のシミュレータ

Landscape by Sprout Social

画像をアップロードするとtwitterやFacebook、インスタ、youtubeなどのSNSに最適なリサイズをしてくれる

Placehold.jp

ダミー画像生成

Spritebox

スプライト画像を生成してくれる

フォント

Google Fonts

webfont

fontawesome

fontawesome

JSON

整形

JSON整形サービス

minifyされたjsonを見やすく整形

コミュニケーションツール

appear.in

会員登録もアプリインストールもいらないリンクを押すだけで参加できるビデオ会話ツール
遠隔でmtgとかする時にすごく便利。

パフォーマンスツール

表示速度チェックと改善ヒント

PageSpeed Insights

Page speed optimization

GTmetrix

Website speed test

サイトの表示速度をチェックして改善ヒントを教えてくれます。

PERFORMANCE BUDGET CALCULATOR

回線と何秒で表示させたいかを指定すると逆算してファイルサイズを計算してくれる

調査ツール

built with

urlを入力するとそのサイトが何を使ってるか(Apacheサーバーだとかjsのモジュールは何かとか)教えてくれる

SEO関連

Google Webmasters Search Console

サーチコンソール

Keyword Tool

関連キーワード取得ツール(仮名・β版)

関連キーワードとるやつ

Googleトレンド

トレンド状況とか関連キーワードとか

Varvy SEO tool

GoogleのガイドラインからSEOに影響あるとかの内部診断ツール

Mobile SEO

↑上のスマホ版

SEOチェキ!

サイトSEOチェック

その他

プログラマーのためのネーミング辞書 | codic

cssのclass名とか変数名とか迷った時に生成してくれる

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

サイトマップを自動生成

.htaccess ファイルを簡単作成「.htaccess Editor」

.htaccessを自動生成

参考にしたやつ

こちらに触発されてフロントエンドやコーダー、マークアップエンジニアや個人制作の方に便利なまとめを作りたくなったのです。
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな?