こんにちは！TANE-beデザイナーです。٩( ◡̉̈ )۶

気づいたらもう12月ですね！
どんどんスマホユーザーの割合が高くなってきて、アプリやモバイルファーストのデザインもどんどん増えてきているらしいです。スマホはPCと違って、画面が小さく移動中に見ることが多いので、複雑なデザインは避けるなどPCとは違う工夫が必要となります。
それで、今回のはWebデザインの基本ルール！スマホ編となります。

スマホのデザインをする時、知っておくと役に立つ「スマホのデバイスサイズ」「テキスト・ボタンの最低サイズ」「スマホデザインの確認方法」について紹介させていただきます！

スマホのデバイスサイズ

制作基準になるデバイスサイズ

多く使われているデバイスサイズは「IOS：375px」「Android：360px」ですが、また機種によって違ったりもします。
様々なサイズの中で、制作基準となるスマホのデバイスサイズはどう設定すればいいでしょう？

サービスの利用率を調査して一番利用率の高いデバイスを基準にして制作する場合やクライアントがデバイスサイズを提示する場合もあります。
しかし、調査が難しい場合は「statcounter」というサイトから世界・各国で多く使われているデバイスサイズが確認できるので、参考にして制作することができます。

2021年12月基準最近の1年間で日本で一番多く使われているスマホのデバイスサイズは19.36％で「375x667px」です!
スマホのデバイスサイズだけではなく、PCやタブレット、よく使われているブラウザの種類も確認できまるので、チェックしてみてくださいね。〆(°°*)

スマホデザインは2倍にしないといけない？

Photoshop、XD、Figma、Sketchなど会社や人によってデザインツールは様々ですね。՞•ᴥ•՞
私はPhotoshopとXDを両方使っていますが、基本的にXDで作ることが多いです！

TANE-be（たねび）ではスマホデザインの時、IOSのデバイスサイズ(375px)を基準にして制作することが多いです。
Photoshopでスマホのデザインをする時はデバイスサイズの2倍の750px(375px*2)に設定してデザインしていますが、XDの時は1倍の375pxに設定しています。
スマホデザインを2倍にして作らないといけない理由の一つは画像の解像度です。
コーディングで等倍の画像よりN倍に書き出した画像を反映させた方が画質が綺麗になるので、2倍や3倍にして作ることが多いです。
しかし、XDでは画像を4倍まで書き出し設定ができるので、等倍にして制作しても問題がないです。

デバイスサイズを2倍にして制作する時には、アイコン、フォントサイズ、余白など全ての数字が2の倍数にならなければならないです。
2で割って等倍のサイズにした時整数にならなければならないからです。（奇数にしてはいけない -᷅_-᷄ ）
従って、XDで1倍でデザインをする時には2倍での制作よりデザイン制約が少なくなる長点があります！

テキストとボタンの最低サイズ

テキストの最低サイズ

PCでのテキストの最低サイズは10pxですが、スマホの時にもそれは変わりません。
PCのフォントサイズを大きく変えずにスマホに反映する時もありますが、
スマホはPCより画面のサイズが小さくなるので、視認性を上げるためにPCよりやや大きく設定したりもします。ˊ°̮ˋ

ボタンの最低サイズ

たまにボタンが小さすぎて、無理あり画面を拡大させて頑張って押した経験ありませんか。。？私はたまにあります(›´-`‹ )

PCはカーソルでクルックする形ですがスマホは指でタッチすることになるので、人の指でタッチができるサイズにボタンを設定しないといけないです。
人の指の大きさはそれぞれですが平均的に「11mm」程度だそうです！
単位をピクセルに換算するとボタンの最低サイズは約「40px~44px」になります。
テキストリンクやアイコンだけのボタンなどは40pxにならない場合がありますが、その場合はアイコンのサイズより大きくタッチポイント(タッチできる領域)を設定します。

そして必ず実際のスマートフォンでデザインを確認してボタンが押しにくくはないか、他のボタンとタッチポイントが被っていないかなど確認する作業が必要となります。٩(ര̀ᴗര́)و

スマホデザインを実機で確認する方法

スマホデザインはデバイスサイズが小さくなり、表示される領域がPCより少なくなるので必ず実機で意図通りにデザインが見えるか確認する作業が必要です。

JPGで書き出したデザインを実機で確認する

Photoshopで制作した場合は、JPGに書き出したデザインをスマホに転送して画面サイズいっぱいに表示して確認しています。
一番簡単な方法かもしれませんが、修正して確認する作業が地味に手間がかかりますね。。( ͡•. •͡)

パソコンと携帯をケーブルで繋げて確認する(XD)

こちらはXDで制作した時限定の方法ですが、スマホにXDのアプリをダウンロードすればパソコンと繋げるだけですぐ作業中のデザイン画面がスマホで確認できます。
そして、なんと修正した内容が即反映・表示されるので修正した内容がすぐ確認できます。めっちゃめっちゃ便利な機能！ꪔ̤̮

もっと詳しい内容はAdobeのホームページからご覧いただけます。
最初にアプリのダウンロード・ログインだけ済ませておけば簡単にスマホデザインが確認できますので、ぜひ使ってみてくださいね(〃´-`〃)♡

まとめ

今回はスマホデザインの基本となる情報を紹介させていただきました。
最近は上下開きや左右開きのスマホも発売されていて、サイトやアプリの見え方について工夫が必要となりそうです。。
技術の発展を共にしている業種はワクワクしますね( ᵕ̩̩ㅅᵕ̩̩ )