見出し画像

苦い経験、、、もう迷わない！各デバイスの推奨サイズ。

コーダー㉿クボエミの記録👁️‍🗨️👾🦾

こんにちは！
最近涼しくなって、秋限定のお菓子が増えてワクワクしている今日この頃です。

さて、今回は推奨サイズについてです。
私はデザインからコーディングしていく上で、レスポンシブにめちゃくちゃ頭を抱えています。🧠
サイトで動く要素を作るのが楽しいのですが、そもそも各デバイスで見た時にどう見えるのかをちゃんと考えなくてはと思いました。
デバイスによって動かす角度も速さも変わる、、、、その他諸々、、、
全てにおいてレスポンシブが付きまとうからです。👻👻

デザインからコーディングをしていく上でのめちゃくちゃ大事な”気づき”があったので共有です。


なんで理解しないといけないのか。私に起こったトラブル💦

サイトのデザインがようやく完成し、コードで書き起こした時に、コンテンツが画面幅ミチミチに圧迫されて、野暮ったい仕上がりになりました。

私はSPよりPCのサイズ設定が苦手で、例えばカードをいくつか作った時に、画面幅いっぱいに広がってしまったカードを見て絶句。。。。。
デザインした時は変に見えなかったのに。コードに起こしたらなんてダサダサな仕上がりなんだと、、、、、泣

font-sizeはマックスで60px！
カードは画面いっぱいに広がる！
次のコンテンツはまったく見えない！
ボタンでっか！
写真でっか！
そのpadding広すぎないか！　　
etc…

PCのデバイスの仕上がりはもう絶句でしかありませんでした。とほほ、、、、。
figmaで作った時にプレビューを見ながら作るのも大事なんだなと。。
コードに起こしてからデザインの変更なんて、、後の祭りです。👻hahaha

『じゃあ何を基準にすればいいんだ？』
『自分で基準を作るのはかなりリスキーでないか？』
と思って調べてみました！！

各デバイスでの推奨される幅、高さ

デザインを作る前に各デバイスでそれぞれに推奨される幅があります。
いろんなデバイスがある中で、多く使われているサイズを選びます。
下記のサイズ感が多く使われているので各ディスプレイのアートボードサイズはこれで制作するとベターです。

🔸ディスプレイ（アートボード）のサイズ

現在での推奨は、
・PC　1920✖️1080
・タブレット　768✖️1024
・スマホ　360✖️800

じゃあこのサイズでトップのデザインを作った時に、実際に見えるサイズとのズレに気づきます。
例えば、PCの1920✖️1080の時に縦幅の1080がマックスで見えているわけではないのです！！！！！！

どういうことかといいますと、、、。
推奨されるサイズで作ったアートボードがあります。

各デバイス

この状態で、見ると単純脳の私は
（pcの場合）
『1080の高さがファーストビューでみえてるんだ！じゃあこのサイズ内でコンテンツつくればいいね😀（呑気）』でした。
これが大きな間違いな事に後で気づく、、、悲鳴。

じゃあどれくらいが実際に見えているのでしょうか？

🔸ファーストビューのサイズ

現在での推奨は、
・PC　700〜900px
・タブレット　600〜800px
・スマホ　600〜700px
なんと小さくなってる！です。衝撃！

ブルーがファーストビュー
レッドが元のサイズ
イエローが高さを伸ばしました

このように実際に見える表示可能領域は小さくなるのです。
小さくなるのには理由が色々なのですが

・ブラウザのUI要素（アドレスバー、タブ、ブックマークバーなど）
・OSのタスクバーやメニューバー（WindowsやmacOSのバー）
・固定ヘッダーやナビゲーションバー（ウェブサイト自体が占有する部分）
・ウィンドウのサイズ変更（フルスクリーンでない場合）
・ズーム設定（ブラウザの拡大縮小）
・ピクセル密度の違い（高解像度ディスプレイの場合）

親切に色々やっちゃってくれてる結果小さくなるんです。ARIGATOU!

なので、そんなの知らんがな精神でデザインを作ってしまうととんでもない事に、、、、、、、。

🔸フォントのサイズ

ちなみにフォントも各デバイスによって推奨されるサイズがあります。
現在での推奨は、

PC

  • 本文　16px - 18px

  • 見出し　H1: 32px - 36px　H2: 24px - 30px　H3: 20px - 24px

タブレット

  • 本文　14px - 16px

  • 見出し　H1: 28px - 32px　H2: 20px - 24px　H3: 18px - 20px

スマートフォン

  • 本文　14px - 16px

  • 見出し　H1: 24px - 28px　H2: 18px - 22px　H3: 16px - 18px

デザインによっては自由だと思うのですが、これを基準に決めればもうfont-size60なんかにしなくて済みますね！👻hahaha。

まとめ。

お疲れ様です。🍵どうぞ。
『そんなことわかっとる！』という方、ほんとにレベルの低い内容で申し訳ない、、。
たぶん私がこの壁にぶち当たったのは今までバナーとかチラシとか自由な範囲でデザインを作る事が多かったからです。
実際にコーディングしてみて、デザイン通りにできない事やデザインと同じようにかいた後の違和感に悩みました。

コーディングする時にはもうデザインのサイズは完成されたものであって欲しい。どれくらいの幅をもつのか、高さをもつのか、コーディングしていく上できちんと物差しがあれば後は書いていくだけで済むので楽です。

レスポンシブの面でも最大と最小を決めてしまえば、何度も細かく書く手間を防ぐ事ができます。

サイトのデザインって奥深い。
基準を知れば、ガイド線や各要素との幅も迷わないですね。画像の書き出しだって楽だ。

うむ。やってみて気づくことが多い！
失敗はなによりも成長に繋がるなと実感です。（超ポジティブ🦋）


読んでいただきありがとうございます。
好き♡フォロー励みになります。
Twitter Xでもコード紹介などしてます。フォローよろしくお願いします。

DMにてお仕事も受け付けておりますので、コーディングだけ、デザインだけでも可能です。是非ご相談ください。




いいなと思ったら応援しよう！