デザイナーがキャラクターを作った話


この記事はWHITEPLUS Advent Calendar 2016 13日目になります。

こんにちは。株式会社ホワイトプラス、デザイナーの @nimoni373 です。

ホワイトプラスでは、WEBから紙媒体、メールマガジンのデザイン、
リネットのキャラクター「ううるくん」を作りました。

今回はリネットのキャラクター「ううるくん」が生まれるまで、
決定プロセス、作る際に気をつけた点をお話します。

![image.png (67.8 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/4e0b1309-d06d-4c43-b422-2793713fa8ca.png)


## 第一章「キャラクターいてもいいかもね」っていう環境ができた。

2014年に新卒入社したホワイトプラスでリネットに携わり始めたときは
キャラクターはいませんでした。
なんとなくクリーニングに関係ありそうなキャラクターがいたら楽しいかなと思い、
アルパカの**激ゆる**キャラをつくりました。本当にそのときは遊び半分でした。
名前は「りねまる」リネット＋まるという安易極まりない名前、ゆるすぎるフォルム。

404ページや、一部キャンペーンサイトに登場しましたが、
謎の四足歩行や、焼肉屋で見かけるホルモンみたいな形。
とてもユーザーに向けたものではありませんでした。

![lenemaru.jpg (36.0 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/976683e9-bc58-4d2d-ab92-7fc789cdbb95.jpg)

失敗だったかと思いきや、社内では思いの外ウケて、愛されました。
ちゃんと作ろうよ！という流れができたのです。
### まずはやってみるって大事ですね。

## 第二章「愛されているキャラクター」はすごいと知る。

2014年末にリネットのお客さま向けにWEB上で貯められるスタンプカードを作ることになりました。
スタンプカードに使うキャラクターが必要だが、りねまるはちょっと。。。ということで
New りねまるを作ることになります。

そこで様々なキャラクターを改めて見てみると、、さすが愛されているキャラクターはすごい！
世界中の愛されているキャラクターから学んだポイントを紹介します。

### 線や色が少なく覚えやすい
キャラクターデザインで最も大変で大切かもしれません。
線や色味が少ないほど、要素が少ないので覚えやすいです。
あんなに簡単そうなのに描けそうで、描けない。絶妙なバランスです。


### 女性に人気のある動物モチーフで曲線が多く優しい印象。
疲れてるときに見るとつい癒やされてしまうキャラクターたちはどれも動物を抽象化したものが多いです。
もし、くまもんがカクカクしていたら・・・きっとこんなに愛されなかったかもしれないですね。

ただの黒いクマに見えますが、、どこを見ているかわからないんだけど可愛い。
ちょっとトラウマになりそうな表情もきっとトリコになる要素なのかも。

![image.png (28.6 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/e3b500c6-306b-48a1-87e8-92efe6179b85.png)

水野学さんが作ったくまモン、思いつきではなく理詰めで作られていることをご自身もお話されてます。
>ではなぜ、黒い熊にしたか？ ここらへんからクリエイティブにブリッジ（橋）を架けていく方法を何となく説明しはじめています。黒い熊と茶色い熊（写真で提示）、どちらのほうが日本の熊っぽいと思いますか？
木彫りの熊の影響か、黒い熊のほうが日本の熊っぽいですよね。ついでに言うと、黒いキャラクターってあまり存在しないんですよ。あと、くまモンの頬は赤丸になっていますが、これは友人の小林賢太郎さん（ラーメンズ）が「アンパンマンやピカチュウなど、顔の中に赤丸があるキャラはヒットする」と以前言っていたのを思いだして、赤くしました。
[水野学の「クリエイティブ塾」レポート！ デザイナーと企業の間にある大きな川に“橋”を架ける](http://top.tsite.jp/lifestyle/lifetrend/i/25430227/)

### 体は2頭身、黒目がち。
当然ですが7頭身とかのほうが大人っぽくなり、
2頭身ぐらいだと子供っぽくかわいい印象になります。
黒目がちなほど、赤ちゃんに近くなり可愛い印象です。
（女子が黒目が大きくなるカラコンを入れるのも同じ原理ですね。）

### すごいなと思うキャラクター達
- ミッフィー
- Suicaのペンギン
- リラックマ
- スヌーピー
- チーバくん
- LINEのコニーやブラウン


### そのころのリネまる
リネまるの行方が404...
![名称未設定-1.jpg (40.4 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/1bbae690-de56-4e10-8088-0082a7a66836.jpg)


## 第三章「会社でキャラクターを作りはじめる」とにかく書いてみる
リネットはクリーニングの会社なので、
お洋服の素材に多いウール、ヒツジをモチーフにすることにしました。
![a1bec4a0f6982ddca47b5a0f19078142_m.jpg (1.9 MB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/b32615b7-fece-43b4-9d91-8726da6f7af8.jpg)
ネコや犬に比べて~~かわいくはない~~ですね。

### 1.まずは手書きで書く！
とにかくひつじっぽいキャラクターを描きました。

こんなひつじや
![image.png (1.4 MB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/64820b17-ec51-4f3b-9fa1-7b25aa056ff4.png)
あんな2頭身ひつじ
![image.png (435.3 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/43989eed-65be-4ca3-9c55-d629873f4f62.png)
時には脱線しながら（洗濯機モチーフ）
![image.png (1.1 MB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/87d49589-eedc-45c7-ac5c-98f9588ba9bf.png)

筋のいいものが10個ぐらいできたら、イラレでの作業に移ります。

#### ここまでのポイントはイラレを開かないこと
- ついまずはイラレ開くで！と息こんでしまいがちですが、まずは手書きでいけるところまで行きます。
- イラレを開くと、技術に気を取られてキャラクター作りに集中できないという持論です。
- 手書きなどやってられん！という人もいると思うので、個人によります。

### 2.筋の良さそうなものをベクター化する
いくつか描いた中から、デザイナー陣で相談していくつかを
ベクターデータにしてみます。

![image.png (175.5 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/f7ec3818-a524-48ed-bdb2-8d7fb8449fc5.png)

おや。。！それっぽくなってきた！
ここまでくるとテンションも上がってきます。

### 3.チャットワークで部屋をつくって投げまくる。
ココまで来ると全社巻き込んで、意見をもらいました。
みんな奥様に聞いてみたり、こいつが推しだぜ！みたいな子を見つけてくれて盛り上がります。

![newキャラ叩き.png (146.4 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/b7fa4b00-bb96-471a-aa60-763e388c9bff.png)

こういった投票を繰り返して、2種類ぐらいになっていきます。

#### 最終候補2名
![image.png (63.3 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/cd0d183f-224b-4531-8d3c-f03a208f124c.png)

最後は、サイトのイメージに合いそうなのはどっちかなーとか、
**実際にサイトに使ってみたりして使いやすい子を決めます。**

その結果・・・！
![image.png (49.5 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/98ff5129-927f-49dd-aaae-a9b4aaeeb07b.png)

この子になりました。

## 第四章「割りと大事な名付け」をしてみる

前回の名はリネまるでしたが、改めてみんなで考えます。
スプレッドシート用意してたくさん記載してもらいました。
![image.png (40.8 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/53e9b254-4662-417b-81d4-36b6bd9a1460.png)

100個以上集まってカオスになりますが、
みんなに興味持ってもらってることがめっちゃうれしいので
名前決まらない場合はこの方法がオススメです。

最後は候補を絞って忘年会で4択で決めました。

#### こうして「ううるくん」が産まれます。
![image.png (53.7 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/a95d9fd8-cde3-4f30-a151-624ca721734c.png)


## 第五章　運用のために「たくさんバリエーションを作っておく」
ううるくんが産まれ、燃え尽き症候群になる前に！
いくつかのポーズと、表情を予め作っておきます。
そうすることで、デザイナー全員ううるくんを扱うことが出来るし運用が楽ちんになります！

### 表情たくさん
![image.png (51.8 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/544869b2-c726-45fa-904d-8bcd43f09f32.png)

### ポーズもたくさん
![image.png (286.4 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/aad02c1d-7d9d-4d4a-bd6b-c77b1ec768cc.png)

## 番外編「キャラクターがいると便利なこと」
キャラクターがいると、素材ではなかなか見つけられないポーズやモチーフにすることが出来ます！

### LPの定番、「どこがいいの〜？」の顔
![image.png (83.6 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/925f6bfc-d2a7-475a-9cdb-0790eeda0ac8.png)

### あけおめ！用の袴
![image.png (92.6 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/20344eb4-0bc6-4d37-9327-97b99de67709.png)

### 吊るすよ！っていうことを伝える画像
![image.png (96.0 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/428ff793-8d05-4511-b41d-5ae99e19e66e.png)

### ふとんリネットのために「ダニ」
![image.png (117.1 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/0d6a0c31-47f0-4ced-bc09-2e4ac501e185.png)

キャラクターは仕事をたくさん受けてくれるんで助かります！

## ううるくんがいる会社、ホワイトプラス。
ううるくんが居る会社、ホワイトプラスでは[現在エンジニア](https://www.wantedly.com/projects/69257)を募集しています。
ううるくんと一緒に働きたいんじゃ！癒やされたいねん！という方には
特製グッズをプレゼントします。
![image.png (105.3 kB)](https://img.esa.io/uploads/production/attachments/2352/2016/12/12/7592/00860eb1-10a6-4e14-a866-a4e957f7bc46.png)


明日は弊社エンジニア @akaimo の「Travis CIでつくるiOSのCI環境（テスト・アップロード編）」です。
お楽しみに！