FREENANCE Ad

ポートレートを取り入れたWebデザイン8選。人物写真はサイトの印象を大きく左右する

Close Up Portraits
FREENANCE Ad
DESIGNER

Webデザインに用いられる技術が日々進化しているという事実に、異を唱える人はいないでしょう。

細かなトランジションエフェクトから、ヒーローエリアのアニメーションまで、その技術進化には目をみはるものがあります。しかし洗練されすぎたWebデザインは、ときに冷たい印象を与えてしまうことも。

そこで今回は、「人間らしさ」を効果的に加えられるポートレートを取り入れたWebデザインの事例を8つご紹介します。

1. Zitsticka

Close Up Portraits

ポートレートというと被写体がこちらを向いている印象が強いですが、このWebデザイン事例では視線が左側に向けられています。

「まずは女性に注目させて、その女性が見ている画面の左側に視線を導く」ように、巧妙にデザインされています。

Zitsticka

2. The Avener

Close Up Portraits

こちらの事例でも、被写体が視線をそらしています。角度を斜め上につけることで、堂々とした印象になることがわかりますね。

もちろん写真加工によって印象が操作されている部分もありますが、ポーズが重要であることに変わりはありません。

The Avener

3. Mike and Jen’s Cocoa Mix

Close Up Portraits

コップを持って微笑む女の子の写真が、Webページ全体をリラックスした雰囲気にしています。

子どものポートレートを用意するのは簡単ではありませんが、親しみやすさを自然に演出できる、見ているだけで前向きになれるWebデザインをつくれます。

Mike and Jen’s Cocoa Mix

4. GDW

Close Up Portraits

スライダーのポートレート写真はそれぞれ、ミュージックビデオのワンシーンを切り取ったもの。

人の写真がもつ求心力と、魅力を活かしたWebデザインです。

GDW

5. Marc Kuiper

Close Up Portraits

正統派のポートレートを採用したWebデザイン事例。こちらに視線が向いていると、被写体とユーザーのあいだに、ある種の繋がりを感じることがわかります。

暗い背景の中に浮かび上がるようにすることで、さらに被写体の印象を強めていますね。カリスマ性を感じさせるWebデザインです。

Marc Kuiper

6. Ali Rifai

ali-rifai

中央のキャッチフレーズに、わざと手書き文字や取り消し線を取り入れた、遊び心のあるデザイン。

陽気な印象のポートレートにも、その遊び心が反映されています。

Ali Rifai

7. LaventLaw

Close Up Portraits

こちらは法律事務所のWebページ。スーツを着た笑顔の男性のポートレートは、厳粛さと親しみやすさをバランスよく表現しています。

さまざまなテーマにあわせて使えるポートレートは、決して時代遅れの存在にはならないことが分かりますね。

LaventLaw

8. Trinity Audio

Close Up Portraits

ポートレートに対してクリエイティビティを存分に発揮した、印象的なデザイン。

ポートレートはプロジェクトにエネルギーと活気に与えるだけでなく、ブランドアイデンティティとも結びついています。

Trinity Audio

おわりに

ポートレート写真やイラストを使うと、Webページをグッと親しみやすい雰囲気にできます。またユーザーとのあいだに精神的な繋がりを持たせられるだけでなく、醸したい雰囲気を簡単につくれるのです。

ただしこのメリットは、同時にデメリットにもなり得ます。ポートレートに込められた感情は、良くも悪くもWebサイトの印象を大きく左右してしまうのです。

影響力が大きいからこそ、扱いには気をつけましょう。

(原文:Nataly Birch 翻訳:Nakajima Asuka)

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship