おはよう、しゃしゃ。
ここ数日、スマホに表示される「画像の大きさ」で困っていた。
パソコンだと普通に表示されてキレイなのに
なんでこの画像、パソコンだとまともなのに、スマホで見るとぼやけてにじむの(怒
調べても求める情報が出てこないので研究した結果、仕組みが分かった。
パソコンだと普通に表示されてにじまないのに、
スマホだと「なぜか」にじんでしまう場合、この方法を試してほしい。
ぼやけ/にじみが与える影響って？
基本、パソコンからスマホは「max-width ： 100%；」
という形で、画像の大きさがスマホに調整されていると思う。
だからこそ、パソコンの画像をそのままスマホに乗せると、
予想以上に画像が大きかったり小さかったり、にじんだりと……
ネットビジネスをしている人にとって、頭の痛い話にある。
「黄金比とぼやけ/にじみは収益や集客に大影響を与える」
経営に関して色々アドバイスをいただく尾崎君が、
たくさんのビジネスデータを取って、教えてくれた。
特にヘッドコピーの画像で「ああ、汚い」思うと、
離れる割合がキレイな時より多いのだそうだ。
汚いと感じる要因として
- 文字が読みにくい
- ごちゃごちゃしている
- 左右のどちらかに偏っている
などなど、色々あるよ。
パソコンだと普通に表示されるから、つい手を抜く。
今はスマホを最優先し、パソコンを後回しに対策を取らねばならぬ。
私のブログですら、パソコンよりスマホで来る割合が増えている。
画像の比重も スマホ＜パソコン にせねばならない。
スマホの画像はフォントの文字数に影響を受ける
スマホだと「文字数」で画像の大きさ、小ささが決まる。
二つの画像を載せよう。
5文字と
9文字では、
横幅が違うだけで縦幅やフォントサイズは同じなのに、
パソコンを含めて大きさが違うように見える。
※ パソコンとスマホで見比べてほしい。
パソコン→スマホで見る方法として、
パソコンから上記URLをコピーしたのち、
パソコンからメールアドレスサイトを開き、
スマホで見れるメールアドレス(たいていプロバイダ。私はau)
に送って、スマホから見るのが早い。
スマホ画像にする場合、文字数に気をつかうのが一つ。
横幅の大きさを「白い空間」で広げると
次に二つの画像を載せたよ。
画像1：左右に余白なし
画像2：左右に余白あり
※ パソコンとスマホで見比べてね
二つの画像をスマホで見ると、大きさに違いが現れる。
画像2のように「左右に余白」を入れて保存すると、
スマホではうまい具合に縮小し、きれいな形で変換してくれる。
サイズは今回、1.5cmにしたけれど、
2から3cmと色々試して「これでいい！」思ったものを取り入れよう。
文書(ワードソフト)作成にも当てはまる画像比率
パソコンからスマホだけではない。ワード作成にも同じ状況が言える。
例えばPDF上記画像)の表紙を見比べてほしい。
左側ほど画像が大きく、右側ほど画像が小さい。
画像が大きいとフォントも小さくなり、
画像本体が小さいとフォントも大きく見える。
フォントはメイリオですべて30に合わせているよ。
ワードに乗せると、ワードが勝手にサイズ調整をしてくれる。
一応、本体の画像も比較で載せておく。
画像調整で苦労したので
画像調整はペイントソフトがあれば誰でもできる作業だ。
難なくできる作業だからこそ、細かな美しさを追求される。
イラストを描いているときも大まかな部分は差がつかずとも、
細かい部分でかなり差がついてしまうよ。
人間の肌を塗るにも、筋肉や骨をきちんと理解して塗るのと、
大まかな理解で塗るのとでは、陰影に微妙な差が生じる。
18未満画像のイラストを見る時、
そそられる人とそうでない人の違いを見ると、
線画や色に大きな差はないのだけど、細かい気遣いに現れる。
何事も慣れてくるほど、どれだけ細かい部分を追求できるか？
細かい部分がわからないとき、いったん手を置いて勉強した後、
きちんと追及するか、勉強しないまま出すか。
神は細部に宿るといわれるほど、
「細部」にこだわるヒントとして情報を載せた。
ぜひ細部にこだわり、素晴らしい画像を載せてほしい。
スマホの画像調整一つで悩む時間が馬鹿らしいからね。
