Web製作をしていく中で、「画像の拡張子を変えたい」「動画のデータ量を減らしたい」といった悩みがつきものです。
そこでデータの「圧縮・変換」を簡単にできるサイトをご紹介、作業効率化アップする為のまとめ記事になっています。
ただ注意点として、利便性と引換に危険性も含んでいる場合があります。
ファイル変換Webサービスの危険性
オンライン上で様々な形式のファイルを変換や圧縮機能があるサイトが多いですが、オンライン上でファイルをダウンロードする際に危険性もあると認識しなければいけません。
ファイルの流出とデータ搾取の可能性があるので、圧縮変換するファイルは流出しても問題ないものの時に使用しましょう。
もう一つのリスクは、ダウンロード時にスパイウェアに感染する可能性があると言うことです。
安全性重視であれば、ローカルでファイル変換
安全性重視であれば、Adobe Acrobat Pro DCのソフト(PDFファイル変換)を利用してローカル環境でファイル変換をすることをお勧めします。インターネットにファイルをアップロードする必要がなくなるので危険性は0になります。
【アドビ公式】
※Adobeのログインが必要になります。
![Adobe Acrobat](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-27-15-25-37-561-1024x550.jpg)
パスワード生成
ルフトツールズ(LUFTTOOLS)
パスワードを生成(自動作成)することができるツールで、文字数は2~40文字まで、個数は最大1,000個まで生成できます。
![ルフトツールズ(LUFTTOOLS)](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-11-08-46-356-1024x541.jpg)
ルフトツールズ(LUFTTOOLS)は、ウェブ制作に役立つ便利なツールを提供するウェブサイトです。このサイトは、ウェブ開発者やデザイナーが効率的に作業を行うためのツールやリソースを提供しています。
他にも、以下のようなツールやリソースが提供されています。
カラーパレットジェネレーター | カラースキームを生成し、デザインに使用するカラーパレットを作成できるツール。 |
レスポンシブデザインテスター | 異なる画面サイズやデバイスでの表示をシミュレートし、レスポンシブデザインのテストができるツール。 |
CSSコードジェネレーター | ボタンやボックスなどの要素に対して、カスタマイズ可能なCSSコードを生成するツール。 |
フォントアイコンセット | ウェブフォントを使用したアイコンセットを提供するリソース。 |
パフォーマンス最適化ツール | ウェブサイトのパフォーマンスを改善するための最適化ツールやテクニックを提供するリソース。 |
URL短縮
短縮URL QRコード生成
「Short URL QR code generator」は、短縮URLとQRコードを生成するウェブサイトです。このサイトを利用することで、長いURLを短く縮めることができます。また、生成された短縮URLに対応するQRコードも作成されます。
![短縮URL QRコード生成](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-27-14-43-33-363.jpg)
QRコードは、スマートフォンやタブレットなどのデバイスで読み取ることができる2次元バーコードです。短縮URLに対応したQRコードを作成することで、ユーザーがQRコードをスキャンすることで簡単にウェブページにアクセスできるようになります。
このサイトを利用すると、以下のような流れで短縮URLとQRコードを生成することができます。
- 元となる長いURLを入力します。
- サイト内で短縮URLが生成され、表示されます。
- 同時に、生成された短縮URLに対応するQRコードも表示されます。
- QRコードをダウンロードしたり、ウェブページに埋め込んだりすることができます。
このようなサイトを利用することで、長いURLを短く縮めてQRコードとして提供することができます。ユーザーはQRコードをスキャンするだけで簡単に指定されたウェブページにアクセスできるため、マーケティングや広告などの目的で利用されることがあります。
サイト管理者調査
URL入力で興味あるサイトを誰が運営しているのかや、どのプロバイダを利用しているのかを調べることができます。
![aguse](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-11-20-21-782-1024x380.jpg)
画像:圧縮&変換
TinyWow
ほぼすべてのファイル形式、PNG・PDF・JPG・WebPを変換・置換・圧縮できるサイトです。
![TinyWow](https://design-pull.com/wp-content/uploads/2022/09/screencapture-tinywow-2022-10-06-09_11_30-686x1024.jpg)
サルワカ道具箱
画像サイズ変更、PNG→JPEG変換、WebP画像へ変換とブラウザで使える便利なツールが豊富に揃っています。
![サルワカ道具箱](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-10-26-31-315-1024x604.jpg)
SYNCER
SYNCERは、ウェブ制作やプログラミングに関連する情報や知識を提供するオンラインメディアです。SYNCERでは、ウェブ開発、デザイン、マーケティング、サーバー管理など、さまざまなトピックについての記事やチュートリアルを提供しています。また、最新のトレンドや技術に関する情報も提供しており、プログラマーやウェブ制作者にとって役立つ情報源として利用されています。
![SYNCER](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-10-31-12-648-1024x576.jpg)
TinyPNG
TinyPNGは、画像の圧縮サービスを提供するウェブサイトです。主な目的は、ウェブサイトやアプリケーションで使用される画像のサイズを最適化し、ファイルサイズを小さくすることです。画像の圧縮によって、ウェブページの読み込み速度を向上させることができます。
TinyPNGは、JPEGやPNG形式の画像をアップロードすると、高度な圧縮アルゴリズムを使用して画像サイズを最小限に抑えます。圧縮後の画像は、ビジュアル品質にほとんど影響を与えず、ファイルサイズが削減されます。また、透過PNG画像の圧縮にも対応しています。
このサービスを利用することで、ウェブサイトやアプリのパフォーマンスを向上させるための軽量な画像を作成できます。
※20枚以上の画像ファイルは圧縮できないので、分けてアップロードしダウンロードしましょう。※5MB以上の画像ファイルは圧縮できません。
![TinyPNG](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-27-13-40-59-545-1024x522.jpg)
iLoveIMG
iLoveIMGは、画像編集やファイル変換に特化したオンラインサービスです。主な目的は、ユーザーが画像ファイルをアップロードし、さまざまな編集操作を行ったり、異なるフォーマットに変換したりすることです。
![iLoveIMG](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-26-11-40-55-085-1024x595.jpg)
iLoveIMGでは、以下のような機能を提供しています。
画像のリサイズやトリミング | 画像のサイズを変更したり、不要な部分を切り取ったりすることができます。 |
画像の圧縮 | 高品質な画像のままでファイルサイズを縮小することができます。ウェブサイトの読み込み速度を向上させるために役立ちます。 |
画像の回転や反転 | 画像を回転させたり、左右反転させたりすることができます。 |
画像の変換 | 異なる画像フォーマットに変換することができます。たとえば、JPEGからPNGやGIFに変換することができます。 |
onlineconvertfree
![PNGをSVG変換](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-10-21-00-400-1024x565.jpg)
JPG to PNG
JPG~PNGとPNG~JPGの大量変換が50MBのファイルまで利用可能です。
![JPG to PNG](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-27-14-55-52-176-1024x648.jpg)
Optimizilla
JPEG、GIFやPNGイメージを最小サイズに圧縮するサイトです。
![Optimizilla](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-27-15-00-55-257-1024x633.jpg)
ダミーの画像自動生成
とりあえずサンプルの画像が欲しい場合に幅と高さを入力すると簡単にダミー用の画像を生成することができます。
![placehold.jp](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-13-27-25-900-1024x626.jpg)
動画:圧縮&変換
AC NVERT.COM
![AC NVERT.COM](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-26-11-43-38-862-1024x568.jpg)
freeconvert
![freeconvert](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-10-23-20-40-27-111-1024x508.jpg)
MP4を圧縮する前にコーデック、圧縮モード、端末とご互換性を設定することもできます。
VideoSmaller
mp4自体かなりデータ量が大きい為、動画の圧縮はとても役に立ちます。
![VideoSmaller](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-27-15-49-43-248-1024x615.jpg)
Webデザイナー向け
MONJI
修正依頼するサイトURLを入力すると、ブラウザ上にキャッチ画像が表示され、デザインの修正依頼する箇所を囲ってコメントなどを残すことができます。
![MONJI](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-14-19-57-339-1024x477.jpg)
Code-コーダー向け便利ツール
W3C
Webサイトの運営でHTMLを正しく記述されているかサイトURLを入力して、Code構造がしっかりされているか機械的にチェックができます。
![W3C](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-14-53-53-036-1024x438.jpg)
PageSpeed Insights
Webサイトの表示速度のパフォーマンスを数値で表してくれる上に、どの部分がページ速度に影響しているのか詳細を調べることができます。
![PageSpeed Insights](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-29-08-57-19-008-1024x429.jpg)
cdnjs
jQueryなど最新バージョンを確認しCDNのURLを簡単に取得することができます。
![cdnjs.com](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-10-31-11-31-31-822-1024x576.jpg)
caniuse
CSSのプロパティやhtml5要素の各ブラウザの対応状況が確認できるサービスです。
![caniuse](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-14-26-41-457-1024x610.jpg)
ラッコツール
SNSシェア時のOGP画像・タイトル・説明文のサイズ・見え方を確認することができます。
![OGP確認](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-14-32-42-800-1024x649.jpg)
difff《デュフフ》
difffはテキストBOXに比較したいCodeをコピペしてボタンを押すだけで2つの文章でどこが変更されたのか、差分の確認ができます。
![difff《デュフフ》](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-10-43-39-682-1024x530.jpg)
CSS 2 SASS/SCSS CONVERTER
CSSからSASSもしくはSCSSに一括で置換してくれるツールです。
![CSS 2 SASS/SCSS](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-10-48-29-792-1024x612.jpg)
sassmeister
SCSSからCSSに一括で置換してくれるサイトです。
![sassmeister](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-13-19-49-224.jpg)
OMatsuni
CSSで波線を自分で作るとなると、かなり大変ですがこのサイトを使用するとクリックで線を調整して、自動でCSSを生成してくれます。
![OMatsuni](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-11-27-05-735-1024x577.jpg)
Toptal
Codeを張り付けてワンクリックで改行を一括で削除置換してくれます。
![Toptal](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-11-41-57-051-1024x516.jpg)
Code-コーダー向け(コードサンプル)
the component gallery
様々なコードを閲覧しコピーペーストで実装可能になっているサイトです。
![コンポーネントギャラリー](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-13-08-09-343-1024x559.jpg)
動くWebデザインアイディア帳
Webサイトの動きを実現する仕組みと準備について基礎から学ぶこともでき、基本を理解してからコピペで簡単実装できます。
![動くWebデザインアイディア帳](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-28-13-10-55-422-1024x531.jpg)
まとめ
フリーのWebサービスの利用はリスクがありますので、仕組みをある程度理解し許容できるリスクを考えた上で利用するようにしましょう。
またWeb製作の際の必要なセキュリティ対策についての記事もありますので、合わせてご確認ください。
▪Basic認証をかける方法。専門の知識不要プラグイン【 HTTP Auth】
▪SSL化とhttpからhttpsへのリダイレクト方法【セキュリティ】