フロントエンドエンジニアが技術書のデザインとイラストを担当した時にやったことまとめ
こんにちは〜MIOです。
本題に入る前に自己紹介しますと、私は普段はフロントエンドエンジニアをしている人間です。ですが、副業でたまにイラスト描いたり、勉強がてらデザイン制作してたりしています。
そんな人間が先日行われた技術書典7で今いる会社内の有志と共に技術書を出そう！という話になり、私はエンジニアとしてではなくデザイナー＆イラストレーターという立場で技術本の制作に携わりました。
私自身、副業で技術書のイラストを描き下ろしたことはあったのですが、本のデザインだったり細かい色々なデザインだったりは今までがっつりやったことがありませんでした。
そんな戦闘能力の私が、今回どんな感じで技術書典に向けて制作を進めていったか。この記事はとあるエンジニアの、デザインの観点から見た技術書の制作記録です。まあつまりは個人的な技術書典7の振り返り記録ですね。
もし技術の薄い本を出すことになった！という人で実際に出展する場合どんなデザイン制作が必要になってくるのかわからない！またはどう取り組めばいいかわからない！となった場合参考になれば幸いです〜
今回の私の役割と分担
社内の技術書のデザインパート制作メンバーはこんな感じでした。
アートディレクター: 社内のフロントエンドエンジニア
* 本の台割をつくる
* 本文レイアウト
* 原稿流し込み
* 進捗管理
デザイナー: 私
* 表紙・裏表紙デザイン
* 本以外の制作物
実は今回社内で出した技術本は、執筆はもちろん、本の表紙イラストもエディトリアルデザインも本の中に含まれている漫画も、もっと言えば当日の会場で販売していたキーボードのはんだづけをしていたのも、全員エンジニアというフルスタックエンジニア集団で制作されていました。というかエンジニアってなんだっけ。
そして、デザインパートメンバーで、もともと芸術系大学出身でかつ学生時代にZINE作りまくっていたフロントエンドエンジニアがいたので、その人に本文レイアウトや印刷にまつわるあれこれ周り、あとはデザイン監修や全体の進捗管理をやってもらいました。本文がめちゃくちゃ読みやすく綺麗なレイアウトになってるのはこのエンジニアさんのおかげです。エンジニアってなn (以下略）
私は主に本の中身のレイアウトデザイン以外の手を動かす周りを担当していました。
技術書本、デザイン全体のコンセプト設定
コンセプトとしては「少年誌」で行くことにしました。
もともと執筆チームの立ち上げの段階でどんな本を書くかとなった際「技術のごった煮本を出そう」という話になり、「弊社（カヤック）の有志が色々書いた非公式ごった煮本 」＝「ゴロゴロカヤック」という本のタイトルにしよう！と先にタイトルが決まりました。
そして、私の今いる会社のブランドイメージの一つに「漫画」があり、名刺や会社のウェブサイトなど、いたるところに漫画テイストな要素をブランドとして出している部分があるのです。
（弊社コーポレートサイトの漫画verの様子。画面右下の丸っこいアイコンから着せ替えが可能です）
なので自分の会社の人たちが書いた本っぽい感じを出すという狙いと、あとは単純に某小学生向け漫画雑誌の名前と何の偶然か4文字違いということで少年誌のようなデザインをトンマナにしよう、ということになりました。
技術書の表紙：コンセプトからラフに落とし込むまで
少年誌の傾向調査
ラフを考えるにあたって、そもそも雑誌のデザインをしたことない私が真っ先に思ったのは「少年誌らしさって何だ？」というところです。
わからなければ調査してみればいいということでググったところ、 今現在発行されている少年誌の一覧サイトがちょうどあり、それを参考にしつつ「雑誌のレイアウト」と「ロゴの系統」の二軸で分布図的に分類しました。
なぜレイアウトとロゴを別分類にしたかというと、単純に表紙ロゴの紙面における存在感の大きさを考慮したからです。表紙ロゴは表紙イラストと同じくらいの主役的存在な上に、他のデザイン制作物にも流用される物なので、デザインの中では特に心を配っていました。こうやって傾向を抑えておくことでデザインの方向性を決めやすくなったので、これだけは個別にやっておいてよかったです。
この時分析して私なりに掴んだ「少年誌らしいデザインとは？」については、後日別のnoteの記事で詳しく書きたいと思います。（思ったよりボリュームが大きくなったので...）
（2019/11/4追記）詳しく書きました！合わせてこちらも読んでもらえると嬉しいです。
ちなみに蛇足ですが...この調査の際に情報整理のためMiroというツールを使ったのですが、こいつめちゃくちゃ便利です。社内のデザイナーさんに教えてもらったツールなのですが、ヴィジュアルボード作ったり情報どばーとまとめるのに超活躍してくれます。私はたまにこいつ使ってシステム構成を整理して社内メンバーに共有したりしています。
ラフ作成
上記の調査をもとに以下のテーマで3つほどラフを描きました。
1. 典型的な少年漫画風（友情＆バトル的な）
2. 現代の少年漫画に見られる萌え寄り少年誌（AIとエンジニア妖精たちのイメージ）
3. 現代の少年漫画に見られる可愛い系絵柄 ×王道少年誌レイアウト（アートディレクター発案の執筆者全員女子化）
ラフを作るときに意識したのは「全て違うテイストにする」ということでした。伝統的か現代的かのどっちかに極端に寄せるか、ミックスするかの案を考えて提出しました。
アートディレクターや他のチームメンバーにも共有した結果、最終的に案3で行くことになりました。
技術書の表紙：イラスト・デザイン制作
完成した表紙絵はこんな感じです。
上記の方針の通り、レイアウトは伝統的にする分、絵柄はとにかく現代寄りにすることにしたので、塗りは水彩塗りとギャルゲ塗りの独自ブレンドした感じで挑みました。
キャラデザ的な話
テーマが「執筆者全員女子化」ということでしたので、執筆者をよくある学園物の女子キャラに見立てて描いていきました。割と個人の性格的特徴や見た目的特徴を拾って設定を考えつつキャラデザを起こしたつもりです。(実は何人かが面識がない状態だったので勘で描いた人もいます。ごめんなさい)
ちなみに設定的にはこんな感じでした。
◦ imajo（下段真ん中）
→ 正直顔がわからなかったので、王道ヒロインによくあるようなおっとりお嬢様的なキャラになってもらった。
◦ 宮村（下段右）
→ 事前に提出してもらった写真（自主提出してきた）を見つつ、しっかり者で優等生的な感じなキャラになってもらった。セーラームーンのあみちゃん的な。
◦ 古川 （下段左）
→ 執筆者の中での唯一の女性で、割と本人そのまんま。クラスに一人はいそうな元気な友達的キャラのイメージ。
◦ 姫野（上段右） → 普段よくネックウォーマーをしている人なので、とりあえずマフラーは巻いておきたかった。冷静に状況観察しそうなキャラ感にした。
◦ 谷脇（上段真ん中） → 正直顔のイメージが怪しかったので、とりあえず柔らかいながらもどっかオタクっぽい感じが出したいなあと思って書いた。
◦ 入江（上段左） → マイペースな不思議ちゃん。表紙で一人だけカメラ目線じゃないようにしたのはそのため
ロゴデザイン、レイアウト的な話
伝統的な少年誌に見られるようなロゴデザインとレイアウトを目指していたので、以下をポイントに組み立てて行きました。
・ロゴは太字で角ばったゴシック赤字、かつ袋文字で。
・弊社らしさを出すためにサイコロモチーフを取り入れつつ、言葉の響きに呼応させた配置にする
ちなみにボツになりましたが、レイアウト考えるにあたってそれぞれのタイトルのロゴ的なのも作っていました。色々な少年誌のデザインを見つつ自分の勉強がてら作っていたのと、あと私自身が趣味で作字やロゴ制作をたまにやっているので、割と趣味の一環で作っていた節はありますw
他の制作物
ダウンロードカード
諸事情で急遽電子版の販売を用意することになり、急遽作成しました。オモテ面は表紙そのままですが、裏面のデザインは弊社のサイトデザインを参考にしつつ制作しました。
また、このカードを作るにあたってカードに個別のpassを振る必要があったので、急遽イラレでスクリプト書いてデータの流し込みを行いました。(この時ちょっとだけエンジニアっぽいことやってるなと感じました)
(function() {
var CSVConverter = function() {
this.textGroups = [];
this.textWords = null;
this.variables = app.activeDocument.variables;
this.indexFirst = null
this.indexLast = null
this.path = String(app.documents[0].fullName).replace(app.documents[0].name, "");
this.textFramePos = 1
for (var i = 0, n = this.variables.length; i < n; i++) {
var variable = this.variables[i].pageItems[0];
if (variable.length !== 0) {
this.textGroups.push(variable);
}
}
};
CSVConverter.prototype = {
read: function() {
var path = File.openDialog("CSVファイルを選択してください。");
if (!path) {
return;
}
var csv = new File(path);
if (!csv.open("r", "", "")) {
return;
}
var text = csv.read();
var lines = text.split(',');
var itemindex = 1
// csvファイルの191行目から200行目までを引っ張る
for (var i = 190, n = 200; i < n; i++) {
var line = lines[i];
var frameRef = app.activeDocument.textFrames.getByName("pass-" + itemindex);
frameRef.contents = line;
itemindex++;
}
csv.close();
},
writeText: function() {
for (var i = 0, n = this.textGroups.length; i < n; i++) {
var textFrames = this.textGroups[i].textFrames;
try {
var textFrame = textFrames[this.textFramePos];
var text = String(textFrame.contents);
for (var key in this.textWords) {
if (text.indexOf(this.textWords[key]) != -1) {
textFrame.contents = this.lines[i][key];
}
}
} catch (e) {}
}
},
};
var converter = new CSVConverter();
converter.read();
})();■参考にしたもの
ちなみに急遽用意したダウンロードカード用に急遽ダウンロード専用ページを作ってもらったのですが、サイトもカードの雰囲気をそのまま踏襲してもらっています。このサイトは今回の技術書制作チームのプロデューサー的立場のエンジニアに１日でよしなに制作してもらいました。圧倒的に感謝しかない。
ポップ
頒布物のポップは全体のトンマナに合わせました。ただ、後払い用のポップだけは技術書典のシステムのうちの一部、という立ち位置だと判断し、色合いを技術書典のロゴカラーである緑系統に寄せました。
お品書き
ダウンロードカード作ってるのと同時になんとなくお品書きのデザインは考えていたので、どことなく裏面のデザインと統一感は保てたデザインとなりました。頒布物に合わせたタイトルのフォント選びや文字の雰囲気の調整を特に慎重に行いました。
( 個人的に見出しゴは読みやすい上に漫画っぽい雰囲気が出るので良いフォントだなと感じました)
最後に...
今回初めて本を出す側として技術書典に参加しました。業務と並行しながら、かつ色々なトラブルもありつつ、時には色々な人に迷惑をかけつつも(ほんとありがとうございますすみませんした)、ちゃんと全ての制作物に関して理由を持ってデザインできたのではと思っています。
次また何か機会があればデザイン周りやイラストで技術書本の制作をお手伝いしたいなあと思いましたので、この記事を読んでイラストでもデザインでもちょっとお願いしたいなと思った方がいましたら、ぜひTwitterのDMなどからご相談いただけるとめちゃくちゃ嬉しいです！(突然の宣伝)
表紙イラストに関しては何度かお手伝いさせていただいたことがありますので、詳しい実績とかはこちらからどうぞ〜↓
ではまた。
読んでいただきありがとうございます。とりあえず温かい目で見守ってくださると嬉しいです。