NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.
09
3月
2019

【Mobile】スマートフォンのデザインを作成するにはこうすればいいんです。

スマホのデザインを作るにはどのサイズで作成すればいいのか。

 

iPhone4からRetinaDisplay(レティナディスプレイ)という解像度が今までの2倍になったことにより、今までは【幅:320px】で作成していたデザインを【幅:640px】で作成しなければなりません。

 

ここで疑問となのは、RetinaDisplayに合わせて作成した【幅:640px】での画像をそのまま配置すると、サイズがそのまま2倍の状態になってしまう、ということです。
実はここにはやり方があり、例えば【600×300px】の画像を書きだした際、HTMLに貼り付ける時は半分のサイズの【300×150px】で設定することで、RetinaDisplayにも対応させることができます。
半分のサイズにする、ということは解像度が倍になる、とも言い換えられます。

 

つまり、

解像度を倍にする
<!-- RetinaDisplayにも対応 -->
<img src="aaa.jpg" width="300" height="150">

 

ただ、画像のサイズを半分にしたとはいえ、元々の画像サイズは【600×300px】なのでデータ容量は大きいままです。
しかも、小数点(50.5px)なんていうのはないので、必ず割り切れる数値で画像を書き出すことが大事です。

【CSS】iPhoneスマホサイトで自作ボタンを使う方法
Chromeで簡単にキャッシュクリア+スーパーリロードをする方法