こんにちは。ヤマウチです。
今日、京都の桜が満開になったとラジオで聞いたので、お昼休みに靭公園ではないですが、近くの小さな公園を覗いてきました。
桜。満開でした。
親子数組・数人スーツのおじ様がスマホで撮影していました。それくらい見事な咲きっぷりで見応えがありました。

本日、実習16日目。
今日はスマホサイトのデザインをPhotoshopで行いました。
スマホサイトのデザインのコツを教えていただいたのでまとめてみました。

横幅は640px~750pxで作る

スマホサイズの横幅は、最新機種の画像幅に合わせてデザインデータを作ります。
今回は横幅750pxで作ります。なぜ750pxかと言うと「iPhoneの最新機種に合わせる」だそうです。

便利なサイトがありましたので載せておきます。

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表(Qiita)

Retina対応

750pxでデザインを作りますが、実際に表示されるサイズは750pxの半分サイズです。
じゃあ、なぜ2倍のサイズで作るのか?

それは、Retinaディスプレイに対応させるため。

Retina Display(レティーナ ディスプレイ)とは、通常の液晶画面より画像の輪郭を鮮明に描写してくれるディスプレイのことです。

ディスプレイの等倍(1倍)の大きさで作った画像は荒く(ボケた感じ)になり、2倍の大きさで作った画像は綺麗に表示されるんです!
自分のスマホ(android)で色んなサイトを見ていると、ボケた画像をよく見ます。それがこの現象なんですね!

サイズが2倍なら全て2倍

2倍サイズで作る事が理解できたのですが、いざ作り出すと全てを倍で計算しなくてはいけない事に気づきました。
フォントサイズも2倍、余白も2倍、ボーダーも2倍です。

例えば、基本フォントサイズが16pxなら32pxになります。

最初は違和感もすごくて戸惑いましたが、進めていくうちにその感覚も薄れてきたので気にしないようにしました(笑)

今後も、新しい機種が発売され、画面・仕様も少しずつ変化していくと思います。その変化に合わせて対応していけるように、常に情報アンテナを張っておかなくては、と改めて感じました。
そして、スマホを持っている人が全て最新機種を持てば大変ではないのに・・・と絶対にありえない状況を考えてしまいました(笑)

では、ヤマウチでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です