Vivliostyle2020fall lwohtsu
•Descargar como PPTX, PDF•
0 recomendaciones•1,096 vistas
Viivliostyleの集い2020年秋発表資料 商業出版『そろそろ常識？ マンガでわかる「正規表現」』の制作 ↓スライド内のリンク リブロワークス https://libroworks.co.jp/?p=3271 出版社リンク https://www.c-r.com/book/detail/1360 動画 https://www.youtube.com/watch?v=jUZFQp1R7y4
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Vivliostyle2020fall lwohtsu
- 2. どんな本？ ■ 著者：森 巧尚さん ■ キャラクターイラスト：大原 ロロンさん ■ https://www.c-r.com/book/detail/1360 「そのうちちゃんと勉強しよう……」と後回しにな りがちな「正規表現」をマンガ形式で解説
- 8. Vivliostyle（CSS組版）の傾向 ■ 数年間、原稿整理用にVivliostyleを使ってきた感想として 「InDesignで簡単にできることは意外と手こずるが、吹き出しなどの派手なこ とは自動でできる」 ■ 短所：デザイン表現、組版に制限がある。 – CSS作成のノウハウが不十分なので、試行錯誤がある。出力安定性をやや く。 ■ 長所：派手で複雑なパターンのレイアウトを半自動で組める。 – 原稿の修正がそのまま組みに反映されるので、組版工程が丸々ない。全体 のデザイン修正も早い（半分組み上がったところで、コマの高さと本文文 字数を変えたが、数時間で完了）
- 9. 企画を通すときに「制作効率」を ウリにしない ■ 出版社に企画を通すにあたって、これまでと同じような本をVivliostyleで組みま すだけだと危険 – 制作効率だけだと、安くなるかどうかという話にならざるをえない – 頑張って工夫したのに、制作費下がって、デザインや組版の表現に制限 あったらみんな悲しい ※実験要素が大きいので単純に制作効率が上がっているとはいいがたい （細かい文字修正だけを取れば速いが、全体としてはトントン）
- 10. プラスアルファの何かを提案 ■ マンガ表現が自由に混ぜられる新しいスタイルの解説書と売り込んだ – 前々から「会話の吹き出し表現」をCSSでやっていて、その応用でコマを追 加すればマンガ風の表現ができるはずとは思っていた – マンガ風表現はモチベーション低めの入門者にも「読ませる」効果があり、 営業もしやすい – しかも制作の手間は会話のみの本と同等で済む ■ 何でもいいので何かプラスアルファを – Markdown原稿を紙の本にして、さらに動画も自動生成できます……とか – 編集データがそのまま反映されるので制作段階でのミスが減らせる……とか
- 11. デザイン含めて全体を握れないと 失敗の恐れあり ■ 「何ができないか」の見極めが非常に難しいので、紙面構成、デザインごと 丸々まかせてもらうことが必須だった ■ InDesignとまったく同じモノは作れないことを版元に了承してもらう – そこを何とかしようとするとデータが複雑になり、長所が失われる上に完 成しない恐れがある ■ 企画が通過したあとで、万が一うまく組めなかったときは、いつも通り InDesignで組み直すリスク承知で進行 – 企画通過前に「危ないからInDesignでやって」といわれたら、企画丸ごとを 取り下げるつもりだった（手作業で組むとメリットないので……）
- 14. 具体的なデザイン、組版の制限とは ■ 章内でツメ、柱、ノンブルを消すことができない。 – 今回は章扉のデザインを工夫して乗り切った。 ■ 節見出しの柱（ランニングヘッド）を作れない。 – 今回は章の柱のみにした。 ■ 連続する約物のツメができない（頑張ればできるが、今回はそこは諦めました） ■ 1文字はみだしたときに部分的にツメて追い込むのが難しい – letter-spacingのツメはあまりキレイではないので、使わないほうがよい – 約物処理のないベタ組みか、プロポーショナル詰め（font-feature-settings） ■ 1色か4色のどちらか。2色刷りはできない – 今回はリスクを避けて1色刷りに。 ■ フォントの制限 – ローカルフォントなら何でも使えるが、関係者全員のマシンにインストール可能かが問題 ■ 1段と2段が混交する組みや側注も避けたほうがよい – シンプルに1段組みがおすすめ。今回は索引のみ2段組みに
- 15. CSSが決まれば修正めっちゃ速い ■ 通常工程だと ① 著者さん、出版社さん、内校などの指摘がバラバラに入る ② それをDTPで作業しやすいように統合して整理（PDFコメントにまとめたり、手 書きで赤字転記したり……） ③ DTP工程で修正対応 ④ ちゃんと直っているかチェック ■ CSS組版だとあとの2工程がない – DTP期間の確保とか進行の手間は減る – ただし、編集者がDTP相当の修正をしているだけという説もなくもなく…… – みんながMarkdown編集できれば負荷分散も理屈の上では可能 地味に時間 がかかる
- 16. bookModeでファイルを連結 ■ VivliostyleのbookModeを使うと複数のHTMLファイルを連結できる – 最初のHTMLにnav要素で目次を作ると、リンクされたHTMLが読み込まれる ■ HTMLを章単位で細かく分割できるので、それぞれ異なるCSSを読み込ませて、コ ントロールしやすい 0_maeduke.html chap1/chap1.html～ chap6/chap6.html chap7_appendix/chap7_appendix .html 99_atoduke.html 999_okuduke.html 1_main.css（メイン） 2_kaiwa.css（会話部分） 3_frame.css（マンガ部分） 00_maeduke.css chap1.css～chap6.css chap7_appendix.css 99_atoduke.css 999_okuduke.css HTMLファイル CSSファイル
- 17. 入稿用PDFについて ■ 「vivliostyle-clipのx1a出力を使う」もしくは「InDesignにスクリプトで貼ってx4出 力」 ■ 今回は印刷所さんのアドバイスでInDesignを使う方法にした – 以前@kmutoさんが発表されていた方法 – InDesignにPDFを1ページずつ貼るスクリプト（PlaceMultipagePDF）は標準で用 意されている https://helpx.adobe.com/jp/indesign/using/scripting.html – InDesignのPDF書き出し設定を、x4＋カラー設定でdotgain15%に。 – 1時間もかからない作業なので、InDesign持っていない人は印刷所に相談してみて もよいかも？ ■ 変換前の元のpdfを書き出すマシンは変えないほうがよいかも。同じChromeを使っ ていても、WinとMacで完全に一致するとはいいきれない……。
- 18. 装飾はなるべくbackground-imageで ■ background-imageはシンプルなのでHTMLもシン プルさを保てる ■ 画像を差し替えるだけでデザイン変えられる ■ なるべくSVGにしたいが、大きな画像だとレンダ リングが粗くなる（Chromeの仕様？）。その場合 は解像度が高いPNGに comic_regex_lace01.svg comic_regex_h3_bg.svg comic_regex_bg2.png
- 19. 章扉や章末白ページのツメやノンブ ルを消せない ■ CSS Paged Mediaの仕様上、ページマージンボックスで配置したものはz-indexの 最上位に配置される – 章扉のツメとノンブル（ページ番号）が消せない……。 – それだけのために別HTMLにするのはキツイ – Vivliostyleの新しいバージョンで可能になるという話（ツメと背景に負のz-index を指定できるようになる） ■ @page::firstをbookModeで利用すると、文書全体の先頭が対象。各章（ファイル ごと）の先頭だけツメやノンブルを消せない。
- 20. 保護色で 隠す
- 22. その他のハウツー ■ 長体 – Q下げしてからtransformで縦に伸ばす ■ 康煕部首問題 – PDF書き出し時に日、文、目などの文字が通常と異なる文字コードになってしまう – 康煕部首を持たないフォントを使うとその部分だけ解消できる – PDF内のテーブルデータを書き換えて直すことは不可能ではないという話もある ■ フォントを環境依存させない工夫 – VivliostyleはGoogleフォントのリンクが使えない – リポジトリの中にNoto Sansなどのフォントデータを置いて参照させた。 – 図版のSVG内テキストはマシン内フォントを参照する。現状は環境依存のママ（一部パワポの 図をSVG書き出ししてそのまま貼ってる）。安全策を採るならイラレで作ってデータはAIで保 存し、SVGはアウトライン化するとか ■ Chromeの最小文字サイズ制限を無効にする必要がある ■ Vivliostyeのバグで裁ち落とし領域に背景画像が表示されない。 – 今回はページサイズを上下左右に3mmずつ大きくしている
- 23. オープンソース版 ■ イラストと原稿を除いたもの ■ 目次、索引、表など一揃いあります https://github.com/libroworks/lw_manga_css ■ AGPL2.0 ■ まだ表現の余地はあるので改造してみてください ■ Makrdownからの変換にはMDBPが必要 ※ダミーイラストは社内で起こし直し サイズを合わせて画像差し替えれば別キャラも可
- 24. Atom用プラグインMDBPについて ■ 自社製。数年使っていて必要に応じて拡張しているが、正直なところ、最近は開発 にあまり力を入れていない ■ https://atom.io/packages/mdbp-markdown-book-preview – VSCodeに乗り換えたい。Marked.jsもそろそろ変えたいなどと思いつつ……手を付け られそうもない ■ 欠かせない機能 – 特殊指定の置換（原稿書きやすい表記、本ごとの独自指定） – svgimgによるトリミング処理（非常に評判が悪いが、ないと細かい図版調整がで きない） – ファイルと同名のCSSを読み込む機能 – 見出しにIDを振る（目次に必要） – Highlight.jsを使ったソースコードの色分け ■ 色分けはめったにしない（手間が多い）が、 コメント部分を目立つように加工するワザが使える
- 25. まとめ ■ 大変じゃないとまではいえないけど、従来工程より楽になっている部分は確か にある ■ 「派手なことが楽にできる」というのは魅力的 ■ 従来の本作りのフローは時勢にあっているのか？という疑問は常々あり、つら くない範囲で試していかないとマズイ