デジタル作品を作品集に残す 画面の姿と制作の手掛かりを伝える

画面に並んだ形を、一冊に残したい。コードから作った図案を作品集にまとめ、展示で手渡す場面を考えます。手元にあるのは、作品の像を保存した画像と、それを作る原稿です。

一冊を開いた人に、まず何を見せたいでしょうか。形や色をゆっくり見てもらう頁と、制作の手掛かりも読める見開きでは、同じ作品の置き方が変わります。ここでは一つの静止像から、二つの紙面を考えます。

一冊に残したいものを選ぶ

形や色の連なりを見てほしいときは、像を大きく置く頁が中心になります。題名と短い言葉を添え、作品の周囲に余白を取る。像を眺めるための場所を広く持たせる組み方です。

制作の原稿にも読んでほしい部分があるときは、像と原稿の一部を並べる見開きが候補になります。完成した形を見ながら、それを作る手掛かりにも目を向けられる構成です。

見せる像と読む言葉の量を決めるときは、渡す相手を思い浮かべます。初めて作品に触れる人へ像から紹介するのか、制作に関心のある人へ資料も添えるのか。一冊で大切にしたい読み方が、頁の役割を決める出発点になります。

同じ作品を二つの紙面で読む

編集用の自作例「六つの間」を使います。保存した像には、緑と茶の六つの円が、間をあけて並んでいます。この同じ像を、広く見せる頁と、原稿の一部を添える見開きに置いてみます。

像を広く見せる頁

一案目は、六つの円が並ぶ像を広く置き、題名と短い紹介文を添えます。「緑と茶の六つの円が、間をあけて並ぶ」は、この図案の見た目を伝える紹介文の一案です。像と余白を主役にし、読んだ言葉からもう一度形へ目を戻せる配置を考えます。

原稿の一部を添える見開き

二案目は、左頁に制作原稿の最初の7行、右頁に同じ保存像を置きます。原稿と像に別々の場所を与え、読む部分と見る部分を向かい合わせにする組み方です。掲載した原稿の範囲も、頁の中に添えます。

像を大きく見せたい作品では一案目を中心に、原稿にも読んでほしい部分がある作品では二案目を要所に使う、といった選び方ができます。二案目を選ぶときも、像の大きさを確かめながら、原稿を載せる量を調整します。

原稿を添える量と、紹介する言葉

制作原稿は、作品をつくった資料として残すものです。紹介文は、一冊を読む人へ作品の入口をつくる言葉です。原稿の抜粋と紹介文を見た目で分けると、それぞれの役割を紙面に持たせられます。

抜粋する原稿は、像のそばで読める量から考えます。短い部分を見開きへ置き、全文は巻末の資料頁へまとめる構成も候補になります。原稿の表記と掲載範囲を残したうえで、題名や紹介文をどこへ添えるかを考えます。

この作例の全文と保存像は、本文末の制作資料に掲載しています。制作に関心のある方が読める補助面として、紙面案の説明から分けています。

複数の作品を一冊の流れに

複数の図案を収める場合は、形や色のつながりから掲載順を考えます。像を広く見せる頁を続けて眺める構成と、制作原稿を読む見開きを要所に挟む構成では、一冊のリズムも変わります。

作品像を紹介する頁を前半に、制作資料を後半にまとめる組み方もあります。題名や掲載資料の呼び方をそろえ、目次や資料頁から作品へたどれる構成を考えると、一冊の中で見る場所と読む場所を決めやすくなります。

頁数に合わせて全部を一様に小さくする前に、どの作品を広く見せたいか、どの原稿を読んでほしいかを選びます。その選択をもとに、一冊の順番と余白を組み立てます。

手元の像と原稿から、一冊の構成を相談する

保存した作品画像、載せたい原稿、作品の題名を持ち寄ると、頁の役割を具体的に相談できます。渡したい相手や使う予定、おおよその点数と頁数も、構成を考える手掛かりになります。

HUKUSYAでは、お持ちの画像や原稿から、掲載順・説明・紙面を考える作品集や冊子の制作をご相談いただけます。印刷や製本、Web公開まで必要な場合は、希望する範囲を相談時にお伝えください。

作品集・冊子の制作について相談する

// Ink & intervals
const ink = ["#607f79", "#bc815c"];
const dots = [];
for (let i = 0; i < 6; i += 1) {
  const x = 90 + i * 108;
  const r = 12 + i * 5;
  const tone = ink[i % 2];
  dots.push(
    '<circle cx="' + x +
    '" cy="180" r="' + r +
    '" fill="' + tone + '"/>'
  );
}
const ns =
  "http://www.w3.org/2000/svg";
const svg = [
  '<svg xmlns="' + ns + '"',
  ' width="720" height="360"',
  ' viewBox="0 0 720 360">',
  '<rect width="720" height="360"',
  ' fill="#f4f0e8"/>',
  ...dots,
  '</svg>'
].join("\n");
process.stdout.write(svg + "\n");