技術書典7で初執筆した経験をすべて公開
技術書典 7 で初執筆しました。
記事の目的
- 執筆でどういったことをしたのかの備忘録
- 執筆を考えている人の助けになりたい
実際に販売する本は ↓ のものです。
https://techbookfest.org/event/tbf07/circle/5117648689954816
きっかけ
大学時代の友人である castaneai くんが技術書典 6 で初執筆しました。
https://castaneai.hatenablog.com/entry/2019/04/24/093514
castaneai くんの話を聞いていると、得られるメリット(実績、交流)が大きいことと、 製本までのフローがそこまで難しくないことを知りました。 そこから、私も参加しようと思えるようになりました。 castaneai くんは、今回の技術書典 7 も参加するみたいです。興味がある方は是非お立ち寄りください。
https://techbookfest.org/event/tbf07/circle/5182251830607872
何をするのか
大きく分けて３つのステップになります。
- 文章作成
- 製本
- 販売準備
それぞれ説明していきます。
1. 文章作成
本は何よりも文章が必要です。 ただ文章を書くだけでは、本になりません。 書籍化するためのツールを使うと効率よく進みます。
1.1. 書籍化ツール
文章を書き、本っぽい見た目にする必要があります。 Re:VIEW Starter というツールを使うと、学習コストゼロで、良い感じの本が出来上がります。
https://kauplan.org/reviewstarter/
次のコマンド１つで本の PDF が作られます。
$ docker run --rm -v $PWD:/work kauplan/review2.5 /bin/bash -c "cd /work; rake pdf"
良い感じの本の PDF が作成されました、最高です。
1.2. 他ツール
他にも次のようなツールがあります。
- textlint
- テキストの表記ゆれを防止
- CircleCI
- GitOps 的な執筆が可能
- Review Live Reload
- テキスト更新後の自動 Preview
執筆当初は、これらのツールを調査していました。 しかし、一人で 100 ページ未満の規模の本を書くなら、特に必要ないかなと思ったので導入しませんでした。 実際、なくても困りませんでした。
1.3. レビュー
文章を書いて終わる訳ではないです。 文章の構成や表現が適切に伝わっているか確認する必要があります。 読んでもらいたい対象読書に近い人を探して、レビューしてもらいます。
1.3.1. 1st レビュー
文章をざっくりと作り終えた時点でレビューしてもらいます。 イメージとしては、各章とそれぞれの第一節ぐらいが書き終えている感じです。
各章の構成がおかしくないかをレビューしてもらいます。構成がおかしいと、読者は困惑してしまいます。 後々になって構成を変更すると、後戻りコストが高く付きます。
※ 実際は時間の都合上していません。
1.3.2. 2nd レビュー
各章の文章をとりあえず書き終えた段階でレビューしてもらいます。 これも、1st レビューと同様の目的です。 2st レビューでは、もう少し細かいレベルで章(節)構成をレビューしてもらいます。
1.3.3. 3rd レビュー
コンテンツの構成に問題なければ、ようやく文章の中身をレビューしてもらいます。 例えば、次のようなものを見てくれました。
- 口調の統一 (です、ます）
- 言葉の統一 (本、書籍）
- 主語の明確化
- 文章を短くする
- 内容の誤り修正
- 誤字脱字
- 図や表の挿入
また、GoogleDrive 上で PDF をレビューするのが便利です。 直接文章にコメントできるので、オススメです。
https://twitter.com/silverbirder/status/1167314554205786112
1.5. 本のタイトル
本を買ってもらうためには、本のタイトルは重要です。 本の内容を推測しやすく、かつ、注目してもらえるタイトルにしようと考えました。 私は、特定の技術の入門書を書いたので、「特定の技術 + 入門」という組み合わせにしようと思いました。 結果、「はじめての WebComponents 入門」というタイトルにしました。
1.6. イラストの作成
本には、文章だけでなくイラストが必要になります。 例えば、次のようなイラストが必要になります。
- 表表紙
- 裏表紙
- 背表紙
- 文章中に挿入するイラスト
また、少し内容が異なりますが、次のようなイラストも必要です。
- サークル配置図 案内
- サークルカット
- サークルカット（グレートーン）
表紙用のテンプレートがありますので、それを使います。
http://www.nikko-pc.com/offset/template/tonbo.html
背表紙の幅はページ数によって変化します。 私は、70 ページほど予定していたので 4mm 幅で背表紙を描きました。 幅計算は、テンプレート内に詳細が記載されていますので、ご参考下さい。 （日光企画のお姉さんに指摘頂きました）
1.6.1. 初イラスト
私は Photoshop や Illustrator を使ったことがありません。 まずは、環境準備からです。
- iPad
- Magic Pencil
これらを購入しました。 iPad と Magic Pencil を使うと、紙に書いている感覚で、イラストを書けるようになります。 特に良かったのは「手の小指側の面が iPad に接しても無視される」ので、 手の小指側の面を iPad にひっつけながらイラストがかけます。 iPad, Magic Pencil は買って正解でした。 ソフトウェアは、次のとおりです。
- Clip Studio
- メインのイラストツール
- iPad
- Good Notes
- 説明用のイラストツール
- iPad
- AnyFont
- 日本語用の Font
- iPad
- Fire Alpaca
- イラストの調整
- iMac
お絵かきが苦手だったので、知人に助けてもらい、なんとか作れました。
2. 製本
製本には、技術書典オススメの日光企画さんにお願いしました。 製本する際には、用紙の種類であったり綴じ方であったりと決める必要があります。
私は、あまりこだわりがないので一般的なものを選択しました。 それは、次のようになります。
| 種類 | 選択 |
|---|---|
| ご予約のセットまたは仕様は？ | 早割りセット |
| 用紙サイズ | A5 |
| 表紙込みページ数 | 72 ページ (表表紙+裏表紙+本文(70page)) |
| 冊数 | 300 冊 |
| 本の閉じ方向 | 左 |
| 本の閉じ種類 | 平綴じ |
| 表紙用紙 | NP ホワイト 200kg |
| 表紙の印刷種類 | 通常 4 色クリア PP |
| 本文用紙 | 上質 90kg |
| 本文の印刷種類 | データ 150 線印刷 |
| 本文はじまりのページ | 1 ページ目 |
| 遊び紙 | 有り, 上質 90kg/イエロー/前 |
https://jumpei-ikegami.hatenablog.com/entry/2018/10/21/084634
を参考にしました。
本文はじまりのページは、nombre をというものを設定する必要があります。 Re:VIEW Starter は nombre 対応していて、次のコマンドを叩くだけです。
$ docker run --rm -v $PWD:/work kauplan/review2.5 /bin/bash -c "cd /work; rake pdf:nombre"
用紙についてこだわりたい方は、次のリンクにあるようにサンプルを手に入れると良いでしょう。
https://natuna.jp/marcket/10282/
3. 販売準備
3.1. 物品購入
技術書典では、会場で本を販売することになります。 販売するサークルブースを目立たせるために、いくつか物品を準備しました。
| 名前 | 店舗 | 用途 | サイズ | イラスト |
|---|---|---|---|---|
| 折りたたみカードスタンド | ダイソー | 値札 | 110mm×60mm | 必 |
| 軟質クリアブックカバー | ダイソー | 見本誌カバー | A5 | 不 |
| T 型カードスタンド | ダイソー | 公式後払い QR コード | 90mm×128mm | 必 |
| T 型カードスタンド | ダイソー | PixivPayQR コード | 90mm×128mm | 必 |
| T 型カードスタンド | ダイソー | 商品紹介 | 90mm×128mm | 必 |
| T 型カードスタンド | ダイソー | TwitterQR コード | 90mm×128mm | 必 |
| あの布 | 公式サイト | テーブル作業 | - | 不 |
| テーブルクロス前用紙 | 印刷業社 | 宣伝 | 900mm×600mm | 必 |
| テーブルクロス | ダイソー | あの布を隠す | 900mm×1200mm | 不 |
| テーブルクロス滑り止めシート | ダイソー | あの布 | - | 不 |
| 本スタンド | ダイソー | 見本誌 | - | 不 |
| タペストリー用紙 | 印刷業社 | 宣伝 | 728mm×1030mm | 必 |
| タペストリースタンド | ダイソー | 宣伝 | - | 不 |
| 名札 | ダイソー | 著者、売り子 | 50mm×25mm | 必 |
| 硬質カードケース | ダイソー | お品書き | A5 | 不 |
| 複写式 領収書 | ダイソー | お客さん | - | 不 |
| メモ、ふせん | ダイソー | 作業 | - | 不 |
| 養生テープ | ダイソー | 作業 | - | 不 |
| スケッチブック | ダイソー | 作業 | - | 不 |
| ダンボールカッター | ダイソー | 作業 | - | 不 |
https://note.mu/mochikoastech/n/nf484f114855c
https://blog.vtryo.me/entry/techbookfest5-preparation-of-journey#登壇ブログなどによる宣伝活動
https://note.mu/yagitch/n/nc796a0c2c796
印刷する手段は 3 つあります。
3.2. 電子書籍の準備
ピクシブ社のサービスである Booth を利用しました。
特に専門的な知識が必要なことがなく、本の PDF を登録するだけです。 せっかく足を運んで会場に来て頂いた方のために、電子書籍と物理本の違いを出そうと考えました。 （中身のデータは同じです） そこで、物理本を購入して頂いた方には、無料で電子書籍をプレゼントすることにしました。 技術書典ではよくある方法だそうです。
また、サンプルの本をアップロードし、無料でダウンロードできるようにすることで、 事前に本の中身を確認できるようにしました。
[見本誌] はじめての Web Components 入門 -4 つの基本機能から関連ライブラリまで-
ただ、ダウンロード数を見る限り、あまり数は多くありませんでした。 Google Analytics (初登録)と Booth が連携できるので、流入数を見れるのですが、 離脱率が 86%という悲しい結果を知りました。ここは改善の余地がありそうです。
pixiv ID 登録しないとダウンロードできないので、ここが駄目ならサービスを使わない方が良いかもしれません。 見本誌に限っては、GoogleDrive で渡すようにするとかですかね。
3.3. 支払い手段の準備
技術書典では、次のような支払手段を用意しました。
- 公式かんたん後払い
- pixiv pay
前者は、技術書典で口座情報を登録すると利用できます。 後者は、アプリをダウンロードして商品を登録するだけです。無料です。
他にも PayPay や Kyash といった手段も用意しようか迷ったのですが、やめました。 理由は、支払い方法が若干複雑そうでしたからです。
4. その他
宣伝
この本のことを広く知ってもらうためには、宣伝が必要です。 私が取った宣伝手段は次の通りです。
- Twitter で "#技術書典 7" タグ
- LINE の OpenChat や TL
- 本の内容と関係する勉強会ハッシュタグ
- 会社
- 友人
あとは、勉強会に参加して宣伝する手段もあります。
「興味を持ってくれそうな人」が「多い」場を探す必要があります。 例えば、4 番は事前に connpassで関係がありそうな勉強会を調べて、 該当ハッシュタグで宣伝したりしました。 また、積極的に 1 番を実施していると、他のサークル参加さんがリツイートしてくれるため、とても助かりました。
Twitter で宣伝するために、16:9 の画像を用意したりもしました。
https://twitter.com/silverbirder/status/1172097536510676994
被チェック数と販売冊数
被チェック数は、お客さんが気になる本をチェックした数になります。 この数字から、印刷する冊数を決める大きな要因になります。
https://note.mu/yagitch/n/n2b5576363f4e
恥ずかしい話になりますが、私は毎朝この数字を見ていました。（笑）
https://github.com/silverbirder/get-checked-number-for-techbook
被チェック数を定期的に取得する API をサクッと作って、CloudFunction で稼働させています。
https://twitter.com/silverbirder/status/1171178281380405248
このようにどの時間やどの曜日にチェックされるのかがわかるようになります。
今回、300 冊を印刷することにしました。間違いなく残ってしまうと思うので、 とらのあなさんへ委託しようと考えています。
https://news.toranoana.jp/107460
残ってしまったいくつかの本は、お家に保存用として持ち帰ろうと考えています。（笑）
公式ツイッター
公式ツイッターアカウントをフォローしておくと、なにかと便利です。
https://twitter.com/techbookfest
Google カレンダー 登録
技術書典のスケジュールが登録されている Google カレンダーを、ご自身のカレンダーにも登録することをオススメします。
https://twitter.com/techbookfest/status/1083948257095503872
いつまでに何をしないといけないのか逆算できるので、知っておいたほうが良いです。
スケジュールと実績
公式予定と私の実績は次のとおりです。
| 日付 | 公式予定 | 筆者実績 |
|---|---|---|
| 07/10 | 当落通知日 | 当選 |
| 07/12 | - | 入金済 |
| 07/17 | 入金締切日 | 入金済 |
| 07/20 | - | 計画立てる＆テーマ確定 |
| 07/23 | - | castaneai くんに 印刷用サークルカット書いてもらう |
| 07/27 | - | サンプルコード作成完了 |
| 07/31 | 印刷用サークルカット締切日 | 登録済 |
| 08/02 | - | 原稿作成開始 |
| 08/15 | - | レビュー対応中(2st) |
| 08/21 | サークル配置発表日 | 宣伝済 |
| 08/26 | 一般参加者向け正式サイトオープン | 宣伝済 |
| 08/29 | - | レビュー対応中(3st) |
| 08/30 | - | 原稿作成完了, Booth 登録, 製本依頼 |
| 08/31 | - | 物品購入(あの布は事前購入) |
| 09/06 | - | 現在 |
| 09/07 | サークル通行証の割当日 | - |
| 09/19 | 見本誌の提出締切 | - |
| 09/22 | イベント当日 | - |
※ レビュー依頼中に、表紙等のイラスト作成を並行して進めていました。
サンプルコードを書いている時は、「こんな話も増やそうかな？」と楽しい気分になれました。 原稿を書いている時は、「予定日の ◯◯ 日には終わらせないと…」という苦しい時期がありました。 なんだかんだで、日光企画さんの早割チケットを手に入れれたので満足です。
終わりに
私が今回、初執筆した経験を包み隠さずすべて公開しました。 執筆をやってみてよかったことは次のとおりです。
- 本を作るのは、意外と簡単
- ツールやサービスが十分整っている
- 書いた本が好きになる
- いろんな人にみてほしい
- 書いた知識は、とても定着する
- コミュニティが楽しい
- "#技術書典"のハッシュタグはオススメ
- フォロワーが増えた
逆につらかったことは次のとおりです。
- ずーっと本のことを考える
- 締め切りに追われる
- 文章力のなさを痛感する
初執筆しようと考えている人にとって、何かの助けになれば幸いです。
あとは、技術書典 7 当日を楽しむだけ！！
役立ったら、☕でサポートしてね！
シェアしよう
関連するタグ
- ［覚書］Reactを業務で使い始めて知ったこと
- WebComponentsでoEmbedのコンポーネントを開発して、学んだこと
- Ruby on Railsを業務で使って思ったこと
- Reactを学ぶ前に歴史を知る
- オミクロン株に感染したので、分かったことを書く
- TikTokスクレイプ基盤をGCP上で構築してハマったこと
- ブラウザの仕組みを学ぶ
- リモートワークになってから『気軽にすぐ聞く』ことが難しくなった
- 20代後半エンジニアである私がこれから学ぶべきこと
- Micro Frontends を調べたすべて
- アカウント画像一括更新ツールを作ったので、紹介と学びについて
- Micro Frontends を学んだすべて
- TwitterにあるLinkを収集するツール Cotlin で、世界中のプレゼンテーション資料を知ろう
- Google Apps Script で FetchAllとRedirctURL の組み合わせは悪い
- GMailをGCalendarに登録するサービス rMinc を作ってみた
- 1コマ漫画検索サービスTiqav2 (Algolia + Cloudinary + Google Cloud Vision API) 作ってみた