ウェブ

作業効率UP爆速!!画像圧縮&変換&URL短縮&Code比較サイト一覧※利便性と引換に危険性も。【WEB上便利ツールまとめ】

作業効率UP爆速

Web製作をしていく中で、「画像の拡張子を変えたい」「動画のデータ量を減らしたい」といった悩みがつきものです。

そこでデータの「圧縮変換」を簡単にできるサイトをご紹介、作業効率化アップする為のまとめ記事になっています。

ただ注意点として、利便性と引換に危険性も含んでいる場合があります。

ファイル変換Webサービスの危険性

オンライン上で様々な形式のファイルを変換や圧縮機能があるサイトが多いですが、オンライン上でファイルをダウンロードする際に危険性もあると認識しなければいけません。

ファイルの流出とデータ搾取の可能性があるので、圧縮変換するファイルは流出しても問題ないものの時に使用しましょう。

もう一つのリスクは、ダウンロード時にスパイウェアに感染する可能性があると言うことです。

安全性重視であれば、ローカルでファイル変換

安全性重視であれば、Adobe Acrobat Pro DCのソフト(PDFファイル変換)を利用してローカル環境でファイル変換をすることをお勧めします。インターネットにファイルをアップロードする必要がなくなるので危険性は0になります。

【アドビ公式】

➡ Adobe Acrobat

※Adobeのログインが必要になります。

Adobe Acrobat
Adobe Acrobat

パスワード生成

ルフトツールズ(LUFTTOOLS)

➡ パスワード生成

パスワードを生成(自動作成)することができるツールで、文字数は2~40文字まで、個数は最大1,000個まで生成できます。

ルフトツールズ(LUFTTOOLS)
ルフトツールズ(LUFTTOOLS)

URL短縮

短縮URL QRコード生成

➡ 短縮URL QRコード生成

WebサイトのURLを入力して生成ボタンをクリックするだけで短縮URLとQRコードを発行してくれるサイトです。

短縮URL QRコード生成
短縮URL QRコード生成

サイト管理者調査

➡ aguse

URL入力で興味あるサイトを誰が運営しているのかや、どのプロバイダを利用しているのかを調べることができます。

aguse
aguse

画像:圧縮&変換

TinyWow

➡ TinyWow

ほぼすべてのファイル形式、PNG・PDF・JPG・WebPを変換・置換・圧縮できるサイトです。

TinyWow
TinyWow

サルワカ道具箱

➡ サルワカ道具箱

画像サイズ変更、PNG→JPEG変換、WebP画像へ変換とブラウザで使える便利なツールが豊富に揃っています。

サルワカ道具箱
サルワカ道具箱

SYNCER

➡ SYNCER

変換ツールが豊富に揃っています。

SYNCER
SYNCER

TinyPNG

➡ jpg、png、webpを圧縮軽量化

※20枚以上の画像ファイルは圧縮できないので、分けてアップロードしダウンロードしましょう。※5MB以上の画像ファイルは圧縮できません。

TinyPNG
TinyPNG

iLoveIMG

➡ 一括で画像編集できるすべてのツールが無料

「画像の圧縮、画像のサイズ変更、画像の切り抜き、JPGに変換、JPGから変換、写真エディター、透かし画像、ミームジェネレーター、画像の回転、HTMLから画像」と多機能サイト。

iLoveIMG
iLoveIMG

onlineconvertfree

➡ PNGをSVG変換

PNGをSVG変換
PNGをSVG変換

JPG to PNG

➡ JPG~PNGとPNG~JPGの圧縮

JPG~PNGとPNG~JPGの大量変換が50MBのファイルまで利用可能です。

JPG to PNG
JPG to PNG

Optimizilla

➡ JPEG、GIF、PNGを圧縮

JPEG、GIFやPNGイメージを最小サイズに圧縮するサイトです。

Optimizilla
Optimizilla

ダミーの画像自動生成

➡ placehold.jp

とりあえずサンプルの画像が欲しい場合に幅と高さを入力すると簡単にダミー用の画像を生成することができます。

placehold.jp
placehold.jp

動画:圧縮&変換

AC NVERT.COM

➡ MP4からGIFに変換

AC NVERT.COM
AC NVERT.COM

freeconvert

➡ mp4動画ファイルを圧縮

freeconvert
freeconvert

MP4を圧縮する前にコーデック、圧縮モード、端末とご互換性を設定することもできます。

VideoSmaller

➡ mp4動画ファイルを圧縮

mp4自体かなりデータ量が大きい為、動画の圧縮はとても役に立ちます。

VideoSmaller
VideoSmaller

Webデザイナー向け

MONJI

➡ MONJI

修正依頼するサイトURLを入力すると、ブラウザ上にキャッチ画像が表示され、デザインの修正依頼する箇所を囲ってコメントなどを残すことができます。

MONJI
MONJI

Code-コーダー向け便利ツール

W3C

➡ W3C

Webサイトの運営でHTMLを正しく記述されているかサイトURLを入力して、Code構造がしっかりされているか機械的にチェックができます。

W3C
W3C

PageSpeed Insights

➡ PageSpeed Insights

Webサイトの表示速度のパフォーマンスを数値で表してくれる上に、どの部分がページ速度に影響しているのか詳細を調べることができます。

PageSpeed Insights
PageSpeed Insights

cdnjs

➡ cdnjs.com

jQueryなど最新バージョンを確認しCDNのURLを簡単に取得することができます。

cdnjs.com
cdnjs.com

caniuse

➡ caniuse.com

CSSのプロパティやhtml5要素の各ブラウザの対応状況が確認できるサービスです。

caniuse
caniuse

ラッコツール

➡ ラッコツールズ

➡ OGP確認

SNSシェア時のOGP画像・タイトル・説明文のサイズ・見え方を確認することができます。

OGP確認
OGP確認

difff《デュフフ》

➡ difff《デュフフ》

difffはテキストBOXに比較したいCodeをコピペしてボタンを押すだけで2つの文章でどこが変更されたのか、差分の確認ができます。

difff《デュフフ》
difff《デュフフ》

CSS 2 SASS/SCSS CONVERTER

➡ CSS SASS/SCSS

CSSからSASSもしくはSCSSに一括で置換してくれるツールです。

CSS 2 SASS/SCSS
CSS 2 SASS/SCSS

sassmeister

➡ sassmeister

SCSSからCSSに一括で置換してくれるサイトです。

sassmeister
sassmeister

OMatsuni

➡ CSSを生成

CSSで波線を自分で作るとなると、かなり大変ですがこのサイトを使用するとクリックで線を調整して、自動でCSSを生成してくれます。

OMatsuni
OMatsuni

Toptal

➡ CSS Minifier

Codeを張り付けてワンクリックで改行を一括で削除置換してくれます。

Toptal
Toptal

Code-コーダー向け(コードサンプル)

the component gallery

➡ コンポーネントギャラリー

様々なコードを閲覧しコピーペーストで実装可能になっているサイトです。

コンポーネントギャラリー
コンポーネントギャラリー

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

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

Webサイトの動きを実現する仕組みと準備について基礎から学ぶこともでき、基本を理解してからコピペで簡単実装できます。

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

まとめ

フリーのWebサービスの利用はリスクがありますので、仕組みをある程度理解し許容できるリスクを考えた上で利用するようにしましょう。

またWeb製作の際の必要なセキュリティ対策についての記事もありますので、合わせてご確認ください。

▪Basic認証をかける方法。専門の知識不要プラグイン【 HTTP Auth】

ベーシック認証のアイキャッチ画像
Basic認証をかける方法。専門の知識不要プラグイン【 HTTP Auth】Webサイトにアクセス制限をかける方法で一番簡単なのがBasic認証(ベーシック認証)で、「ルートディレクトリの.htaccessにコードを記述する方法」と「WordPressのプラグインHTTP AUTHを使った設定方法」の両方解説します。...

▪SSL化とhttpからhttpsへのリダイレクト方法【セキュリティ】

リダイレクトアイキャッチ画像
SSL化とhttpからhttpsへのリダイレクト方法【セキュリティ】ホームページを作成する上でセキュリティ対策が必ず必要となってきます。その一つにホームページのSSL化は必須項目になります。SSLはインターネット上の通信を暗号化して送受信する仕組みで個人情報などの重要なデータを暗号化することで通信を安全に行うことが可能になるという事です。「SSL化」と「httpからhttpsへのリダイレクト方法」までの解説。...