フラットなイラストレーション技法を約2ヶ月で習得する方法
はじめに
このエントリは「2018 Advent Calendar 2018」の13日目の記事として書かれました．ここでは，今年，取り組んでいたフラットなイラストレーション技法の紹介と，その習得方法について紹介したいと思います．これが個人的体験として2018ベストという感じの発見だったので．
冒頭のイラストでなんとなく雰囲気はつかめるかと思うのですが，技法の基本的なコンセプトとしては以下の3つです．
- イラストを仕上げる速度を重視する（ために，基本操作，ショートカットを覚える）
- 基本的な図形描画の機能を組みわせて形を作る
- 現実世界を抽象化して考える（デフォルメ，空気遠近法，ライティング）
ここでは，頭の中にあるイメージを素早くアウトプットして，出来上がったイラストをコミュニケーションの道具にすることを目指しました．
描画のソフトウェアとしては，
で動作を確認しています．僕自身は上から順に描きやすかったです．
冒頭に，なぜこんなエントリを書くかについて説明しておきたいと思います．一言で言うとフラットなイラスト技法は，技術習得が容易で，作成に必要な時間が短く，且つ図解作成の基礎技法として様々な分野への応用可能性が高く，習得すると全方位的に捗る技能と思うからです．
血圧が上がっていわゆる主語がデカい案件になりつつありますが，一旦落ち着いてみます．いや，でもマジで絵を描くという行為に紐づく「ありがちなスキルや時間」有りきではない，ある種の革命的な技法と思うんですよね．これは（倒置法）．図形は丸とか，角丸長方形の組み合わせだし，1−2分くらいでなんか人間っぽい形が作れますしポージングなんかもいけます．
しかし，もう一段階心を落ち着かせて考えてみます．最初に報告しておくと，僕はいわゆる手描きで絵を描く技能はもっていませんでしたし，今現在も全く描けるようにはなっていません．いわゆる下手なままです．ヘタウマでもないと思います．
// 検索して見ながら描いたドラえもん
図工や美術の成績はけして良くはなかったし，性格も雑です．デッサンも描けません．こういったマイナスの情報は，この技法を始めるにあたっての「やらない理由」になりません．自慢げに書いているわけではなく，少しでも出発点に立つ方の行動のきっかけになって欲しいという気持ちから書いています．脱線しましたが，「技術習得が容易」というけれども，それでも絵心は必要だろう．というのはあり得る反論です．けれども今でもアナログで全く絵が描けない（描けるようになっていない）僕が，まがりなりにもフラットなイラストレーションが描けている状況は，絵心がなくてもフラットなイラストレーションは描けるようになるという論拠にならないでしょうか？
……とはいえ，最初から今のようなファストなドローイングにたどり着いたわけではありませんでした．この試みは，去年の夏に一度挫折をしています．手書きスケッチの教則本を数冊購入して，読みながらやってみて2週間くらいで挫折しました．その時のイラストはこんな感じでした．
// 15分スケッチ練習帖をやっている
結構真面目にやってたつもりだったんですけど，ちょっとひいてみると，あまりそうは見えないですね．これを出発点として冒頭にあるようなイラストが描けるようになるまでに考えたことややったこと，参考にしたものなどを紹介していこうと思います．そう，これは紹介エントリの形式をとった，僕の技術習得失敗の記録です．
動機と目的
手描きでスケッチの練習をしていた当時，目標として「絵が描けるようになりたい」と思っていたものの，それ以上のモチベーションがみつかりませんでした．ルーチンとして毎日手を動かすわけですが，成長速度が目に見えないくらい遅かったため挫けてました．
僕が手描きのスケッチで辛く感じたのが，大きく以下の点です．
- Undo（取り消し）やRedo（やりなおし）がムズい＋メンドい．
- 道具を揃える導入コストが高い（何を使えば良いのかもあまり分からない）．
- 手技の感覚を掴むまでの道のりがみえない．成長実感が湧かない．
- メンターがいない．
手描きで絵が描ける人からすると「2週間で挫折したら描けるようにならないよ」ということかもしれないですが，絵が描けるようになりたいけど絵を描くことがもともと好きではないし，日々時間に追われている僕のようなモチベーションの人間からするとちょっとした苦行でした．途中から当初の動機が少しズレていたんじゃないかと気づきました．それは「絵が描けるようになりたいのではなく，頭の中のイメージを形にして人に伝えたい」ということや，技法としてイラストが描けるようになって，他の様々な（いわゆるデジタルな）技法と組み合わせたり掛け合わせたりしたかった（この辺の感覚はこれまでやってきた）ということです．
そこから更に噛み砕いて，イメージを形にする方法を最短経路で身につけて，自分しか描かないような個人的題材を描いてみたい，という自分の動機に気がつけたことはとても良かったと振り返って思います．実際のところ，順序だってこの動機に辿り着いたというわけではなくて，一向に思うように描けるようにならないフラストレーションもあって，動機が醸成されたような気もするので，回り道しても良かったなと今は思っています．
// 冨樫義博「HUNTER×HUNTER モノクロ版 6 (ジャンプコミックスDIGITAL) Kindle版」 P.197
今思うと，自分が手書きのイラストレーションで目指そうとしていた技術と自分の関係はHUNTERxHUNTERでいうところの「メモリの無駄遣い」にあたるものでした．読んでない人に説明すると，作中の天空闘技場編でヒソカというキャラクターがこの「メモリの無駄遣い」について語るシーンがあります．それは要約するとこんな感じです．念とよばれる超能力において，自分の資質から遠い技術や能力を習得しようとすることで自分のメモリ（RAMと同義）の大半が食われてしまい，その代償として応用力や柔軟性が損なわれるので，それは避けなくてはいけない．僕はこの話がかなり好きで，自分が何か新しい分野の技術や知識などに向かうとき，手持ちの知識や専門性との相性を考えた上でなるべく取捨選択するように心がけています．
これは，別の物語ではワールドトリガー三雲がB級ランク戦中盤で合成弾を覚えてサクッとレベルアップしようとして木虎に一喝される下り，といえばわかるでしょうか．わからないですかね．これらは「持たざる者が才能の壁に，技術や知恵，工夫で補い立ち向かう物語（HxHは，さらにそれを生まれ持った才能が蹴散らす物語です……ネテロと蟻の王戦とか）」として読むと味わい深いので技術習得やゲーミフィケーションなんかが好きな方には共感できることも多々あるかと思うのでおすすめです．その路線でいうと「ベイビーステップ」も大変良かったです……超脱線しました．でもこのあたりのことは書いておきたかったので書きました．みんなもその人しか書かなそうな，変な文体の変な文章，読みたいですよね．僕は読みたい．
プロセス
こうして「ササッといい感じにイラストを描けるようになる」を目指して，ファストフードならぬファストなイラストレーション（造語です）の技法についてまずはYouTubeで動画でも観ようと調べたら，いろいろある．スピードドローイング（Speed Drawing）というジャンルでYouTubeに動画が沢山アップされています．たいていはタイムラプスムービーとして作業のスクリーンレコーディングを公開しているものです．
その頃はいわゆる主流のIllustratorの使い方である「ベジェ曲線とペンツールを使ったイラスト技法」に取り組んでいました．しかしペンツールで線を引く技術習得がエグく，あまりうまく行きませんでした．当時描いていたイラストを載せておきます．「丁寧に描く」というのが僕は向いてなかったように思います．
// ペンツールの辛さに投げ出した馬
// 写真から描いた微妙なフクロウ
「これはいける」と思うものはなかなかなく，しばらく悶々としつつIllustratorを触っていたのですが，YouTubeのレコメンデーションエンジン優秀ですね．関連動画から2Dゲームのキャラのデザインや，8ビットライクなイラストレーションを描いている人たちの動画を見ていくうちに，「あ，この方向性は（楽そうで）良いぞ」と思うようになりました．そこで発見した動画が以下のものです．まずはこれを少し見てみてください．
どうですか．いけそうな気がしてきませんか？この動画はモンテネグロ在住のMark Riseさんという方がアップしているものです．ここでは角丸長方形，円，長方形の3つの形しか使ってません．2分くらいの動画なので，僕はYouTubeの低速再生の機能を使って1/2倍速とかで再生させながらチュートリアルを模写するというのをやっていました．Illustratorの基本図形の操作方法や，Shiftキー（描画時に縦横比1：1の正円や正方形を描画）やAltキー（描画時にクリックした点を中心に描画，選択時ドラッグアンドドロップでコピー）を理解するとより捗ると思います．またシェイプ形成ツールはパスファインダーよりも直感的なのでヘルプなどを読んで使い方を覚えると良いかもしれません．
良い教材を見つけたらあとは突撃してそれを吸収するだけ！なのでとにかくチュートリアルの動画を観まくりながら練習しました．またMarkさんの屋号のウェブサイトでは有料のコンテンツも販売されているので，そういったものを購入して観たりしました．MarkさんはAfterEffectsでのアニメーションなんかもやっているので，フラットなイラストにリギングして動かしたり，またゲーム開発で使用するようなチュートリアルも公開しています．
www.youtube.com www.youtube.com
この「基本図形をもとにしたフラットなイラストレーション」で非常に重要なポイントは奥行きと色，陰影表現です．フラットなイラストレーションではオーソグラフィック（平行投影）な視点でモノを見ます．つまり，奥行きでいわゆるパースのような歪みは生まれないので，描く側からすると割と都合よく世界を描けます．これもデッサンや空間把握が苦手な僕には，取り組みやすい形式だったと振り返って思います．描くものを抽象化した上で，まずは配置しながら描き始められるからです．
しかし，単純に形状を基本図形で描いて色を塗っても，そこにある感じを作るのは難しい．モノや人物としての存在感が希薄になりがちです．顔や個々のパーツは描けても，全体を描ききった上で，空間の中で存在している感じを作ることができないと成功とは言えません．
ではどうやって奥行き感，物体が物体として存在している雰囲気を醸し出せるか．そこには陰影が関係します．顔にあたっている光が首に落ちるから，顔よりも首のほうが色の明度が低くなる．親指よりも4本の指が手前にあるから色が明るくなる．というような，前後の奥行きを色彩の明度をつかって表現する．また人が立っている／モノが置かれている位置に影が落ちるようにすることで，あたかも空間に存在するような雰囲気を作ることができます．遠近法や陰影表現は古くは絵画の技法であり，また近年ではコンピュータグラフィックス，特に3DCGの技法でもあります．そういった知識と照らし合わせながら取り組めたことは非常に良かったです．
成果
僕は昨年11月から12月の1ヶ月間模写などを通じて技法を理解した後に，1月から1ヶ月間「1日1土偶」としてイラストを描き続けました．全てはTwitterのモーメントにアップしているのでぜひ見てください．題材もそうですが，経過ごとに技法習得の成長過程や発展させている様子を観ることができます．
// 自分しか描かない世界の設定について考えたりして描いた．
// 世界観が広がりながら，そこでの陰影や奥行きについて考えながら描いている．
// ライティングやUIなどの込み入った感じをやってみた．
// 瞬間や，光の感じやサイバー感をどう出すか腐心した．
// エクスクルーシブ土偶，iPhoneごしに世界が分断されているのとか集大成ぽさがある．
また，イラストが描けるようになったことで，LINEスタンプを作ってみることにしました．LINEスタンプ自体は取り組んでいる授業の課題で設定したものですが，自分も描ける様になったので楽しく取り組むことができました．
所感
時間をかけないで伝わるイラストレーションが描けるとどういうときに便利か，少し考えてみます．例えば何か自分が写真やテキスト以外の形でメッセージを伝えたいときには便利ではないでしょうか．何か挿絵のようなものが必要なときに，時間をそれほど描けずにイメージが伝えられるようなイラストが描けたり，そういったもののストックがあると，「いらすとや」さんも便利ですが，自分の作るもののトーンに合うものが作れるかもしれません．現在は，授業資料や書いたテキストを補足するような図として描いたものを使ったりしています．
// ゼミの説明で用いた図
// p5.jsのellipse関数の説明で用いた図
その他では，基本図形でつくる形状は，いわゆるベクター形式の画像として保存できます．SVGの形式にできれば，例えばペンプロッタで実際にペンで絵を描かせたり，3DCADのアプリケーションでインポートして厚みを与えて立体にして出力したりできます．基本図形を2Dから3Dに変換していくのができて，立体形状まで作れれば，それをリギング（3Dのモデルデータに骨組みを追加すること）してモーションデータを組み合わせて動かすこともできるかもしれません．
あるいは発想を逆にして，同じように基本図形を描けるProcessingのようなクリエイティブコーディング環境でコードで絵描くことや，「基本図形的なものをルールに基づく形で描いて，グラフィック化する」のようにアイデアを発展させていく，ことも考えられるかもしれません．
最後に
こういうことを考えていくと，フラットなイラストレーションは，ヒソカのバンジーガムやドッキリテクスチャーのような，シンプルだけど応用力のある能力に思えてこないですか？2018年はイラストレーション技法の習得をきっかけに，それを広げていくようなことを活動の合間にやっていたというかんじでした．来年はもう少し3Dに関連した技法について時間をつかって習得していけたらと思っています．
