Web製作をしていく中で、「画像の拡張子を変えたい」「動画のデータ量を減らしたい」といった悩みがつきものです。
そこでデータの「圧縮・変換」を簡単にできるサイトをご紹介、作業効率化アップする為のまとめ記事になっています。
ただ注意点として、利便性と引換に危険性も含んでいる場合があります。
ファイル変換Webサービスの危険性
オンライン上で様々な形式のファイルを変換や圧縮機能があるサイトが多いですが、オンライン上でファイルをダウンロードする際に危険性もあると認識しなければいけません。
ファイルの流出とデータ搾取の可能性があるので、圧縮変換するファイルは流出しても問題ないものの時に使用しましょう。
もう一つのリスクは、ダウンロード時にスパイウェアに感染する可能性があると言うことです。
安全性重視であれば、ローカルでファイル変換
安全性重視であれば、Adobe Acrobat Pro DCのソフト(PDFファイル変換)を利用してローカル環境でファイル変換をすることをお勧めします。インターネットにファイルをアップロードする必要がなくなるので危険性は0になります。
【アドビ公式】
※Adobeのログインが必要になります。
パスワード生成
ルフトツールズ(LUFTTOOLS)
パスワードを生成(自動作成)することができるツールで、文字数は2~40文字まで、個数は最大1,000個まで生成できます。
URL短縮
短縮URL QRコード生成
WebサイトのURLを入力して生成ボタンをクリックするだけで短縮URLとQRコードを発行してくれるサイトです。
サイト管理者調査
URL入力で興味あるサイトを誰が運営しているのかや、どのプロバイダを利用しているのかを調べることができます。
画像:圧縮&変換
TinyWow
ほぼすべてのファイル形式、PNG・PDF・JPG・WebPを変換・置換・圧縮できるサイトです。
サルワカ道具箱
画像サイズ変更、PNG→JPEG変換、WebP画像へ変換とブラウザで使える便利なツールが豊富に揃っています。
SYNCER
変換ツールが豊富に揃っています。
TinyPNG
※20枚以上の画像ファイルは圧縮できないので、分けてアップロードしダウンロードしましょう。※5MB以上の画像ファイルは圧縮できません。
iLoveIMG
「画像の圧縮、画像のサイズ変更、画像の切り抜き、JPGに変換、JPGから変換、写真エディター、透かし画像、ミームジェネレーター、画像の回転、HTMLから画像」と多機能サイト。
onlineconvertfree
JPG to PNG
JPG~PNGとPNG~JPGの大量変換が50MBのファイルまで利用可能です。
Optimizilla
JPEG、GIFやPNGイメージを最小サイズに圧縮するサイトです。
ダミーの画像自動生成
とりあえずサンプルの画像が欲しい場合に幅と高さを入力すると簡単にダミー用の画像を生成することができます。
動画:圧縮&変換
AC NVERT.COM
freeconvert
MP4を圧縮する前にコーデック、圧縮モード、端末とご互換性を設定することもできます。
VideoSmaller
mp4自体かなりデータ量が大きい為、動画の圧縮はとても役に立ちます。
Webデザイナー向け
MONJI
修正依頼するサイトURLを入力すると、ブラウザ上にキャッチ画像が表示され、デザインの修正依頼する箇所を囲ってコメントなどを残すことができます。
Code-コーダー向け便利ツール
W3C
Webサイトの運営でHTMLを正しく記述されているかサイトURLを入力して、Code構造がしっかりされているか機械的にチェックができます。
PageSpeed Insights
Webサイトの表示速度のパフォーマンスを数値で表してくれる上に、どの部分がページ速度に影響しているのか詳細を調べることができます。
cdnjs
jQueryなど最新バージョンを確認しCDNのURLを簡単に取得することができます。
caniuse
CSSのプロパティやhtml5要素の各ブラウザの対応状況が確認できるサービスです。
ラッコツール
SNSシェア時のOGP画像・タイトル・説明文のサイズ・見え方を確認することができます。
difff《デュフフ》
difffはテキストBOXに比較したいCodeをコピペしてボタンを押すだけで2つの文章でどこが変更されたのか、差分の確認ができます。
CSS 2 SASS/SCSS CONVERTER
CSSからSASSもしくはSCSSに一括で置換してくれるツールです。
sassmeister
SCSSからCSSに一括で置換してくれるサイトです。
OMatsuni
CSSで波線を自分で作るとなると、かなり大変ですがこのサイトを使用するとクリックで線を調整して、自動でCSSを生成してくれます。
Toptal
Codeを張り付けてワンクリックで改行を一括で削除置換してくれます。
Code-コーダー向け(コードサンプル)
the component gallery
様々なコードを閲覧しコピーペーストで実装可能になっているサイトです。
動くWebデザインアイディア帳
Webサイトの動きを実現する仕組みと準備について基礎から学ぶこともでき、基本を理解してからコピペで簡単実装できます。
まとめ
フリーのWebサービスの利用はリスクがありますので、仕組みをある程度理解し許容できるリスクを考えた上で利用するようにしましょう。
またWeb製作の際の必要なセキュリティ対策についての記事もありますので、合わせてご確認ください。
▪Basic認証をかける方法。専門の知識不要プラグイン【 HTTP Auth】
▪SSL化とhttpからhttpsへのリダイレクト方法【セキュリティ】