ウェブカツ!!が最強のプログラミング入門漫画「はたらくプログラミング」を作ったお話
どうも、かずきちです。
今回は、12/24の何故かクリスマスイブにKADOKAWAさんより全国書店で発売となった
「はたらくプログラミング」
製作舞台裏をちょっとご紹介したいと思います。
現在、Twitterで「はたらくプログラミング」と検索すると面白いという声ばかりで有り難いです。
このプログラミング漫画を作ろうと思い立ったのは、僕自身がプログラミング未経験者だった頃にプログラミングの参考書が「分厚くて文字ばかり」で、その頃「漫画」くらいしか本を読んでこなかった自分としては
全部漫画にしてよ。。
という経験からでした。
頭の悪い自分には敷居が高いし、もっと手軽にまずなんとなく学びたいな。と。その頃でも今でも「マンガちっく」なプログラミング解説書はありましたが、そうではなく
マジで全部漫画
なやつがずっと欲しかったんですね。ただ、その頃はまだアイディアは思い浮かびませんでした。実際、調査で色々な漫画やネット漫画的なのを調べてみても、IT系だと「漫画ちっくな解説本」かもしくは「一般ウケはしなさそうな4コマ的な漫画」というものしかありませんでした。
アレに出会って、インスピレーションが生まれました
そんな時に出会ってしまったわけです。あれに。
そう、
はたらく細胞
です。
僕は細胞の事はよくわかりませんが、それでも面白く興味が持てる内容で、
こういうやつだ！自分が作りたいのは！
とインスピレーションをもらいました。
決してパクってるわけではございません。インスピレーションです。
（ちなみにはたらく細胞BLACKも面白いので、ぜひ）
こんな、はたらく細胞のようにプログラミングの「プ」の字もわからないくらいの人でも楽しめるやつを作ろうと思いました。
僕はもともと営業でしたから、イメージでは
売れない営業マンが漫画喫茶や書店で「なんだこれ、なんか面白う？」とパッと手にとってもらえるもの
を作りたかったんです。特に「プログラミング学びたい！」という顕在ニーズのある人でなく、もっと前段階で
プログラミングってこんな感じなんだ。
特に興味はなかったけどなんか、面白そうかもな。
と思ってもらいたかったわけなんですね。
また、小学校でもプログラミング必修化され、これから中学校でも必修化される中で、小学生でも読めるものにしようと思っていました。
（現にSNSでは「プログラミング教室の補助教材として使えそう」「学校でも使えるんじゃないか？これ」みたいな声もちょくちょく聞こえてきたので良かったなと思います。）
漫画家を探したら灯台下暗し
そこで、ウェブカツ!!から出す漫画として外注で漫画を描いてもらえる方を探すため、色々な方に声を掛けていったのですが、漫画は上手いけどプログラミング自体分からない漫画家さんしかおらず、出版実績もある漫画家さんだと「200Pでこんなにするの！？」みたいな採算絶対に取れなかったり、思ったものが出来なさそうでコミュニケーションコストも物凄くかかりそうだなという印象でした。
（そもそも、僕も漫画をどういう流れで作るのかすら知りませんし、ネームって何？みたいな状態ですしね。。）
まぁ、最初からそこまでがっつり綺麗な漫画を作る必要はないと思っていたので、
ほどほどの質が描けて、プログラミングも分かって描ける人いないかなぁ
と探していたそんな折、うちの生徒さんで「学生の頃に漫画を趣味で描いていた経験がある」という「とりたすさん」という方がいたため、
きっと業界初になるのでやりません？
と声を掛けてスタートすることが出来ました。
世界観やストーリー、キャラの構想は自由と言う名のぶん投げ
そこから、まずは世界観とストーリー、キャラをざっくりとだけ僕の方で考えていったのですが、どうしようか悩みました。
ただ、この漫画は
WEB系のプログラミング言語を擬人化し、
自分たちが日頃見ているHPが表示されるまでに裏側で何が起きているのかの仕組みが面白くわかりやすく学べる
ようにしたかったので、擬人化で出すキャラは
・HTML言語
・CSS言語
・JavaScript言語
・PHP言語
・SQL言語
を出そうというのは当初から考えていました。
それぞれの言語の役割がざっくりイメージ出来て、自分たちが普段見ているHPが表示される中ではこんなやり取りが行われているんだという通信の流れもイメージできればいいなと。
（あとあとでRubyも出すことにしました。どんな登場でどんなキャラかは漫画でのお楽しみで）
キャラの動かし方としては、二郎系インスパイアの感じにしかならんだろうなとは思っていたので、ざっくり世界観や上記のような内容をお伝えして、あとは色々とやり取りを重ねていくうちに僕も世界観が見えてくるようになり、構想が固まっていきました。
こういうところってITエンジニアやっていても、経営者やっていても思いますが「ざっくり要件」から詰められる人と事細かく指示しないと動けない人がいて、とりたすさんはざっくり要件から動ける人で大助かりです。
プログラミングをそもそも知らない漫画家さんであれば確実にこと細かく詰めて伝えないと絶対に描けない部分なので、かなり楽させてもらいました。
ウェブカツ!!のあの部活のあれな感じで。
みたいなコミュニケーションだけで認識が合わせられるって普通ありえないですからね。。
キャラクターを考える
キャラクターはそれぞの言語の擬人化にさらにhtmlならタグをモブキャラにするのはお決まりだと思ってましたが、それぞれのキャラクター性どうするかはお任せしました。
その上で僕の方でちょこちょこストーリーの中でキャラをどう絡ませるかなんてのをアドバイスさせてもらいました。
HTML言語のキャラをざっくりどうするか
キャラ設定的なのどうするか考えていったんですが、
htmlはwebの根幹みたいなもんでしょう。
建築で言えば「基礎工事」や「家の骨組み」を作る人なわけなので、
熱血漢なてやんでぇ大工職人
という感じになりました
まぁ、ベタですが変に凝ると初心者がそもそも入っていけない世界になっていっちゃうので、ベタな王道で行くことにしました。
css言語のキャラをざっくりどうするか
cssは骨組みだけの簡素な家に外観つけて華やかにしていく美術さん的な感じですね。
ここらへんもベタに行きたかったので、お色気担当を入れることになり、
お色気のある大人な美術担当の女性
にすることになりました。
ストーリー内でも、htmlが土台を作り、cssが装飾を行う。という実際のweb制作の仕組みと同じにしています。
（こんな女性が実際の現場にいて欲しいと切に願ってます）
js言語のキャラをざっくりどうするか
これは、はたプロ（はたらくプログラミング）作りたい！ってちょろってツイートした時に
「言語を女性に全て擬人化したらこんなんだよね」
ってのをもらってたんで、それが採用されました。
jsはまぁフロントやってる人なら分かりますが、javaなりphpなりといった言語と違って標準のオブジェクトをぶっ壊す事も出来てしまうし、型とか関係なく放り込めるし、
ある意味柔軟で自由奔放、ある意味で大雑把
みたいな言語なので、そのまま
自由奔放でガサツで未熟感のある女性
になりました。
たぶん、B型女性かO型でしょうね。
僕はA型なんで、たぶん合わないです。
（振り回されてみたい願望もあるけど）
また、このjsちゃんをメインキャラに据える事にしました。
まぁ、うちのスクールがそもそも
バックも分かるフロントエンドエンジニア
を創出してるので、自然とjsメインになった感じです。
今後のテクノロジー成長の事も考えるとnodeもあるし、業務システムなどにある様な無機質な「システム」ではなく「サービス」としての価値勝負になっていき、UIリッチ、UXリッチでSPA化が当たり前になり、バックはAPIのみで簡素化されていく事を考えるとフロントエンド案件が今後どんどん増えていくのは必死ですからね。
まぁ、キャラ設定といっても結局は
どういうストーリーの中でどういうリアクションや言動をするのか、各キャラと絡んでいくのか
で、「人となり」が出てくるもんだと思うので、最初からがっつり設定せずにその場その場で決めていけばいいやって感じでしたが。
また、キャラクター設定でも、ありがちな「素人を無視して凝る」ってことをしたくなかったので、あくまで王道というかベタなキャラや絡みにするようにさせてもらいました。
大人の事情と詰め込み過ぎ問題
最終的には、作業工数などの都合上で省くところは省かないと入りきらないといった大人の事情から「細かな背景」が入れられなくなってしまい、仕組みを伝えるところとの良い塩梅のキャラ設定も考えると非日常的な世界観ではなくなってしまいましたが、
そうなると「面白さ」や「あるある」を出していかないと単調な感じになってしまうため、僕の方で顔芸やらエージェントスミッスなどの読み手がツッコミたくなるような命名といったところも提案させてもらい、また、PHPがバグってしまう描写でも「なぜバグってしまったのか」というところでなかなか良い案が出てこなかったため、プログラミング初心者あるあるな「セミコロン抜け」といったところなんかを提案させてもらいました。
他にも、
漫画家の卵がよくやる？らしいんですが、「詰め込みすぎる」ってのがあるみたいですね。youtubeと映画が違うのと同じようなもんです。
映画はそれ単体で見たら「意味のない」カットや時間を入れることで感情移入や世界観が出ますが、youtubeはジェットカットでポンポン進む分そういうのが乏しいです。
そういった詰め込み過ぎ問題が起こってしまいました。
だんだんと納品されてくるストーリーが詰め込みすぎてしまい情緒も間もない解説本に近くなってしまう「詰め込み過ぎ問題」がよく発生してしまっていたため、そこらへんもレビューで指摘させてもらい、とはいえ200Pの中である程度まで仕組みがわかる範囲のバランスで修正をしていってなんとか完成に持っていきました。
（その他にも色々詰めてましたが、漫画自体のネタバレになっちゃうのでこのくらいで。）
漫画を作ってみての感想
そういったことを半年ほどかけてやっていきなんとか完成し、Twitterでも多くの方から反響を呼び、KADOKAWAさんからお声がけもいただけて、想定していたよりも良い結果となり一安心ですが、今回200Pにも及ぶ漫画を作ってみて分かったのは、
漫画作るのってめっちゃしんどい
っことです。
まず、
技術も分かってる漫画家でないとほぼ無理
です。
もっと言えば、
初心者目線も持ちつつ技術も分かってる漫画家でないと無理
でした。
今回はうちの生徒ってのもあり、初心者目線ありつつ技術ある程度分かってましたが、それでも細かいところをアドバイスして詰めていかないとあらぬ方向に行ってしまう事が多かったです。
これがプログラミングの分からない漫画家さんだったら、たぶん発狂しているだろうな。と思います。
漫画をマネジメントしている方々？はものすごいな。と尊敬するばかりです。
（もちろん、漫画を描いていただいたとりたすさんの方がもっとしんどいですけどね。。）