概要

このページでは、いわゆる画質(画面解像度)が低く、画像が粗いことによる、見栄えの悪さから行われる差し戻し(修正依頼)について、判断材料と対処法を記載します。

元ページで使用されている画像が粗い場合はその限りではありませんが、基本的に、元ページと同等かそれ以上の画質を利用する必要があります。

例

差し戻し対象: 元ページに使用された画像よりも粗い、またはそれにより見栄えが悪いと判断できるもの

修正: 本来あるべき画質に修正する

対処法

ここでは、Adobe Photoshopにおける対応方法を記載します。

画像の制作が完了したら、保存時の画質の設定時にて最適な画質にします。
一般的に"Quality(画質)"が80以上であれば問題無いとされていますが、画像サイズや求められる画質に応じて、設定を行います。

推奨される保存形式

テキストやグラフィカル要素のみの場合：.gifまたは.pngを使用
写真を使用する場合：.jpgを使用

場合によっては、写真でも劣化の無いよう.pngが使用されることもありますので、状況に応じて使い分けてください。

Retina対応

案件によっては、Retina対応を求められることがあります。
また、総じて現在のスマホに対応するようモバイル用の画像については、通常の2倍サイズで使用する必要があることが多いです。
実機で見た際に、画像の粗さが出ないように考慮した対応となります。

例

表示するサイズが 200x200 (px) の場合 → 制作・保存するサイズは 400x400 (px)

画像の制作後、コーディングで実装する際は、手動でimgまたはbackground-sizeなどに対して表示するサイズを指定します。

• JavaScriptで画像を追加し、画像サイズを指定する例

//JavaScript
//.kzTestの後ろに画像を配置
$(".kzTest").after('<div><img src="https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png" width="200px" height="200px"></div>');

• CSSで、画像を要素の背景として指定する例

/* CSS */
/* .kzTest02の背景として画像を配置 */

.kzTest02 {
  background-image:url("https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png");
  background-size: 200px 200px;
}