印刷用データの画像を使ってWebデザインを作成する際は、
以下の2つについてチェックしておきましょう。
1. カラーモードが「RGB」になっているか
2. 画像解像度は「72ppi」になっているか
1. カラーモードが「RGB」になっているか
印刷用データは「CMYK」、Web用データは「RGB」というカラーモードで作られています。 CMYKのままWebブラウザに書き出すと、色がくすんだり、意図しない色に変わってしまうことがあります。
RGB変換方法
①Photoshopで画像を開く
②メニューの【イメージ】＞【モード】からRGBを選択
以上です。
なんでカラーモードで色が変わるんですか？という質問があるかもしれませんが、それはまたいつか。
2. 画像解像度は「72ppi」になっているか
印刷物は「350ppi」が最適ですが、Webは「72ppi」が一般的です。350ppiのままwebに使用すると、ファイルサイズが重くなりすぎる場合があるため、最適化しておきましょう。
解像度変更方法
①Photoshopで画像を開く
②メニューの【イメージ】＞【画像解像度】を選択
③解像度を72に変更し、OKを押す
注意点として、「72ppi」という数値は一般的というだけで、絶対ではないことは頭の片隅に置いておいてください。
解像度を下げた結果、
デザインで使用するサイズより小さくなってしまう→実装してもらったら画像がガビガビになっている→泣きながら画像を作りなおす
ということが起こる未来もあるでしょう。
そのときは72ppiにこだわらず、適切な解像度に調整しましょう。実装の時に2倍サイズで書き出す場合も加味して、大きすぎず・小さすぎない画像サイズにするのが良いかなと思います。わからなければ実装担当者にも相談してみましょう。
以上です。
そもそも画像解像度って何？という質問ですね？
…それもまたいつか。
おわり
というわけでちょっとしたひと手間ですが、最低限この2つはチェックしておきましょう。急いでいるとついつい忘れがちになってしまいますが、画像ひとつひとつもデザインの大切な要素となることを意識するきっかけになれば幸いです🐈