ミッフィーの作者ディック・ブルーナに学ぶ「UI/UX」5つのポイント

更新日: 2018年01月31日

グロースハック

子どものころに、ミッフィーの絵本を見たことはありますか。
ミッフィーは、今から半世紀以上も前、*「nijntje」(ナインチェ)*という名前で、字のない絵本の主人公として生まれました。

そのミッフィーの生みの親が、ディック・ブルーナというオランダのグラフィックデザイナー・絵本作家です。
赤・青・白・緑・黄色といった独特な色使いをし、言葉の壁を超えてメッセージを伝える独自の作風は、多くのデザイナーたちにも多かれ少なかれ影響を与えました。
当時としては斬新でモダンなキャラクターたちは、今でも、子どもたちだけでなく、大人たちにも大人気です。

ディック・ブルーナによるうさぎの絵本が登場して半世紀経った後、改めてUI/UXデザインの世界でもディック・ブルーナの世界観に注目が集まっています。
言葉がなくても何か伝わる、その秘訣が彼の作品の中にあるのではないか、そのようにUI/UXデザイナーも考えています。

今回は、ミッフィーの生みの親であるディック・ブルーナに学ぶUI/UXの5つのポイントをご紹介します。
実は、単なる鑑賞作品ではなく、デザインの技法を学ぶ上でも非常に参考になるディック・ブルーナ作品。どのような点が活かせるのでしょうか。

ディック・ブルーナとは

Credit: Huffpost

ディック・ブルーナ(Dick Bruna, 1927年8月23日〜2017年2月16日)はオランダ・ユトレヒト生まれのグラフィックデザイナー・絵本作家です。

第二次大戦後、画家になることを決意し、高校を退学したブルーナは、オランダの書店や、イギリス・フランスの出版社に出向き、とりわけパリでマティスやレジェといった現代芸術家たちの作風に影響を受けました。
20歳になると、オランダに戻り、アーティストとしての活動を始めていきます。

世界中でミッフィーとして知られる、字のない絵本の主人公となるうさぎは*「nijntje」(ナインチェ)*と呼ばれ、彼が28歳頃に絵本が刊行されました。
当時、子ども向けの絵本といえば、写実的な描写が主流だったので、当時の大人たちは斬新でモダンなキャラクターを「子どもには理解できない」と敬遠していましたが、シンプルではっきりとした色使いは子どもたちに莫大な支持を得ました。

ブルーナ作品に学ぶUI/UXのチェックポイント

それでは、ブルーナの作品は他の芸術家の作品と何が違うのでしょうか。
また、UX/UIデザイナーは、ブルーナ作品から何を学ぶことができるのでしょうか。
ここでは、ブルーナ作品に学ぶUI/UXのチェックポイントを5つにまとめてご紹介します。

1. 色使い

ブルーナ作品は、ピカソやマティス、レジェなどに影響を受けた、パッと一瞬でひきつけるようなシンプルな太い線とはっきりとした大胆な色使いが独特です。
赤・青・白・緑・黄色を基本としたこの色使いは*「ブルーナカラー」*と呼ばれており、のちに象の色付けを行う灰色、そして熊や犬を描くための茶色が付け加えられました。

こうした色ははっきりとしているので、色が持つイメージがはっきりと伝わりやすいのが特徴です。
例えば、黄色や赤は幸福感や温かみがよく伝わり、緑はのどかで平和なイメージ、青はどこか切なく刹那的なイメージがあります。

Webデザインに置き換えて考えてみると、意図したイメージを伝えるために、はっきりとした色使いを使っていくのは戦略上効果的です。

2. 大胆な省略

photo credit: nijntje.nl

ブルーナ作品には、細密画のように小さな鱗片を見せることなく、全体を大胆に表現する作品が多く存在します。
例えば、お月様であればまん丸の図形を空に配置したりして、そのほかの余計なものは思い切って省略をしています。
余計なものを置かなくても、形と色使いが代わりに多くを語ってくれるからです。

ホームページ上のデザインでも、余計なものを置いているのであれば、大胆に取り除いてみるのを検討してみてはいかがでしょうか。
もちろん、ボタン周りにインパクトのあるマイクロコピーを置くことで、説得力は増します。
しかし、饒舌に長い言葉を使って説得しようとすると、かえってユーザーはうんざりしてしまい、ページを離脱してしまいます。
シンプルに、伝えたいものだけに絞りましょう。

3. 動きをつけた配置

photo credit: dickbruna.jp

字がなくても絵本を楽しめる要素はどこからやってくるのでしょうか。

不思議なことに、ブルーナ作品をじっと見つめていると、静止画であるにもかかわらず、今にも息を吹き返して動きそうです。
これは、右や左、前方や後方に今にも動き出しそうに見せるように、動きをつけた配置がなされているからです。

白紙のページにデザインをするという意味ではホームページデザインも同じだと言えますが、どうしてもボタンやテキストを無目的に配置してしまうと、平坦で動きのない、のっぺりとした配置になりがちです。
しかし、意図的に視線を動かすように工夫して配置をすれば、動画やアニメーションを加えなくともある種動的な配置をすることが可能になります。

4. 余白を生む線

ブルーナ作品の大きな特徴のひとつに、シンプルかつ力強い線が挙げられます。
太くはっきりとした線は、対象物をはっきりとそこに存在させる役割がある一方で、余白との対象関係が明確に作り出されます。

例えば、こちらの2枚の絵に関して、左側は単なる黄色のタイルですが、右側は太い線を使って描くことで、平面に描いているにもかかわらず、キャラクターが立体的に、前面にいるように見えます。
ある種の動きとも取れますが、余白を大いに活用しているデザインとも取ることができます。

Webページに関しても、明確な線をはっきりと示したり、コントラストを明確にした色使いにすることで、パーツを前面にして背景と明確に区別することで、立体的に見せることが可能です。
ミニマルなデザインだと平坦に見えてしまうと心配になるかもしれませんが、むしろ影や光といった余計なエフェクトを使わなくとも、立体的に見せることができるのです。