こんにちは、デザイナーの安達です。
最近、フェンリル提供のデザインレビューツール Brushup に
マスコットキャラクターが誕生しました。
ロゴマークのオレンジ色を全身にまとったアライグマの男の子です！
社内ではプロダクトオーナーの名前から「よしたかくん」の愛称で親しまれています。なかなか渋い…。
ということで、今日は彼のデザインが完成するまでを追いながら
キャラクターデザインの基礎を簡単にご紹介します。
※ リニューアルされた Brushup の Web ページはこちら
デザインチーム向けプロジェクト管理ツール Brushup
デザインのベースを決める
まず、サービスのイメージに近づけるようなベースを決めます。
例えば車の販売なら、ベースに「車・タイヤ」を選ぶと売り物が何かをシンプルに伝えられます。なるべくひねりのない物や生き物がいいでしょう。
今回は「ブラッシュアップ＝磨き上げる＝アライグマの洗う動作」という連想からアライグマにしました。
ベースの特徴を捉える
ベースは、その特徴を絵的に拾いやすいものにすると（ウサギなら長い耳など）デザインがぶれにくく良いです。
しかし…筆者は当時、アライグマとタヌキの違いを説明できませんでした。
ちゃんとアライグマに見えるキャラクターを描くために、まず彼らの体にある模様を調査して見た目の特徴をつかんでいきます。
こう見ると、鼻や手足の形も結構違うようですが
デフォルメの度合いでシルエットは簡略化されてしまうことも多いので一旦置いておきましょう。
今回はアライグマの「尻尾に縞があり、顔にのみ濃い模様が入っている」という特徴を活かしてキャラクターをデザインします。
アピールしたい要素をビジュアル化する
次は、 Brushup と関連づけるためにキャラクターに加える要素を探します。
サービスのアピールポイントをいくつか書き出しました。
- まるで実際に書き込むようにレビューができる = 鉛筆やペン
- スマートに仕事が進められる = ビジネスのイメージ（ネクタイなど）
- オンラインのツールである = ノート PC など
ビジュアル化できそうな単語が浮かび上がってきたので、これらをイラストに起こしてキャラクターに盛り込みます。
こうしてできたラフ画がこちら。
ユーザーに近しい存在になれるよう、表情が豊かなイメージで描きました。
配色を決める
Brushup には吹き出しの形をしたロゴマークがあります。ロゴやロゴマークがすでにある場合はサービスのテーマカラーが使われているので、同じ色相で着彩するとキャラクターとサービスがより結びつきます。
ロゴマークを分析し、使う色を決めたら
一旦 PC に取り込んだラフ画に色を置いてみます。
完成イメージが見えてきました！
Illustrator で描画
いよいよ Illustrator を使ってパスでトレースしていきます。
ラフを基本に、バランスを調整していくつもりで進めましょう。
フェンリルでは主に Web やアプリのデザインで使用しますが、イラスト制作にも Illustrator は大変有用です。
筆者は描くもののテイストで Illustrator と Photoshop を使い分けています。
後で一部のパーツだけ描き換えたり、他のソフトを使って動かしたりするときは今回のように Illustrator を。
逆に一枚絵の制作や、上のようにアナログ風にタッチをのせ躍動感を出したいときは Photoshop を、という具合。
ちなみにこれは、制作が楽しかった思い出の一枚です。ペンタブレットを使ってひたすらガシガシ描きました。
（どこかで見たことがあるかも？）
ということで、よしたかくんが完成しました！
Brushup のマスコットキャラクターである意味合いも含め、尻尾にロゴマークと同じひし形のパターンを入れてみました。
今後いろいろな場所で活躍する予定ですので、お待ちいただけたら幸いです。
それでは、長い記事を最後まで読んでいただきありがとうございました。
（ Brushup のエラーページへ行くと彼が…！？）
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
フェンリルの開発者アカウントでは、フェンリルプロダクトの最新開発情報などをつぶやいています。よろしければフォローしてください！
フェンリル採用チームの Twitter アカウントです。応募前のお問い合わせや、ちょっとした相談ごとなどお気軽にどうぞ！
フェンリルの Facebook ページでは、最新トピックをお知らせしています。よろしければいいね！してください！
Sleipnir の Facebook ページでは、ユーザーの方たちとのコミュニケーションや最新情報の投稿などを行なっています。よろしければいいね！してください！
関連記事
