回答編集履歴
2
終盤の校正
test
CHANGED
|
@@ -108,23 +108,23 @@
|
|
|
108
108
|
|
|
109
109
|
つまりどういう事になるかと言えば、
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
文字は地デジのテロップのようにくっきり表示で超綺麗だけど、奥の映像がほぼモザイク。
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
うーん……両方ぼやけてるならまだしも、画像だけ品質悪いと目立ちますね。
|
|
114
114
|
|
|
115
115
|
|
|
116
116
|
|
|
117
|
-
|
|
117
|
+
でもiPhone4は賢かったのです。
|
|
118
118
|
|
|
119
|
-
横幅
|
|
119
|
+
横幅640pxの画像を渡してやればそのサイズをベースに画面に表示してくれます。
|
|
120
|
+
|
|
121
|
+
iPhone3GやAndroidでも横幅640pxの画像を勝手に自分のブラウザで読める範囲に縮小してくれますので、
|
|
122
|
+
|
|
123
|
+
読み込みが多少遅くなる以外のデメリットはありません。
|
|
120
124
|
|
|
121
125
|
|
|
122
126
|
|
|
123
|
-
|
|
127
|
+
画像のサイズの主流は横幅320pxから640pxに変化していくことになりました。
|
|
124
|
-
|
|
125
|
-
ただし、画像は横幅640pxを基準としたモノを渡してやりなさい。
|
|
126
|
-
|
|
127
|
-
…という考え方が主流になりました。
|
|
128
128
|
|
|
129
129
|
|
|
130
130
|
|
|
@@ -132,16 +132,16 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
|
|
135
|
+
iPhone4の発売に伴い、綺麗な液晶ディスプレイにRetinaと名付けて華々しくデビューしました。
|
|
136
136
|
|
|
137
137
|
Android端末は追従出来ず横幅400pxだったりとしょぼい状態が続きましたが、
|
|
138
138
|
|
|
139
|
-
|
|
139
|
+
他社製品のスマホも少しずつ品質を高め、今ではちょっと高価なスマホを購入すればどれもFullHD(1080*1920px)です。
|
|
140
140
|
|
|
141
141
|
|
|
142
142
|
|
|
143
|
-
つまり、今は
|
|
143
|
+
つまり、今は全てのスマホがRetinaクラスの綺麗さであり、
|
|
144
144
|
|
|
145
|
-
iPhoneが
|
|
145
|
+
同じような機能を使っているのでiPhoneだけが該当する訳ではありません。
|
|
146
146
|
|
|
147
|
-
画像を
|
|
147
|
+
品質が求められる画像をWebサイトに掲載する時は、画面の横幅が640〜1280pxくらいと想定するようにしてください。
|
1
文章校正
test
CHANGED
|
@@ -16,21 +16,23 @@
|
|
|
16
16
|
|
|
17
17
|
大昔、Apple社が出したiPhone3Gというスマホにまで遡ります。
|
|
18
18
|
|
|
19
|
-
この3Gのディスプレイは320*480px
|
|
19
|
+
この3Gのディスプレイは解像度320*480pxでした。
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
つまり3.5インチの液晶ディスプレイに320*480のドットが等間隔で配置してあったんですね。
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
その後Apple社はiPhone4を発売します。
|
|
26
26
|
|
|
27
|
-
これの液晶部分はサイズは同じく3.5インチ
|
|
27
|
+
これの液晶部分はサイズは同じく3.5インチですが、
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
解像度が320*480pxではなく2倍*2倍の640*960pxといきなり凄い進化を遂げています。
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
+
要するに、液晶ディスプレイのサイズこそ同じですが、
|
|
34
|
+
|
|
33
|
-
|
|
35
|
+
ファミコン時代のガビガビキャラクターがいきなりDSのような綺麗な画質で見れるようになりました。
|
|
34
36
|
|
|
35
37
|
これが大前提。
|
|
36
38
|
|
|
@@ -46,13 +48,11 @@
|
|
|
46
48
|
|
|
47
49
|
3Gスマホはディスプレイのサイズも解像度も超しょぼい製品でした。
|
|
48
50
|
|
|
49
|
-
これで普通にWebページを閲覧すると酷いレイアウトでみえたものではありません
|
|
51
|
+
これで普通にWebページを閲覧すると酷いレイアウトでみえたものではありません。
|
|
50
52
|
|
|
51
53
|
そこで、各Webサイトを作る人は文字や画像を削って320*480pxのサイズで無理せず閲覧出来るページを作りました。
|
|
52
54
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
所謂スマホ
|
|
55
|
+
所謂スマホページとかスマホ対応、レスポンシブWebサイトと言われるような対応です。
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
@@ -62,11 +62,9 @@
|
|
|
62
62
|
|
|
63
63
|
そのまま320*480pxのサイトを閲覧すると、文字も画像も全部1/4のサイズです。
|
|
64
64
|
|
|
65
|
+
これはもう閲覧どころの騒ぎではなく、スマホと一緒に虫眼鏡も必要になってしまいます。
|
|
65
66
|
|
|
66
67
|
|
|
67
|
-
閲覧どころの騒ぎではありませんね。
|
|
68
|
-
|
|
69
|
-
スマホと一緒に虫眼鏡も必要になるでしょう。
|
|
70
68
|
|
|
71
69
|
そこで、iPhone4はブラウザに宣言するディスプレイのサイズを「320*480px」と宣言したのです。
|
|
72
70
|
|
|
@@ -100,9 +98,9 @@
|
|
|
100
98
|
|
|
101
99
|
|
|
102
100
|
|
|
103
|
-
|
|
101
|
+
全然違うんです。
|
|
104
102
|
|
|
105
|
-
フォントは[ベクター画像](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF%E3%82%BF%E5%BD%A2%E5%BC%8F)なので
|
|
103
|
+
フォントは[ベクター画像](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF%E3%82%BF%E5%BD%A2%E5%BC%8F)なのでいくら引き伸ばしても劣化しないんです。
|
|
106
104
|
|
|
107
105
|
画像は[ラスター画像](https://www.777logos.com/blog/vector-and-raster-graphics/)なので勝手に引き伸ばされるとガビガビになるんです。
|
|
108
106
|
|
|
@@ -118,13 +116,13 @@
|
|
|
118
116
|
|
|
119
117
|
しかしiPhone4は賢かったのです。
|
|
120
118
|
|
|
121
|
-
横幅320pxを自称していますが、横幅640pxの画像を渡してやると、その画像はちゃんとそのまま表示
|
|
119
|
+
横幅320pxを自称していますが、横幅640pxの画像を渡してやると、その画像はちゃんとそのまま表示してくれます。
|
|
122
120
|
|
|
123
121
|
|
|
124
122
|
|
|
125
|
-
|
|
123
|
+
iPhone登場後は横幅320px相当と考えて設計しなさい。
|
|
126
124
|
|
|
127
|
-
|
|
125
|
+
ただし、画像は横幅640pxを基準としたモノを渡してやりなさい。
|
|
128
126
|
|
|
129
127
|
…という考え方が主流になりました。
|
|
130
128
|
|
|
@@ -146,4 +144,4 @@
|
|
|
146
144
|
|
|
147
145
|
iPhoneが特別そうという訳ではありません。
|
|
148
146
|
|
|
149
|
-
画像を渡してやる時は、画面の横幅が640〜1280pxくらいだと思って渡して上げなさいという考え方をしましょう
|
|
147
|
+
画像を渡してやる時は、画面の横幅が640〜1280pxくらいだと思って渡して上げなさいという考え方をしましょう。
|