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