Mediumの印刷へのこだわり

Ray Yamazaki
for Shirusu
Published in
7 min readJan 17, 2016

By Marcin Wichary

一方で、安くざらざらした紙でも段落が美しく、ページにフィットしているならば玄人をも笑顔に変える(玄人でなくても温かい印象は持つはずだ)。「マシな紙に印刷するお金はないかもしれないが、でもあんた、細やかに気配りしてはいるんだぜ」というのが感じ取れる。気配りするのに元手はかからない。単に注意と謙遜、勤勉さが必要なだけだ。気配りこそが自分の技巧に満足を与える1番の感情だと言える。本のデザインに気配りしていると、多くの点でハッキリそれと分かる。そして、それは特に余白に現れる。 — クレイグ・モド 『余白について語ろう

Mediumの記事を印刷するのはそうそうあることではないかも知れませんが、私たちはその体験を素晴らしいものにしたいと思っています。おそらくは何世紀も続く印刷の歴史を大切にしたいという思いが少しと、あとは僅かなノスタルジアでしょう(Mediumのスタッフの中にはかなり前に印刷向けのデザインをしていた者もいますし、我々の滅多にない休みにまだそれをしている者もいます)。もしかすると自分の技巧を鋭敏にしておきたいという欲求なのかも知れません。結局のところ印刷とは「打てば響く」デザインのひとつなのです。また、現実的な理由もあります。草稿を印刷してペンを握り外へ出かけると、自分の記事をいつもと異なる視点で眺めることができて修正の仕上げをうまく行えます。きっとライターの皆さんも時にはこういう事をなさっているのではないでしょうか?

でもおそらく1番の理由は次のようなものです:私たちはMediumというプラットフォームでストーリーを書く方々をリスペクトしているのです。私たちは「書く」のがいつも個人的な行為で、滅多に簡単にはいかないことを知っています。ですから私たちが皆さんを気にかけているということを知って頂きたいのです。それが、上のクレイグ・モドの引用にあった「気配り」するということです。印刷が言葉を台無しにしてしまったりストーリーを醜くするならば、それはMediumでストーリーを読み書きする方全員に対する私たちの気配りが足りていないということと同じことでしょう。

私たちはブラウザーの技術的サポートを活用してベストと呼べるプリントアウトをデザインしたいと思っています。ここで、スクリーンに表示されるMediumのストーリーと印刷されたMediumのストーリーの大きな違いを見てみましょう(イラストではフェイク記事を使っていますが、もし興味があるようでしたらコチラから確認できます)。

目立たないユーザー・インターフェース。印刷に関係のないユーザー・インターフェースのほとんどを取り除きました。今後追加したり変更するかもしれないスクリーンのUIをデフォルトで非表示にするためのスタイルシートも用意しました。

トップに少し大きめの余白。最初のページだけトップに普通より大きめの余白を加えました。手書きのアノテーションを加えたい時の余白です。

フォント・サイズ。メインのフォント・サイズを22pxから15pxにしました(他のフォント・サイズもそれに従ってます)。典型的な紙のサイズではこれが1番快適です。

ページの幅。 段落の最大幅を4.95インチに変更し、スクリーンで読む場合と同様に行ごとに等しい最適な文字数(50–75字)となるようにしました。指を添えたり(アノテーションのための)大きめの余白を残しています。

これらは紙のサイズに関わりません。ほとんどの縦向き、横向きの紙どちらでも大丈夫です。残念ながらアメリカ以外のすべての国に対応するのは実際難しいのですが、変えたのはあくまで「最大」幅であって「実際の」幅ではないので、幅4.95インチ以下のページを印刷する場合でもクリッピングなしで上手くいきます。

1ページに1枚の写真。ページの最後の写真は次のページに移ります。半分に切れて次のページに表示されるようなことはありません。

アンダーラインスクリーンのためによく考えて用意したこんなアンダーラインを取り除きました。 — 印刷物ではあまり見栄えがしないのにこういうデコレーションで目を疲れさせる理由はないからです。

テキストの色。Mediumのスクリーン上のテキスト色は100%の黒ではありません。僅かに低いコントラストでよりピュアな黒を際立たせるためです。しかし、私たちは印刷用ではテキスト色をピュアな黒に変えました。なぜならプリンターはディザリングに向いていないからです。

背景写真。このセクションは、スクリーンでは背景写真が配置されテキストは白色でしたが、印刷する場合には写真を取り除きました。ブラウザーが変わればCSSの背景写真の印刷が崩れる可能性があるからです。それに加えてインクやトナーの無駄になったり、言うまでもなくテキストが読みづらくもなります。

孤児/未亡人。例えば2行からなるパラグラフのうち1行だけを前のページの最後に押しこむことが出来たとしても私たちはそうしません。必ずページの最下部に段落の初めの1行がこないようにしますし(「孤児」)、ページの最上部に段落の終わりの1行がこないようにもしています(「未亡人」)。

フッター。スクリーン上のフッターそのままではなく、面白いところだけを残しています。 — レコメンドやシェアのボタンはありません(紙にボタンを印刷してどうなるのでしょう?)。もちろんフォローもできません。

ここまでお話しました技術面の詳細に興味を持たれましたか?詳しくは「技術的な補足」をご覧下さい。質問やコメントですか?メモを残して頂いてtypography@medium.comまでメールをするか、@MediumDesignまでツイートして下さい。

(紙をとても多く無駄にしてしまうと罪悪感を覚えるので、いつもは気をつけています。でもデバッグのために下の写真程度は必要でした。ラッキーなことに1度で済みましたが)。

私の「副操縦士」としてこのプロジェクトを手伝ってくれたジャンニ・チェン、そしてフィードバックやインスピレーションを与えてくれたクレイグ・モドに感謝の気持ちを込めて。

Mediumのタイポグラフィー・シリーズとして、以前にunderlineshanging quotesWhitespacepilcrows、そしてPolish Sをご紹介しました。何か私たちが見落としているものはありませんか?それとももっと詳しくお知りになりたいですか?typography@medium.comまでメールをお寄せください。

--

--