人物イラストを取り入れたWebデザイン事例14選。スタイリッシュさとあたたかさを両立!

human-illustration-examples
DESIGNER

Webデザインを魅力的で豊かにしてくれる要素として、イラストが挙げられます。取り入れるにあたり大きなコストがかかる場合もありますが、イラストにはそれだけの価値があります。

イラストの役割は、訪問者の目を楽しませることだけではありません。プロジェクトのテーマや雰囲気を強化するだけでなく、ストーリー性をもたせることもできます。訪問者の目をひくイラストは、全体のトーンを決めてくれる重要な存在です。

今回は最近のトレンドになっている、「人物のイラスト」を取り入れたWebデザイン事例を14個ご紹介します。スタイリッシュで、かつ暖かみのあるデザインを参考にしてみましょう。

1. TMS

human-illustration-examples

Webサイトにアクセスすると、まず専門分野を反映した大きなイラストが目に入ります。左側のキャッチフレーズとあわせると、この会社がなにをしているのかがひと目で把握できますね。

キャッチフレーズだけでは難しい内容も、イラストなら補完できることがわかります。

TMS

2. Marie Sahy

human-illustration-examples

大胆で一風変わった人物のイラストが、作者のクリエイティビティを余すところなく伝えています。

ゴージャスかつパーソナルな印象のイラストは、個性を伝えるのにぴったりです。

Marie Sahy

3. BAW Agency

human-illustration-examples

忙しい顧客の仕事を効率化したいという信念を、イラストによって表現しています。

テック系のテイストが反映されていますが、同時に人物を取り入れてあたたかみを加えていますね。

BAW Agency

4. Buster Fetcher

human-illustration-examples

イラストだけでなく動画アニメーションも導入し、複雑なものを簡単に伝えるようとしている事例です。

やわらかいテイストで描かれた人物たちが、訪問者の理解を助けてくれます。

Buster Fetcher

5. Junto Agency

human-illustration-examples

こちらは人物全体を動かすのではなく、指先や顔などにちょっとしたアニメーションを加えています。

小さな動きだけでも、人物がグッとリアルに見えますね。

Junto Agency

6. Lemonade

human-illustration-examples

Webサイトに散りばめられた複数のイラストが、それぞれデザイン、開発、メンテナンスなど、異なる職種を表現しています。

複数のイラストが活用されているので、Webサイトにアクセスして他のイラストもぜひ見てみましょう。

Lemonade

7. Netwise

human-illustration-examples

ひとつ前にご紹介したLemonadeのイラストとテイストが似ていますね。同社が顧客のビジネスを手助けする様子が、キュートな人物イラストで表現されています。

顧客の信頼を獲得するのにもってこいのイラストです。

Netwise

8. Ecrease

human-illustration-examples

前の二例と比べると、人数がすこし減りました。当然のことですが、人物イラストの数が減ったからといって、顧客の信頼が失われるわけではありません。

動きによって命を吹き込まれたイラストは、訪問者に親近感を抱かせるはずです。

Ecrease

9. Nam Insik

human-illustration-examples

まずはWebサイトをのぞいてみてください。なめらかな動きと世界観、ストーリー性に魅了されること請け合いです。

主人公が旅をするような、遊び心あふれる構成になっています。

Nam Insik

10. Closer Game

human-illustration-examples

ゲームを紹介するこのWebサイトは、複雑で現代的なアニメーションで、イラストにひねりを加えています。

人物を積極的に取り入れたデザインは、カリスマ性があって個性的です。実際に動きを見れば、きっと創造性を刺激されるはず。

Closer Game

11. Rivne Holod

human-illustration-examples

ブルーベリーやクランベリーなど、ベリー類に特化したウクライナの冷凍食品会社のWebページにも、人物のイラストが活用されています。

いきいきとしたイラストによって、会社の信頼性や製品の性質を効果的に伝えていますね。人物のイラストはさまざまな分野で活躍できるということがわかります。

Rivne Holod

12. Sehat Kahni – The Story of Health

human-illustration-examples

女性医師が活躍する様子が、場面に応じて各セクションに散りばめられています。表情が描かれていないにもかかわらず、親しみを感じさせるイラストです。

Webサイト全体があたたかい雰囲気で、冷たい印象はまったくありません。

Sehat Kahni – The Story of Health

13. Hydro

human-illustration-examples

複雑な概念やビジネスの本質を、イラストでわかりやすく表現しています。

人の繋がりなしでは成立しないブロックチェーンだからこそ、人物のイラストが用いられているのも頷けますね。

Hydro

14. Stimmt AG

Close Up Portraits

シンプルな線で描かれているのは、それぞれ異なる表情をした三人の人物。

豊かな表情が、プロジェクトに親しみやすさや明るい雰囲気を与えています。

Stimmt AG

おわりに

イラストは、Webサイトにあたたかみを加えるのにぴったりの存在。文章や数字が多く、かたい印象になってしまう場合は、とくに人物イラストが活躍してくれます。

伝えたいメッセージのサポートや、難しい概念の簡略化など、イラストの役割は多岐にわたります。多くの可能性をひめた人物イラストを、ぜひ活用してみてください。

(原文: 翻訳:Nakajima Asuka)

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship