モノサスでは自分たちのWebサイトにスタッフが交代でコラムを書いています。
今回はその中から、モノサスが手掛けた書籍の制作の裏側、完成した本についての記事をご紹介します。

4 月、コーディングファクトリー部（以下、CF ）が手がけた書籍が、マイナビ出版より発売されました。タイトルは『フロントエンド専門制作会社が教える 速く正確なWeb制作のための実践的メソッド』。

コーダーやフロントエンドエンジニア、ディレクターなど、Web 制作に携わるさまざまな方に向けて、制作現場の実践的なメソッドをまとめた本です。

ことの始まりは、マイナビ出版の編集者・西田雅典さんからの「本を出してみませんか？」というお声かけから。マイナビ出版さんとは、雑誌『 Web Designing 』での連載（2011年12月〜2014年3月）やコーディングガイドラインの特集（2013年4月号）を通じて、数年前からお世話になっていました。

うれしいご依頼を受け、CF では CF ブックプロジェクト を発足。7 人の執筆メンバー（現役のディレクター、コーダー、チェッカー）で、どんなことを本に書くべきか話し合い、企画を進めていきました。

今回は CF ブックプロジェクトを代表して、児嶋と松原がマイナビ出版を訪問。本の企画、全体の方向性のハンドリングなどを担当いただいた西田さんと、進捗、進行の管理、原稿の整理などをご担当いただいた編集プロダクション有限会社ゲイザーの寺田喜美子さんにお話をうかがいました。どのような期待から CF へ書籍出版の依頼をくださったのか。その背景から、怒涛の入稿となった制作の裏側、完成した本について、出版プロジェクトを振り返りたいと思います。（インタビュー構成：佐口 賢作）

「ディレクション」というキーワードが浮かび
書籍作りのプロジェクトは順調なスタートを切った

児嶋：改めてになりますが、「本を出しませんか？」と声かけをいただいた経緯について聞かせてください。『 Web Designing 』での連載からは、2、3 年ぶりだったと思うのですが……。

西田さん：2016 年 4 月に Web Designing 編集部から書籍の部署に異動になり、どんな企画を立ち上げようかと考えたとき、すぐにモノサスさんを思い浮かべたんです。というのも、『 Web Designing 』でのコーディングガイドラインの特集が非常に好評で、合わせて開催したセミナーも追加の回を開くくらいに盛り上がったので、これを活かさない手はないな、と。

児嶋：なるほど。

西田さん：ですから、最初はコーディングガイドラインを軸とした「速く正確にコーディングするという内容の書籍ができないか？」と考えていました。類書もないので、社内の企画会議もスムーズに通り、モノサスさんにお声かけしたのが昨年の 7 月くらいのことです。「会社として PR にもなるので前向きに考えたい」というお返事をいただいて、スタートしました。

児嶋：そうでしたね。ちなみに、西田さんは元々、技術まわりにお詳しかったんですか？

西田さん：流れでそうなったところはありますね。マイナビに入社後は、Mac 系のオンライン媒体に配属になったのですが、雑誌やムックにも携わりました。その後、書籍編集部に異動になり、そこがプログラミングや UNIX 系を主に手がけている部署だったので、必然的に技術系の本を作っていました。その後、『 Web Designing 』編集部に移って6年を過ごし、雑誌のリニューアルに伴って再び書籍編集部に戻ってきたという感じです。
ですから、現在は、元々の技術系に加え、『Web Designing』で培った Web まわりやデジタルマーケティング系の知識や人脈を生かした本作りを期待されている……のだと思っています。

児嶋：そうなんですね。

西田さん：何度も打ち合わせでお会いしているのに、この手の話ってしたことありませんでしたね（笑）。

松原：はい。初めて聞きました。寺田さんは？

寺田さん：私は編集プロダクションを経営しています。元々は出版社の編集者で、コンピュータ関係の書籍、ムックを作っていました。その後、独立することになり、編集者仲間からのご紹介で西田さんともお付き合いが始まり、今は7割くらいがコンピュータ、IT 関連で、3 割が一般ビジネス書ですね。

編集プロダクション有限会社ゲイザーの寺田喜美子さん

児嶋：企画をいただき、「本を作りましょう」となったとき、CF 部内で書きたい人を集めてプロジェクトチームを作りました。そこで、いただいた企画書を共有しながら、「速く正確にコーディングする」という趣旨で「何を書きたいか、書くべきこと、書けること」と呼びかけ、ひとりずつアイデアを出していったんですね。
すると「速く正確にコーディングする」ためには、「ディレクション」や「段取り」が重要となっていき、「ガイドラインや技術的なことだけでなく、事前の準備や進行管理も必要だよね」と変化していきました。

モノサス社内での企画会議のようす

西田さん：最初に編集者から「こういう内容で考えています」という非常にざっくりしたものを著者にお伝えして、詳細を詰めていただく中で、想定していなかった内容が含まれてくることもよくあります。今回は、その最たる例で、最初の段階で「ディレクション」というキーワードが上がってきて、それが完全にこちらにない視点だったので、「この本はよいものになるな」と思いました。

書き始めてみると、思うようにまとまらない
何度も引きのばされるスケジュール

児嶋：7 人分で A4、2 枚分くらいの項目が出て、西田さんにお見せして、どう進めていったらいいか相談しました。「ディレクションという視点はどうですか？」という話も含めて。

コーディングファクトリー部部長・児嶋いずみ

西田さん：著者の方が編集側の当初の企画案を土台にアイデアを広げてくださるのは、ありがたいことです。大事なのは企画に広がりを持たせることなので、「現場の方が重要だと思われる要素はすべて入れてください」とお任せしていました。
そのときにもう 1 つ素晴らしいなと思ったのは、「やるべきことと、やらなくていいことを決める」という発想でした。そういった考え方で仕事をしたことがなかったので、新鮮で。

児嶋：そこから大項目、中項目、小項目に分けていき、執筆を得意分野で割り振ったのが……。

松原：9 月くらいです。

児嶋：当初は 9 月、10 月で書いて、11 月 12 月で校正して、1 月に納品。2 月発売という予定だったんですよね。

西田さん：そのあたりで、原稿の整理や進行の管理など、1 人では回しきれないと思って、寺田さんにチームに入ってもらったんですね。

寺田さん：はい。

児嶋：ところが、それぞれがそれぞれに原稿を思うように書けず……。

松原：普段、ものさすサイトの記事や CF ニュースで執筆した経験があり、その延長線で書けるんだろうという気でいたんですね。でも、いざ書き始めてみると、ボリュームも違うし、流れがうまく続かないし、この後に何を書いていいのかわからないし。
CF ニュースは A4 の紙面にギュッと収めるので、そこで書ききれなかったこと、削ったことを心置きなく書けば1本の記事になり、それが 10 本くらいあれば 1 つの章になるんじゃないのかなという気持ちでいました。だから、項目が決まっていれば書けると思っていたけど、そうではないんだって。

コーディングファクトリー部・松原 恵

西田さん：書き始めてみると…。というパターンはよくあることなので、こちらとしては「いただいた原稿でつながりは整えますから」と伝えていたつもりではあったんです。技術書の場合、皆さんプロの書き手ではないので、技術やノウハウをアウトプットしてもらうことが大事なんですね。「表現や語尾、言い回しみたいな日本語の問題は気にしなくていいです」と。そこは編集側が調整すべき問題なので。

松原：「とにかくアウトプットすること」と励ましていただき、チーム全員、「とにかく出す、出す、出す」という感じになっていきました。ただ、その時点でもう11月になっていたんです。

児嶋：本当は 10 月が締め切りで、それが 11 月になり、「これはまずいんじゃない？」と。チーム内で話し合いをして、12 月末までお時間をいただくことになったんですが、それでも書ききれず、1 月中旬、下旬になり、という感じでした。

松原：一応、1 月末の段階で一応、全項目に対して、何らかの原稿が付いている状態にはなりました。

一度、紙になってようやく気づいた
お互いの「わかりました」の食い違い

寺田さん：初めて書かれる場合、分量の感覚を掴むのが難しいと思います。1 ページに入る文字量、概念図などの図版、口頭やメールで説明しても、一度、紙にしてみないと伝わりにくい部分です。
例えば、物事の説明の仕方が、Web と紙の本では違うんですね。Web の場合、ディスプレイの中でわかりやすく伝えることが最重要なので、なるべく文字数は少なくして、図や絵でわかりやすく説明していく傾向があります。 でも、紙の場合、逆です。言葉で説明して、概念図が入る。図や絵は言葉を補完するために使われるんですね。
その辺は西田さんとも「一度、ゲラにしてからお伝えしましょう」と話して、紙の本の伝え方に必要な要素はどういうものなのかをリアルに感じていただくため、とりあえず、いただいた原稿を整理して、図版を作り、ゲラ（ DTP されて、書籍と同様にレイアウトされたもの）にしてお渡ししました。

児嶋：そこで、「うわ！」と思ったんですよ！

松原：寺田さん、西田さんから「図版が足りません」と言われていたことの意味が、ゲラを見て初めてわかりました。

児嶋：それと全体的にそれぞれの原稿につながりなく、1 冊を紡ぐ流れがないことに愕然としました。

寺田さん：驚愕されていましたね。

西田さん：これは思っていた以上に乖離があったんだなと反省しました。

寺田さん：打ち合わせの会話の中では、「なるほど」と言っていただけていたので「伝わった」と思っていたんですけど、双方の認識がズレていたという……。

西田さん：最後の段階になってやっとお互いに「わかった」んですよ。

寺田さん：サボっていたわけでもなく、常に真摯に対応していただいていて、質問も丁寧にしてくださっていて。こちらもフィードバックをしていたんですけど、紙と Web の伝え方の違いという肝心な部分の温度差が埋まっていなかったという（笑）。
それがはっきりしたとき、西田さんと「同じ言葉を使っているのに、この伝わらなさはなんだろう」って。それくらい Web 媒体と紙媒体には、違いがあるんだと気づきました。

西田さん：例えば、僕らはある程度、塊になったら作業をしたいという思いがあるんですね。

寺田さん：でも、「原稿が完成しました」というステータスの「完成」の意味が違っていたんですよね。紙媒体の作り方では、全体の原稿がある程度できてからじゃないと、制作側は手をつけないんです。なぜなら、通して読まないと 1 冊の流れがわからないし、何が足りないかもわからないので。でも、今回やってみて Web 制作の方は、「ブロックで解決できる」と考えるんだなと思いました。ブロック、ブロックが１個ずつ完成していけばいい、と。だから、児嶋さんや松原さんから「この項目、この章は OK です」と原稿をいただくんだけど、つなげてみると流れになっていない。そこが一番の食い違いでした。

児嶋：その感覚がズレているなと気づいたのは、本当にゲラをもらってからだったよね。

松原：はい。

すべてをつなげた“フローの概念図”
みえてきた流れに沿って大きく舵を切った

児嶋：流れが必要ってことに気がついたのが、まさにそのとき。やばい、説明も足りてなかったり、図版も足りていないところがある。どうしようと思い、そこから松原と 2 人で修正すると決めて、立て直していきました。

松原：やるべきことを全部洗い出して、修正していったらどのくらい時間かかるかを計算して、スケジュールをご相談させていただいて、という感じでしたね。

児嶋：結果的に、そこで出てきたのが本の Chapter1 の「制作フローと環境の構築」に入っている制作フローの図版。生産性向上というとスピードや技術の話になりがちだけど、そもそもの仕事の進め方が最適化されてないと生産性も上がらないし、コーディングに集中できる時間が確保できないよねって。
松原からアイデアが出たことで、1 冊の流れができていった。本当にホームランでした。

フロー構成図。コーディングファクトリーの普段の業務を図にしたもの。（Chapter1「フローを明確にして計画をたてる」 p5）

松原：ミラクルにバラバラだったものがつながったんですよね。

寺田さん：そうなんですね。そこから、フローに立ち返って、原稿と流れをつなぎなおしていった？

松原：そうです。

寺田さん：なるほど。必要なものは元々入っていたし、章の内容がまるごと変わったってこともないですけど、全体に一本の道筋ができましたよね。

西田さん：章ごとに完成していたものを、2 章から 3 章へ。4 章から 2 章へといった形で入れ換えていったりする作業でしたね。

児嶋：気づいてからは仕分けして、再構成して、原稿を書き足していって。赤字もばんばん入れたし、説明が足りない部分の原稿も書きました。

松原：この時、ほぼ全ての章に変更が発生してしまって。5 章立てで書くこと自体は変わってないのですが。

寺田さん：そのとき、正直びっくりしていました。というのも、完成度の高い章はそのまま大きな修正を入れずに進むだろうとスケジュールを組んでいたからです。テコ入れが必要な章を重点的にやってくださるんだろうな、と。でも、蓋を開けてみたら、流れを組み立てる上で、全部の章の中身が変わっていたんですよ。
つまり、編集作業的に見ると大部分の原稿が新しくなったということで。「え！　西田さん！これって、大きく整理し直さないといけないから、制作が追いつきません」って大慌てでした。

西田さん：でも、内容的にはベストに近づいていて、この流れは止められないし、そこからはかなりイレギュラーな進行になっていきました。

1 冊の制作を通して得たものと
完成した本を手にして、あらためて感じたこと

寺田さん：最後の最後まで差し迫った進行になり、索引はデータ入稿の朝に私が夜なべして作りました。というのも、ページ数が整わないと索引は作ることができないので、すべての本文のチェックを終え、索引だけを残していたんですね。 本文チェックが朝 5 時くらいに終わり、そこから索引を作って 9 時までに送ればなんとかなると思ったら、寝落ちしてしまって。

児嶋、松原：おお！

寺田さん：でも、30 分くらいしたら、肩をトントンと叩かれて起こされたんですよ。それで、はっと目覚めたんですけど、事務所には私しかいなかったんですよ！

児嶋、松原：ええ！

寺田さん：でも、そんなこと気にしている場合ではない！と索引を作りました。なんであってもいいけど、助けられました。誰がトントンしてくれたのかは、今もわかりません（笑）。

児嶋：最後は本当に大変でしたが、完成した本の中で寺田さんのオススメのパートはありますか？

寺田さん：メンタル系ですかね（笑）。読んでいておもしろいです。どんな仕事にも通じる部分があるので。あとはどうやって進めていくかのディレクション、コミュニケーションについての記述。これもどんな業種にも関わる要素なので。
あと、クライアントへの炎上したときの謝り方のコラム（Chapter4 p183）。普通、技術書にあんなコラム載っていないですから。

松原：あれは本当にギリギリのラインを攻めました。ここまでだったら書いても許されるんじゃないかって。あそこは私も好きです。

西田さん：売りは全部ですね。モノサスさんが持っているノウハウが全投入された本にできたのかなと思っています。

児嶋：Web って画面の世界ですけど、紙の本、物理的なモノの世界って違いますね。重みがあり、Web とは質が違う。どちらがいいという話ではなくて、流れがあり、体系的にまとまるっていいなと思いました。
Web の世界はポチッとクリックすれば次に飛べるし、主体は自分にあって、興味のまま飛んでいけるから流れはあまり重要じゃなくて、ブロックごとの充実や網羅していることの方が大事。でも、本には一冊の流れがあって、責任を持って1つのストーリーを読者にお渡していくんだなって。その感覚がとても新鮮でした。

Web 制作会社が本を書いてみて気づいたこと

対談では、執筆したモノサス側、編集を担当された西田さん、寺田さん側、それぞれのエピソードから、お互いがみている景色や言葉の捉え方の違いに気づくことができました。

モノサス側の児嶋は特に、「構成」といういう言葉の捉え方の違いが、一番衝撃的だったと言います。

「“構成” という言葉を使った時、Webではインフォメーションアーキテクチャで、本の場合は時間軸なんです。 インフォメーションアーキテクチャの方はもっと立体的というか、建築的で、情報のまとまりをどういうかたまりでみせるのか、ということに注力します。情報のとり方や読む順番は、どちらかと言うと読者に委ねているんです。
かたや本の「構成」というと、時間軸の設計も含まれるんです。読み手が情報を読む順番を考えて情報をつないでいかないといけない。ばらばらだった情報をどうやってつないでいくのか、どんな一本の流れをつくるのか、ということを考えるのが、本づくりなんだと実感しました」

畑が違えば言葉も違う。Web サイトの情報「設計」と、本の「設計」の違いをはっきりと感じたプロジェクトとなったようです。
編集側の西田さん、寺田さんには多大なご協力をいただき、また、執筆陣も最後まであきらめずやりきったおかげで、他にはない、ユニークなWeb制作の本ができあがりました。

ぜひ一度、お手にとって読んでみていただけたらと思います。

株式会社モノサス/コーディングファクトリー（著）
『フロントエンド専門制作会社が教える 速く正確なWeb制作のための実践的メソッド』
マイナビ出版 2017 (マイナビ出版)

ー チャプター紹介 ー
Chapter1　制作フローと環境の構築
Chapter2　コーディングガイドライン策定
Chapter3　　速く正確で安全なコーディングメソッド
Chapter4　ディレクションとチェックの勘どころ
Chapter5　　質と効率を高めるWeb制作の仕事術

（2017/6/29 ものさすサイトに掲載）