スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング | 乙街道
乙技を求めて クリエイティブな情報

【スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング】

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

Googleの「スマートフォンに対応してないホームページは検索順位を下げますよ」や「スマートフォンからの検索利用者数がパソコンからの利用者数を超えた」などの発表もあり、ホームページはモバイルファーストにシフトしてきています。

ホームページ作成に携わる方々は構築の仕方や、ひいてはボタン用の画像ひとつとってもスマホ表示時のデザインを意識して作成しているかと思います。
以前はパソコン用のデザインカンプを作成して、その延長でレスポンシブ時のスマホ用のデザインカンプを作成しておりましたが案件によってはスマホ用のデザインカンプを作成して、その延長上、または別物としてパソコン用のデザインカンプを作成する案件も増えてきました。

イラレなどでスマホ用のデザインカンプを作成するとき、皆さんは、どのようなことを意識されて作成されていますか?
デバイスが多様化してきた現在、スマホ用のデザインカンプを作るときには、ある程度のガイドラインを決めておかないと、
コーディングに入った時に、とんでもなく時間がかかってしまったり、カンプ上ではうまく表現できるものの、Web上ではレイアウト崩れたり、画像が荒かったりと、トラブルの原因を作ってしまうことがあります。

今回はスマホデザインの各部サイジングについて取り上げます。
最良の作成の仕方は人によって違いますし、もちろん案件によって変わりますので一例として、参考にしていただければと思います。
※イラレはピクセルグリッド設定、単位はピクセルを使用するのが前提です。

①アートボードの全体幅を決める。使用する画像は偶数値をとる。

アートボードの全体幅を決める。使用する画像は偶数値をとる。

スマートフォンのデザインカンプ、アートボードの全体幅は例外を除き、640pxで作ります。

この640pxというサイズはiPhoneのレティナディスプレイの横幅の最小解像度に合わしているもので、実際に表示されるviewport(device-width)は320pxです。
画像は、実際のサイズの2分の1のサイズでレンダリングされますので、デザインカンプ上では偶数値で作られていることが望ましいです。
理由として320pxで作ったものは160pxで表示ということになりますが、319pxで作ったものは159pxで表すか、160pxで表すかコーディングする際に悩んでしまうからです。

自分でデザインカンプを作成して、自分でコーディングするのであれば、まだ良いですが、チームで動いている場合コーディングする人にこのような悩みを発生させるのは宜しくないですね。
また、こういったことが起きて、その時の対応として159pxでコーディングしても、160pxでコーディングしても、画像の均整がとれなかったり、
元々のデザインカンプの全体のレイアウトや余白が1pxずれてしまうことになりますね。

写真などはまだよいですが、アイコンやボタンなどは著しくバランスが崩れます。
このようなことを繰り返してしまうと顧客からOKの出たデザインカンプと比べ、実際に作成されるホームページ上ではどんどん違うデザインになっていってしまいますので気を付けましょう。

②余白や線なども偶数値をとる。

余白や線なども偶数値をとる。

余白・線なども偶数値を意識します。

5.5pxなど小数点以下を設定出来なくはないですが、このような値を指定しまうと、表示するブラウザによってレンダリングが変わってしまうため、予定していたデザインと差異が出てしまいます。
※ブラウザによって表現できる限界値があったりします。

marginやpaddingなどの余白、borderなどについて・・・
640pxの幅で作られたアートボード上で、例えば6pxの線は、CSSでは3pxで表現します。ですがデザイン上5pxの線はどう表現しますか?
2pxや3px?ひいては2.5pxで表現しないといけない為、web上ではレイアウトが変わってきてしいまいます。

画像同様に余白、線も偶数値を意識してデザインしていきましょう。

③最小フォントサイズ、最小ボタンサイズを決める。

最小フォントサイズ、最小ボタンサイズを決める。

そうなるとフォントサイズ、ボタンの大きさ、これも当然意識しなければなりませんね。

アートボード上で16pxや15pxのフォントサイズによるデザインは危険です。
16pxはweb上で8pxで表現しようと思っても、10pxより低い値はブラウザによって表示のされ方が変わってしまい、デザインカンプでは範囲内で収まっていたテキストも、web上ではレイアウト崩れを起こしてしまいます。
また、15pxなどの奇数値のフォントサイズも前述のように、2分の1にしたときにレイアウトが変わってしまうため避けるべきでしょう。

最小フォントサイズは22px、できれば24px以上を意識してテキストはデザインされるべきです。

また、ボタンサイズに関しても、最低ラインを決めておいた方が良いでしょう。
これは、スマホ使用者のユーザビリティを意識した配慮です。Googleのモバイルフレンドリーテストなどでチェックできますが、一般的な男女の指のサイズでタップ出来るボタンの大きさを考えます。
ボタンとボタンの間の余白はスマホユーザーのために最も意識しなければいけない箇所ではないでしょうか。
そしてボタン最小サイズはデザイン上では幅・高さ88px以上、web上では幅・高さ44px以上を意識しましょう。

これを満たしたうえで、偶数値作ることもお忘れなく。

まとめると・・・

以上を具体的な数値を含めてまとめてみると

①スマホデザインのアートボードの全体幅は640px。画像は偶数値で作る。
②スマホデザインの余白や線などは偶数値で作る。
③スマホデザインのフォントサイズは24px以上、最小ボタンサイズは88×88以上で作る。

この3点が意識されてスマホ用のデザインカンプが作られれば、実際にコーディングに入ったときに、とてもスムーズ!
且つ、顧客からOKをもらったデザインカンプに、より近いものがweb上で表現することが可能ですね!

乙街道 twitter

こないだ七五三(下の子3歳)、稲毛の浅間神社へ。 写真は8月に先撮りしたもの。大きくなるの早いなぁ。 下の子もそうだけど、上の子もしっかりお姉ちゃん。 病気もしたけど、おかげさまでなんとか元気です。 家族、仲間、関わってくれる人に感謝。ありがとう。 あとどれくらい手をつなげるかな。

ツイッターメディア

加藤ミリヤ 『新約ディアロンリーガール feat. ECD』 youtu.be/e9GsAo-5TJo すっげえ新しいんだけど、すっげえ懐かしいw 「20年たっても変わらねぇ」ってのしっくりくる。 また四街道ネイチャーとやってほしいなぁ。

昼休みに新宿御苑デビュー。良いとこだったなぁ。

ツイッターメディア

外苑前メンキャリーズで揃ってGRILL BAR GOOへ。 カニクリームコロッケと生姜焼き! 冷奴とサラダと味噌汁付きで850円。 地域的にはこれでも良コスパ!んまかた! 他のお店も攻めたいけど平均ランチ価格1000円以上はヤバイd(^q^ ;) #外苑前 #ランチ

ツイッターメディア

HTML5プロフェッショナル認定試験レベル1 ver2.0 日曜日に、見事に落ちてきました。   台風の中千葉まで試験受けに入って、試験後すぐに画面で不合格の文字。   さすがにへこみましたが、いつまでもへこんでても仕方ない。 ってことで、年内リベンジ! と燃えております。

ツイッターメディア

外苑前 ⤴︎ 五反田 ⤴︎ すごく嬉しい。 でもそこで痛いほど感じるべきなのは 俺 ⤴︎? ってこと。 顧客win会社win! 俺win? 自身も関係するものも、もっともっと豊かに! 今に見てろってんだ((o(´∀`)o)) #初心忘れてないよ

ねんがんの ばりかん を てにいれたぞ!! #セルフカット

ツイッターメディア

五反田で見つけたHTML5かるた、結局やるの忘れたまま来ちゃった('∀`;) #HTML5 #HTML5かるた

ツイッターメディア

烏山や五反田は仲間のおかげでなんとかなった。 新拠点、外苑前。 また人間関係も一から作っていかねばならない。 考えると通勤も仕事もブルーになる。 最初はいつだってそうなんだけど。 大事なのは"変わってくこと""変わらずにいること" 新天地ではいつもマッキー聴いて自分に言い聞かす!

ツイッターメディア

昨日で五反田ランチが最終日。 大所帯でも入れる店ないかなーと、行きついた先はハワイで一番有名なグルメバーガー&サンドウィッチレストラン「クアアイナ」。 厚切チェダーアボカドバーガーセットをオーダー。 ハンバーガーを1つにする作業楽しかったw んまかったd(^q^) #五反田ランチ

ツイッターメディア
希光デザイン事務所
乙街道の管理人はホームページとか作る仕事をしています。
制作依頼やご相談もお気軽にどうぞ。

こないだ七五三(下の子3歳)、稲毛の浅間神社へ。 写真は8月に先撮りしたもの。大きくなるの早いなぁ。 下の子もそうだけど、上の子もしっかりお姉ちゃん。 病気もしたけど、おかげさまでなんとか元気です。 家族、仲間、関わってくれる人に感謝。ありがとう。 あとどれくらい手をつなげるかな。

ツイッターメディア

加藤ミリヤ 『新約ディアロンリーガール feat. ECD』 youtu.be/e9GsAo-5TJo すっげえ新しいんだけど、すっげえ懐かしいw 「20年たっても変わらねぇ」ってのしっくりくる。 また四街道ネイチャーとやってほしいなぁ。

昼休みに新宿御苑デビュー。良いとこだったなぁ。

ツイッターメディア

外苑前メンキャリーズで揃ってGRILL BAR GOOへ。 カニクリームコロッケと生姜焼き! 冷奴とサラダと味噌汁付きで850円。 地域的にはこれでも良コスパ!んまかた! 他のお店も攻めたいけど平均ランチ価格1000円以上はヤバイd(^q^ ;) #外苑前 #ランチ

ツイッターメディア

HTML5プロフェッショナル認定試験レベル1 ver2.0 日曜日に、見事に落ちてきました。   台風の中千葉まで試験受けに入って、試験後すぐに画面で不合格の文字。   さすがにへこみましたが、いつまでもへこんでても仕方ない。 ってことで、年内リベンジ! と燃えております。

ツイッターメディア

外苑前 ⤴︎ 五反田 ⤴︎ すごく嬉しい。 でもそこで痛いほど感じるべきなのは 俺 ⤴︎? ってこと。 顧客win会社win! 俺win? 自身も関係するものも、もっともっと豊かに! 今に見てろってんだ((o(´∀`)o)) #初心忘れてないよ

ねんがんの ばりかん を てにいれたぞ!! #セルフカット

ツイッターメディア

五反田で見つけたHTML5かるた、結局やるの忘れたまま来ちゃった('∀`;) #HTML5 #HTML5かるた

ツイッターメディア

烏山や五反田は仲間のおかげでなんとかなった。 新拠点、外苑前。 また人間関係も一から作っていかねばならない。 考えると通勤も仕事もブルーになる。 最初はいつだってそうなんだけど。 大事なのは"変わってくこと""変わらずにいること" 新天地ではいつもマッキー聴いて自分に言い聞かす!

ツイッターメディア

昨日で五反田ランチが最終日。 大所帯でも入れる店ないかなーと、行きついた先はハワイで一番有名なグルメバーガー&サンドウィッチレストラン「クアアイナ」。 厚切チェダーアボカドバーガーセットをオーダー。 ハンバーガーを1つにする作業楽しかったw んまかったd(^q^) #五反田ランチ

ツイッターメディア