spicato

WEB and GRAPHIC
CREATIVE STUDIO

T.072-424-9827 F.072-424-5923
hello@spicato.com
Ogaito 3-3-2
Kumatori-cho, Osaka, Japan
date
2024.05.29(wed)
views
854
category
all view

「愛される」をつくるイラストと、アニメーション

こんにちは、スピッカートのエンジニア、鍋谷です。
今回はイラストのアニメーションについて、書いてみようかなと思います!

イラストっていいですよね。。。(語彙力)
よくポストカードとか買ってしまいがちです。
この前、さくらももこ展に行ってきた際にもしっかりポストカードを買いました。眼福です。

余談はさておき、
弊社はイラストが得意で、デザイナーはみんなイラストを描くことができます!
わたしがスピッカートで働きたいと思うきっかけとなったサイトにもイラストが大活躍していました。

↓そのサイトがこちら(追従しているカエルさんが最高にかわいいです。)

https://spicato.com/works/detail/kofukuyu-official-site/

今でもこのサイトが好きで、、、と採用の応募があったり、愛されているサイトだなぁと弊社の仕事ながら思います(自画自賛)。

イラストのすごいところ!

まずはイラストのもつ力について!
一概にイラストと言っても、様々なテイストのものがあると思いますが、
イラストがすごいなぁと思うところは、まず何より愛着が!すごく!わいちゃうところ!

ぎゅっとしたくなります。
ちなみに、このぎゅっとしたくなる衝動はキュートアグレッションといいます。

“キュートアグレッション(英: cute aggression)またはプレイフルアグレッション(英: playful aggression)とは、人間の赤ちゃんや幼い動物など、かわいいものを見ることによって引き起こされる皮相的な攻撃的行動・衝動である。

キュートアグレッション体感中の者は、可愛いと思った対象を見た際に実際に害を及ぼすことを意図することもなく、自分の歯を食いしばったり、拳を握り締めたり、かわいいと思った対象を噛んだり、つまんだり、きつく抱きしめたいという衝動を感じることがあるとされる。”

出典:ウィキペディア

また、イラストの雰囲気にもよりますが、他にもこんな印象を与えることができると考えています。

  • 親しみやすさ
  • あたたかさ
  • 楽しさ
  • 手づくり感

そんなイラストに心動かされたエンジニアは「あぁ。。。!動いてほしい。。。!動かしたい。。。!」となる訳ですね。

アニメーションの役割

イラストが素敵なんだから、アニメーションつける必要ある。。?
個人的見解でいうと、

あります!!!

なぜなのか。こちらのサイトを例に解説していきます!

泊綜合食品株式会社さま

 ①イラストにいのちを吹き込む!

まずはイラストの中でも、生きもの的な子のアニメーションについて。

アニメーションをつけることで、生きている!という感覚になるので、イラストのことを「あれ」や「これ」ではなく、自然と「あの子」「この子」と呼びたくなり、イラストから生きものへと、いのちを吹き込むことができます。

ろっかくくん
とまりちゃん

生きているように感じることで、より愛着がわき、サイトやそのサイトの会社さま、サービスが「愛される」により近づくと考えています。

またアニメーションとは直接関係ないですが、個人的なこだわりとしては、上記のようにイラストの画像名に勝手にキャラクター名を命名してつけたりしています(笑)

 ②目に見えないものを表現する

次に、ものや自然のアニメーションについて。
生きものと違って、こちらは全体的な空気感や音など、目に見えないものを表現することができると考えています。
下記の例では、らっきょうと海の水面の光を動かしているのですが、
水面に関しては海風、らっきょうについては食べる時の音を少しでも感じてもらえたらいいな、と思ってつけました!

 ③視線の誘導

さいごに、イラストに限ったことではありませんが、アニメーションさせることにより視線を誘導するという効果ももちろんあります。

下の例は、横からひょっこり現れることで、スクロールの手を少しでもとめてコンテンツを見てもらえるようにアニメーションを加えた例です。

いない所から現れるアニメーションは、視線を誘導する効果に加え、現れた時にきゅんっと心を奪う効果もあります(超個人的意見)!

イラストを使用したほかのサイトをご紹介!

スピッカートには他にもたくさん、イラストがいきいきしているサイトがあります!
どのサイトもイラストが活躍していますが、アニメーションによって、全然違った雰囲気を出すことができ、ここまでお話したアニメーションの役割を踏まえた上で、サイトにあったアニメーションをつけることが大事だなと思います!

さいごに

イラストは、「親しみやすさ・あたたかさ・手づくり感」そんな印象を与えることができ、存在しているだけでかわいいです。
でも、動いた!となるとさらに愛着がわきますよね。イラストにアニメーションをつけることはそんな効果を倍増?させる力があると思っています。

ただその「愛される」をつくるのは、お客さまがいてこそです。
そこにデザインやコピー、写真、イラスト、アニメーションが合わさることによって、より心に残る「愛される」をつくることができると思っています。

ぜひ、一緒に「愛される」ものづくりをしましょう!