Web制作に便利なWebサービスまとめ

2019.09.21 2019.09.23Webサービス
Web制作に便利なWebサービスまとめ

Web制作するときによく使っているWebサービスをまとめまてみました。

僕はフリーランスのWebデザイナーとして会社やお店のサイトを作ることが多いので、ここで紹介するWebサービスもそういうのを作るときに使うことが多いものかと思います。

あとソーシャルメディアの運営を手伝うこともあるので、そっち系の開発者向けサービスも掲載します。

目次

画像圧縮(軽量化)

TinyPNG

TinyPNG

1ファイルにつき5MB、最大20件まで無料でアップロード&圧縮できます。
5MB以上の画像を圧縮したい場合は有料版(25ドル/年)に申し込むか、下で紹介する圧縮サイトを利用してください。

JPG・PNG・PDF圧縮

JPG・PNG・PDF圧縮

最大20件までのJPG・PNG・PDFを圧縮できるサイト。
5MB以上の画像もアップロードできるので、TinyPNGで無理な場合はコチラで。

Webフォント

Adobe Fonts

Adobe Fonts

Adobeが提供しているWebフォントサービス。
Adobeのアカウント持っている場合は追加料金なしで使えます。
日本語フォントも充実していて、Webフォントとしてだけじゃなくイラレやフォトショなどでも使えるので便利です。

Google Fonts

Google Fonts

GoogleのWebフォントサービスで、無料・商用可能で大量のWebフォントを利用できます。
日本語フォントはあまり多くないですが、Noto Sans / Noto serifはどんなサイトでも使いやすいかも。
Kosugiもいいですがfont-weightがひとつしかないのが微妙です。

Facebook

Facebook Developers

Facebook Developers

Facebookの開発者向けページ。
アプリID取得、FBアプリ開発などに。

Facebookシェアデバッガー

Facebookシェアデバッガー

Facebookでコンテンツがシェアされたときの情報をデバッグできます。

Find your Facebook ID

Find your Facebook ID

Facebook個人アカウントのIDを調べたいときに。

Twitter

Twitter Card validator

Twitter Card validator

Twitterでコンテンツがシェアされたときのカードの見え方を確認できます。

ひすったー

ひすったー

Twitterのフォローやブロックの管理に便利です。

Instagram

InstaWidget

InstaWidget

サイト上にインスタグラムの写真を表示できます。
アカウントだけじゃなく、ハッシュタグを指定して表示もできるので便利です。

SnapWidget

SnapWidget

こちらもインスタグラムを表示するウィジェット。
ソース生成の際にアカウントにログインする必要があるので、場合によっては使いづらいかも。

BASE

BASE ファイルアップローダー

BASE ファイルアップローダー

BASEでテーマを制作する際のファイル(画像・CSS・JS)をアップロードできます。

BASE Apps

BASE Apps

BASEショップ機能を追加するAppsの検索・設定ができます。

BASE デザインマーケット

BASE デザインマーケット

BASEのデザイン(テーマ)を購入できます。

カラーミーショップ

カラーミーショップ 画像ファイル管理

カラーミーショップ 画像ファイル管理

ショップのデザインなどで使用する画像ファイルをアップロードできます。

テキスト・ソースコード整形

Syncer CSS・JavaScript・HTMLの整形

Syncer CSS・JavaScript・HTMLの整形

CSS・JavaScript・HTMLにインデントや改行を追加して整形できます。

改行・空白・タブ削除ツール

改行・空白・タブ削除ツール

テキストの中の改行・タブ・スペースを削除できます。
クライアントからパワポやワードで資料を提供された場合、余計なスペースとか入っている場合が多いのでそういうときに便利です。

テキスト・ソースコード差分チェック

Diffchecker

Diffchecker

テキストやソースコードの差分をチェックできます。

difff《デュフフ》

difff《デュフフ》

こちらもテキスト・ソースコードの差分チェックができます。
ただ僕だけかもしれませんがつながりづらいことがあるので、通常は上のサイトを使っています。

マークアップバリデーション

The W3C Markup Validation Service

The W3C Markup Validation Service

W3Cが提供するバリデーションチェックサービス。
URL(URL)を指定する方法かファイルをアップロードする方法、ソースを直接入力する方法を選べます。

DirtyMarkup Formatter

DirtyMarkup Formatter

HTML・CSS・JS・APIのバリデーションチェックと整形が同時にできるサービスです。
日本語には対応していませんがチェックしたいソースコードの種類を選択して「Clean」ボタンを押すだけなので使い方も簡単です。

文字数カウント

文字数をカウントするサービス。
タイトルやディスクリプションを作成するときなどに。

文字数カウンタ

文字数カウンタ

半角スペース、タブ、改行を除外してカウントしてくれます。

文字数カウント

文字数カウント

スペースあり・なし、行数、段落数なども数えてくれます。

メールアドレス変換

メールアドレスをエンティティ変換するサービス。
Webページ上でメールアドレスを公開していると、ロボットに収集され迷惑メールを送り付けられる原因になります。
エンティティ変換するとロボットに収集されにくくなるとされています。

メールアドレス変換フォーム

メールアドレス変換フォーム

メールアドレスの文字列を10進数コードに変換してくれます。

HTMLエンティティ化

HTMLエンティティ化

上のサービスと同じように10進数に変換してくれます。
オプションで変換した文字列をaタグで囲むことができます。

ダミーテキスト

サイトに掲載するコンテンツがそろっていないときに、とりあえずのテキストを用意するのに便利です。

ダミーテキストジェネレータ

ダミーテキストジェネレータ

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

日本語ダミーテキスト生成器

日本語ダミーテキスト生成器

ダミーテキスト作成ツール

ダミーテキスト作成ツール

Dummy HTML snippets for webdesigners

Dummy HTML snippets for webdesigners

HTMLタグ付きのダミーテキスト。

Lorem Ipsum HTML Generator

Lorem Ipsum HTML Generator

こちらもHTML付きダミーテキスト。

テキストエンコード/デコード

日本語ドメインの変換などに。

URLエンコード/デコード

URLエンコード/デコード

エンコードマニアックス

エンコードマニアックス

URLエンコード・デコードフォーム

URLエンコード・デコードフォーム

ダミー画像生成

ダミー画像を生成するサービス。

Dynamic Dummy Image Generator

Dynamic Dummy Image Generator

Fake images please?

Fake images please?

Placehold.jp

Placehold.jp

PlaceIMG

PlaceIMG

動画圧縮

背景に動画を表示するサイトとかを作るときに。

VideoSmaller

VideoSmaller

Online Video Converter

Online Video Converter

アイコン

Font Awesome

Font Awesome

ド定番のアイコンフォント。
チートシートが便利です。

FLAT ICON DESIGN

FLAT ICON DESIGN

商用利用可能なアイコンの配布サイト。
一時期いろんなサイトで使われてましたね。

FLATICON

FLATICON

無料アイコンの配布サイト。
有料版だとちょっと質のいいアイコンも使えます。

iconmonstr

iconmonstr

モノクロのアイコン。

icooon-mono

icooon-mono

これもモノクロアイコン。

IcoMoon

IcoMoon

アイコンフォント。
Font AwesomeにLINEのアイコンが追加されるまではたまに使ってました。

ファイル転送

GigaFile

GigaFile

無料・会員登録なしで容量無制限(1ファイル100GBまで)でファイル転送ができるサービス。
会員登録すると1ファイル200GBまでOKかつファイルの保持期間を7・14・21・30・60日間のどれかに指定できるようになります。

SmartData便

SmartData便

最大1GBまでのファイル転送サービス。
シンプルで使いやすいのが売りのようです。

おくりん坊

おくりん坊

無料・会員登録なしで500MBまで転送可能。
会員登録すると2GBまでアップロードできます。

データ便

データ便

会員登録不要で500MBまで送れます。
アンケートに答えると無料で2GBまで有料(300円~/月)で容量無制限で利用できます。

firestorage

firestorage

無料・容量無制限(1ファイル最大2GiBまで)で転送可能。
有料プランは2種類あって5GiB、10GiBまでそれぞれ転送可能です。

ページ表示速度

ページの表示に時間がかかるとユーザーの離脱につながるほか、SEO的な評価にも影響します。

PageSpeed Insights

PageSpeed Insights

Googleが提供しているページ表示速度をチェックできるサービス。
モバイルとパソコンそれぞれでチェックできます。

ページ表示のどこに時間がかかったかチェックするブックマークレット

ページ表示のどこに時間がかかったかチェックするブックマークレット

ページ表示速度をチェックするブックマークレット。
ブラウザのブックマークに追加しておくだけで使えるので非常に便利。

SRC速度測定

SRC速度測定

ページが重い原因を調べる。

パスワード生成

WordPressをインストールしたりBASIC認証を設定したりと、何かとパスワードが必要になります。
パスワード生成サービスを使うと強度のあるパスワードが手軽に生成できます。

パスワード生成

パスワード生成

パスワードに大文字・小文字・数字・記号のどれを含めるか選択できます。
また生成したパスワードをテキストデータでダウンロードも可能です。

パスワード生成ツール

パスワード生成ツール

機能的には上のサイトと大差ありませんが、文字数を16文字まで選ぶことができます。

キーワード選定

コンテンツを作成する際のキーワード選定に使えるWebサービスです。

Googleキーワードプランナー

Googleキーワードプランナー

Googleの提供するキーワード選定サービス。
Google広告のアカウントを持っていると使えますが、検索ボリュームが「1万~10万」みたいな感じでかなりボンヤリ表示されます。
より精度の高い情報が知りたい場合はGoogle広告に出稿すれば可能になります。

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

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

キーワードを入力すると関連キーワードをズラッと表示してくれるサービス。
アフィリエイターの人だとこのサービスのみでコンテンツの構成を考える人もいるみたいです。

言選Web

言選Web

テキストの中から専門用語を抽出できるサービス。
精度的には微妙な印象なので、まぁ参考程度に。

aramakijake.jp

aramakijake.jp

キーワードを入力すると、そのキーワードの月間検索ボリュームが分かるサービス。

共起語検索ツール

共起語検索ツール

あるキーワードについて文章を書く際に同時に使用される確率の高い「共起語」を抽出してくれるサービス。

goodkeyword

goodkeyword

入力したキーワードに関連するキーワードを検索エンジンのサジェストなどから抽出してくれるサービス。

Kouho

Kouho

上のサイト同様、サジェストから関連キーワードを抽出してくれるサービス。

短縮URL

ソーシャルメディアなど文字数制限がある場合、長いURLだと投稿が難しくなります。
そういうときは短縮URLに変換するのがおすすめです。

Bitly

Bitly

生成した短縮URLの末尾に「+」を付加することでクリック数が計測できます。

TinyURL

TinyURL

コチラはクリック数などの計測は無理そう。

エクセル・CSVファイル編集

Googleスプレッドシート

Googleスプレッドシート

オンラインでエクセル、CSVなどのファイルを編集できるサービス。
ダウンロードする際にファイル形式を選べます。

Excel Online

Excel Online

Microsoft OfficeのExcelがオンラインで使えます。

パワーポイント編集

Googleスライド

Googleスライド

パワポファイルをオンラインで編集できるサービス。

PowerPoint Online

PowerPoint Online

Microsoft OfficeのPowerPointがオンラインで使えます。

Wordファイル編集

Googleドキュメント

Googleドキュメント

オンラインでWordファイルなどを編集できるサービス。

Word online

Word online

Microsoft OfficeのWordがオンラインで使えます。

スマホ対応

モバイルフレンドリーテスト

モバイルフレンドリーテスト

Googleが提供している、サイトがモバイル対応しているかチェックできるサービス。

SEO対策

Googleアナリティクス

Googleアナリティクス

Googleサーチコンソール

Googleサーチコンソール

古いコンテンツの削除

古いコンテンツの削除

Googleにインデックスされている古いコンテンツの削除申請。

SimilarWeb

SimilarWeb

競合サイトの分析に。

Wayback Machine

Wayback Machine

ウェブサイトの過去バージョンを確認できるサービス。
こちらのページに書いてあるように検索順位が下がったときの原因特定に使えます。
また競合サイトがどんな方針で運営しているかを分析したりもできます。

SEOチェキ!

SEOチェキ!

URLを入力するとタグやインデックス数などのSEOに関する情報が無料で取得できます。

マインドマップ

サイトコンテンツを作成する際には、マインドマップを作成すると捗ります。

MindMeister

MindMeister

ムダな機能がなくデザインもきれいで使いやすいです。
無料プランは作成できるマインドマップは3つまで、有料プランでは無制限に作成可能です。

Text2MindMap

Text2MindMap

テキストを入力すると即時にマインドマップに追加され、Tabキーで階層化できます。
サクサク動き、会員登録なしですぐ使えるため非常に使い勝手のいいサービスです。

ローディングアイコン

Preloaders.net

Preloaders.net

ローディングアイコンをGIFやSVGなどで手軽に作成できるサービス。

モックアップ

MockUPhone

MockUPhone

サイトをスマホやタブレットで表示したときのモックアップを手軽に作成できます。

消費税計算

消費税計算

消費税計算

税込み・税抜き料金を計算できるサービス。
請求書などの書類を作るときに便利です。

グラフ作成

Eegraph

Eegraph

きれいなグラフを手軽に作成できるサービス。
無料プランでは5個/月、有料プランでは50個/月のグラフ作成が可能。
とはいえ無料プランではグラフを画像で出力できないため、Web制作という意味では有料プランでないとメリットが薄いかも。

写真素材

Shutterstock

Shutterstock

有料ストックフォトサイト。
世界的にも有名なサービスで写真のクオリティも高いですが、その分、日本人の写真は比較的少なめな印象です。

Adobe Stock

Adobe Stock

Adobeが運営している有料ストックフォトサイト。
コチラも写真のクオリティは申し分ないです。
プラン内容はShutterstockと似たような感じですが、料金はちょっと高めです。

PIXTA

PIXTA

国内最大手の有料ストックフォトサイト。
日本発なだけあって日本人モデルの素材が豊富です。
無難な写真が多いので、いろんな業種の案件で使えます。

Unsplash

Unsplash

無料だけどクオリティの高い写真がたくさんあるストックフォトサイトです。
ただ癖のある色調補正がされている素材が多いので使いどころは限られるかもしれません。
ブログのサムネイルとかなら全然イケます。

Pixabay

Pixabay

こちらもなかなか高品質な無料ストックフォトサイト。
素材の数も100万点以上あるようなのでサムネ程度なら便利に使えます。

ぱくたそ

ぱくたそ

国内のフリー素材サイト。
わりと特殊なシチュエーションの写真など用意されていますが、素材点数が多くない印象。

写真AC

写真AC

国内の無料写真素材サイト。
コチラもあまり素材点数は多くありません。
素材の質と関係ないけどSEOに強くていつも検索上位にいる気がします。

Webデザインリンク集

Webデザインの勉強やアイディア出しに。

straightline bookmark

straightline bookmark

MUUUUU.ORG

MUUUUU.ORG

bookma!

bookma!

Minimal Exhibit

Minimal Exhibit

Awwwards

Awwwards

I/O 3000

I/O 3000

ズロック

ズロック

81-web.com

81-web.com

S5-Style

S5-Style

.SG_BOOKMARK

.SG_BOOKMARK

Web Design Clip

Web Design Clip

siteInspire

siteInspire

CSSMania

CSSMania

Responsive Web Design JP

Responsive Web Design JP

Web Design Clip [L]

Web Design Clip [L]

柴田 竹思

柴田 竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら