クイック エンジニアリングブログ

株式会社クイック Web事業企画開発本部のエンジニアリングチームが運営する技術ブログです。

「かわいいデザイン」に必要な要素を考えてみた

f:id:aimstogeek:20200117121800j:plain

こんにちは!
半年前にクイックに入社し、日々勉強中の新米デザイナーのSAYAです。

クイックはサービス数が多いので、デザイナーは様々なプロダクトに関わる機会があります。
最近は女性向けサイト内のビジュアル画像作成で「かわいいデザイン」について模索しているので、かわいい表現に必要な要素をまとめてみました!

※「かわいい」にも色々ありますが、今回の「かわいい」はいわゆる「女性らしく、かわいらしい」イメージです。

まず、サイト内における「かわいい」とは

「かわいい」という言葉はとても広義で、人それぞれの好みも関係があり感覚的ですが、 デザイナーはアーティストや芸術家ではないので自分の主観で「これかわいいでしょ!」と作るわけではないです。

サイト内でのそのビジュアル画像の役割や狙い、サイト自体のデザインとの親和性など、満たすべき条件の中でかわいいを模索します。

私が担当しているサイトはフラットでシンプルなので、そのようなWebサイトに合わせやすいことを最重視して、かわいいデザインの作り方を考えました。
(あくまで必要な要素の一部であり、絶対条件ではありません)

かわいい色・かわいい配色

人間が外界から得る情報の8~9割は視覚に由来すると言われ、その中で色は圧倒的な影響力をもっているため、全体の印象に大きく関わります。 なので、色から「かわいい」を作っていきます。

彩度は低く!明度は高くする!

彩度を低くして、明度を高くすると、 柔らかく、かわいらしい印象の色になりやすいです。 f:id:aimstogeek:20200117150739j:plain

ピンクは暖色系を!!

女性らしいかわいい色合いといえば「ピンク」が思いつきやすいですが、ピンクといっても多種多様なピンクがあります。
大きく分けると青みがかった「寒色系のピンク」と黄みがかった「暖色系のピンク」があり、女性に好まれやすいピンクは、黄みがかった「暖色系のピンク」という意見が多いです。 f:id:aimstogeek:20200117171004j:plain

子供っぽくならないように注意!

上記のような色で色数を増やしてくと、カラフルでかわいらしい印象になりますが、一方で子供っぽい印象にもなりがちです。
子供っぽくならないようにほんの少し明度を下げて色をくすませたり、落ち着いた色も入れたりするとよさそうです! f:id:aimstogeek:20200117183417j:plain

フォントと装飾

フォントも全体の印象に大きく関わります。 また、適度な装飾を入れることでかわいさを表現します。

細めの丸みを帯びたフォントを使う

フォントは太めのゴシックより、細めの丸みを帯びたフォントのほうが女性らしくかわいい印象になります。 f:id:aimstogeek:20200117171213j:plain

ラインは細く

何かしらラインの装飾を入れるときも、フォントと同様に細めのラインだと女性らしくなります。

f:id:aimstogeek:20200117172608j:plain

パターンを敷く、図形を散らばす

ドットやボーダーのパターンは定番で使いやすいです。 入れすぎるとうるさく幼稚になりますが、適度にいれるとかわいいです。

カラフルな図形を散らばすと賑やかでわいわいした雰囲気になり、隙間も埋められて全体のバランスをとるのにもよいです。

f:id:aimstogeek:20200117172622j:plain

まとめ

  • 色の彩度は低く、明度は高くする!
  • ピンクは暖色系
  • 配色は子供っぽくならないように
  • 細めの丸みを帯びたフォントを使う
  • 装飾はパターンや図形を駆使する


「かわいい」はセンスや感覚だけじゃない!!

「かわいい」は明確じゃないのでセンスや感覚だけで作ると思われがちですが、「かわいい」と感じるデザインにはある程度共通点があり、その積み重ねでかわいいは成り立っているようです。
そのような共通点を学んでいくことが、ビジュアルセンスを磨くことに繋がるのかなと思っています。

参考文献
かわいいデザイン|ingectar-e
ネットで「女性」に売る 数字を上げる文章とデザインの基本原則 |谷本 理恵子


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! // 919.jp