デザインを基本から学び直す。 #06写真――「きれい」だけでは伝わらない

Webサイトや広告を見て、

「この写真、きれいだな」

と思うことがあります。

もちろん、写真そのものの美しさは大切です。

でも、デザインで写真を使うときは、

「きれいな写真を選べばいい」

というわけではありません。

同じ写真でも、

どこを切り取るか。

人物をどこに置くか。

どちら側に余白を残すか。

文字をどこに置くか。

それだけで、伝わり方は大きく変わります。

つまり写真も、

「選ぶ」だけではなく、「どう使うか」を設計するもの。

今回は、写真をデザインとして使うための基本を学びます。

1｜「きれいな写真」と「使いやすい写真」は違う

例えば、Webサイトのトップページに人物写真を使うとします。

画面いっぱいに人物が写った、とてもきれいな写真。

写真作品としては魅力的です。

ところが、その上に、

会社名。

キャッチコピー。

ボタン。

を置こうとすると、

「文字を置く場所がない」

ということがあります。

一方、人物が少し右側にいて、左側に何もない空間がある写真。

写真単体では、少し地味に見えるかもしれません。

でも、左側に文字を入れると、

人物と文字がきれいに共存します。

ここで第3回の「余白」が戻ってきます。

写真を選ぶときも、

「何が写っているか」だけでなく、「何もない場所がどこにあるか」

を見ることが大切です。

写真の中の余白も、デザインに使えるのです。

2｜写真にも「主役」をつくる

写真の中に、

人。

建物。

商品。

文字。

背景。

いろいろなものが入っていると、見る人は、

「どこを見ればいいの？」

と迷うことがあります。

これは、第4回「文字」で学んだ情報の優先順位と同じです。

写真にも、

一番見せたいもの＝主役

を決めます。

例えば、

商品紹介なら商品。

人物紹介ならその人。

ホテルなら空間や景色。

料理なら料理。

主役が決まると、

どこを大きく見せるか。

何を切るか。

どこに余白をつくるか。

が判断しやすくなります。

大切なのは、

写真も「全部を見せる」必要はない

ということです。

何を残し、何を見せないか。

そこにもデザインがあります。

3｜トリミングで伝わり方は変わる

同じ写真でも、切り取り方を変えると印象が変わります。

これをトリミングといいます。

例えば人物写真なら、

顔を大きく見せる。

上半身まで見せる。

周囲の空間まで見せる。

それぞれで伝わる情報が違います。

顔を大きくすれば、

表情や感情

が伝わりやすくなります。

少し引けば、

服装や動作

も分かります。

さらに引けば、

その人がどんな場所にいるのか

まで伝えられます。

つまりトリミングとは、

単に写真を大きくしたり、小さくしたりする作業ではありません。

「何を見せたいか」を決める作業

です。

だから、

「もう少し大きくしよう」

ではなく、

「表情を伝えたいから、ここまで寄ろう」

と考えます。

理由が変わると、切り取り方も変わります。

4｜人物の「向き」を見る

人物写真を使うとき、とても使いやすい考え方があります。

それが、

人物がどちらを向いているかを見る

ことです。

例えば、人物が右を向いている写真。

その視線の先に文字を置くと、見る人の目も自然にそちらへ動きやすくなります。

さらに、

「見ている人」と「見ている対象」

の関係が画面の中に生まれます。

そのため、人物とキャッチコピーに自然なつながりを感じさせやすくなります。

これは第1回から何度も出てきた、

「視線を導く」

という考え方です。

ただし、人物が画面の外側を向いているからといって、必ず間違いというわけではありません。

あえて視線の先を空けたり、画面外へ向けたりすると、

孤独感

余韻

緊張感

などを表現できることもあります。

でも基本編では、まず、

「人物の視線の先に、見せたい情報を置く」

ところから覚えれば十分です。

5｜中央配置と三分割法

写真の構図でよく使われる基本の一つに、

三分割法

があります。

画面を縦3つ、横3つに分けます。

すると、線が交わる場所が4か所できます。

その付近に主役を置くと、画面に、

心地よい「動き」や「流れ」

が生まれやすくなります。

一方、主役を画面の中央に置くと、

安定感

正面性

強さ

を出しやすくなります。

最初は、

中央配置 → 安定させたい

三分割 → 流れをつくりたい

と覚えると分かりやすいと思います。

ただし、

必ず三分割の交点に置かなければならない

というルールではありません。

中央配置が適していることもあります。

ここでも、

構図のルールは「答え」ではなく、考え始めるための目安。

第3回、第4回、第5回と同じ考え方です。

6｜写真と文字を「競争」させない

写真の上に文字を置いたとき、

「なんだか読みにくい」

ということがあります。

原因の一つは、

写真と文字が同じ場所で目立とうとしている

ことです。

例えば、

人物の顔の上に文字を置く。

細かな背景の上に長い文章を置く。

明るい空の上に白い文字を置く。

これでは、写真と文字が競争してしまいます。

対策はいくつかあります。

写真の余白部分に文字を置く。

トリミングを変える。

写真全体を少し暗くして、白い文字を読みやすくする。

反対に、写真を明るく・白っぽくして、濃い文字を読みやすくする。

文字の後ろに半透明の背景を敷く。

つまり、

文字を強くするだけでなく、写真側を少し弱くする

という方法もあります。

ここで第5回の、

文字と背景のコントラスト

も戻ってきます。

写真。

文字。

色。

余白。

どれか一つだけで考えるのではなく、

「今回は何を主役にするのか？」

を決めることが重要です。

7｜「それっぽい写真」ではなく「具体的な写真」

企業サイトなどでは、

笑顔で握手する人。

会議をしているビジネスマン。

パソコンを見ながら話す人。

といった写真をよく見かけます。

もちろん、目的に合っていれば問題ありません。

ただ、

「企業サイトだから、とりあえず握手」

では、何を伝えたいのかが曖昧です。

「それっぽい写真」は便利です。

しかし、どの会社にも使えそうな写真は、裏を返せば、

「その会社だからこそ伝わるものが少ない」

写真でもあります。

そこで写真を選ぶときは、

「具体的な誰かの、具体的な行動が写っているか？」

と考えてみます。

例えば、

「スタッフ」ではなく、

実際に機器を点検しているスタッフ。

「利用者」ではなく、

実際にサービスを使っている利用者。

「仕事風景」ではなく、

何をしているのかが分かる手元や動作。

具体性がある写真は、

説明しなくても情報を伝えてくれます。

写真も、

「それっぽい」から選ぶのではなく、

「この場面を見せたい」という理由から選ぶ。

これが重要です。

今日からできる、小さな練習

今回も、身近なWebサイトを一つ開いてみましょう。

今日は、

「写真だけ」

を観察します。

次の5つを見てみます。

① 写真の主役は何？

② 主役はどこに配置されている？

③ どこに余白が残っている？

④ 文字は写真のどこに置かれている？

⑤ なぜ、この写真を選んだと思う？

カメラの知識は必要ありません。

「人物が右にいる」

「左側が空いている」

「その余白に文字がある」

「商品だけ大きく切り取っている」

そんなことに気づけば十分です。

そして、いつものように、

「なぜ？」

を考えてみます。

なぜ人物を右側に置いたのか。

なぜここまで寄ったのか。

なぜ背景を暗くしているのか。

なぜこの写真を選んだのか。

少しずつ、

写真そのものではなく、写真の「使われ方」

を見るようにします。

写真は「素材」ではなく、デザインの一部

写真を使うとき、

つい、

「いい写真を探そう」

から始めてしまいます。

でも本当は、その前に、

何を伝えたいのか。

何を主役にするのか。

文字をどこに置くのか。

どんな印象にしたいのか。

を考える必要があります。

その上で写真を選び、

トリミングし、

配置し、

必要なら明るさなどを調整します。

つまり、

写真は、空いている場所にはめ込む素材ではありません。

写真そのものが、

情報を伝えるデザインの一部

なのです。

「きれいな写真」から、

「目的に合った写真」へ。

そして、

「写真を選ぶ」から、「写真を設計する」へ。

写真を見る目が変わると、Webサイトや広告の見え方もかなり変わってきます。

次回は「レイアウト」

ここまで、

余白。

文字。

色。

写真。

という、デザインを構成する大きな要素を学んできました。

では、それらを、

どこに、どの大きさで、どう並べるのか？

次回はいよいよ、それらを一つの画面にまとめます。

DESIGN BASIC #07 ｜レイアウト――「どこに置くか」には理由がある

グリッド。

視線の流れ。

情報の優先順位。

余白。

整列。

これまで学んだものを使って、

一つの画面をどう組み立てるのか

を考えます。

デザインを、基本から。

一つずつ学び直していきます。