#技術書典 初サークル参加から「jQuery to Vue.jsで学ぶ レガシーフロントエンド安全改善ガイド」200部完売までの軌跡

mugi_uno

4/14(日)の技術書典6に初参加して「jQuery to Vue.jsで学ぶ レガシーフロントエンド安全改善ガイド」という本を頒布し、無事に200部を完売できた。買っていただいた皆様ありがとうございます。

イベント参加はブログを書くところまででワンセットって誰かに昔言われたような気がする。というわけで、記憶が鮮明なうちに振り返っておく。

なお私は何かを執筆したことはなく、技術書典自体に関してもあんまり知識が無いような、ほぼ皆無の状態からのスタートだった。

サークル応募するに至った経緯

同僚などに過去の技術書典にサークル参加していた人が多く、とても楽しそうだったので以前から少し興味があった。そんななかで技術書典6の募集があり、お酒に酔っていてふと呟いたのがきっかけだった。

というわけで勢いで申し込んだのがスタートだった。こういうのは細々考えても仕方ないので、とりあえず申し込んでみるのが大事なんだろうな、とは前々から思っていて、実際そうだった。

テーマ決め

「何を書こうかな〜？と考えたときにふと思い浮かんだのは
 ・フロントエンドの改善本
 ・マルチカーソルの本（参考）
の2つだった。

最終的には@jnchitoさんの以下Qiitaエントリの教えに従うことにした。

お仕事でフロントエンドの改善をやっていて、かつ欲しい情報がWEBになくてツラいなぁと思うことが多かったので、昔の自分が欲しかったものをそのまま書いちゃおう！という結論に至った。どうせ書くなら一人でも困ってる人の役に立つといいなぁと。（まああとは、マルチカーソルに関して本にしたところ何を書くんだ俺はという気持ちになったのもある）

準備

とりあえず心を無にして親方Projectさんの本を即買った。

結論から言うと本当に読んでおいてよかった。知らない情報だらけだったし、読んでなかったらいろいろ死んでた気がする。読みながら「ノンブル…？フォント埋め込み…！？」ってなってた。この本の中に書くべき一番大事な最初の準備は「この本を買いましょう」ではないのかと思ったレベル。誠にありがとうございます…！

執筆

というわけで上記の「技術同人誌を書こう！」やネットの情報などを参考に、Re:VIEWで書くと良いようだ、というざっくりとした知識を得たので、Re:VIEWでの執筆環境を整えることにした。

Re:VIEW Starter
初執筆ということもあるので、環境のセットアップなどで苦労するのは避けて、できるだけ執筆だけに集中したかったので、Re:View Starterを利用させて頂いた。

入稿完了まで致命的になにかに困ることもなく、とてもありがたかった。正直なところ今でもTeXとかLaTeXとかは何が何だかよく解っていない状態です。そんな私でも一冊書けちゃったのスゴい。

CircleCI
手元でビルドするのが面倒なので、GitHubにpushしたらCircleCIで勝手にビルドしてPDFを出力するようにしてた。

.circleci/config.yml はこんな感じだった。

version: 2
jobs:
  build:
    machine: true
    working_directory: ~/work
    steps:
      - checkout
      - run:
          name: Create PDF
          command: |
            docker run --rm -v $PWD:/work kauplan/review2.5 /bin/bash -c "cd /work; rake pdf"
            docker run --rm -v $PWD:/work kauplan/review2.5 /bin/bash -c "cd /work; rake pdf:nombre"

      - store_artifacts:
          path: ~/work/book.pdf

ふと最新のPDFを確認したい状況があると思うので、いつでもファイルが出来ている状態は楽でよかった。

校正

Toyama.rbでも縁がある @hikaruworld さんに校正をお願いした。誤字脱字だけでなく、そもそも観点として足りない・わかりづらい部分や、図で補足したほうが良い箇所などもバシバシ指摘してくれて本当にありがたかった。校正の修正前後でだいぶ内容のクオリティに差があると思う。

表紙のデザイン

イラストに関しては、縁あって @yaminaberyouri さんに描いていただけた。雑にコンセプトしかお伝えしてなかったのに、めっちゃステキな絵がでてきて、初めて見たときにめっちゃ感動した。感謝。

あとは、PhotoshopをAdobeCreativeCloudで契約して使っていい感じにデザインした。

なおデザインに関しては私はプロでもなんでもないド素人だが、以前にノンデザイナーズ・デザインブックを熟読したことがあったのはとても役に立ったと思う。

プロの方のデザインには遠く及ばないし、見る人が見たらいろいろとツッコミどころはあるんだろうけど、「とりあえず迷ったら原則に従っておこう」みたいな感じでレイアウト時に判断基準を持てるのは大きい。

反省点
AdobeCreativeCloud が月額980円で「安いじゃん〜、使い終わったら解約すればええやろ〜」と軽い気持ちで契約したが、年契約で月当たり980円という計算らしく、解約のために違約金みたいな感じで年残額の50%（5000円くらい）を持っていかれた。騙された感があったが、ちゃんと規約とかを読んでなかった私が悪いので涙をこらえて支払った。利用される方はご注意ください。

入稿

印刷所は「値段が安かった・技術書典とタイアップしていた・どうやら優しく教えてくれるらしい」といった情報から日光企画さんを利用させていただいた。

なお、お約束なのかもしれないが、見事に入稿ミスを踏んだ。３つ。

背表紙の幅の考慮漏れ
ページ数が112Pとなり、ある程度の厚さになってしまったので背表紙が必要となった。その際、背表紙自体の幅の計算は間違ってなかったのだが、それに応じて表紙両端の幅が変動することが考慮から抜け落ちてた。似たようなことをToyama.rbで話してた記憶があるのになぜ・・という気持ちになった。電話で日光企画のお姉さんが「このままだと表紙の端に印刷されてる部分が切れちゃう感じになりますけど大丈夫ですか？」と確認してくれて命拾いした。

フォントの埋め込み漏れ
至ってシンプルで、ノンブルのフォントが埋め込まれてなかった。気をつけようなって感じです。

A4になってた
一番焦ったのがコレ。B5で作ってて何度も確認したはずなのに「最終的なページサイズがA4になってるようです」という電話を受けた。

えっ・・？なんで・・？と思ったが、ノンブル用のフォントを埋め込むときにMacのプレビューアプリ経由で対応したのだが、その際のデフォルトページサイズがA4だったのが原因。めっちゃ焦った。

印刷部数

めっちゃ悩んだ。多くのサークルさんがそうだと思うけど、技術書典公式のサークルチェック数を参考にしていた。@yagitch_tech さんの予測は特にありがたかった。感謝。

ただ、複数回参加したことのある @corocn や同僚などから「チェック数を大きく下回る可能性もあるから、物理本50くらいに抑えておいて電子版を多めにするのもアリですよ」という助言もいただいた。

確かにそうだよなぁ〜、と一週間くらい悩み続けた結果「まぁ、足りないぐらいなら余るほうがいいっしょ！」という雑な勢いに身を任せることにした。

最終的にはチェック数が思ったよりも伸びたこともあって、200部に増やすという暴挙に出たのであった。（絶対売れ残るから残りはBOOTHとかで売ろうって思ってた）

当日の準備

よくわからんのでサークル参加スターターキットというものを買った。

ただこれは様々な事情により微妙だったかなぁと思ってる。
 - 頒布価格が1000円なので硬貨ケースは不要
 - 名札は配られる＆自分でも持ってる
 - 他のものも簡単に揃う
ということで、いわゆる「あの布」だけ準備すればよかった感はある。

あとは、@mochikoAsTech さんが神エントリを投下してくれたので、心を無にしてそこに書いてあるものを片っ端から用意した。ブックカバーとかは必要なものとして頭に無かったので、ほんとうに感謝。

価格札
Figmaで雑に作って写真紙に印刷して、それをハサミでチョキチョキした。細々したデザイン関係の準備でFigmaは本当に便利だった。

ダウンロード版
価格を抑えるために、本の表紙と同じデザインでラクスルで名刺を印刷した。あとは、対面電書さんでシリアルを発行して、それをラベル屋さんを使ってデザイン・印刷し、完成したシールをカードの裏にペタペタ手作業で貼っていった。

対面電書さんからシリアルをCSVダウンロード可能で、かつラベル屋さんがCSVを元にしたラベル作成が可能なので、組み合わせるといい感じになった。

↑みたいな雰囲気です。QRコードも作れてステキ。

事前の宣伝

せっかく書くのであれば、一人でも多くの人に読んでもらえると嬉しいな〜と思っていたので、主にTwitterでつぶやくだけではあったが、積極的に宣伝はしていた。

あんまり宣伝ばかりすると鬱陶しいかな〜？という懸念もあったが、奥さんからも「どんな良いものだろうと、そもそも知ってもらえないと意味がないよ」という助言をいただいて、確かにそうだなって思った。

技術書典本番

前乗りして泊まったホテルのベッドがバキバキで全然寝付けなかったのはさておき、サークル参加者は10時から入場できると聞いていたのに、意気揚々と9時ごろには到着してしまい「完全に早すぎたわ…」と思ったが、すでにそれなりの人数が並んでいてビビった。

なお、「本さえ書ければあとは売るだけだし余裕っしょ〜」とか思っていたが、「売り子がいないと死にます」という言葉を聞き慌てて助けを求めたところ、元同僚の@mzpが手伝ってくれた。本当に助かった、ありがとう。

当日よかったこと

完売した
爆死も想定してたけど、製本版200部は無事に完売できて、かつ電子版も一定数購入していただけた。感謝しかない。自分の場合は地方からの参加ということもあって、交通費や前乗りの宿泊費なども発生していて余計にコストがかかっているぶん、少なくとも回収できたのは助かった。

ポスターあってよかった
日光企画の技術書典タイアップのオマケとして、A2サイズのポスターを無償で作成することができた。タダなら作っておこ〜、程度の軽い気持ちでお願いしたのだが、当日は想像より人の流動がすさまじく、「目にとまる」という重要性はかなり重要だと思い知った。ポスターがなかったら通りすがりで立ち読みして買ってくれた人はもっと減っていたかもしれない。

付箋便利
いろいろ準備していったが、付箋が活躍した。自分の名刺を置いておいたのだが、その横にササッと「ご自由にお持ちください」と書いておいたり、残り部数の目安のお知らせや、物理本完売後の案内にも使えるので、融通が効いてとても便利。

見本誌は複数あるとよい
破れたりするかな〜と思ってブックカバーを3つほど買っておいて、1冊は立ち読みコーナーで、残り2冊は見本誌にした。
結果としてはこれが完全に正解で、2冊でも見本誌待ちが発生してしまうシチュエーションがちょいちょい見受けられたので、1冊だったら完全に足りなかっただろうなと思う。部数によるのかもしれないが、200部であれば最低でも2〜3冊の見本誌が必要そうだった。

失敗したな〜ってこと

完売した
「よかったことじゃねえのかよ！」という話だが、わりと時間を余らせて製本版を売り切ってしまったので、あとから来る人がそれを知って残念そうに帰っていく姿を見て非常に申し訳ない気持ちになった。余らせる前提で300部ぐらい刷っておいても良かったなぁと思うが、初参加で完全にビビっていて200でも売れ残るつもりだったので、予測するのは正直難しかったかもしれないとも思う。

電子版の価格設定
「製本版が完売した後は電子版だけになるし、そっちは少し安くしたいけど、お釣り出るのはいやだな〜」という考えから、

- 電子版は製本版と同じ1,000円
- 技術書典アプリでのかんたん後払い時のみ800円

という価格設定にしたのだが、これは正直失敗だった。まずオペレーションが複雑になるし、買ってくれる人もQRコードを読み込んだあとに選択肢が複数出てくるので混乱させてしまった。また、製本版を買うと電子版も一緒についてくるようにしていたのだが、「製本版と電子版の両方がほしい！」という方が、1,000円のものと800円のものを両方購入してしまうトラブルも発生してしまい、大変申し訳なかった。

そもそも、

1. 「お、こんな本があるのか〜」
2. 「電子版しかないのか〜、でも今だけ800円になるなら買っておこう」

という思考による販売促進みたいなのを想定していたけど、実際に技術書典で本を購入する際は

1. 「買うぞ！」
2. 「電子版を買うぞ！」or「電子版しかないのか！残念！！」
3. 「はい1000円！！！（常識の範囲内なら値段はわりとどうでもいい）」

という思考サイクルであることがわかった。というか実際自分が本をいくつか買ってこういう考えだったので、そりゃ800円かどうかなんて関係ないわなってなった。シンプルが一番ですね！！

ポスターの置き場所
ポスター自体はめっちゃ良かったのだが、卓上に置いてたので結構場所をとってた。サークルスペースはなかなかの狭さで、ポスターで半分ぐらい埋もれてしまい、そこに二人が立ってお客さんの応対をしていると、斜め45度ぐらいの、さながら漫才師のような角度で一日中立ち続けることになった。結果、夜寝ているときに横腹がつるという事になる。

卓上ではなく、大きめのポスタースタンドを用意してスペース背後に吊るしておくのが良さそうだな〜と他サークルさんを見て思った。

撤収時の慌てっぷり
撤収のことをあんまり考えなかったので、わたわたと片付けをしてたので、いろいろとミスをした。一番ひどかったのは、自宅に発送するためのヤマト運輸の伝票を記入して持ってきたのに、その伝票をダンボールに入れて完全梱包してしまった。さすがに笑った。何をダンボールに入れて送るのかまで事前に整理しておいてもよかったかもしれない。

技術書典への参加全体を通しての感想

凡庸な感想だが「参加してよかった」に尽きるかなあと思う。同人誌とはいえ、自分の技術をモノとして残る形でアウトプットするというのは、ブログなどを書くのとはまた違う心理状態になることができた。

知り合いになることができた（と私が勝手に思ってる）人もたくさんいて、地方在住の自分としては、参加していなかったら出会うことはなかっただろうなあと思う。

機会があればぜひまた書いて参加したいな〜と思うが、しばらくはこの解放感を味わいたい。

最後に宣伝

頒布した「jQuery to Vue.jsで学ぶ レガシーフロントエンド安全改善ガイド」はBOOTHで電子版を販売しています。もし興味があればぜひ！


この記事が気に入ったらサポートをしてみませんか？