技術書典6の振り返りとかデザインとか
去る 4月26日 の技術書典 6 にて、
「Visual Studio Code Extension Start Book」
という本を頒布しました。そのときの振り返りと新刊デザイン周りの記事です。
twitter.comVSCode の拡張機能開発本です。コマンド系とシンタックスハイライトの開発、マケプレへのデプロイについて記載しています。OAuth 認証(1.0)をウェブページ介さずに通す実装も掲載です。
— KC# (@kcpoipoi) 2019年3月17日
なお執筆者は Kotlin が好きです(ﾏﾃ
くり返す日常 | #技術書典 https://t.co/DT1DOnTYLR
当日の様子
設営はこんな感じです。
twitter.com設営完了！き36「くり返す日常」 #技術書典 pic.twitter.com/kFfS8lJmdp
— KC# (@kcpoipoi) 2019年4月14日
前回はお手製ラックとかガチャガチャ作っていましたが、 今回は結構軽く作ってみました。
製本版の最後の１冊が売れたのが 13:20 ごろ、完売御礼でございました。
もし売り切れるなら14時ごろで、そのあとはダウンロードカード頒布に切り替えられればいいかな～と思っていたので、 個人的にはいいタイミングでした（ちょっと早いけど）。
twitter.com製本版完売……ｯｯｯｯｯｯ！！！！ #技術書典 pic.twitter.com/NFqkHyZUTA
— KC# (@kcpoipoi) 2019年4月14日
振り返りメモ
- 全然触ったことなかった Node.js と TypeScript で本を書いた
- あえて積極的な声掛け、呼び込みをしなかった
- フリーソフトで表紙とダウンロードカード作って電子入稿してみた
- 最終被チェック数 369 だった
私が今回積極的に声かけをしなかったのは、大多数の同人誌即売会に慣れてないであろう一般参加者が、 試し読み後に断りやすいようにです。*1
熱心に説明されるとなんとなく本を置いて立ち去りづらいもので、それをするにもけっこう勇気が要ります。 そのため、あくまで読んでもらって、ピンときたら買ってもらうようなスタンスで臨んでいました。
質問されたらめっちゃ喋りましたけど←
「積極的な声掛け」について、先日技術書典ハッシュタグを付けてつぶやいたところ、次のような反響がありました。
twitter.com同人誌は同好の士に「頒布」するものであって「売る」ものではないから、声を張り上げての呼び込みに悪い印象を持たれる可能性があることはまあ仕方ないよね……そのへん規約とはいかないまでも、サークル主向けガイドラインとかあったほうがいい気はする_(:3 」∠)_ #技術書典
— KC# (@kcpoipoi) 2019年4月23日
まぁしさんや、
twitter.comおわー、知らなかった。。普通に呼び込みしてた！嫌な思いした人がいたらごめんなさい！ https://t.co/JcyYEk8y1T
— まぁし@6月に沖縄移住 (@chocodogmagic) 2019年4月23日
技術書典6 伝説の新人王 Auth屋さん。
twitter.comなるほど、そういうものなんですね。ワイも含めて同人誌文化わかってないメンバーが売り子の中にいたのでふつーに「雰囲気でOAuthやってるみなさーん」て呼びかけてました。正直、すまん。 https://t.co/AqCdqKj4Ql
— Auth屋@5/3 埼玉銭けっと 雰囲気OAuth本 頒布します (@authyasan) 2019年4月23日
他のマンガやイラスト、趣味全振りの同人誌即売会と比較して、技術書典の特異な部分は、 サークル主本人の「生業」から本が生えている部分だと思います。
そのため、どうしてもビジネス目線、「売る」という指向になるのは仕方ないと思います。 自分の大切な商売道具である「技術」をまとめたものですからね。
一方、参加者の大多数は技術を「買い」に来る意識だと思いますし、私はサークル主自身の考え方次第でいいと思ってます。 勝手に引用しちゃいますが、「他サークルの人の迷惑にならない程度に」楽しくやっていきましょう。
twitter.comならワイはワイの道を行きます！
— Auth屋@5/3 埼玉銭けっと 雰囲気OAuth本 頒布します (@authyasan) 2019年4月23日
「雰囲気でやってるひとー」て呼びかけて雰囲気でやってる人がワサワサ集まってくるのは楽しかったので、今後も呼びかけます。他サークルの人の迷惑にならない程度に。
デザインの話
さてさて、本題のデザイン環境とデザインの話です。
今回の新刊の表紙及びダウンロードカードは、案を Twitter に流したときから反応が良く、 私自身も結構気に入ってるものです。自画自賛ｲｪｰｲ。
twitter.com表紙こんなもんじゃろか #技術書典 pic.twitter.com/8hKP4X4FOK
— KC# (@kcpoipoi) 2019年3月20日
デザイン環境
次のフリーソフトを用いて作画しました。
- paint.net
- Inkscape
- CubePDF
paint.net
表紙の作成に使用しました。 フリーのくせしてめちゃめちゃ高機能なペイントソフトです。
今回ねこのしっぽさんに電子入稿するにあたって、 ねこのしっぽさんの表紙用テンプレート を使用しました。
このテンプレートは psd 形式（フォトショップ）で配布されておりますが、 paint.net はプラグインを適用することで psd の編集・保存が可能になります。 導入の仕方はこのあたりを参考↓
Inkscape
名刺サイズのダウンロードカードの作成に使用しました。 フリーのくせしてm（ry
paint.net との違いは、基本的にベクター画像を作るためのソフトだという点です。
電子入稿は東京カラー印刷さんにお願いしました。 こちらにした主な理由は、PDF 形式で入稿できることです。
ベクター画像の作成でよく使われるのは Illustrator の ai 形式のファイル ですが、 残念ながら Inkscape では開くことは出来ても保存することができません。
また、Inkscape の通常の出力である Inkscape SVG ファイルでは、Illustrator で開いたときにレイアウト崩れが発生する恐れがあり、 迂闊に SVG で入稿することもままなりません。
そのため、「Inkscape で編集可能な形式のテンプレートを頒布している」 かつ 「PDF 入稿に対応している」東京カラー印刷さんを選定しました。
あ、PDF 変換にあたって、フォントはちゃんとアウトライン化しましょうね。
CubePDF
前節の Inkscape で作られたベクター画像を PDF に出力するために導入しました。 普通に印刷するのと同じ感覚でできるので楽ちんです。
CubePDF は出力時に解像度も決められるので、今回は 1200 dpi で出力していました。 1200 あれば PC 上で超拡大しても粗がほとんど見えなかったので、これくらいでいいんだと思います（適当）
配色の決定
配色アイデア手帖 をフル活用しました。
ベースカラーの選定
最初にベースカラーを決めます。 公式アイコンに用いられている色を使うために、Microsoft からアイコンをダウンロードしてきます。
この公式アイコンの中からVisual Studio Team Services.pngを探し、
paint.net に表示させて青色の部分をスポイトしたところ、
カラーコードは#0065B2でした。
この青色をベースにして全体の配色を決定します。
配色アイデア手帖から全体の配色を決定
カラーコード#0065B2を基に、配色アイデア手帖から近い色を探してみます。
すると、「青と白の世界」のベースカラーの中に、非常に近い青色を発見したので このページの配色を選定しました。
今回の表紙に使った色は次のとおりです。
こんな感じで配色を決定しました。
デザインの決定
けっこうノリでデザインしたので、こだわったところは「ノンデザ本の４原則を守る」ことくらいですね。すみません( ˘ω˘)
４原則についてはノンデザイナーズ・デザインブックにて。
右寄せ・左寄せ（整列・近接）
タイトルは右寄せ、キャプション(?)は左寄せにしてみました。 文字列はお互いに離れすぎないようにし、近接を意識しています。
キャプションは「Visual Studio ～」の V に合わせるようにそろえています。
フォント（反復）
欧文は Sulpher Point というパブリックドメインのフリーフォントを使用しました。
Font Meme は日本語対応であり、使いたいフォントが Web ページ上で簡単にプレビューできるのでかなり使いやすいです。
サークル名の和文は、コミティアで購入したテゴミンを使用しました。 商用利用可、大変感謝です。。。
色（コントラスト）
先ほどの配色から色を置いていきました。
文字部分は目立たせたかったので、アクセントカラーで着色です。
おすすめの文献
実はすべて本屋の店頭で衝動買いです←
ノンデザイナーズ・デザインブック
- 作者: Robin Williams
- 出版社/メーカー: マイナビ出版
- 発売日: 2016/09/20
- メディア: Kindle版
- この商品を含むブログを見る
一家に一冊ノンデザ本。これは本当に本当に役に立ちました。
- 近接
- 整列
- 反復
- コントラスト
巷にありがちな「ダメなデザイン例」と「改善したデザイン例」といった対比での説明だけではなく、
この原則を守れば勝手にいいデザインになるから！！
という著者のメッセージが随所にちりばめられています。
伝わるデザインの基本
伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール
- 作者: 高橋佑磨,片山なつ
- 出版社/メーカー: 技術評論社
- 発売日: 2016/08/05
- メディア: Kindle版
- この商品を含むブログを見る
デザインの理論的な部分はノンデザ本と被りますが、 こちらは日本人が書いているだけあって和文フォントの例が多くなっています。
コチラも押さえておきたいところ。
配色アイデア手帖
配色アイデア手帖 めくって見つける新しいデザインの本［完全保存版］
- 作者: 桜井輝子
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2017/12/16
- メディア: Kindle版
- この商品を含むブログを見る
見開き２ページでカラーパレットと色のイメージ、デザイン案がまとまっているのでもう本当に無駄がない。
印刷時の色味とかもあるので、絶対製本版を買った方がいいです。
今回の新刊では VSCode アイコンの青をベースにしたかったので、 アイコンからスポイトしたカラーコードから近い色を選んで色合いを選定しました。
これから何する？
- 転職活動の再開
- Firebase を利用した Android アプリ製作
２月中旬頃から執筆でそれどころじゃなかったのですが、 いったん落ち着いたので転職活動再開します。希望職種は Android エンジニア。
また、サーバサイドをいじったことが無かったので、Firebase を利用してなんか作ってみます。
まとめなど
- 他の参加者のスタンスを尊重して頒布しよう
- フリーソフトでも意外といける
- ノンデザ本はいいぞ
まとめでいつも力尽きる……
*1:遠巻きに見ている人に「試し読みありますよ～」程度はしました。ほぼ確実に読んでくれます
