DTPデザイナー、知識ゼロでWebデザイナーを目指す

Webの知識ゼロのDTPデザイナーがWebデザイナーを目指すブログです。

3日目:webデザインの本を読む

Chapter4 写真と図版(60分)

 

・人は文字は読まなくても写真は見てしまう。
>わずか10秒で離脱するんやで。
>だからこそ写真には気を使うべし
SNSもキャッチの画像の有無でクリック率がめちゃくちゃかわる

アイコンやイラストも重要。
ユーザーはじっくり読み込まない!
イラストなどはトーンを揃えることは最重要!世界観を統一する

PNGは劣化少ないが容量が重たくなりがち
・外部の圧縮ツールを使う
・ローディングを実装する

写真のトリミング
・基本:不要なものをカットする
・画像一覧などは、トリミングを揃えることが大事。
統一しないと印象が悪くなる。
>統一しすぎても単調になるので、少し強めのトリミングを入れたりすると、めせんを誘導できる

トリミング方法
・CCSでトリミングするとらくやで
細かい指定の際は「clip プロパティ」

解像度、pixel1について

・画面解像度
・ppl (pixel per inch)


Retina対応
>高解像度ディスプレイの登場でデバイスの1pixelが1pixel以上を描画できるようになった。
iphone4から Retinaディスプレイが導入され 解像度が326ppiに。
これにより画像を綺麗に表示するのに倍のサイズの画像が必要になってきた。

実装時に画像重くなるのでJavaScript やmedia Queriesなどをつかって対策をする必要があるそう。
>今後やるやつかしら。

つかれた・・