クロッキーは「見て」「っぽく」描け!

はじめに

 
気づけば前回のブログから2ヶ月近くが経っており、時の流れの速さを感じております。
 
人生初のブログを書いてから放置しようかと思っていたこのブログですが、文章力を鍛えるためにもちょくちょく投稿していこうかと思い直したため、もしよろしければお付合い頂けると嬉しい限りでございます。
 
 

タイトルの理由

 
今回なぜこんなタイトルにしたかということを話すと、実は僕は趣味でイラストを描いたりする者でして。
 
暇で仕方ない大学4年生のこの1年間で基本的なところからイラストを練習し直したいと思い、学部の友人と週2回に渡ってクロッキー会を開催しております。
 
  

f:id:ipower0306:20170529232428j:plain

f:id:ipower0306:20170529232430j:plain

 
 
圧倒的男率。
 
クラスメイトや後輩なんかも参加して、毎回ワイワイやっております。
 
 
 
かれこれもう1ヶ月ほどやっているのですが、その過程で気づいたことがいくつかあったのできちんと文字に起こしたいなと思ったのがきっかけです。
 
また、デジタルイラストを描くことを前提としてどんなことを意識してクロッキーをすればよいのかが明確に書かれたサイトが無いように思ったのも理由の一つです。
 
 
 

イラストは「それっぽく」描くもの

 
 そもそもの前提として、イラストって正確なものを描く必要は無いというのが個人的な考えです。
 
言い換えれば「それっぽく」描ければいいんです。
 
手をこちらの方に伸ばしている女の子っぽく。剣を振りかざして必殺技を放つ剣士っぽく。
 
 
人それぞれ物の見方や考え方が全く違うので、この「っぽさ」にこそ個性が表れるとも考えています。
 
 
 
それに加えて、デジタルで描くことの特権として「何度でも修正できる」ということがあります。
 
顔を大きく描きすぎちゃったから小さくしよう。線が歪んでしまったから取り消ししよう。
 
はたまたラフが描けたけどちょっと汚いから、新しくレイヤーを追加して上から描くことだってできます。
 
 
これらのことから、デジタルイラストを描くのに必要なのは「何回でも修正して理想のイメージに近づけられる力」ではないかと考えています。
 
(もちろん一発で描けた方がいいに越したことはないですが)
 
 
 

f:id:ipower0306:20170529232621g:plain

 
 
 
とすると、他のサイトでよく描かれているような「正確な線を一本で描く」なんてことは意識する必要はないと思うのです。
 
それよりも必要なのは、それっぽい理想のイメージにするための、要素をインプットしていくことだと考えています。
 
 
 

それっぽい要素をインプットするには?

 
 僕らのクロッキー会の例では1ポーズの時間が3分ということもあり、始まった途端に描き出す人が多いのですが、まずは何が「それっぽく」見せているのかを見て判断する必要があります。
 
 
なので、最初の10秒くらいはモデルを観察する時間に費やして、落ち着いて次の3点を観察します。
 
 
 
①服が張っている部分と弛んでいる部分はどこか。
 

f:id:ipower0306:20170529232401j:plain

 
それっぽく描くためのかなり重要な要素として「服のシワ」があります。
 
服のシワには法則があって、肩や胸などの張っている部分から弛んでいる部分に向かってできます。
 
これを知っておくだけでも他のポーズを描くときに「こんな風にシワ入れたらそれっぽくない?」みたいな描き方ができるようになってきます!
 
 
 
②身体の前後関係を把握する
 

f:id:ipower0306:20170529232404j:plain

 
今回のポーズは正面に対して45°ほど斜めの構図で、胴体に隠れて見えなくなる部分や脚が交差している部分があります。
 
その境界線をしっかりと描くと平面の絵でも奥域が出てそれっぽくなります!
 
 
 
③服の内側を想像する
 

f:id:ipower0306:20170529232407j:plain

 
誰だって裸の上に服を着ています。
 
なので、服は身体のラインに沿って膨らんだりするわけです。
 
今回のポーズでは左腕を曲げて、左脚を曲げていますね。それに沿うように服のシワができているのがお分かりでしょうか??
 
女子高生のイラストを描くときなどでも、しっかり太もものラインが感じられるスカートを描けると、グッとそれっぽさが上がります。
 
 
 
これらを意識しつつ、3分で実際に描いたクロッキーがこちらです。
 
 

f:id:ipower0306:20170529232810j:plain

 
 
うーん…手や脚など末端を描くのがまだ苦手なので、練習しなければですね…
 
それでもこれを意識するだけでそれっぽくは見えるし、違うポーズを描くときにも活かせば、より学びが得られます。
 
 
 

実際の変化

 
そうしてクロッキーを始めてみて、最近描いたイラストがこちらです。
 

f:id:ipower0306:20170529232846j:plain

f:id:ipower0306:20170529232852j:plain

 
 
(コンペ応募作品もあるため一部分のみ切り取ってます)
 
 
着物の女の子の腕部分のシワや某アニメキャラの服のシワはフィーリングで描いてます。
 
慣れてくるとこのように資料を見なくてもそれっぽいイラストが描けるようになってきます!
 
 
 

まとめ

 
ここまで実体験を踏まえながら書いてきましたが、一番伝えたかったことは「見る」ことをないがしろにしがちな人が多いということです。
 
 
始めたばかりの頃は線を引くのに精一杯になってしまうものです。
 
さらには残り時間が少なくなってきたところで焦ってしまい、描ききれていない部分を適当に補完してしまう人が多いものですが、それよりかは「それっぽさ」を構成する要素を丁寧に抽出していって描き途中で終わる方が断然良いと思っています。
 
 
スピードは自然と身に付くものですし、そもそもクロッキーで書いたポーズを趣味絵で描くことなんてほぼないので、どのポーズにも共通する法則を見つけ出していった方が後々役立つと考えています。
 
 
なんにせよ、「クロッキーの学びを次にデジタルで描くときにどう活かすか」ということを常に考えていくと、速く上達するのではないでしょうか!
 
 
僕自身まだ始めたばかりなので、数ヶ月経って考えが変わることもあるかと思いますが、同じくイラストを描く人の参考になると嬉しい限りです。
 
 
それでは今回はこのへんで!
 
 
 
 
追記:今回クロッキーに使用した画像はこちらのフリー素材サイトよりダウンロードしました(http://gahag.net/)。スタイル抜群の中国人女性の画像がたくさんあるので、ここから参考ポーズを探すのもいいかもしれません!
 
 
 
 
 

チームの中でのデザイナー - pixiv SPRING BOOT CAMP 2017で学んだこと -

ブログを描くのは初めてです。

インターン中は"眼力のがんちゃん"と呼ばれていました(マジになると目つきが鋭くなるらしいため)。

 

今回は3/6〜3/17まで行われた、pixiv SPRING BOOT CAMP 2017の体験記となります。

デザイナーとして参加して、実際にやったことや学んだことなどつらつらと書いたので、今後pixivインターンをデザイナーで受けようと思っている学生の方の参考になると嬉しい限りです。

 

ざっくりと自己紹介

僕は九州の大学に通う学生で、今はデザイナー志望で就職活動をしています。

デザイナー志望と言いつつも学科は情報系で主にプログラミングやってる感じなので、デザインに関してはいろんな企業のインターンに参加しつつ、独学で勉強しています。

 

そもそも参加したきっかけ

ポートフォリオ代わりにvivivitに作品を載せていたところ、pixivの人事の方に見つけて頂きました。

それから選考を経て、参加させて頂けることになったという流れです。

(もともとイラストは見るのも描くのも好きで、大学一年生の頃くらいからpixivにイラストを投稿していました。)

 

今回の意気込み

インターンに参加するに当たって、個人的にこれだけは頑張るといったことを1つ決めていました。

 

  • talk less, do more” とりあえずやる。 何かしらアイディア出たら一旦触れるものを作ってみる

 

デザイナーはチーム全員の思考を形にし、良さそうな案が出たらすぐにプロトタイプを作って検証するというサイクルを回すエンジンのような存在だと考えています。

そうしたサイクルを繰り返していき、「最高のサービスを作り上げる」ことが今回このインターンに参加した一番の目的でした。

 

何をしたのか

ビジネス、デザイナー、エンジニア職を含む学生15名にpixiv運営側から与えられた課題は「世界に向けた創作活動が盛り上がるサービスを創る」というものでした。

これまで数々の他社インターンに参加してきましたが、世界を視野に入れたプロダクト制作は経験したことがなかったため、緊張するとともに新しいことに挑戦する喜びを感じました。

 

実際の流れ

各チーム3人〜4人に分かれて、初日は全体のテーマにもある「創作活動」を何と定義するかについてブレインストーミング

その結果から、僕らAチームでは

  • 創作活動が盛り上がる=そもそものインスピレーションが活発になる
 
ことと定義して、「インスピレーションを共有できるSNS」であるinspixというサービスを提案することにしました。 
 

f:id:ipower0306:20170324175059p:plain

 

inspixについて

最終プレゼンでも名前の由来や配色に関しては触れる機会がなかったので、ここでさらっと紹介させてください(笑)

 

inspixという名前はインスピレーション(inspiration)を日常から選び取る(pick)ことから、ins + picks = inspixとしています。

わかりやすさを重視しつつ、単純に覚えてもらいやすいものにしたいと思って名付けました。

 

また、アイコンはインスピレーション=電球というイメージから発想を得ていて、周りのうねうねでインスピレーションが溢れ出ている様子を。

いろんな人のインスピレーションが合わさって、新たなインスピレーションが生まれる様子を色の混ざり合いで表しています。

また、電球→光→光の三原色と発想して、様々なインスピレーションが合わさった部分は白くなることから、アプリ全体の配色を白基調にすることにしました。

 

f:id:ipower0306:20170330233239p:plain

(引用元:三原色光模式 - 维基百科,自由的百科全书)

 

チームの中でのデザイナーとして活動したこと

初日に案が決まってから以降、2つのことに注力しました。

 

  • プロトタイプをとにかく速く作る
  • 次の準備を早くする

 

プロトタイプをとにかく速く作る

個人的にinspixのアイデアには手応えを感じていたため、1日目終了後すぐにプロトタイプを制作しました。他の人に見せてみて、反応を確かめるためです。

 

 

f:id:ipower0306:20170324175514p:plain

 

初期の機能案としては

  • カメラ画面の上に直接ラフを書いて、背景と合わせて良い!と思ったときにシャッターを押せる
  • 事前に描いておいたキャライラストを乗せることもできる
  • パース線など、構図の補助となるガイドの表示

といったシンプルなものでした。

 

ここでpixiv社内のクリエイターの方にヒアリングを実施したところ、「シンプルなツールとして楽しみ」といったコメントや、その他あったほうが嬉しい機能などのフィードバックを得ることができました。

早くから動いたおかげでこの案にする決め手を作ることができたと思います。

 

次の準備を早くする

今回のインターンでは、最終の成果物がどれだけ実装できているかも評価の対象に入るといったものだったので、エンジニアにいかに早くデザインを共有出来るかが鍵になると思っていました。

そこでデザインをしっかり作らなくとも、どの画面にどの機能があるか分かるように全画面のペーパープロトタイプを作り、優先度の高い画面からデジタルでデザインを作っていきました。

そうすることで、エンジニアが必要とした画面のデザインがない!といった状況を作らないように先を回って対応することができ、開発の流れをスムーズに進めることができたと思います。

 

f:id:ipower0306:20170330235614j:plain f:id:ipower0306:20170330235815p:plain

 

終結

エンジニア職の2人が最終日までに実機で動かせるレベルまで実装してくれて万全の体制で臨んだのですが、残念ながら優勝することはできませんでした。

それでもプロダクトの完成度は高い評価を得ることができたので、10日間意識し続けたことがきちんと結果に残せて良かったと思っています。

 

その反面、プロダクトがユーザーにどんな使い方をしてもらえるかといったことを伝えるためのダミー画像を作ることができなかったりと、サービスのブランディングに関して課題も見つかったインターンとなりました。

 

 

さいごに 

インターン中、pixivのデザイナーの方にデザインの相談をしていたのですが、アドバイスの一つ一つがクリエイター目線で考えられていることがとても印象に残りました。会社が抱えているクリエイターファーストという理念が、社員にもしっかりと受け継がれている。その様子を肌身で感じることができて、ますますpixivという職場で働くことに魅力を感じました。

 

また、最終結果を受けて「デザイナーとしてもっとやれることがあったはずなのに」と自分を責めてしまっていたのですが、pixivの社員さんは10日間の行動をしっかりと見ていて下さっていたようで「やっぱりお前はデザイナーだと思ったよ」と言われた時には、打ち上げ後の宴会の席にも関わらず涙を流してしましました…(笑)

 

pixivにはUXの視点をしっかりと持ったデザイナーの方々、そして結果よりもきちんと過程を見てくれる社員の方々がいます。

もしpixivのインターンに参加するかどうかを迷っている学生がいるのであれば、迷わず参加することをお勧めしたいと思います。

 

 

そして、今回インターンに参加して確信したことがあります。

「デザイナーが速く動けば、チーム全体のサイクルも速く回る」ということです。

この事を今後も意識し、デザイナーとして就職しても会社というチームの中で、実力を発揮できる人材に成長していきたいと思います。

 

末筆にはなりますが、10日間身の回りのお世話をしてくださったpixiv社員の皆様、本当にありがとうございました!

 

f:id:ipower0306:20170331005523j:plain