Webデザインにおける写真の扱い方。

『Webデザインの基本～きちんと入門～』を読んで学んだことを
アウトプットしていきます。

今回は、「写真と図版について」学びました。
写真と図版が持つ情報や魅力を最大限に活かし
ユーザーに伝えていくことがWebデザイナーの仕事
でもあります。

写真と図版の違いについて・・・。

写真には視覚的な強さがあります。
文章は読まれなくても、写真は見てくれます。
ユーザーがサイトにアクセスして、
１０秒ほどで離脱するかどうかを判断します。

写真を効果的に使って
ユーザーの目に留まらせることが大事ですね。

図版には強調したい情報だけを表現でき、
・概念図（イラストや文字で伝えること）や
・インフォグラフィック
（天気予報のシンボルマークや路線図）
などに使われます。

概念図やグラフィックなどはテイストを揃えて
使うようにしましょう。

写真の加工～色調補正～

Photoshopを使って補正することができます。
明るさ、コントラスト、色と彩度の順番で補正をします。

まずレベル補正から行いましょう。
暗い画像も背景までしっかり見えるようになります。

続いて、トーンカーブで明るさやコントラストを
調整します。
トーンカーブを曲げることでコントラストが上がります。

次にカラーバランスで色かぶりがないか確認します。
最後にシャープを設定して引き締まった写真にします。

これらの補正は調整レイヤーを使うことをお勧めします。

解像度や画像のファイル形式について。

解像度は画素数や印刷物の解像度を指し、
・dpi(dots per inch)　１インチに含まれるドットの数。

・ppi(pixel per inch)　１インチに含まれるピクセルの数。

画像には様々なファイル形式があります。
PNG ・JPG・SVG・WebP・GIFなど・・・。

よく目にする、JPGとPNGの違い？？

◎JPGは非可逆圧縮といって、保存回数が多くなるほど
画像が劣化していきます。
画質を細かく設定でき、ファイルを軽くしたい
ときに便利です。

◎PNGは可逆圧縮といって、保存を繰り返しても
画像が劣化しないのが特徴です。
単色が多いとJPGよりも軽くなります。

SVGとWebPの形式とは？

◎SVGはベクター形式の画像フォーマットのことで
数値で形や色を表現するので、拡大・縮小しても
画像があれません。

反対にビットマップデータは、
色のドットが集合した形式です。
100％がベストな状態で、
拡大していくとモザイクのようになります。
※アニメーションを加えることが可能なので、
サイトのロゴやアイコンに使われます。

◎WebPとは、軽量ファイルで、非可逆圧縮、
アルファチャンネルを扱え、画像もきれいです。
つまり、JPGとPNGの長所を兼ね備えたものです。

ですが、IE（internet Explorer11)が対応していません。
主要アプリが標準機能で生成できるようになると
今後もっと普及が進んでいくと予想されます。

最後に・・・。

サイトの第一印象も写真で決まりますよね～。
インスタは写真で発信するSNSの代表かなと感じます。

あまり本文は読まず、TLに出てくる画像の雰囲気で
フォローすることもしばしば・・・。

写真が持つ視覚的な強さや、適したファイル形式を
学ぶことができました。

自分のアカウントにも反映させていきたいものです。

Yuka.