写真のごく基本的な取り扱い方法と見た目の印象について。

写真のごく基本的な取り扱い方法と見た目の印象について。


Webサイトをはじめ、多くのメディアで利用され、ビジュアル要素の代表的な存在の「写真」。今回は、この写真の「基本的な取り扱い方法」と「見た目の印象」についてのお話です。

イメージを具体的にする「写真」

写真については、前回の記事で「人の視線を引きつける為のアイキャッチとして利用する。」と書きましたが、もう一つ大事な要素があります。

それは「イメージを具体的にする」事です。

例えば、「笑う、泣く、怒る、喜ぶ」といった人間の感情を言葉で書いた時、言葉の意味は理解できるのですが、より具体的に状況を表現しようとすると、「にこにこと笑う」「しくしくと泣く」など、他にも言葉を付け加えて補っていく必要があります。表現によっては回りくどくなって、伝わりにくくなる場合もあります。

しかし、そういった「状況」をとらえた写真を使えば、ひと目で状況が理解できます。こういった「イメージの具体化」ができるところこそ、「写真」が持つ一番の魅力でもあるんですね。

人間の感情を言葉と写真、それぞれで表すと…

基本的な写真の取り扱い方

コンテンツやグラフィック作成の際に写真をレイアウトしますが、その時に「どういった形で写真を扱うか?」を考えると思います。そんな時に、基本となる「写真の取り扱い方法」があります。まずは、それらを簡単におさらいしておきましょう。

写真の基本的な取り扱い方

こういった3つの方法を組み合わせながら、写真を構成していく訳ですが、なんとなく利用していたのでは効果的とは言えません。それぞれの方法にも、得意・不得意があったりするので、選ぶ際に気をつけておきたい「ポイント」を少し紹介しておきます。

1.角版を用いる時のポイント

四角の枠内に収める角版は写真の収まりがいいのが特徴でしたが、その分写真の動きが少なくなり、おとなしい印象になりがちです。その為、コンテンツでの、写真の配置には注意が必要です。写真のサイズや、並べ方を変えたり、時には傾けて利用したりすると「動き」が出て印象が変わります。

2.切り抜きを用いる時のポイント

見せたい対象のみを扱うので、基本的に写真そのものの情報量は少なめです。角版や裁ち落としの「補助的」な要素や、画面内の「アクセント」として利用することが多いです。また、サイズ違いの写真を複数使ったり、配置をランダムに行うことで、リズムを表現することもできます。

3.裁ち落としを用いる時のポイント

写真を大きく扱う事ができるので、見た目の「インパクト」を作りやすく「情報の主役」として利用することが多いです。また、見せたい対象をアップで扱うことで、「迫力のあるビジュアル」を作ることができ、逆に対象を引きで扱えば、空間の「広がり」を演出することができます。

見せ方で変わる、写真の「見た目」

上の「3つ」の方法はいわゆる、「写真の処理方法」です。でも、これらの扱い方だけでは、写真の「サイズ」や写真の「どこを見せるか?」などはわからないし、決められないですよね。これらの方法を活かすためにも、知っておきたい事が「写真の見せ方」です。写真は扱う「サイズ」や「トリミングの仕方」によって、見る側に与える印象が変わってきます。

つまり、写真を使って「情報を伝える」ためには、「見た目の印象をコントロール」することが重要になってきます。ここでは、同じ写真でも「サイズ」と「トリミングの仕方」によって変わる「見た目の印象」について考えてみようと思います。

1.「サイズ」で変わる見た目の印象

まず最初に考える事は、写真のサイズです。同じ被写体を撮影した写真が手元にあっても、「アップにして一部を強調させて見せるか?」「引きにして全体像を見せるか?」という部分については、悩む事が多いと思います。実際にどれくらいの印象の差が生まれるのか、「アップ」と「引き」の写真を組み合わせて、印象の違いを試してみようと思います。

サンプルレイアウトと使う写真

上記はとあるWebサイト内のコンテンツレイアウトと、使用する予定の写真です。掲載予定のコンテンツは「手作りピザの特集記事」です。この例では、AとBの2つの箇所に写真を入れる予定です。ここに入れる写真は、一部を「アップにしたもの」と、引きにして「全体を写したもの」を用意しています。使用する写真は、同じピザを写したものです。

こういった条件で、それぞれの掲載枠に写真を指定する場合、どちらにどの写真を選ぶべきなのでしょうか?まずは、それぞれに写真を当てはめて見比べてみましょう。

それぞれの写真を当てはめた、2つの案を作成してみました。

1案目の写真はAに「アップで撮影した写真」を使い、Bに「引きで撮影した写真」を使っています。2案目は逆の配置にしてみました。1案目の場合は、アップで撮影した写真を大きく扱っているので、「素材の状態」が見やすく、いきいきとした雰囲気が感じられます。また、美味しそうにも見えますね。引きの写真は、小さく扱っていますが、被写体が全て枠内に収まっているので、全体の把握ができます。

2案目の方は、引きの写真を大きく使いました。サイズが大きいので、全体の状況はよりわかりやすくなりました。しかし、写真そのものの「動き」が無いので、1案目よりも迫力が無くなった様にも見えますし、「おとなしい印象」も受けます。小さい方の写真は、そもそものサイズが小さいので、アップの写真を使っていても、被写体の状況があまりよくわかりませんね。

こうやって見比べるとわかるように、同じ商品を撮影した写真でも「アップ」と「引き」では、見る側に与える印象は随分と変わってしまいます。

2.「トリミング」で変わる見た目の印象

次は写真の「トリミング」でどれぐらい印象が変わるか見てみましょう。ちなみにトリミングとは、使う写真の「不要な部分を省き、必要な部分を残す」作業のことを言います。

トリミングのサンプルには以下の写真を使います。

この例では人物の写真を使って簡単なトリミングをしてみます。写真の女性は真ん中辺りに収まるように撮影されています。この写真をトリミングして、余白を「右に大きく取った場合」と「左に大きく取った場合」の二つのパターンを作って比較してみます。

左右それぞれに「余白」を取ったトリミングサンプル

まず、余白を「右に大きく取った場合」を見てみましょう。写真では女性の背中側(後ろ側)に大きく余白ができています。この写真の見た目からは、女性が「何かを思い返している」ような印象を受けます。次に余白を「左に大きく取った場合」、先の場合とは逆に女性の正面に余白ができています。そこから受ける印象は「これから先を見据えている」ような雰囲気を感じる事ができます。

この写真についても、余白と人物の位置の違いだけなのに、こういった「印象」の違いが生まれてしまいます。

なぜ「見た目の印象」は変わるのか?

どちらの例も同じ写真を利用しているのに、どうしてこれだけ印象が変わるんでしょうか?その理由を、それぞれのケース毎で考えてみましょう。

1.「アップと引き」の違いについて

2つは同じ物を写したものでしたが、「(写真に)収めている箇所」が違いました。アップで撮影したものは、「ピザ表面の一部分」を。引きで撮影したものは「商品全体」を見せようとしています。
その為に、写真から得られる情報がそれぞれ違っていることが考えられます。

それぞれの写真から得られる情報

アップで撮影した写真からは、「食べる直前~食べた時」の情報が多く挙げられます。引きの場合は「出来上がり~食べる前」の情報が比較的多く挙げられます。こういった部分から、同じ写真でも見せる箇所が変わる事で「見る側にあたえる情報も変わる」理由が理解できます。

2.「トリミングの仕方」の違いについて

こちらの例の理由は、私たちの「行動パターン」から考えるとわかりやすいかも知れません。

人は移動をする時、進行方向に顔が向きます。例の写真を見て、女性の「顔の向き」を確認すると、女性の顔が「向かって左側」を向いていることがわかります。そこから考えると、女性の正面は「写真の左側」になり、後ろは「写真の右側」になりますね。それを「時間の感覚」に置き換えると、以下の様な感じになります。

トリミング方法の違いによる「印象の変化」について

つまり、この写真の右側は「過去」を表すエリアとなり、左側は「未来」を表すエリアと考える事ができます。結果、人物の配置と余白の関係から、文字が無くても「過去」や「未来」といった感覚を写真から感じる事ができるんです。

人物写真の場合は、特に「表情や視線、しぐさ(動作)」などを見て、写真の中の人物が置かれている状況を推し量ろうとします。それに加えて今回の様な「人物と余白の関係」により、同じ写真でも、受け取る情報の「性質(前向き・後ろ向き)」が変わってくることがわかりますね。

コンテンツの「役割り」と写真が「伝えたいこと」を知ることが大切。

見せる部分と扱い方で、写真はその印象を変えていきます。「見た目の印象をコントロール」するためのポイントも、「サイトの設計」と同じように、以下の「2つの事」がやっぱり大切になってきます。

1.コンテンツの役割り(目的)を知っておく。

まず最初は、コンテンツの「役割りを知っておく事」です。1つ目の「写真サイズ」の例を基に考えると、写真を使う箇所は「記事の導入部分」と「記事の本文」です。そういったことから考えると、Aの箇所には「人の興味を惹きつける、インパクトの強い写真が必要」ということが考えられます。また、Bの箇所については、文字情報が主体となるエリアなので、写真に求められるのは「情報の補足が出来るもの」となります。

そのため、Aの箇所には、被写体の状態がわかりやすい「アップの写真」を大きく使い、文章横に添える写真は「引きの写真」を小さく使うことが、適切なのではないかと考えられます。
※アップの写真を大きく使えばインパクトも得られ、見る側に「おいしそう。食べたい。」という興味を抱かせられますよね。

こういった、掲載する写真の選定については、掲載箇所のコンテンツの「役割り(目的)」から、どちらが適切かを考える事ができる訳です。

2.写真が「伝えたいこと」を把握しておく。

もう一つは、使う写真が「伝えたいこと」を把握しておく事です。

写真と共に掲載される「コンテンツのタイトル」や「本文」などを見れば、それぞれのコンテンツが「伝えたいことは何か?」がわかりますね。当然、そこに使う写真もコンテンツ内容と写真の内容が一致していないと意味がありません。

先ほどのトリミングの例で示した様に、トリミングによって写真の「印象は変わる」ので、「伝えたいこと」を把握していない状態では、適切な加工は施せませんね。

タイトルと本文が「前向き」な内容なのに、トリミングによって写真の印象が「後ろ向き」だと、見る人に対して伝えたい内容と「逆」のイメージを作ってしまうこともあったりします。それだけに、この部分は注意を払っておきたいところです。

今回のまとめ

人間は、視覚から多くの情報を得て生活をしています。その中でも「写真」は、「イメージを伝える」ために欠くことのできない「情報の要素の一つ」です。適切な扱いをすれば、「印象に残りやすい、覚えやすい情報」を作ることができます。

今回の記事では、ごくごく基本的な事をベースに書いてみました。また、例の内容もわかりやすい事を題材にしたので、日常の業務ではもっと悩む部分があるかも知れません。

ですが、最後の項目で書いた「役割り」と「伝えたいこと」を把握することは、とても重要なことだと感じています。こういった「情報分析」ができれば、デザインを行う時の一つの「考え方の基準」になるので、ぶらさずに押さえておきたいポイントですね。

他には、多くの作品を見て自分なりに写真の使い方を分析をしてみたり、自分で写真を撮ったりする事でも、写真の「見た目をコントロールする為の感覚」を養うことができるのではないでしょうか。