はじめまして。
アメーバピグでデザインを担当しております青山です。
今回は、アメーバピグのアイテム制作におけるレギュレーションについてお話させて頂きます。
スピード感が大事だと言われて久しいwebサービス制作で、リリースから現在1000万にのぼるピグユーザーの皆様の期待に応えるべく、アイテムやエリアを制作するイラストレーター・デザイナーは総勢50名を超える人数となっております。
リリース当初は予想だにしなかった大所帯となったピグチームですが、ユーザー様からご覧になるピグのイラストレーションはあくまで「同じ人が描いたもの」に見えるよう配慮しなければなりません。均一なテイストのイラストレーションを提供する為に、チーム内での取り決めをいくつかご紹介したいと思います。
まず初めに行ったのは、ピグのイラストレーションの成り立ちを分析するところからでした。
ピグのテイストは当時の立ち上げメンバーが、直感的にカワイイ、皆に愛されるイラストの見せ方をいくつかの試作を経て完成しました。このプリミティブなかわいらしさや魅力を常にキープするためにはイラストの特徴を捉え、傾向を共有することが運用チームの我々としてまずやるべき仕事でした。
キャラクターと空間の傾きの違い
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/68/8c/p/o0600019611850158682.png?caw=800)
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120313/23/ca-1pixel/4c/83/p/o0600030011849992921.png?caw=800)
上の図は、ピグの立っている世界の傾き、いわゆるクォーター・ビューと呼ばれるものの角度、その床面の傾きとピグの各パーツの傾きを示した図です。この図からわかるように、ピグ自体の向きは、床面の視点と完全に異なる角度の視点で描かれた事がわかります。
具体的には、
・ピグのほうが空間よりも正面を向き、視点もやや見下ろした印象。
・空間に関しては傾きが均一(アイソメトリック図法)なのに対し、
キャラクターは爪先~肩~顔と、傾きが変化している
等の点が挙げられます。
また、下の図では、前向きと後ろ向きの状態での体の向きに差があることもわかります。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/0d/f1/p/o0600030011850102057.png?caw=800)
これらの差分はピグが
①着せ替えサービスとして購入したアイテムをより見栄え良くするため
②コミュニケーションツールとして表情を認識し易くするため
等の配慮により導き出された結果だと伺えます。結果、この魅力を担保しながら運用する為には
・きっちりと明言化したガイドライン制作は現実的でなく、
ある程度の振れ幅は容認しつつ制作する必要がある。
・ニュアンスを説明するための事例集によって管理することが適切である。
ということも明確になってきました。
運用時に様々なシチュエーションの家具や着せ替えアイテムと組み合わせる上で、このギャップをふまえて自然に見せる工夫が必要となります。下の図は、カチューシャ部分を同じパーツで使い回さず前後のパースを描き分けることを指示しています。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/f6/b8/p/o0600030011850174383.png?caw=800)
下のアイテムでは、トナカイの角の角度、前後での耳の見え方などに違いがあると思います。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/8e/1d/j/o0301019511850141002.jpg?caw=800)
ピグのアイテム制作時には、参考資料として沢山の写真画像が必要となる事が一般的ですが、その際リテイクになるケースで多いのが、家具アイテムのディフォルメ感の違いです。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/01/ca-1pixel/db/64/p/o0600030011850190541.png?caw=800)
上の図は、カジノエリアのリリース時に制作されたオープンカーのリテイクプロセスです。リリースされたデザインは一番右。最初に描かれたのは左となります、左の2台もイラストレーションとしては見応えがあり、造形的なクオリティーも高いのですが、ピグの世界観の中ではどうしてもシリアスな印象になってしまいます。
また、下の図のはカリブエリアの家具ですが、資料写真の印象に引っ張られて実際の人間のような8頭身の比率になってしまい、テーブルの天板の高さがピグの目の辺りまで高くなってしまっています。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/01/ca-1pixel/10/f4/p/o0600024311850190542.png?caw=800)
右のようにピグの比率に合わせることで、自然と家具にもかわいらしさが吹き込まれます。
最後に個人的な意見ですが、日本人はルネサンス絵画に代表される「まるで写真のよう」な密度のある写実的なイラストや絵画を好む、優れているとする傾向があり、実制作においても仕事量・密度で説得力を持たせて完成度を上げる描画スタイルの方が多いと感じます。
そのスタイル自体に問題がある訳では決してないのですが、アメーバピグに関しては当てはまりません。また、いわゆるヘタウマのような自由度の高いスタイルも、50人を超えるイラストレーターでシェアし運用するのは非常に困難です。どちらかといえばロゴのデザインに必要な造形力、適切な密度と時間をかけて選びこんだ少ないラインで情報を整理することが適切なのでは、と感じています。
今後の予定としては、違うシリーズのアイテムを重ね着出来るインナーやアウターのシルエットの規格を検討中です。
最後まで読んで頂き、ありがとうございました。
まだまだ改修する点は山積みではありますが、
日本一洗練されたアバターサービスにするべく頑張ります!
アメーバピグでデザインを担当しております青山です。
今回は、アメーバピグのアイテム制作におけるレギュレーションについてお話させて頂きます。
スピード感が大事だと言われて久しいwebサービス制作で、リリースから現在1000万にのぼるピグユーザーの皆様の期待に応えるべく、アイテムやエリアを制作するイラストレーター・デザイナーは総勢50名を超える人数となっております。
リリース当初は予想だにしなかった大所帯となったピグチームですが、ユーザー様からご覧になるピグのイラストレーションはあくまで「同じ人が描いたもの」に見えるよう配慮しなければなりません。均一なテイストのイラストレーションを提供する為に、チーム内での取り決めをいくつかご紹介したいと思います。
テイスト、世界観の分析
まず初めに行ったのは、ピグのイラストレーションの成り立ちを分析するところからでした。
ピグのテイストは当時の立ち上げメンバーが、直感的にカワイイ、皆に愛されるイラストの見せ方をいくつかの試作を経て完成しました。このプリミティブなかわいらしさや魅力を常にキープするためにはイラストの特徴を捉え、傾向を共有することが運用チームの我々としてまずやるべき仕事でした。
キャラクターと空間の傾きの違い
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/68/8c/p/o0600019611850158682.png?caw=800)
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120313/23/ca-1pixel/4c/83/p/o0600030011849992921.png?caw=800)
上の図は、ピグの立っている世界の傾き、いわゆるクォーター・ビューと呼ばれるものの角度、その床面の傾きとピグの各パーツの傾きを示した図です。この図からわかるように、ピグ自体の向きは、床面の視点と完全に異なる角度の視点で描かれた事がわかります。
具体的には、
・ピグのほうが空間よりも正面を向き、視点もやや見下ろした印象。
・空間に関しては傾きが均一(アイソメトリック図法)なのに対し、
キャラクターは爪先~肩~顔と、傾きが変化している
等の点が挙げられます。
また、下の図では、前向きと後ろ向きの状態での体の向きに差があることもわかります。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/0d/f1/p/o0600030011850102057.png?caw=800)
これらの差分はピグが
①着せ替えサービスとして購入したアイテムをより見栄え良くするため
②コミュニケーションツールとして表情を認識し易くするため
等の配慮により導き出された結果だと伺えます。結果、この魅力を担保しながら運用する為には
・きっちりと明言化したガイドライン制作は現実的でなく、
ある程度の振れ幅は容認しつつ制作する必要がある。
・ニュアンスを説明するための事例集によって管理することが適切である。
ということも明確になってきました。
運用時に様々なシチュエーションの家具や着せ替えアイテムと組み合わせる上で、このギャップをふまえて自然に見せる工夫が必要となります。下の図は、カチューシャ部分を同じパーツで使い回さず前後のパースを描き分けることを指示しています。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/f6/b8/p/o0600030011850174383.png?caw=800)
下のアイテムでは、トナカイの角の角度、前後での耳の見え方などに違いがあると思います。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/00/ca-1pixel/8e/1d/j/o0301019511850141002.jpg?caw=800)
ピグの体系に合わせる
ピグのアイテム制作時には、参考資料として沢山の写真画像が必要となる事が一般的ですが、その際リテイクになるケースで多いのが、家具アイテムのディフォルメ感の違いです。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/01/ca-1pixel/db/64/p/o0600030011850190541.png?caw=800)
上の図は、カジノエリアのリリース時に制作されたオープンカーのリテイクプロセスです。リリースされたデザインは一番右。最初に描かれたのは左となります、左の2台もイラストレーションとしては見応えがあり、造形的なクオリティーも高いのですが、ピグの世界観の中ではどうしてもシリアスな印象になってしまいます。
また、下の図のはカリブエリアの家具ですが、資料写真の印象に引っ張られて実際の人間のような8頭身の比率になってしまい、テーブルの天板の高さがピグの目の辺りまで高くなってしまっています。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20120314/01/ca-1pixel/10/f4/p/o0600024311850190542.png?caw=800)
右のようにピグの比率に合わせることで、自然と家具にもかわいらしさが吹き込まれます。
最後に個人的な意見ですが、日本人はルネサンス絵画に代表される「まるで写真のよう」な密度のある写実的なイラストや絵画を好む、優れているとする傾向があり、実制作においても仕事量・密度で説得力を持たせて完成度を上げる描画スタイルの方が多いと感じます。
そのスタイル自体に問題がある訳では決してないのですが、アメーバピグに関しては当てはまりません。また、いわゆるヘタウマのような自由度の高いスタイルも、50人を超えるイラストレーターでシェアし運用するのは非常に困難です。どちらかといえばロゴのデザインに必要な造形力、適切な密度と時間をかけて選びこんだ少ないラインで情報を整理することが適切なのでは、と感じています。
今後の予定としては、違うシリーズのアイテムを重ね着出来るインナーやアウターのシルエットの規格を検討中です。
最後まで読んで頂き、ありがとうございました。
まだまだ改修する点は山積みではありますが、
日本一洗練されたアバターサービスにするべく頑張ります!