画面解像度一覧
主要なディスプレイ・デバイスの画面解像度を一覧表示。レスポンシブ設計に。
| デバイス / 規格 | 解像度 | アスペクト比 | カテゴリ |
|---|---|---|---|
| HD (720p) | 1280 x 720 | 16:9 | PC |
| Full HD (1080p) | 1920 x 1080 | 16:9 | PC |
| WUXGA | 1920 x 1200 | 16:10 | PC |
| QHD (1440p) | 2560 x 1440 | 16:9 | PC |
| WQXGA | 2560 x 1600 | 16:10 | PC |
| 4K UHD | 3840 x 2160 | 16:9 | PC |
| 5K | 5120 x 2880 | 16:9 | PC |
| 8K UHD | 7680 x 4320 | 16:9 | PC |
| iPhone SE | 750 x 1334 | 16:9 | iPhone |
| iPhone 14 | 1170 x 2532 | 19.5:9 | iPhone |
| iPhone 14 Pro | 1179 x 2556 | 19.5:9 | iPhone |
| iPhone 14 Pro Max | 1290 x 2796 | 19.5:9 | iPhone |
| iPhone 15 Pro | 1179 x 2556 | 19.5:9 | iPhone |
| iPhone 15 Pro Max | 1290 x 2796 | 19.5:9 | iPhone |
| iPad (10th gen) | 1640 x 2360 | 3:2 | iPad |
| iPad Air (M2) | 1640 x 2360 | 3:2 | iPad |
| iPad Pro 11" | 2388 x 1668 | 4:3 | iPad |
| iPad Pro 12.9" | 2048 x 2732 | 4:3 | iPad |
| Samsung Galaxy S24 | 1080 x 2340 | 19.5:9 | Android |
| Samsung Galaxy S24 Ultra | 1440 x 3120 | 19.5:9 | Android |
| Google Pixel 8 | 1080 x 2400 | 20:9 | Android |
| Google Pixel 8 Pro | 1344 x 2992 | 20:9 | Android |
合計 22 件
使い方
カテゴリボタンで表示をフィルタリングできます。
レスポンシブデザインやメディアクエリの設定時の参考にご利用ください。
デザイン調整で見るべき点
- •生成したCSSや色は、ライト/ダークモード、モバイル、ブラウザ差で見え方が変わります。
- •色やコントラストは見た目だけでなく、読みやすさとアクセシビリティを基準に確認してください。
- •装飾値はそのまま採用するより、既存デザインシステムの余白・角丸・影に合わせて調整すると破綻しにくくなります。
関連ツール
🎨🖥️🌈🌈🖼️🎨🖌️🔤📱🔖👁️📐
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。