Web制作でよく使う便利なサイトまとめ
WEB制作の仕事をしていると色々なウェブサービスを使って楽をしようとしたり、問題を解決したりする。
そんな時に「これは使える！」とブックマークに登録した便利サイトを紹介してみる。
カラーコード変換ツール
WEBサイトを作っていると基本的にカラーはWEBカラーという#ffffffのようなコードで指定する事が多いのだがたまに案件によっては半透明を使いたい時がある。
その場合、#000000のようなコードでは半透明の設定はできず、RGBAというカラーの設定で行うことになる。
RGBというのは光の3原色でそれにアルファのAがついたものである。cssではrgba(0,0,0,1)のように設定する。
ただ、#fa908cというコードのカラーがRGBAでどう設定するのかわからないのでフォトショップとかを使う必要があったりしてめんどくさいことになる。
それを解決出来る便利なウェブサービスがこのサイトである。
円グラフ画像メーカー
ちょっとしたグラフをサイトに掲載したい時がある。イラレやらエクセルやらで円グラフを作ることは出来るがいちいちアプリを立ち上げるまでもないような簡単な円グラフを作りたい時などは簡単に作れるウェブサービスを使う。
SNSで使うとかのちょっとした画像作りならこれで十分。
ULタグOLタグLIタグ挿入ツール
WEBサイト作成の仕事はコピペの作業がめちゃくちゃ多い仕事なのであるが、大体の資料がエクセルやワードのようなアプリで作られている。
それをHTMLのコードにするわけだがリストはリストタグにする必要がある。
これが地味に面倒なコピペ作業になる…。ものすごいたくさん項目がある時とかはエクセルでやったりとかするがそうでもないけど面倒な時、このサイトを使えば簡単にリストをコーディングできるので便利。
liタグをつけて・を削除して、liタグで閉じるという地味に面倒な作業が一瞬…ありがたい。
エクセルからテーブルタグを作成
WEBコーディングの仕事の中でなんか嫌な作業トップレベルなのがセルが連結されたエクセルからHTMLタグを生成する作業。
どことどこをくっつけるのか？このテキストはどこにペーストするのか？とかなんかややこしい。マジでデカい表とかになってくると何行くっつけるのか？とかめっちゃややこしい。
そんな面倒なエクセルからHTMLコーディング作業をあっという間に終わらせてくれる神サイトがここである。
このWEBサービスのおかげでかなりストレスが減って作業時間も減った。
ダミー画像を作る
ウェブサイトのコーディングをしているとまだバナーのデザイン決まってないからダミー入れておいてくださいとか言われることがかなり多い。ダミー画像作るのもめんどいなって時、便利なのがこのサイトで画像を用意する必要がない。勝手に生成されるのでサイズを指定してコピペすればダミー画像が表示できる。
1枚や2枚のダミー画像ならちゃちゃっと作ってしまうが10枚20枚とダミー画像の必要な案件では非常に助かるウェブサービスだ。
動画ファイルを圧縮
クライアントから動画データを渡されることがあるがかなり重い事がほとんどでWEBで使うとローディングにとんでもない時間かかってしまうレベルの時がある。
動画を圧縮できるWEBサービスを使えばかなり容量を減らすことが出来てローディング時間を短縮できる。
PDFの圧縮
たまにクライアントから渡されるデータが異様にデカい時がある。でかすぎてサーバーの設定でワードプレスにアップできないぐらいデカいPDFを渡される事がある。
画像とかの場合、どれだけデカくても基本ワードプレス側で圧縮されるとかあるので重くはならないがPDFの場合はギガがごっつい減るなどユーザーにも不利益だ。ということでPDFは圧縮してからアップするのを心がけたい。
ここならほぼ劣化なしでめっちゃ圧縮される。9メガが100キロバイトとかものすごい圧縮率の時もあるぐらい…。
画像を圧縮
これに関しては色々なウェブサービスがあるけど私がよく使うのがここ。ここはPNGとかJPGとか形式によって別のページで圧縮しないとダメなので面倒ってのはあるけど基本JPGはフォトショップで十分圧縮できるので画像を圧縮したい時ってのはPNGぐらいなので特に問題を感じていない。
低解像度の画像を高画質に
向かって左が元々の画質で右側が高画質化したもの。よく見るとザラつきが消えて画質がくっきりした感じになっている。古い写真がきれいになる感じがするのでもらった素材が荒い時などに軽くきれいにしたい時使う。
パソコン内のフォントをチェック
Wordmarkというサイトなのだが自分のパソコンにインストールされているフォントを全部チェックできる。バナーや画像内に使われているフォントが何なのかわからない時に確認できる。もし全く同じフォントじゃなくても似たようなフォントを見比べることが出来るので便利。
HTML5 入れ子チートシート
HTML5でコーディングしているとたまにあれ？liの中にdivとか使えたっけ？とかddのタグの中にpタグ使えたっけ？って不安になる時がある。HTML5は大体の場合で使えるんだけど不安な時に確認できるのはありがたい。
グーグルアイコンフォント
ちょっとしたアイコンを使いたいなと思った時に便利なサービス。基本的な絵文字のようなものは揃っていて簡単に使えるのもありがたい。使ったことはないがFigmaのプラグインとかを使えばデザインでも簡単に使えるはずなので積極的に使っていきたいサービスである。
コメントを残す