結節点やメリハリを駆使したイメージの扱い方

//結節点やメリハリを駆使したイメージの扱い方

結節点やメリハリを駆使したイメージの扱い方

同じ写真でも、採用する部分や配置を変えるだけで、デザインそのものの印象がガラッと変化します。特に写真やイラストは、デザインの大部分を占めるファクターです。今回はデザインの裏に隠れているクリエイターの意図を探ってみました。

 

 

結節点、陰影、メリハリ等を意識しつつ、裁ち落としや角版と呼ばれるエディトリアルデザインのイメージの扱い方を、実際のウェブサイトを見ながら追っていきます。

 

  ■この記事を読むと

配色や人物の位置を意識した画像の扱い方 がわかります!

 

■今回の課題

本を読んで、写真やイラストの使われ方についてまとめてみよう!  

 

 

1.三次元と二次元をどう扱うか?ー「裁ち落とし」「切り抜き」と「角版」

 
 
ウェブでサイトやポスターで色んなデザインを見ていると、雑誌の見開き1ページが丸ごと写真だったり、ポスターの横いっぱいに使われていたりすることってありますよね。昨今、雑誌とウェブのデザイ​ンの境目が曖昧になってきています。そこで、紙のデザイン(エディトリアルデザイン)の目線で、ウェブデザインを見てみました。​

 
断ち落とし
 
断ち落とし2
 
 
  この写真の利用方法を、エディトリアルデザインの用語で、裁ち落としと言います。裁ち落とすことで、ブラウザ​ブラウザの外が直接接し、迫力や臨場感を出す意図でレイアウトされます。この方法は主に風景写真で使われます。アップの写真よりも、風景写真のほうが裁ち落としになっても違和感を感じにくいからというのも理由の一つです。例として、上の画像は二枚とも風景写真を裁ち落とし、画面いっぱいに利用することでまるで見ている側もその場に立っているかのような感覚になります。

 

 切り抜き写真はその逆で、写真から背景を奪うことで、誌面に切り抜かれたモノやヒトを入れこんでしまいます。切り抜くことによって複数の画像が、誌面という一枚の空間に強引に収められ、新しい「まとまり」ができます。
 
  切り抜き
 
 
 
 
 
 
 
 一方で、一般的にアップとよばれる画像は誌面背景に埋め込まれて使われる場合が多く、これを角版と言います。角版の写真はレイアウトの際に大きさや色合いのバランスを考えて配置されます。例えばこの写真。
 
  角版
 
 
上に人物が入った大きな写真を持ってきて、下にスイムウエアを配置しています。これももちろん計算なのですが、さらに注意してみると下段のスイムウエアも水着とゴーグルを交互に並べることでメリハリをつける効果を狙っています。
 
 
 
 
もう一枚紹介しましょう。
 
  角版2
 
これは角版の写真そのものの大きさに変化を持たせ、見ている側の目を楽しませると同時に、あえて大きさに動きをつけることにより納まりをよくしています。なぜ納まりがよくなったように感じるかというと、このページ一面がパターン(模様)或はコラージュのように見えるからなんですね。もちろん配色にも気が配られていて、対角線上に鮮やかな写真同士と柔らかな写真同士がくるように計算されています。
 
 
 
 
裁ち落としと角版が両方使われているデザインを見つけたので載せておきますね。
 
 
 
角版と裁ち落とし
 
 
 
 

2.被写体を生かす。ーキーポイントは「結節点」

 
モチーフとなる写真に、人物が映っているときと、物体が映っているとき。トリミングの方法は基本的に同じ。全体、全身写真では、手足や頭などをはじめとした体の先端部分、腰、肘、膝などの曲線部と顔(特に目)が「結節点」と呼ばれる部位を誌面から少しはみ出させるか、少し内側に入れる。この条件を意識すれば、生き生きとした画になります。
 
  結節点結節点2
 
 
上の画像は体の結節点を意識して切り取られたもの。
 
 
 
 
そして、
 
スクリーンショット 2015-07-29 13.44.18
モノ 目
 
 
この二枚は顔と目を画像内に納めてありますよね。車の広告は車のヘッドライトを目に見立ててトリミングし、迫力を出しているんです。考えてみれば、車のCMやポスターってヘッドライトを強調したものが多いですし、車を前から見て、人間の顔みたいだって思ったことがある方も多いんじゃないでしょうか。
 
 
 

3.静止画に「動き」を持たせる。ー光と陰影

 
静止画に動きを持たせる時は、背景(や被写体そのものが放つ)光、或はわざと被写体をブレさせることで疾走感を演出することが多いです。以下の写真がその例です。
 
  動き2
 
 
他にも、被写体を傾けて撮ることで躍動感を出すことも可能です。以下の写真は背景を暗くし、ライトをつけることで走っている状態を強調する効果を利用しています。
 
 
 
 

4.メリハリをどう使うか?ー色、モノやヒトの対比

似たようなものを陳列する時、なんだか単調になってしまうことを防ぐために、あえて色を変えたり被写体の高さを変えて撮影することで画にメリハリをつけることができます。
 
  色の対比
 
 
例えばこの写真は、主役となるビールを色違いで交互に並べることで鮮やかさが増し、華やかな雰囲気が出ます。
 
 
 人物のメリハリ
人物のメリハリ2
 
 
 
上の二枚は、写真自体が背景となってデザインに彩りを添えている例です。両者とも身長の高い人を両端に並べることでバランスをとっていますね。特に後者は複数人の身長がバラバラな生徒がいるにも関わらず、まとまりがあって非常に収まりがよく見えます。
 
 
 
 
  対比 左右同じレイアウト
 
 
一方で、一枚の写真の中で対比構造を作るのではなく、複数の写真そのもので対比構造を生み出すこともできます。上の写真の、特に下の段に注目です。主役となるブーツを真ん中にはさみ、左右にランウェイを歩く男女を持ってきて対比をなしています。また、上の段にスナップ写真、下の段にファッションショーの写真を持ってきているのもコントラストと言えるでしょう。大きさを変えた他の二枚のデザインも、商品と着用画像の配置を工夫することで、複数の写真を一枚にうまくまとめあげています。
 
 
 

デジタルマーケティングで最近気になることはありますか?調査して記事にします!

2017-02-09T14:44:40+09:00