【計37個】Web制作に役立つ便利なオンラインツールを厳選して紹介します

この記事では、オンライン（Webサイト上）で使えるWeb制作に役立つ便利なツールやサービスを紹介します。

よくあるまとめ記事では普段使わなそうなニッチなツールもよく紹介されていますが、この記事では私が実務でデザインや実装を行ううえで普段使いしているツールを紹介しています。

ジャンル別に分けて解説しているので是非便利なツールを見つけてみてください。

Webデザイン

フリー素材

Unsplash（写真）

フリー素材の写真を探すときは、まずはこのサイトで探します。日本語検索も可能ですが、英語で検索したほうが適切な写真が出てきます。

O-DAN（写真）

先程のUnsplashでいい写真が見つからなかった時はこちらで探します。こちらは複数のサイトを横断して検索することができます。

Material Icons（アイコン）

Googleが提供するアイコンのフリー素材です。Google系のサービスのアイコンはこちらのアイコンが使われています。

Iconfinder（アイコン）

様々なテイストのアイコンを探せます。

クオリティの高いアイコンがたくさんあって、シリーズで投稿されているのもあるのでサイト内でトンマナを統一するのも簡単です。

freepik（背景素材）

freepikで「background」で検索をすると、バナーなどの背景に使える素材がたくさん出てきます。

BEIZ images（背景素材）

木や皮などのモノの素材の背景をダウンロードできます。画像が高画質なのもポイントのひとつです。

TRANSPARENT TEXTURES（テクスチャ）

背景の繰り返しパターンで使える素材をダウンロードできます。

サイト上で背景の色をリアルタイムで変えてプレビューできます。素材の種類もかなり豊富です。

loosedrawing.com（イラスト）

いくつかの色に変えられるイラストダウンロードサイトです。

ちょうどいいイラスト（イラスト）

クオリティの高い優しい雰囲気のイラストが複数あります。ビジネス系が多いのも魅力のひとつです。

unDraw（イラスト）

シンプルなグラフィック系のイラストです。色を自由に変えることができ、SVGでダウンロードが可能です。

storyset（イラスト）

先程のunDrawとは正反対で、複雑なグラフィック系のイラストになります。5つのスタイルに分かれていてそれぞれテイストが違うので、サイトの雰囲気に合ったイラストを探せます。

その他

SNS広告のバナーに特化したデザインギャラリー

SNS広告のバナーデザインのギャラリーサイトです。

500件ほど登録されており、サイト内に広告が無いため動作が爆速でストレスフリーで閲覧できます。

Webデザインの「パーツ」を集めたギャラリーサイト

Webデザインの「パーツ」を集めたギャラリーサイトです。

約2,000のパーツが登録されており、見出し・料金表・図・流れ・CVエリアなど様々なジャンルで絞り込み検索ができます。

Lorem JPsum - 自然な日本語ダミーテキスト

ダミーテキストを生成できます。

ダミーテキスト生成サービスはたくさんありますが、こちらは自然な雰囲気の文章を作ってくれるのでおすすめです。

Google Fonts

Webフォントは基本的にはこの中から探しています。かなりのフォントがあるのでとてもおすすめです。

Blobmaker

SVGのシェイプをリアルタイムで確認しながら作成できるツールです。作成したシェイプはSVG形式でダウンロードできます。

コーディング

HTML / CSS

Nu Html Checker

HTMLが正しくマークアップされているかチェックできるツールです。

HTML5 コンテンツモデル ガイド

HTMLのコンテンツモデルを視覚的に確認できます。タグの中にどのタグを入れられるかを勉強するのにもぴったりなサイトです。

CSS 2 SASS/SCSS CONVERTER

CSSをSASS形式に変換できるツールです。Sass・Scss両方に対応しています。既存サイトをSASS化させる時などに便利です。

Sassmeister

SASS（Sass・Scss）をCSSに変換できるツールです。リアルタイムで変換されるので、さくっと挙動を確認したいときに便利です。

Tail Blend

CSSのmix-blend-modeをリアルタイムでプレビューできます。色や画像も変更できます。

CSS三角形作成ツール

CSSで三角形を作るためのコードをコピペできるツールです。色や方向を自由に選択できます。

WordPress

WordPressサブループ自動作成ツール

カスタム投稿名や表示件数などを入力するだけでサブループのコードを生成してくれます。ページネーションなども考慮してくれるのでとても便利です。

アニメーション

svg-spinners

様々なローディングアニメーションのファイルをSVG形式でダウンロードできます。

spinkit

CSSで再現できるローディングアニメーションのサンプル集です。コードも簡単にコピペできます。

MOVING LETTERS

見出しのスクロールアニメーションで使えそうな動きのギャラリーです。CSSのコードも簡単にコピペできます。

動くWebデザインアイディア帳

ローディングやアコーディオンなど、様々なアニメーションをサンプルコードと共に学べるサイトです。勉強にも役に立つと思います。

その他

Lorem Picsum（ダミー画像用URL生成）

ダミー画像用のURLを生成するサービスです。実装時に画像がまだ支給されていないけど、試しに画像を入れてコーディングしたい...のような時にこのURLを使えます。サイズなども自由に指定できます。

// 例
<img src="https://picsum.photos/seed/picsum/200/300" alt="">

Images | ESA/Hubble

大きいサイズの画像をダウンロードできるサイトです。

画像の読込中のアニメーションを実装するときに、小さいサイズの画像だと一瞬で読み込まれてしまいますが、このサイトの画像を使えば読み込むのに十秒近くかかるので実装やデバッグがしやすいです。

その他

Webサイト リリース時チェックシート

サイトリリース時にチェックするべき項目をまとめたスプレットシートです。コピーして使えます。

ガントチャート

スプレッドシートで作成したガントチャートのテンプレートです。こちらもコピーして使えます。

右側のカレンダー部分は、DBシートの開始日を入力すると自動で変更されたり、開始終了予定日を入力すると自動でマークされたりなど、便利な機能がたくさんあります。

iloveimg

画像を圧縮できるサービスです。圧縮率がとても優れています。また、画像のトリミングやサイズ変換なども行えます。

mount

アクセスしている端末のOSやブラウザ情報を確認できるサービスです。

クライアントの端末でのみ表示崩れなどの不具合があったときに、このサイトにアクセスしてもらって表示されているテキストを全部送ってもらうだけでOKです。

ご利用環境チェックツール

こちらもmountと同様に、アクセスしている端末の情報を確認できます。こちらはライトめな時にサクッと使えます。

IP確認くん

IPアドレスを確認できるサービスです。

.htpasswdファイル生成(作成)

htaccessのBasic認証で必要なパスワードを生成できるサービスです。

carbon

コードをエディタのようにいい感じに表示して、それを画像化してくれるサービスです。