いわゆる画質(画面解像度)が低く、画像が粗いことによる、見栄えの悪さから差し戻される内容です。
グロースハックを行う元ページで使用されている画像が粗い場合はその限りではありませんが、
基本的に元ページと同等かそれ以上の画質である必要があります。
例1:(元ページに使用された画像よりも粗い、またはそれにより見栄えが悪いと判断できるもの)
例2:(本来あるべき画質)
対処方法:
Adobe Photoshopにて
画像の制作が完了したら、保存時の画質の設定時にて最適な画質にします。
一般的に"Quality(画質)"が80以上であれば問題無いとされていますが、画像サイズや求められる画質に応じて、設定を行います。
テキストやグラフィカル要素のみの場合:.gifまたは.pngを使用
写真を使用する場合:.jpgを使用
場合によっては写真でも劣化の無いよう.pngが使用されることもありますので、状況に応じて使い分けましょう。
Retina対応:
グロースハックする案件によっては、Retina対応を求められることがあります。
また、総じて現在のスマホに対応するようモバイル用の画像については、通常の2倍サイズで使用する必要があることが多いです。
つまり実機で見た際に、画像の粗さが出ないように考慮することです。
例:
表示するサイズ:200x200 (px)
制作・保存するサイズ:400x400 (px)
画像の制作後、コーディングで実装する際は、手動でimgまたはbackground-sizeなどに対して表示するサイズを指定します。
JavaScript
.kzTestの後ろに画像を配置
$(“.kzTest”).after('<div><img src="'https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png" width=“200px” height=“200px”></div>');
CSS
.kzTest02の背景として画像を配置
.kzTest02 {
background-image:url("https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png");
background-size: 200px 200px;
}
0 コメント