Web 設計入門

Transcription

1 Web デザイン実践 #4-2 画像についての知識 IMG 要素 D.Mitsuhashi 1

2 このスライドは講義では扱いません 写真撮影の方法 D.Mitsuhashi 2

3 このスライドは講義では扱いません カメラの基本的使い方 焦点を合わせる ( 最近のカメラは全自動 ) AF(Auto Focus) 露出を決める ( 最近のカメラは全自動 ) AE(Auto Exposure) シャッター速度 絞り レリーズボタンを押す D.Mitsuhashi 3

4 このスライドは講義では扱いません 焦点の合わせ方 カメラによって異なるが 通常レリーズボタンを半押しすると焦点が固定される 半押しするときに焦点を合わせたい被写体を中心に置く 焦点を合わせる部分が周辺にある場合は 合わせてからフレーミングする 焦点 ( ピント ) が合っている部分 D.Mitsuhashi 4

5 シャッタースピード このスライドは講義では扱いません 露出の合わせ方 レリーズを押すと自動的に露出 ( 明るさの程度 ) が合う 露出はシャッタースピードと絞り (F 値 ) の組み合わせ 絞る 絞り (F 値 ) 開く 遅い 適正露出 速い D.Mitsuhashi 5

6 このスライドは講義では扱いません 絞りによる効果 絞りによって被写界深度 ( 焦点が合っている範囲 ) が変化する 絞りを開放気味にすると被写界深度が浅くなる ( 焦点の合う範囲が狭くなる ) ボケ効果 D.Mitsuhashi 6

7 このスライドは講義では扱いません 絞りによる効果 絞りによって被写界深度 ( 焦点が合っている範囲 ) が変化する 絞ると被写界深度が深くなる ( 焦点の合う範囲が広くなる ) 暗い被写体の場合にはシャッター速度が極端に遅くなるため 三脚などの固定器具が必要 パンフォーカス D.Mitsuhashi 7

8 このスライドは講義では扱いません シャッタースピード シャッタースピードが遅くなると手ぶれの危険性あり 一般的にシャッタースピードが 1/60 秒以上になると手ぶれする 絞りを開く 三脚を利用する フラッシュを利用する シャッタースピードを遅くして躍動感を演出する場合もある ( 被写体ブレ ) D.Mitsuhashi 8

9 このスライドは講義では扱いません ISO 感度 一般的に ISO 感度が低ければ低いほど 画質は向上する ただし シャッタースピードが遅くなる ISO 感度が高ければ高いほど 光量の少ない場面で撮影できる ただし ノイズが目立ち画質は悪くなる 目安として 昼間は ISO 夜間は ISO D.Mitsuhashi 9

10 このスライドは講義では扱いません AE モードの設定 シャッター速度優先 AE(S) 撮影者が設定したシャッター速度を優先 絞り優先 AE(A) 撮影者が設定した絞り値を優先 プログラムオート (P) カメラにあらかじめプログラムされた最適なシャッター速度と絞りの組み合わせ マニュアルオート (M) 絞りとシャッタースピードを手動で設定 機種によって設定できないモードもある D.Mitsuhashi 10

11 このスライドは講義では扱いません 適正露出 カメラの AE は光が満遍なく表現できるように調整される しかし 表現意図によっては調節が必要 露出をあげて白を際立たせる 露出を下げて黒の深みを出す D.Mitsuhashi 11

12 このスライドは講義では扱いません 撮影のヒント ズームを使わず一歩踏み込む 人を対象とする場合は 話しかけながら撮影すると自然な表情で撮ることができる 同じシーンを何度も撮影する あとで良いショットを選べばよい 画面の四隅を見て 要らないものは写らないように配慮する D.Mitsuhashi 12

13 画像についての知識 D.Mitsuhashi 13

14 画像ファイル 画像はピクセル ( 画像を構成する画素 ) で表現される D.Mitsuhashi 14

15 画像ファイルとファイルサイズ 画像ファイルではそれぞれのピクセルに対して 色が指定されている 写真の場合 ひとつの色を表現するために 24bit(3byte) のデータ数が必要 ( 色数にもよる ) bmp tiff Web で扱うにはファイルサイズが大きすぎる D.Mitsuhashi 15

16 画像ファイルフォーマットと圧縮技術 画像圧縮技術 Web で扱う画像圧縮形式は主に以下の 3 つである jpg(jpeg) 扱える色の数が多いので写真などに適している gif 256 色しか扱えないが, 透過, アニメーションなど独自の機能を持つ イラストやアイコンに適している png jpeg と gif の長所を併せ持つ 圧縮率が高い 透過は利用できるがアニメーションは利用できない D.Mitsuhashi 16

17 ダイナミックレンジ 画像は最も明るい色 ( 最大値 ) から最も暗い色 ( 最小値 ) までそれぞれ何ピクセルずつ存在するかヒストグラムで表現できる 信号の最大値と最小値の幅のことをダイナミックレンジと言う 画像の場合は 露出寛容度 や ラチチュード がこれにあたり 再現可能な露出 ( 明るさ ) の範囲を意味する D.Mitsuhashi 17

18 ヒストグラム 横軸は明度 縦軸はピクセルの度数 D.Mitsuhashi 18

19 露出寛容度 露出寛容度の広さは デバイスやメディアによって異なる リバーサル フィルム PC モニタ カラー ネガフィルム デジタル カメラ CCD モノクロ ネガフィルム 人間の目 狭い 広い D.Mitsuhashi 19

20 コントラスト 画像編集におけるコントラスト調整とは, ダイナミックレンジ内にバランスよく光の分布を調整することを意味する D.Mitsuhashi 20

21 コントラスト調整 ( 調整前 ) D.Mitsuhashi 21

22 コントラスト調整 ( 調整後 ) ヒストグラムの分布の変化に注意 D.Mitsuhashi 22

23 露出補正 ( 明るさの調整 ) 露出補正とは ヒストグラムで表現される分布の山を露出寛容度の範囲中にバランスよく収めることを意味する CCD もしくはフィルムに光が入る量を調節する 画像編集において明るさを調整することは分布の山を左右に平行移動させることと同じである D.Mitsuhashi 23

24 明るさの調節 ( 明るく ) ヒストグラムが右方向 ( 明るい ) に移動している D.Mitsuhashi 24

25 明るさの調節 ( 暗く ) ヒストグラムが左方向 ( 暗い ) に移動している D.Mitsuhashi 25

26 色温度 早朝 晴天時 曇り 夕方 室内 ( 蛍光灯 白熱灯 など光源が変わると色温度が異なる 色温度とは 色合いの暖かみのこと ( 便宜上の説明で正確な表現ではない ) 人間は知覚することが困難 視知覚には色の恒常性があるため D.Mitsuhashi 26

27 色の恒常性 異なる光源下では 色温度が異なるが それにもかかわらず常に同じ色として知覚される 色は物理的な光の波長と完全な対応をしているわけではない D.Mitsuhashi 27

28 色の恒常性 色は物理的な性質ではなく知覚現象 同じ波長であっても 光のレイアウトによって色の見え方は異なる 色の錯視 Checker shadow illusion by E.H. Adelson The Dress:Wikipedia D.Mitsuhashi 28

29 色温度の調節 カメラによっては自動調整されるが 必ず手動で正しい色温度に設定する ただし あえて色温度を調整しない演出効果もある 5000K 3000K 2000K D.Mitsuhashi 29

30 色の三属性 ( 色相 明度 彩度 ) 色相 (hue) 波長の違い 色の種類の違い D.Mitsuhashi 30

31 色の三属性 ( 色相 明度 彩度 ) 明度 (brightness) 色の明るさ D.Mitsuhashi 31

32 色の三属性 ( 色相 明度 彩度 ) 彩度 (saturation) 色の鮮やかさ D.Mitsuhashi 32

33 画像編集 Web サービスを利用したフォトレタッチ D.Mitsuhashi 33

34 Web 上の画像編集サービス Web サービスを用いた画像編集講義では aviary を利用する D.Mitsuhashi 34

35 画像編集ソフトウェア GIMP( オープンソースフリーウェア ) Adobe PhotoShop シリーズ Adobe PhotoShop Adobe PhotoShop Elements Adobe PhotoShop LightRoom ドロー ( ベクターグラフィック ) ソフトウェア Inkscape( オープンソースフリーウェア ) D.Mitsuhashi 35

36 aviary Drag Photo Here と書かれた領域に画像ファイルをドラッグする D.Mitsuhashi 36

37 aviary での基本的な編集作業 Adjust を選択 Shadow( シャドウ : 暗色の強調 ) Brightness( 露出 明るさ ) Saturation( 彩度 ) Tint( 色相 ) Contrast( コントラスト ) Warmth( 色温度 ) Fade( フェード ) Highlight( ハイライト : 明色の強調 ) D.Mitsuhashi 37

38 向きとサイズ調整 Orientation( 写真の向き ) Crop( 切り抜き ) Resize( 写真のサイズ変更 ) デジタルカメラで撮影した写真はサイズが大きいため Web ページ用に縮小すること D.Mitsuhashi 38

39 aviary での保存 save をクリック Download で保存先を指定する 画像フォーマットは png になる 適宜ファイル名を変更すること D.Mitsuhashi 39

40 画像を表示する D.Mitsuhashi 40

41 img 画像を表示する 省略表記可能 <img /> src, width, height, alt 属性を用いる src 画像の場所 width, height 画像の幅と高さ ( ピクセル数 ) alt 代替テキスト <img src="./sample.jpg" width="300" height="200" alt=" サンプル画像 " /> D.Mitsuhashi 41

42 width 属性 height 属性 width と height を適切に指定していないと 画像がなんらかの原因で見当たらない時にレイアウトが崩れるので必ず記述すること CSS と異なり px という単位表記は必要ない 画像のサイズが分からない場合 画像のサイズを知るには 画像ファイルの上にポインタを置く ツールチップに幅と高さのピクセル数が表示される D.Mitsuhashi 42

43 alt 属性 alt 属性には画像についての簡単な説明文を入れる 視覚障がい者への配慮 ( アクセシビリティの向上 ) alt 属性に記述された文字列は音声ブラウザで読み上げられるので, 画像を見ることができなくてもその内容を把握できる D.Mitsuhashi 43

44 CSS 記述の注意 img はインライン要素 タグを閉じても改行しない インライン要素では,width, height を CSS で定義してはいけない width, height は <img> タグの属性に記述する D.Mitsuhashi 44

45 写真撮影についての留意事項 D.Mitsuhashi 45

46 著作権 いかなる画像もそれを作成もしくは撮影した著作者が存在する 著作者の許可なく画像を利用してはいけない 自分で撮影したものについては 著作権については 問題ない 画像の取り扱いにつ いて 一部またはす べてを許可している 場合もある よく権利表記を確認 してりようすること D.Mitsuhashi 46

47 肖像権 肖像権とは 自らの容貌を勝手に他者に公開されない権利 人が写っている場合には 掲載してよいか必ず本人に確認を取ること ストリートスナップの場合は そこに写っている人が特定でき またその人の不利益になることが容易に想定できる場合には問題になることがある 知らない人が映っている場合には 掲載しないのが無難 D.Mitsuhashi 47

48 パブリシティ権 建築物の全貌や 店舗 施設の内部 映画 演劇 コンサートなどにはパブリシティ権が発生している場合もある 写っていることそのものが 利益を発生させるような場合 ( 映画や舞台など ) 必ず撮影可能か否か また公開可能か否かの確認をとること 勝手に撮影しないこと D.Mitsuhashi 48

49 更に詳しく画像の公開について 特に写真の公開と撮影については以下の文献が参考になります 日本写真家協会 ( 編 )2016 SNS 時代の写真ルールとマナー 朝日新書 日本写真家協会書籍情報 cs/detail/?item_id=18227 D.Mitsuhashi 49