個人的にも興味があるElectron。Electronを使い、HTML、CSS、JavaScriptの知識でPCアプリケーションを作成するためのマニュアルの装丁を担当した。
書籍の内容
PCアプリケーションも「JavaScript」で開発！
Atom、Visual Studio Code、Slack、Skype、Microsoft Teams、GitHub Desktop、WordPress Desktopなど多数のPCアプリケーション開発に使われている「Electron」。
Webプログラミングの技術（Node.js、HTML、CSSなど）でPC用アプリを作る、その基本を丁寧に解説。──本書オビより
Electronについて書かれた本は少ない。進化が早いこの分野で分かりやすく、最新の情報が書かれている書籍を待っていた人は多いだろう。やはりWEBの情報だけでは理解しづらく、きちんと編集された本を読むのが一番良い。
デザインの条件
今回の依頼は装丁である。具体的にはカバー、オビ、本体表紙（カバーを取り去った状態）、本文扉。通常の装丁一式。
特にデザインの方向性などは指示されなかった。あえて言うのなら「スタイリッシュに」とのこと。
デザインは自由にやって良いと言われるよりも、実は条件がある方が方向を決めやすい。昔ラジオで坂本龍一が「CMソングを作る時には、自由にと言われるのが一番困り、条件が厳しいほど作りやすい」というような主旨のことを言っていたのを思い出す。
サムネイル作成
サムネイルを作成する。
思いついたアイデアをメモレベルで描きだしていく。外にいる時にはスマートフォンのメモに文字で書かいたり、手書きで描いたりもする。無の状態からは天才でもない限りアイデアは浮かばない。類書の装丁を見るのはもちろん、普段ストックしている画像を見たり、デザインに関するメモを読んだりもする。他人から見たらよく分からない落書きレベルだが、この段階が実は一番大事であり、一番時間が掛かる工程である。
ラフデザイン制作
本当は完成の50%程度のラフデザイン案を作りたいのだが、今回も90%位のレベルで作ってしまった。これはあまり良くないのだが……。
3案制作した。
A案
内容がデスクトップアプリケーション開発なので、最近依頼が多い分野であるUIデザイン。そのUIパーツを表紙に配置してみた。2020年辺りから「来る」と、誰かが言っているニューモフィズム（Neumorphism）でUIパーツを作る。割と淡白で特にボタン類とバックグラウンドのコントラストが低く、影もぼんやりと浮かんでいるのが特徴のデザイン。デスクトップをイメージしているので、ユーザーアイコンとハンバーガーメニューを左右上部の隅に置く。
普段、CSSコーディングをする際には画像でなくCSSコードにより処理しているので、Illustratorで作成するのは初めてだった。だが実際のUI制作の現場でニューモフィズムが使われている比率は低い。
改めて見ると完成形とほぼ同じ。これは良くないのだが。
B案
Electronの公式サイトを見ると、公式のシンボルマークがあった。また独自っぽいフォントを使っているので、これらをIllustratorでトレースし使用。
シンボルマーク回りには、アプリ制作なので、アプリのアイコンのようなものを複数作成し、シンボルマークの周りを惑星みたいに周回しているように配置。
地色にはやはり公式サイトに使われている渋目の水色を敷いた。
全体的にシンプルにしたかったため、使用している色は渋目水色、文字に使用しているスミ、その他のマークやアイコン類は白抜きにした。
Electronの文字を一番大きく目立つように配置したが、フォントのウエイトは細目。「Electron」のみ目立つのを抑えたかったための処理であるが、「Electron」の後に続く「ではじめるデスクトップアプリケーション開発」と同色、同フォントで落ち着き過ぎている。そこでひと手間加えて「Electron」の文字に糸くずのような不定形の線が文字の間に絡んでいる様子を描いた。
C案
「エレクトロン」という音の響きから想起した「電気的なもの」。バックグラウンドの右半分に適当な画像から生成したモザイク・パターンを配置。いろいろなものをモザイク化して何種類か試してみた。
左側にはタイトルなど必須文字要素とElectronを中心としてアプリ開発フローをチャート化したものを作成し配置した。
フォントは素直なゴシック系でまとめる。
デザイン案提出時に各案の簡単な説明を付けた。
デザイン決定
A案に決定した。
ほぼ完成形のため大きく変更する部分はないが、UIパーツ部分を若干変更。
束と表4の作成
束（つか）とはエディトリアル系の専門用語だと思うが「背」部分のこと。編集者から正確な束幅（背の幅）を聴く。束幅にはカバーと本体の2つ有り、本体にカバーを被せるため通常カバーの方が0.5ミリほど広い。
この段階で決定した表1のデザインを元に束、表4に加え、表1ソデ、表4ソデまで作成。トンボを付ける。ソデとは本体に折り込む部分のこと。この部分には出版社からのお知らせや書籍の情報、本の内容を配置することが多い。
束部分は本が本棚に置かれた時、その本の全ての情報なので書名を読み易く、余計な情報は入れない。
意外とデザイナーが文字の組み方に苦労する部分である。
私の場合、カバーやオビなどの装丁一式はIllustratorで制作するが、InDesignやQuarkXPressで制作するデザイナーもいる。海外からデータを取り寄せると、CDのパッケージなどもInDesignやQuarkXPressで作っているデザイナーがいる。現在では印刷所へデータを入稿する際には、PDFに変換して入稿することが一般的なので、PDFへ正確に変換出来るアプリケーケーションであれば使いやすいもので作れば良いと思う。
オビの作成
カバーの上にレイヤーを作り、カバーとの配置を確認しながらオビを制作する。
オビ表1にはカバー表1で作ったUIパーツの色を変更して配置。そのままでは面白くないので、若干UIパーツに変更を加える。
オビは購入見込み者にとって本のキャッチコピーを見せる重要な場所である。手にとった瞬間にキャッチコピーが目に入るように工夫する。
ちなみにオビの深い紺色は、Electronのオフィシャル・サイトにあった色を使用している。
オビ表4には目次を配置。購入見込み者は目次を見て購入判断をする事が多い。
オビ表4ソデには、書籍のタイトルとISBNコードを小さく配置。これは必須要素で、オビには書籍タイトルが一切記されていないための配慮。
カバー、オビが終わったら本体表紙、本文扉を制作して入稿して完成。
見本誌が届く
カバーの表面加工はマットPP（つや消し）を使用。色の発色は沈み気味になるが、落ち着いた印象になる。
本体表紙は深い紺1色の地色に、白抜きアウトラインにしたUIパーツを配置した。
本文扉はオビのUIパーツをスミ1色に修正して配置した。
私自身もElectronには興味があるので、今度簡単なPCアプリケーションを制作する際に参考にしたい。
