技術書典で「z-indexを倒す」本を出した際の制作話

こんにちは、吉川雅彦です。こういう挨拶の出だしでブログを書くことは初めてです。今回はベストプラクティス的なことではなく、「技術書典」にサークル参加(出展)し、「z-indexを倒す」という「同人誌」を頒布(販売)した際のことを書きました。

技術書典

技術書典とは

技術書典とは、技術系の同人誌即売会イベントです。
今回で3度目でイベント名は「技術書典3」で、2017年10月22日(日)11時〜17時に秋葉原でありました。来場者層は、男性のエンジニアがほとんどです。

サークル参加した経緯

約1年前に、以前勤めていた会社の同期が集まり、そのときにそのうちの一人が書いた同人誌を見て、「自分も同人誌を書きたい」と思ったのがきっかけです。

今年6月に湊川あいさんナユさんに会い、その方々もサークル参加したことがあるという技術書典に自分もサークル参加しようと思い、しました。

頒布物

「エンジニア・デザイナーのためのCSS z-indexを倒す」と題した物理本と電子書籍(HTML、PDF)。そしてもうひとつ、表紙のモデルになってくれた人のフォトブック(グッズの位置付け)。

サークル名

「吉川雅彦」

今までの経験上、何かサークル名を考えてもおそらくすぐに飽きるだろうと思い、名前の認知度を高めたいという意味でも、名前をそのままサークル名にしました。また別のメリットもあり、サークル名や著者名を両方覚えてもらう必要性がないというのもあります。

meetup

7月8日には、技術書典3 はじめてのサークル参加meetupに参加し、いろんな方々に製本のことやユーザー層のことなどアドバイスをもらいました。同人誌を作ることに関して右も左もわからなかったため、参加してよかったです。

出展編

発行部数

200部(+18冊予備)

部数は150にするか悩みました。前回の平均頒布部数は100ちょっとで、今回早い段階でのサークル被チェック数が平均より少し上っぽかったため、120前後はいくかもしれず、「絶対に売り切れない部数の最低部数」として200部にしました。

実際に売れた部数

物理本 約120部(そのうち電子版とセットが約40部)
電子版のみが約10部

おおむね予想どおりの数値でした。台風が来ていなければもっと売れていたのかもしれません。

今回は、“ユニークの来場者数では2750名、再入場者含む、のべでは3100名のご入場がありました”らしいので、前回と同じくらいだと思います。

サークル被チェック数

69(イベント終了時)

被チェック数の遷移は、以下です。

  • 9月21日 5 (SNSで告知)
  • 9月23日 9
  • 9月25日 14
  • 9月26日 17
  • 9月28日 18
  • 10月1日 19
  • 10月2日 20
  • 10月4日 22
  • 10月13日 30
  • 10月19日 SNSで告知
  • 10月20日 36
  • 10月21日 51
  • 10月22日 69

支出

約85,000円

内訳

  • 出展費用 7,000円
  • 表紙写真代(スタジオ代+服代+交通費代等) 約30,000円
  • 印刷代 38,710円
  • 電子版用ポストカード 約3,000円
  • 勉強会参加、交通費、テスト印刷、備品 約6,000円

収入

約100,000円

内訳

  • 物理本のみ 700円×約80冊
  • 物理本と電子版のセット 1,000円×約40冊
  • 電子版のみ 700円×約10冊

グッズのフォトブックはPhotobackというところで作りました。1冊が一番安いもので1,000円+αなので、それを1,000円販売。こちらはほとんど手に取ってすらもらえなかったですね。5冊作って、2冊買っていただき、残り3冊はモデルになっていただいた人の親御さんに買っていただきました。

値段設定

  • 物理本 700円
  • 電子書籍(PDFとHTML) 700円
  • 両方セットで1,000円

ページ数は40ページ(表紙含まない)です。値段はすごく悩みました。前日まで悩んでいました。ほとんどの人が40〜50ページで500円を設定していたからです(しかも、電子版は無料でつけるという人も多い)。
私が調べる限り、同人誌というもの自体、普通の商業誌の倍程度の値段に設定していることが多いように思いました。技術書の商業誌が10ページあたり100円程度のため、40ページで800円ほどが適正だと判断しました。感覚的にもう少し安めでいいかなと思い700円に最終的にしました。あとは、技術書系同人誌業界の相場を下げたくなかったという理由も大きいです。

お釣りが面倒くさいという理由はありますが、銀行でお金を両替して持っていくだけの労力なので特に700円という中途半端な値段は気にしていなかったです。

電子決済をするアプリを運営側の方が作ってくれたらしいですが、使いませんでした。わかりやすいという点では現金購入が一番のUIだと思ったことと、iPhone版がないということで見送りました。技術書典の出展者の方々はほぼエンジニアの方々なので、絶賛している方が多かった印象です。現金を使わないというメリットの比重が大きいとのことなので、次回は検討してみようと思います(今回は手数料は無料だったらしいのでそこも加味しつつ)。

持っていったもの

  • お釣り(100円硬貨400枚(4万円分)、500円硬貨40枚(2万円分))
  • お釣りを入れる袋
  • マスキングテープ
  • 養生テープ
  • テーブルクロス
  • A4ポスター(家庭用プリンターで刷ったもの)
  • ブックスタンド(イーゼル)
  • 値札
  • カッター
  • ハサミ
  • サインペン
  • 飲み物と朝ごはんとお昼ごはん
  • ゴミ袋
  • 首から下げるやーつ(頒布物等を記入した紙とチケットを入れて)
  • 白手袋
  • スケッチブック(万能)

小銭は手数料がかからない範囲でいけました。100円硬貨は、実際には1万円分(100枚)ほどしか使っていませんでした。500円硬貨も1万円分(20枚)もあれば十分だったと思います。1000円札はなぜか用意するのを忘れていて、コンビニに寄ったときのお釣りでなんとかなりました。

技術書典準備

技術書典3当日

当日は、売り子をしてくれる表紙モデルの人と落ち合い秋葉原へ。コンビニで買い物をしつつ会場へ着いたのが10時ちょっと前。
会場に入り、ダンボールを開封し、物理本を見たときは感動ですね。
用意には約1時間かかりました。

11時、一般参加者入場。開始早々1冊売れました。嬉しかったです。
13時台後半には100冊売れました。
14時以降は売り上げの速度はゆるくなり、15時以降はほんの少し席を離れ、本を購入しにいっていました。それでも何分かに一人はサークルに来てくださるので、結局ほとんど席にいました。

モデルの人に売り子を頼んだ当初のメインの理由は、サークルに注目してもらうという目的だったのですが、予想以上に忙しく、手伝っていただいて本当に助かりました。

見本誌は4冊用意。スペースの広さ的に3人くらいが見本誌を手に取ると、スペースの前が埋まる感じです。

元同期のエンジニアの方々や、知り合いのwebデザイナーの方々、その他勉強会等で会った方々や、運営の方々などにも購入していただけました。

私も売り子(モデル)の方も、どんどん写真撮ってほしいタイプなので、「写真撮影・SNS共有OK」というPOPを作ったのですが、撮る方はほとんどいなかったです。デザインフェスタの感覚でいてました。

本を購入する方がもちろん多かったのですが、思っていたよりも電子版に気づかない方が多かったため、購入される方に「本でよろしいでしょうか?」というオペレーションをしていました。これは、POPででかでかと書くことも可能でしたが、スペースの情報が煩雑になりそうなので、買うときに気づいてもらえればいいかなと思い、最後までこのままにしました。

イベント終了時にあまった本は数十部は持って帰り、残りは委託しました。その後、飲み会へ参加。

製作編

印刷所

日光企画
技術書典と提携している印刷所のうちの一つです。公式ファンブック「技術季報 vol.1」がここで印刷されていて、クウォリティも申し分なかったため(他の印刷所のものをいろいろ確認することに工数を費やしたくなかったため)、ここにしました。

結果的によかったです(少し、中身が部分的に薄くなっている箇所はありましたが)。

印刷方法

オフセット印刷、B5、表紙はクリアPP

電子版

対面電書というところにアップロードし、一意のパスワードを入力してもらうことでダウンロードできる形式です。グラフィックで片面だけ印刷したポストカード100部の裏面に、家のプリンターでパスワードを印刷。HTMLで記述したものをパスワード部分だけ、スプレッドシートの機能で量産。ブラウザ表示して印刷。しくじったなと思ったのは、コート紙(安かったのでこれにしたのですが)に、家庭用プリンターのインクがのりにくかったことです。また、対面電書で発行されるパスワードが、区別がつきにくい文字が入っており、そういうものを排除しておくのを忘れていました。

製作期間

8月3日に当選の通知が来て、10月22日が技術書典当日。8月半ば〜10月半ばの約2か月が制作&製作期間です。半分くらいは執筆、もう半分は環境構築やデザイン等。

有給休暇などの裏技を使いながらなんとか製作しました。特に9月は、遊びや勉強会参加などかなり見送ることになりました。

執筆内容

執筆の内容は、CSSのプロパティの「z-index」についてを深掘りするというテーマで書きました。ターゲットは「z-indexを使ったことがあるが、仕様がよくわからない人」です。自分自身も「z-index」の理解を深めたいということと、自分自身が得意なジャンルということでこれをテーマにしました。

1行書くのに何時間も調べて書くこともありました。特に今回は、単なる解説書の域に留める気はなく、実際に現場で困ったことなどをもとに「実際問題」のところも濃く書くようにしました。ブログのように後から変更できないため、適当なことも中途半端なことも書けないため、調べられるところは納得いくまで調べました。

表紙デザイン

以前までの技術書典で頒布されている本は、コミケの流れを引き継いでいるからなのか、イラストやアニメや漫画が好きな人が多いからなのか、イラストが多いです。その中で差別化をはかるため、女の人の写った写真にしました。インパクトという意味ならおっさんの写真でもいいのですが、自分が撮りたい写真という目的も少しありました。

知り合いに頼み、表紙のモデルになってもらいました。「売り子もしてほしい」ということも一緒にお願いしました。どちらもこころよく引き受けていただきました。表紙は、何案か出し、webデザイナーの方々に聞いてみて「学校の教室」と「本棚」と「映画館」の3つにロケーションが絞られました。写真映えして予約が取りやすく値段も安い本棚のスタジオ「三鷹ユメノギャラリー」(商用利用)にしました。

目的とデザイン

今回の一番の目的は、「z-indexについて必要としている方々に、より多く買ってもらう」ことと設定しました。
購入までの、購入者側のシナリオは以下です。

  • 会場で表紙に目がとまる
  • タイトルに目がとまる
  • z-indexについて需要を認識し見本誌を手に取る
  • 必要性を感じて購入

これは初めて会場で見る場合であり、実際にはあらかじめ技術書典のサイトで事前にチェックしている方もたくさんいますが、基本的にはこのようなシナリオで購入してもらおうと思いました。

他との差別化をすることで表紙に注目してもらい、その次にタイトルを読んでもらうという順番です。

会場でタイトルを読んでもらうためには、大きなポスターを用意するか、表紙のタイトル自体を大きくするかなどがありますが、私は後者にしました。わかりやすいタイトルにし、ゴシック体でコントラストが強く、大きな文字(補足的なタイトルは文字を小さく)を心がけました。オシャレさなどの必要性は感じてなかったですが、もう少し時間があれば調整したかもしれません。あとは、シリーズ化したときに、デザインしやすいようにしました。

本文のビジュアルデザインは、読みやすく、技術書っぽくなくて取っつきやすいデザインにしました。とりわけ「Re:VIEW」というツールでそのまま出力すると、いかにも技術書っぽくなってしまいます。今回私の出す「z-index」は、仕様書というものが存在し、それを読めばある程度わかることなのですが、その仕様書自体がそもそも理解しにくく、いかにも仕様書っぽい体裁と書き方をしているため、できるだけ技術書っぽさをなくし、図をたくさん挿入することでわかりやすさを追求しました。そのため、後述する「Re:VIEW」や「Markdown+InDesign」では(機能を使いこなすことができなかったこともありますが)、やりたいデザインができず、最終的にCSS組版にしました。

執筆環境

結論からいうと、「Markdown」で記述、「HTML」に変換、「PDF」出力しました。

初めは「Re:VIEW」用に拡張された「Markdown」で記述をし、「Re:VIEW」で変換をしてPDF等に出力するという流れで考えました。しかし、「Re:VIEW」で細かくビジュアルデザインすることが難しかったことと、日光企画のオフセットはPDF入稿できそうになかったため、「Markdown」を「Pandoc」で「icml」形式のファイルに変換しに流し込むという流れで進めました。

この「Markdown」→「InDesign」はうまくいっていたものの、特定のビジュアルのページを作りたいときに、CSSであれば特定のclassをつけたタグで囲めばいいのですが、そこが難しく断念しかけていたところに、日光企画のオフセットでPDF入稿が可能ということを聞き、また環境をがらっと変更しました。もともとInDesignを使ったことがないに等しかったので、自分の得意な土俵で作ることにしました。

「Markdown」ファイルを「Pandoc」で「HTML」に変換し、CSSでデザインを調整し、Chromeの拡張機能「Vivliostyle」で未実装のCSSプロパティ(特に印刷関係)を擬似的に有効にし、ChromeでPDF出力する方法を取りました。「CSSではじめる同人誌制作」という同人誌(電子書籍)を速攻購入し、参考にさせてもらいつつ書き上げました。ChromeのPDF出力では、使用していたフォント「ヒラギノ角ゴ」はアウトライン化され、「Ricty Diminished」は埋め込まれていました。

Pandocで変換対応しきれない部分もありましたが、HTML出力なので、出力後のソースをいじるプログラムを書いて対応しました(目次の位置を変えたり、外部CSSを挿入したりという程度です)。Markdownファイルが保存されると、gulpでPandoc変換と、ソース書き換えプログラムがはしり、ブラウザが自動更新されるようにしました。

執筆環境は2回の変更をしましたが、マスターデータは基本的にMarkdown形式だったため、それほど変更してないです。見た目をシンプルに保ちつつ、Gitでの管理もしやすいです。

図は、Illustratorで制作し、SVG出力しました。

レビュー

アドバイスを受けて、文章の校正をしてくれる人、ターゲット層の人、技術に長けている人の3人の人にお願いしようと考えました。時間的に文章の校正を頼む時間がなかったため、他の2人の方を探してお願いしました。謝礼の相場がどのくらいかわからなかったのですが、ご飯代のみ(+製本)でこころよく引き受けていただきました。

まとめと告知

執筆内容もそうですが、執筆環境や、物理本を出すということすべてが勉強になりました。そして単純に楽しかったです!

電子版のBOOTHでの販売を始めました。
また、物理本69冊を秋葉原の「COMIC ZIN」にて委託販売をしました。秋葉原の店舗に直接か、通販で、在庫がある限り購入できます。あとは、イベントや直で会った際にも持っていけますので、お声がけください。

.