撮ったものを公開できる状態にする順序でまとめました — 開ける形式に変え、重さを落とし、色を確かめ、複数枚をひとつにし、たどり着く道を作ります。
iPhone が既定で撮る HEIC は良い形式です — 同じ画質を JPG のおよそ半分の重さで収めます。問題は受け取る側で、古い Windows や役所のアップロード画面、一部の編集ソフトがまだ開けません。
だから「送る前に JPG へ」が実務の第一段階になります。画質が心配なら順序が大事です。HEIC から JPG への変換は一度だけにして、その後のサイズ変更と圧縮はその JPG の上で続けます。変換を重ねるたびに再エンコードされ、損失が積み上がります。
透明が要るなら JPG ではなく PNG です。ロゴや切り抜いた被写体を JPG にすると、空いていた部分が白く塗られます。
ウェブに置く画像の目標は「できるだけ綺麗に」ではなく「必要なだけ」です。本文の写真一枚が3MBあるとモバイルでそのページは遅くなり、遅いページは体感だけでなく検索でも不利になります。
基準を決めておけば毎回悩みません。本文画像は横1,200〜1,600px で200KB前後、サムネイルは400px台で50KB以下。印刷でないならそれ以上はたいてい無駄です。
そして縮めてから圧縮します。4,000pxのまま画質だけ落とすと重いまま眠くなりますが、1,600pxに縮めてから圧縮すれば同じ容量でずっと綺麗です。
画面で綺麗に見える配色が読めないことはよくあります。灰色の背景に薄い灰色の文字は、デザイナーの大きなモニタでは平気で、屋外のスマホでは見えません。
だから色と一緒にコントラスト比を読みます。本文は背景に対して4.5:1以上、大きな見出しは3:1以上がアクセシビリティの基準です。これは好みではなく測定値なので、目で判断しないほうがよいものです。
表記の行き来も絶えません。デザインツールはHEX、最近のCSSはOKLCH、共有ドキュメントにはRGBが書いてある。同じ色を三通りに手で書き換えるのは、やる価値のない作業です。
配色を一から作るなら、一色から派生させるほうが安全です。補色は強調がひとつ、類似色は同系統の層、三色配色は三つがそれぞれ役割を持つ構成 — どれも関係が明示されます。
動きを見せたいが動画では大げさ、というときにGIFが効きます。ボタンを押すと何が変わるか、三段階の流れがどう進むか — 自動再生で音がなく、プレイヤーなしで資料に置けます。
代償は重さです。GIFは1フレームあたり最大256色で保存する古い形式なので、実写を入れると数MBがすぐ出ます。フレーム数と横幅を先に削ることが、見せたいものを保ったまま軽くする唯一の方法です。
規格の決まった証明写真はまた別の仕事です。パスポートもビザも履歴書も顔の比率と余白が定められていて、目的は綺麗に切ることではなく規格どおりに切ることです。
QRコードは「画面の外から中へ」人を連れてくる、唯一確実な方法です。ポスター、名刺、展示パネル、発表の最後のスライド — URLを手で打たせると、たいていの人は打ちません。
紙に載せるなら余裕を持たせます。印刷では一辺2cm程度が実用上の下限で、コードの周囲に余白(クワイエットゾーン)が要ります。デザインにぴったり寄せて置くのは、読めない代表的な理由です。
埋め込むURLは短いほどよいです。長い計測パラメータが付くと格子が細かくなり、その分だけ印刷品質やカメラの角度に敏感になります。
編集を代わりにしません。切る・縮める・変える・測るための道具で、レタッチはしません。
そしてファイルをサーバーへ送りません。変換も圧縮もGIFの合成もブラウザの中で走るので、他人の写真や未公開の素材を扱う人にとってはこれが実質的な差です。アップロードがないので、大きなファイルが回線速度に縛られることもありません。
代わりにブラウザのメモリを使います。とても大きなファイルを一度に何枚も入れるとタブが苦しくなることがあるので、そのときは分けて処理するほうが速いです。