キャラクターシートを印刷しやすくする

2024年11月06日 11:06

この文書は、キャラクター・シートを印刷可能にする方法についての完全な技術ガイドを目指すものではなく、むしろ知っておくべきことの要約です。

デザイナーが1ページ内のデータ量を完全にコントロールできる書籍とは異なり、ウェブページ、ひいては文字シートを扱う場合、コントロールの度合いはずっと小さくなる。例えば、あるシートのセクションに4つの項目があり、別のシートの同じセクションには36の項目がある。あるいは、プレイヤーが自分のキャラクターが持っている装備をリストアップする別のセクションを設けることもできる。

しかし、現時点では、特にFlexboxやGridのような新しいレイアウトテクニックの使用に関しては、完璧とは言い難い。

メディアクエリー

メディアクエリを使用すると、デバイスの一般的なタイプや、画面解像度やブラウザのビューポート幅などのその他の特性に応じてCSSスタイルを適用できます(1)。シートがレガシーモードを使用していない場合、メディアクエリを使用して、キャラクターシートを印刷するときにのみ適用されるスタイルを条件付きで指定することができます。以下はその概要である：

/* シートCSSファイル：*/

/* メディアクエリ外のルールは、どの

デバイスタイプにも適用されます*/
.highlight {
 font-size: 1rem;
}

@media print (orientation: landscape) {
 /* あなたのシート
 を横向きに印刷するときにのみ有効になるルール。 */
 html {
 Font-size: 12pt;
 }.
    .highlight {
 color: black;
 font-weight: bold;
 }
}

@media print (orientation: landscape) {
/* シート
をランドスケープモードで印刷するときにのみ有効になるルール。 */
}

@media print (orientation: portrait) {
 /* ポートレートモードでシート
 を印刷する場合にのみ有効になる規則。 これはほとんどのプリンターのデフォルトモードです */
}

@media screen {
 /* 画面（コンピュータ、モバイル）上であなたの
 文字を見たときにのみ有効になる規則。 */
 html {
 Font-size: 14px;
 }.
    .highlight {
 color: red;
 }
}.

ページ・ルール

pageアット・ルールは、印刷されたページ・プロパティのさまざまな側面を変更するために使われるCSSアット・ルールです。ページの寸法、ページの向き、余白をターゲットにして修正する(2)。

/* あなたのシートCSSファイル：*/

@page {
 size: letter portrait; /* 縦向きのレターサイズで印刷されることを指定 */
 margin: 0.25in /* 0.25インチのページ余白を指定 */
}

ページ・ルールでは、以下の擬似セレクタが使えます：

    page page :first { /* 文書の最初のページ */ }。
    page :last { /* 文書の最終ページ */ }。
    ページページ :left { /* 偶数ページ */ }。

ページ区切り

この記事の冒頭で、ブラウザは複数のページにまたがるコンテンツの表示方法をコントロールするツールを提供していると述べた。ここでは、シートのページフローをコントロールするために使えるテクニックをいくつか紹介します：

/* あなたのシートHTMLファイル：*/
<div class="section__container">
     <h2 class="section__title">Section 1</h2>
     <p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. このような些細なことでは、終わりません。 Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
     <figure class="section__thumbnail>
          <img src="imgs/section1.jpg" alt="セクション1">
          <figcaption>Fig.1- Nam ullamcorper felis</figcaption>
     </figure>
</div>
<div class="section__container">
     <h2 class="section__title">Section 2</h2>
     <p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. このような些細なことでは、終わりません。 Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
     <figure class="section__thumbnail">
          <img src="imgs/section2.jpg" alt="セクション2">
          <figcaption>Fig.2 - Loremipsum dolor sit amet</figcaption>
     </figure>
</div>

/* シートCSSファイル：*/
.section__container {
 /* 各セクションが新しいページから始まるようにする */
 break-before: page;
}
.section__thumbnail {
 /* 可能な限り、ブラウザがセクションサムネイル内のコンテンツを複数のページに分割しないようにすることを示します。 そうすることで、キャプションは関連する写真の近くにとどまる。 */
 break-inside: avoid;
}.

プリンターのように考える

ここまでくれば、キャラクターシートを印刷可能にするために必要な基本的なコンセプトは把握できているはずだ。さて、ここからが一番難しいところだ：マウスやタッチスクリーンは一切使わず、すべてのやりとりは鉛筆と折り紙の技法で行われる（ごくまれにだが）。ここでは、その過程で役立つかもしれないデザインのヒントをいくつか紹介しよう：

キャラクターシートをレスポンシブ対応にしましょう。 これは、異なる解像度やウィンドウサイズでシートを提供するだけでなく、異なる用紙サイズに印刷する際にも役立ちます。世界中の人々が異なる用紙サイズ（Letter, A4…）を使用していることを覚えておいてください。また、横向きに印刷したり、例えばクイック・モンスター・リファレンスを作成するために1ページに複数のシートを設定することもできます。

レガシーモードをオフにしてください。すべてのクールな機能にアクセスしたい場合は、現在の標準にシートを更新する必要があります。

不必要なものは隠す。 例えば、あなたのシートには何の情報もないロールボタンがいくつかあるかもしれません。もしそうなら、誰も使えないので隠すべきだ。リピーターセクションのコントローラーやマクロボタンなどにも同じことが言える。

それに応じてスタイルを変更します。 ロールボタンの中に有用な情報が入っているかもしれません。そうであれば、それを反映したスタイルにする。クリッカブルな要素のように見せるのではなく、紙に印刷したら何が意味をなすかを考える。

メモ用のスペースを確保する ゲームセッション中、人々はメモを取るでしょう。シートの装備品欄や、プレイヤーが自分のキャラクターがどれだけダメージを受けたかを記録する場所に、空白の行やスペースを挿入するのがいいでしょう。

モノクロはあなたの味方です。 誰もがカラープリンターを持っているわけではありません。また、モノクロ印刷を好む人もいる。たいていのコンピューターはコンテンツを自動的にグレースケールに変換できるだろうが、白黒のコンテンツを提供したほうがよいだろう。色、ボーダー、画像を指定することで、シートが適切なコントラストで印刷されることを確認できます。

フォントサイズにご注意ください。 幅広い読者が利用できるよう、フォントサイズは16ポイントを推奨します。

背景色や画像は避けてください。 デフォルトでは、ブラウザはそれらを印刷しません。ユーザーが手動で選択することも可能だが、安全面を優先してほしい。どうしてもCSSの背景色や画像を使う必要がある場合は、print-color-adjust cssプロパティ（3）を見てください。完全にサポートされているわけではないが、Chromeでは特に、探しているものを達成するのに役立つかもしれない。別の方法として、絶対配置の画像や画像の境界線を持つdivを使うこともできる。

行の長さのバランスをとる。 長い行を読むと疲れる。読者は行が終わるごとに頭を動かし、次の行の始まりを探さなければならない。短すぎる行は、一般に一つの単位として読まれる単語やフレーズを分断する(4)。これを避けるため、印刷用にデザインする場合は、行の長さを45文字から75文字（スペースと句読点を含む）にするよう努力すべきである。あなたが試すことができるクールなことは、column count cssプロパティを使用することにより、コンテンツを動的に複数の列に分割することです：

/* あなたのシートHTMLファイル：*/
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. このような些細なことでは、終わりません。 Nam ullamcorper felis urna, in vestibulum enim semper euismod. このような、獰猛で獰猛な選手もいるのだ。 この試合は、このような試合となりました。 しかし、そのようなことはありません。 Nullam ipsum arcu, rhoncus sed pharetra quis, porttitor quis tortor.</p>

/* あなたのシートCSSファイル：*/
p {
 column-count：2;
}.

これにより、段落の内容が動的に2つの列に分割されます。また、繰り返しセクションのように入れ子になったコンテンツでも機能する。

必要に応じてコンテンツを展開したり折りたたんだりすることができます。 最後になりますが、多くの場合、キャラクターシートには折りたたみ可能なコンポーネントがあり、キャラクターの特定の特徴に関する詳細情報を表示するために切り替えることができます。印刷する場合、ユーザーがどのようにそれらのセクションを画面に残したかを無視し、代わりにそれらを展開することもできる。あるいは、タイトルだけを印刷し、印刷時のみ表示される新しいセクションを作り、オンデマンドで別ページに印刷することもできるだろう。

シート構成

あなたのキャラクターシートを印刷可能にする最後のステップは、あなたのシートが印刷に適したデザインであることを私たちに知らせることです。そのためにはを追加する必要があります。 プロパティを追加し、その値を trueに設定する必要があります：

{
"html"："pritablesheet.html",
"css"："pritablesheet.css",
"authors"："Roll20 Team (@roll20app)",
"roll20userid"："1",
"preview"："pritablesheet.png",
"instructions"："**This sheet is print fiendlyt**\n\nここにMarkdown形式の使い方の説明を書くことができます。",
"legacy": false,
"printable": true
}.

おめでとう。

この簡単なガイドラインが、あなたが印刷版のキャラクター・シートのデザインとコーディングを始めるための十分な材料となることを願っています。この記事を改善するためのご質問やご提案がありましたら、までご連絡ください。

お元気で！

その他のリソース

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/en-US/docs/Web/CSS/@page
https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust
J. Craig and W. Bevington, "Designing with Type：A Basic Course in Typography" in New York:Watson-Guptill.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

ダウンロード可能なZIP

D&D 5E by Roll20のキャラクターシートの様々なファイルと例を含むZIPファイルを同梱しています。これは、印刷可能なシートを設定するための実際の使用状況を提供するのに役立つはずだ！

5ePrintedSheet.zip
(100 KB)