科学図版：色がなくても意味を伝える
ラベル、形、線種を使い、科学的な模式図をグレースケールで確認します。完全なSVGの例を使って、データを変えずに条件の識別を保ちましょう。
科学的な模式図を色なしでも成立させるには、重要な条件それぞれに、色相以外の見分け方を用意します。直接ラベルを付け、適切な記号や線種を区別してから、予定する表示サイズでグレースケールのコピーを確認しましょう。別の配色は助けになりますが、ラベルのない条件に名前を与えることはできません。
このガイドで扱うのは、カテゴリーを説明する模式図、つまり2つの条件、群、経路などを示す図です。実験データを含まない、独自の2行のSVG（Scalable Vector Graphics）ファイルを使います。連続値のヒートマップ、顕微鏡画像、測定値のグラフには、データを考慮した個別の処理が必要です。見やすくするために、その表現をトレースして新しい形へ置き換えないでください。
色が読者に何を伝えているかを決める
編集可能な元データ、図の説明、予定する最小の再現サイズから始めます。読者が読み取るべき違いを挙げてください。記号がどの条件に属するか、経路がどこへ続くか、ラベルがどのパネルを説明するか、といった違いです。
次に、頭の中で色を隠します。説明が「オレンジの線をたどる」「青い円を比較する」になるなら、その色への依存を、読者が図中で見つけられる名前へ置き換えます。実際の投稿では、意味のある条件名を使ってください。以下の「条件A」と「条件B」は、配置を示すための仮の名前です。
W3Cの色の使用に関するガイダンスは、色が情報を伝える場合、文字や形などの目に見える手がかりを求めています。これはウェブのアクセシビリティの指針であり、学術誌の受け入れ試験ではありません。ここでも同じデザイン原則が役立ちます。別の手がかりでも違いを保つという考え方です。
各条件に2つ目の識別手段を与える
対応関係が明確になる最小限の手がかりを使います。簡単な模式図なら、各経路のそばに短いラベルを付けるだけで十分かもしれません。マーカーの繰り返しや接続線の種類の違いは、長い経路を凡例に戻らずたどる助けになります。
| 条件 | この例の色 | 記号 | 接続線 | 直接付けるラベル |
|---|---|---|---|---|
| A | 青 | 円 | 実線 | 条件A |
| B | オレンジ | 三角形 | 破線 | 条件B |
この対応関係をパネル間で統一します。自分の分野で三角形がすでに特定の構成要素を意味するなら、その意味を保ち、別の手がかりを選んでください。同様に、仮説上の接続を意味する破線を別用途へ転用してはいけません。冗長な符号化とは、同じ識別情報を複数の手がかりで示すことであり、よく使われる記号に矛盾した意味を与えることではありません。
提出先に合った配色を選び、ラベルを背景に対して読みやすく保ちます。Natureの図版仕様は、アクセシブルな配色を求め、色付きの凡例の四角と黒い文字の組み合わせを示しています。また、模様や装飾による混雑を避けるよう案内しています。すべてのオブジェクトをハッチングで埋めるより、簡潔なラベルと目的のある記号を使う根拠になります。
2条件のSVGを試す
この完全な例をconditions.svgとして保存します。ブラウザーかベクターエディターで開いてください。白い背景にラベル付きの2行があり、外部画像や読み込んだフォントはありません。異なる記号は意図的に汎用的なものであり、生物学的な仕組みを示すものではありません。
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="240" viewBox="0 0 600 240">
<rect width="600" height="240" fill="white"/>
<g fill="white" stroke-width="4">
<g stroke="#0072B2">
<path d="M80 70H320"/>
<circle cx="80" cy="70" r="16"/><circle cx="320" cy="70" r="16"/>
</g>
<g stroke="#D55E00">
<path d="M80 170H320" stroke-dasharray="12 8"/>
<polygon points="80,150 62,180 98,180"/><polygon points="320,150 302,180 338,180"/>
</g>
</g>
<g fill="black" font-family="sans-serif" font-size="24">
<text x="370" y="78">Condition A</text>
<text x="370" y="178">Condition B</text>
</g>
</svg>元データでは、ラベルをテキストのまま保持しています。stroke-dasharray="12 8"により、下の接続線は線と隙間を繰り返すパターンになります。SVGの破線の仕様は、その長さがパスに沿って適用される方法を定義しています。ラベルも三角形も、オレンジを認識できることには依存しません。
- 600 × 240の版を開きます。両方のラベルがあり、円がA、三角形がBに属することを確認します。
- カラーのコピーを書き出し、その書き出しからグレースケールのコピーを作ります。カラーのマスターは保持してください。色の説明を参照せず、両条件を名前で識別して接続線をたどれるか確認します。
viewBoxは変えず、width="300"とheight="120"にした小さな元データのコピーを作ります。両方の書き出しを繰り返します。これは1つの縮小例の確認であり、共通の最小サイズではありません。- 論文やスライドに実際に配置するファイルを確認します。ラベル、記号、接続線の種類が、その書き出しと以降のサイズ変更で保持されることを確認してください。
意図的に弱い対照例を作るには、テキストのグループを削除し、三角形を同じ位置の円に置き換え、stroke-dasharrayを削除します。色付きの2行は残ります。確認するのは、2つの灰色がたまたま同じに見えるかではなく、条件名を読み取れる状態が残っているかです。
両方の版をlibrsvgで600 × 240と300 × 120ピクセルにレンダリングし、各出力をRGBの重み0.299R + 0.587G + 0.114Bでグレースケールに変換しました。冗長な識別手段を持つ4種類すべてで、ラベル、円と三角形の違い、実線と破線の接続線が見え、切れていませんでした。対照例の青とオレンジは、0～255の尺度で87と119という異なる灰色になりました。そのため、対照例を「区別できない」とは説明していません。改善点は、色相に依存しない明確な条件の識別です。
これは、独自に作成したSVGのデジタル検証です。実物の印刷や、読者を対象とする調査は行っていません。また、グレースケール変換は色覚特性のすべてを再現するものではありません。対象読者と学術誌に合った検証と併せて使う、1つの確認表示と考えてください。
最終サイズで機能しない手がかりを修正する
ラベルが小さすぎる場合は、慎重に短くするか、文字を大きくする空間を確保します。破線が実線に見えるほどつながる場合は、線と隙間の間隔を変えるか、別の適切な手がかりを使います。マーカーの形が分からなくなったら、単純化するか大きくします。変更するたびに図全体を確認し、修正が別の場所の重なりを生まないようにしてください。
実寸の計算には、別の科学図版の文字サイズと線幅のガイドを使います。この記事の300ピクセルの例は画面レンダリングの検証であり、学術誌の段幅の推奨値ではありません。
図の説明と絵柄を一致させてください。「オレンジの線」は、「条件B、破線の接続線」など、条件名と目に見える手がかりへ置き換えます。オンラインの図では、内容上の比較を説明する適切な代替テキストやキャプションも用意してください。見えるラベルだけでは、図を見ることができない人へのアクセシビリティは確立できません。
表示を編集しても科学的内容を保つ
測定値のグラフは、グラフ作成元で修正し、基となる値を変えずに再度書き出します。顕微鏡画像では元画像を保持し、学術誌の画像処理ルールに従ってください。Natureの画像の完全性に関する方針は、最終画像が元のデータを正確に表すことを求め、処理の開示要件を説明しています。見た目が整うまで画像を描き直すことは、その工程の代わりにはなりません。
別個のラスター模式図しかない場合は、PerfectVectorの科学図からSVGへのワークフローで、編集可能な形状の復元を支援できます。プレビューを確認してから、SVGの編集と書き出しのために結果をアンロックしてください。復元したすべての接続と記号を元画像と比較し、必要に応じてラベルをテキストとして作り直します。復元した形状が役立つのは、科学的な意味が保持される場合だけです。編集可能なアートワークがすでにあるなら、直接修正してください。SVGの色を変える方法は、その限定的な編集工程を扱っています。
各条件に曖昧さのない名前があり、配置した図で色以外の手がかりが読み取れ、図の説明と一致していれば完了です。別個の模式図でベクターの元データがないことが障害なら、PerfectVectorで形状を復元し、書き出した結果でこの識別の確認を繰り返してください。
よくある質問
科学的な模式図には、色覚に配慮した配色だけで十分ですか？ 適切な配色は役立ちますが、条件は直接付けたラベルやほかの適切な手がかりでも識別できるようにすべきです。図の説明も含む図全体を、予定するサイズで確認してください。
グレースケールの確認で、図がアクセシブルだと証明できますか？ いいえ。色相のない1つの描画を確認するものです。すべての色覚の違い、ロービジョン、スクリーンリーダーでの利用、特定の学術誌の要件を網羅しません。
科学的な記号をすべて円や三角形に変えるべきですか？ いいえ。この例は汎用的な仮の記号を使っています。すでに科学的な意味を持つ記号や線種は保持し、ラベルか矛盾しない別の手がかりを追加してください。
出典
- W3C — 色の使用を理解する — 色に代わる目に見える表現と、このアクセシビリティ基準の限界を説明しています。
- Nature — 図版の準備：仕様 — Natureの図版について、引用した配色、凡例の文字、混雑を避ける指針を示しています。
- W3C — SVGストロークの破線 — 完全なソース例で使う、線と隙間のパターンを定義しています。
- Nature — 画像の完全性と基準 — 科学画像の指針の根拠となる、元データと処理の境界を定めています。
