見出し画像

技術書の表紙デザインはイラストがいい？グラフィックがいい？

ひのふ

こんにちは！ひのふ（@pinopo_）です。

４月に、技術書典が開催されてましたね！🌈🏄‍♀️

今年の技術書典も、かなり人が多かったそうで…！（年々来場者数が増えているそうで…！）実は、今回の技術書典で出展された冊子の表紙デザインを担当していました。
今回は技術書の表紙デザインについて書きたいと思います。（本当はこの記事を4月中に投稿するつもりでしたが、もう5月も終わりそうなところまでいつの間にか来ていました…😇）

私は技術書の表紙デザインを今まで2回担当したことがあり、それぞれ全くテイストが違うものに仕上がったので、それぞれの観点をまとめてみようと思いました。今後技術書の表紙を作成する機会がある方の参考になれば幸いです。


🍤🍤🍤


1.　技術書の表紙デザインを依頼される

とある新年会で、エンジニアの佐藤剛士さんから、4月の技術書典で出展する本の表紙デザインをお願いしたいと相談を受けました。
普段仕事はUI/UX（たまにグラフィック）がメインで、紙媒体の仕事をする機会が少なかったので、最初お声がけいただいた時はも〜〜〜めちゃくちゃ嬉しかったです！「やります！🙋‍♀️」のひとことでした。

ご依頼いただいた時は、表紙デザインでイラストを描くんだろうなと思っていました。なぜなら、技術書典のメインビジュアルや、出展されている本の表紙が、私の中で女の子のイラストのイメージが強かったのです。なのでイラストの仕事が来た！と最初は思っていました。

しかし、佐藤さんからのご依頼は、イラストを使わない表紙デザインにしたいとのことでした。

てっきりイラストを描くと思ってたので最初は少し驚きました。
というか、私がそもそも技術書＝イラストのイメージが強かったのは、以前一度技術書の表紙デザインでイラストを描いたことがあったからです。


🍤🍤🍤


2.　イラストを使った技術書の表紙デザイン

2018年の2月DroidKaigiに、当時所属していた株式会社Diverseがブースを出展することになっていました。
そこのブースで技術書を出したいよね、とエンジニアの間で話に上がり、その技術書の表紙デザインを私が担当することとなりました。

ブースで出展する本＝同人誌のイメージが強かったらしく、当時いたエンジニアさんに「同人誌と言ったら萌え絵でしょ」と言われたので、表紙デザインは萌え絵を描くことに決まりました👯‍♀️
ここで、私の中で技術書＝イラストというイメージが強くつきました。

私自身女の子のイラストを描くの大好きなので、当時依頼を受けた時ひゃっほ〜！という気持ちでした🕺
そして本の表紙っていうのはインパクト（第一印象）が大事だと思っていたので、DroidKaigiで目立つといいな〜と思い、頑張って可愛い女の子を描こう！！！と思い頑張った結果こちらの表紙が完成しました👇


画像1

タイトルは「Diverseの薄い本　〜普段業務ではできないことをやってみた〜」！（笑）思いっきり同人誌に寄せていきました（笑）

DroidKaigiに出展する本だったので、今までのOSのドロイド君と、Androidで使用するツールのアイコンなどの模様が描かれている服と、ドロイド君パーカーを着た女の子を描きました（要素盛りだくさんｗ）

壁紙も作って、当日QRコードで配布していました👇

当日は無料配布していたからというのもあると思うのですが、お陰様であっという間に配布終了となりました…！皆様本当にありがとうございました。

しかも、ちょ〜〜〜〜〜嬉しいことに、

私の絵を真似て描いてくださった方がいたのです！！！！！！😭女の子もドロイド君もめちゃくちゃ可愛い（泣）
これはもう一生の思い出や…と思いました。こういうことしてもらえるのも、イラストの強みですよね。

イラストの表紙デザインには以下のメリットがあるなと気付きました💡

・可愛い（これにつきる）
・親しみやすさもあるので手にとってもらいやすい
・インパクトがあるので記憶に残りやすい
・漫画を読むオタク層にも、手にとってもらいやすくなる

こういう体験をしたということもあり、佐藤さんからの依頼の表紙デザインもイラストを使用するものだと思っていました。


🍤🍤🍤


3.　グラフィックを使った技術書の表紙デザイン

以上がイラストを使用した表紙デザインでしたが、ここからはイラストを使用しない表紙デザインの話になります🏃‍♀️

佐藤さんと表紙デザインの打ち合わせの時に、技術書典のメインビジュアルなどから、技術書って女の子のイラストのイメージが強いので、てっきりイラストを描くのかと思った、という話をしました。

実際にBOOTHで販売されている技術書を一緒に調べてみると、グラフィックデザイン寄りな表紙も結構あるんだな〜と気付きました。というか、女の子のイラストの表紙と、グラフィックデザイン寄りの表紙は半々ぐらいな印象でした。その点を考えると、イラストはやはりインパクト強いので、記憶に残りやすいのかもしれません。
他にも、表紙にイラストが使用されている本が多いのは、エンジニアに男性層が多いのと、技術書典のメインビジュアルが毎年女の子のイラストなのでそれに合わせたものが多い、というのが理由なのかもしれません。

今回佐藤さんが執筆したい内容が、Appleが主催するWWDC2018の中で発表された「Designing Fluid Interfaces」についてでした。なのでエンジニアだけでなく、デザイナーにも本を手にとってもらいたいとのことでした。
まとめると、佐藤さんの要望はこうでした👇

・エンジニアだけでなく、デザイナーに向けた本でもある
・ジャケ買い的なのをして欲しい
・表紙からどんな内容の本なのかわかるものにしたい

とくに3点目の「表紙からどんな内容の本なのかわかるものにしたい」というのは、イラストでは表現がしにくい弱みでもありました。
上記の点を踏まえて佐藤さんと話し合った結果、グラフィックデザイン寄りでかつインパクトのある表紙デザインで進めよう！ということになりました。

「Fluid Interfaces」という抽象的なものと、Fluid Interfacesの1つとしてわかりやすいハーフモーダルを使用したもの、2つのラフを作成し、本の中でも題材として取り扱われているハーフモーダルを使用した表紙デザインにしようと決め、本番制作に入りました。

フィードバックをいただき、修正して最終的に完成したのがこちら！👇

画像2

タイトルは「ハーフモーダルで理解するFluid Interfece 」です！

ハーフモーダルを取り扱っている本だと見ただけでわかってもらいたいため、スマホでハーフモーダル画面を開き操作しているグラフィックを作成しました。
また、前回はPhotoshopで描きましたが、今回は全てIllustratorのパスを使用しました！イラストにはあるインパクトの強さを今回の表紙デザインでも出したかったので、赤×青という目立つ配色にしてインパクトを出しました。

余談ですが入稿作業で私がポンコツすぎて、Googleのハングアウトで私のイラレの画面を共有しながら、佐藤さんに通話で入稿データの作り方を教えてもらいましたｗ（本当に本当にありがとうございます！！！🙏）
初めて画面共有しながら共同作業をするということをしたのですが、めっちゃスムーズに出来て最高でした！

そして技術書典を終え…私は当日技術書典に出席することができなかったので、佐藤さんから感想を教えていただきました🙏

・表紙を見て立ち止まって、サンプルを立ち読みしてくれる人が前回出展した時より多かった
　・今回iOSエンジニアとデザイナーに向けた本だったが、Androidエンジニアの方が本を開いて「あ、iOS向けか」となるぐらい、立ち止まってくれる人が多かった
・本は120冊、PDFは55枚配布することができ、予想以上に購入してくれた人が多かった

お〜〜〜めちゃくちゃ嬉しかったです😭最初の打ち合わせで決めた、多くの人の手に取ってもらいたい、ジャケ買いしてもらいたい、という点をクリアすることができて良かったです…！🙏

購入した！というツイートをしてくれた皆様も、ありがとうございました…！

今回グラフィックデザインで表紙デザインを作成して、以下のメリットがあると学びました💡

・ジャケ買いしやすいオシャレさが出る（これにつきる）
・幅広い層に手に取ってもらいやすい
・どういった内容のものか伝えやすい&伝わりやすい
・イラストとは違ったインパクトを出すことができる

ちなみに佐藤さんの本はこちらで購入できます！！👇よろしければぜひ✨


🍤🍤🍤


4.　違うテイストの表紙デザイン制作を終えて

去年はイラストで表紙デザインを担当し、今年はグラフィックデザインで表紙デザインを担当しましたが、それぞれ目的によって使い分けることができると思いました。

どのような内容なのかを明確に伝えたい場合、強いのはグラフィックデザインの方ですが（イラストでも描き方によってそれはできますが）、可愛い〜！とか直感的な、率直な感想を引き出せるのはイラストの方が強いな〜と思いました。（そして他の人に自分の描いたものを描いてもらえるというメリットもあります…！）

もし今後、技術書の表紙を制作する際に、イラストがいいのかグラフィックがいいのか迷う方がいらっしゃいましたら、この記事が参考になりますと幸いです！

改めて、このような素敵な仕事を依頼してくださった佐藤剛士さんと、株式会社Diverseのエンジニアの皆様、ありがとうございました！
またいつでも力になりたいと思いますので、機会がありましたらお声がけください😊

それではまた〜〜！


いいなと思ったら応援しよう！

ひのふ
頂いたサポートは私のおやつ代にします🍬🍫🍪