09. デバイスとメディアの基礎知識
デザインするときって、どのくらいのサイズで作ればいいの？スマホとかパソコンとか大きさが違うよね？
その通り！メディアやデバイスによって適したサイズや解像度の基準があるから、それを知っておくと失敗しにくいよ♪
✴️ Web画面サイズ（解像度の目安）
- Webデザインでは、ディスプレイの解像度（画面の広さ）が設計の基準になる
- 最近はレスポンシブ対応（スマホ〜PCまで可変）を前提とする
📌 代表的なサイズ：
| デバイス | 幅の目安（px） | 備考 |
|---|---|---|
| スマホ | 360〜414px | iPhone SE〜iPhone 15 Pro Max |
| タブレット | 768〜1024px | iPadなど |
| ノートPC | 1366〜1440px | 主流解像度 |
| デスクトップ | 1920px前後 | フルHDが基準 |
✴️ Retina/高解像度ディスプレイ
- Retina（網膜）ディスプレイは、通常の2倍以上の密度（dpi）で表示される
- アイコンや画像は2倍サイズで用意（@2x）するのが一般的
📌 画像の対応例：
- 通常：
100px × 100px→ Retina用：200px × 200px srcsetやmedia queryで使い分けると◎
✴️ 印刷物のサイズと解像度
- 印刷ではmmやcm単位＋解像度（dpi）で考える
- 解像度は300dpiが基本
📌 代表的な紙サイズ（mm）：
| 用紙 | サイズ | 使用例 |
|---|---|---|
| A4 | 210×297 | チラシ・レジュメなど |
| B5 | 182×257 | 冊子・ノートなど |
| 名刺 | 91×55 | 一般的なビジネスカード |
📌 A4印刷用データの作成目安：
- 210mm × 297mm（3508px × 2480px @300dpi）
✴️ 映像・動画のサイズ
- Web動画では16:9のアスペクト比が主流
- サイズは配信プラットフォームに合わせる
📌 主なサイズ例：
| 種類 | 解像度（px） | 備考 |
|---|---|---|
| フルHD | 1920×1080 | YouTube標準 |
| 4K | 3840×2160 | 高精細・重め |
| 縦動画 | 1080×1920 | Instagram、TikTok向け |
| 正方形動画 | 1080×1080 | SNS（Instagramなど） |
✴️ アスペクト比（縦横比）
- Web画像や映像の比率を決める重要な設計ルール
- 比率を保ったまま拡大縮小できるのがポイント
📌 代表的な比率：
| 比率 | 用途 |
|---|---|
| 16:9 | 動画・スライド・ヒーロー画像など |
| 4:3 | 一部の写真、タブレット画面など |
| 1:1 | SNS用のサムネイルやアイコン |
✴️ スマホ・PCでの表示対応
- レスポンシブ設計にはブレイクポイントの設定が重要
📌 目安のブレイクポイント：
@media (max-width: 767px) {
/* スマホ用 */
}
@media (min-width: 768px) and (max-width: 1024px) {
/* タブレット用 */
}
@media (min-width: 1025px) {
/* PC用 */
}✴️ 黄金比とレイアウト比率
- デザインの美しさを意識するなら黄金比（1:1.618）や白銀比（1:1.414）
- Webではカードレイアウトや画像比率に活用される
📌 黄金比の応用例：
- 幅：800px → 高さ：800 ÷ 1.618 ≒ 494px
🌟 まとめ：デバイスとメディアの基本をおさえよう！
| 項目 | 基本知識と推奨 |
|---|---|
| Web解像度 | 360〜1920pxまで幅広く対応 |
| Retina対応 | 画像は@2xで用意 |
| 印刷物解像度 | 300dpi、mmサイズで設計 |
| 映像サイズ | 16:9（1920×1080）が基本 |
| 比率設計 | 16:9 / 4:3 / 1:1など用途で使い分け |
| レスポンシブ | メディアクエリで切り替える |
| 美的バランス | 黄金比や白銀比で設計 |
なるほど〜！作る前に「どこで使うのか」を考えるのが大事なんだね！
うんうん！媒体に合った設計を意識すれば、もっと伝わるデザインになるよ♪