美しい文章を作るために第2回余白編

美しい文章を作るために第 2 回　余白編

イショティハドゥス

この obenkyo の目的

• みんなのレポートとかシケプリを見た僕「常識がない！」



• 多少でいいので見栄えの良いレポートを生産できるようになろう！



• 多少でいいので見栄えの良いレポートを生産できるようになろう！

• 見栄えの良いレポートは成績もよくなります

• ほんとに？w

obenkyo 講演予定

• 第 1 回　文字

• 第 2 回　余白

• 第 3 回　フォント

このお話の前提

• 横書きの日本語文章を想定

• 和文欧文混合についても考慮します

• 縦書きは小学校の教科書に書いてあるとおり

と思ったのですが、

と思ったのですが、• あまりに内容がマニアックな気がした

• 冷静に考えてこんなことに気を使っているのは校正屋さんだけ

• 内容はほぼ「趣味」の領域！W

• でも今回の内容を知っていれば「その界隈の人」にも嫌がられな

いものが作れる！

余白の規則

「文字間の」余白の規則

「日本語の」「文字間の」余白の規則

余白の規則は誰が決めたのか• 歴史的な背景がきっとたくさんあるんだと思う

• 現在の一番の親元は JIS X 4051

• これの要約が W3C の『日本語組版処理の要件』

• これは「決まりごと」

• なので日本語を書く人間はすべて等しく守るべきである　←？ｗ

JIS X 4051 での半角全角の話• そもそもこの規格書は半角全角でフォントが区別されることを想定

していない

• だから半角全角の議論は規格とは別の話になる

• 本当に正しい組版は、前回の通りの半角全角の使い分けをしたうえ

で、今回の余白の規則を守ること

用紙の余白について• 自由度が高い

• 「柱」まわりの規則が細かい

• W3C ではカバーできない

• めんどくさい！W

• 行間は 0.5～1 行（文字分）って覚

えとくといいかも

今日の目次

• ツメ

• アキ

• 補足 3 つ

「ツメ」

なツメりん（棗鈴）

絵：タラお

※現：コ゛りぼて

なツメぐみ（奈津恵）

絵：凍奈

※現：凍咲しいな

ツメとベタ

• ベタ組（べたぐみ）……文字の外枠（仮想ボディ）をくっつける

• 詰め組（つめぐみ）……ベタ組よりもひっつける

• 均等詰め……ひっつける量が全部同じ

• 字面詰め……文字に合わせて詰める

比較• ベタ組

きっと青春が聞こえる • 字面詰め

きっと青春が聞こえる • 均等詰め

きっと青春が聞こえる

使い分け• ベタ組は文章に使う（読みやすいので）

• 詰め組は見出しに使う（詰まっていたほうがバランスがよいので）

• 詰めるなら字面詰めを使うべき

• 「均等詰め」とかいう単語はじめて聞いたわ

• このスライドも本文はベタ組で見出しは字面詰め

• 文章を詰めることもあるらしいし、そのへんはセンスっぽい

文字の詰め方• Adobe Illustrator などの場合

• 文字のカーニングを「自動」にする

文字の詰め方• Adobe Illustrator などの場合

• もしくは OpenType 設定からプロポーショナルメトリクスを選ぶ

• カーニングとプロポーショナルメトリクス両方設定するのが一般的

文字の詰め方• Pages などの場合（Mac系列）

• フォントパネル→設定マーク→タイポグラフィ→文字間隔

文字の詰め方• Microsoft Office Word などの場合

• 無理！W

• プロポーショナル書体を使わざるを得ない

• ＭＳＰ明朝、HGP 明朝など（P ってフォント名に入ってる奴）

• ともにクソ書体

• 一応均等詰めはできる

結論

• Microsoft　←クソ

• Apple　←多少許せる

• Adobe　←神

「アキ」

アキつまる（あきつ丸）

絵：アマガイタロー

アキつしま（秋津洲）

絵：きりさわさき

アキづき（秋月）

絵：三嶋くろね

アキとは

• 空白のこと

• 文字間、行間などがこれにあたる

• 定義：隣接する文字又は隣接する行の間隔．また，版面，図版など

の端から文字列などの端までの間隔.（W3C 規格書附属書 G）

アキがないと……？

• 見にくい

• 美しくない

• これはあんまりbeautifulなsentenceじゃない

アキが大きいと……？

• アキがでかいと見づらい

• 美しくない

• これもあんまり　beautiful　な　sentence　じゃない

ちょうどいいアキ

• これは詰まっててbeautifulなsentenceじゃない

• これはちょうどよくて beautiful な sentence だよね

• これは広すぎて　beautiful　な　sentence　じゃない

「アキ」のサイズ• 全角文字（仮想ボディの幅）に対する比率で呼ぶ

• 全角アキ（ぜんかくあき）　行頭字下げ、行間など

• 二分アキ（にぶあき）　　　平仮名と始め括弧類の間など

• 三分アキ（さんぶあき）　　英文の単語間（欧文間隔）など

• 四分アキ（しぶあき）　　　平仮名と欧文用文字の間など

• 八分アキ（はちぶあき）　　追込み処理で使う限界アキ（説明略）

入れるべきアキの大きさ

• 全部 W3C のページに書いてある

• https://www.w3.org/TR/2012/NOTE-jlreq-20120403/ja/

• もしくは JIS X 4051 に書いてある

• ともにめちゃくちゃ長い

https://www.w3.org/TR/2012/NOTE-jlreq-20120403/ja/

入れるべきアキの大きさ• たとえば

香風智乃（CV：水瀬いのり）↑和文はベタ組 ↑和文＋始め括弧は二分アキ

↑始め括弧の後ろは基本ベタ組

欧文用文字＋中点類は四分アキ↓中点類の字幅は半角↓

中点類＋和文は四分アキ↓

↑始め括弧の字幅は半角

※「コロン」は中点類 ※ちなみに「※」は漢字類（和文）

入れるべきアキの大きさ• たとえば

小さな Shining star☆↑和文はベタ組

↑和文と欧文の間は四分アキ↑欧文間隔の字幅は三分

☆は欧文文字扱いとしてベタ組↓

欧文間隔と欧文の間は空きなし↑

※ただし☆は漢字等とも扱えるので、和文ともベタ組になる


• 全部紹介しましょう！


• 全部紹介しましょう！

• 全部で約 900 通り＋注釈 17 個

表1　文字間の空き量

文字クラス名after

cl-01 cl-02 cl-03 cl-04 cl-05 cl-06 cl-07 cl-08 cl-09 cl-10 cl-11 cl-12 cl-13 cl-14 cl-15 cl-16 cl-19 cl-20 cl-21 cl-22 cl-23 cl-24 cl-25 cl-26 cl-27 cl-28 cl-29 cl-30 lineend

before

cl-01　始め括弧類 1/4 af 注 1）注 1） × ×cl-02　終わり括弧　類 1/2 be 1/2 be 1/2 be 1/4 af 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 behang

1/2 behang 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 注 2）

cl-03　ハイフン類 1/2 af 1/4 afcl-04　区切り約物 1/2 af 1/4 af 1/4 be 1/4 be 1/4 be 1/4 be

cl-05　中点類 1/4 be 1/4 be 1/4 be 1/4 be 注 3）1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 behang1/4 behang 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 1/4 be 注 4）

cl-06　句点類 1/2 be 1/2 be 1/2 be 注 5） 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 behang1/2 behang 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 注 6）

cl-07　読点類 1/2 be 1/2 be 1/2 be 注 5） 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 behang1/2 behang 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 1/2 be 注 6）

cl-08　分離禁止文　字 1/2 af 1/4 af ruby

hangrubyhang

cl-09　繰返し記号 1/2 af 1/4 af 1/4 be 1/4 be 1/4 be 1/4 becl-10　長音記号 1/2 af 1/4 af 1/4 be 注 7）注 7）1/4 be 1/4 be 1/4 becl-11　小書きの仮　名 1/2 af 1/4 af 1/4 be 注 7）注 7）1/4 be 1/4 be 1/4 becl-12　前置省略記　号 1/2 af 1/4 af × ×cl-13　後置省略記　号 1/2 af 1/4 af

cl-14　和字間隔 1/4 af 注 8）注 8）

cl-15　平仮名 1/2 af 1/4 af 1/4 be rubyhangrubyhang 1/4 be 1/4 be 1/4 be

cl-16　片仮名 1/2 af 1/4 af 1/4 be 注 7）注 7）1/4 be 1/4 be 1/4 becl-19　漢字等 1/2 af 1/4 af 1/4 be 1/4 be 1/4 be 1/4 becl-20　合印中の文　字 1/2 af 1/4 afcl-21　親文字群中　の文字（添え字付　き）

1/2 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 注 9） 1/4 afhang1/4 afhang 1/4 be 1/4 af

cl-22　親文字群中　の文字（熟語ルビ　以外のルビ付き）

1/2 afhang

rubyhang

1/4 afhang

rubyhang

rubyhang

rubyhang 注 7）注 7）注 8） rubyhang 注 7）

1/4 behang 注 10）

1/4 behang

1/4 behang

1/4 behang ×

cl-23　親文字群中　の文字（熟語ルビ　付き）

1/2 afhang

rubyhang

1/4 afhang

rubyhang

rubyhang


1/4 behang 注 11）1/4 behang

1/4 behang

1/4 behang ×

cl-24　連数字中の　文字 1/2 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af

hang1/4 afhang 1/4 be 1/4 be 1/4 af

cl-25　単位記号中　の文字 1/2 af 注 12） 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af


cl-26　欧文間隔 1/2 af 1/4 af 注 13）注 13）

cl-27　欧文用文字 1/2 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 afhang

1/4 afhang 1/4 be 1/4 be 1/4 af

cl-28　割注始め括　弧類 × × × × × × 注 14）注 15）注 16） × × × 注 13） × × ×cl-29　割注終わり　括弧類 1/2 af 1/4 af 1/4 af 1/4 af 1/4 af 1/4 af ×cl-30　縦中横中の　文字 1/2 af 1/4 af 1/4 be 1/4 be 1/4 be 1/4 be

line head 注 17） × × × × × × 注 14）注 15）注 16） × 注 13） × ×

Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.

参考: https://www.w3.org/TR/2012/NOTE-jlreq-20120403/ja/#spacing_between_characters

https://www.w3.org/TR/2012/NOTE-jlreq-20120403/ja/#spacing_between_characters




before








hangrubyhang


cl-14　和字間隔 1/4 af 注 8）注 8）





1/2 afhang

rubyhang

1/4 afhang

rubyhang

rubyhang



1/4 behang

1/4 behang

1/4 behang ×


1/2 afhang

rubyhang

1/4 afhang

rubyhang

rubyhang



1/4 behang

1/4 behang ×





cl-26　欧文間隔 1/2 af 1/4 af 注 13）注 13）


1/4 afhang 1/4 be 1/4 be 1/4 af


line head 注 17） × × × × × × 注 14）注 15）注 16） × 注 13） × ×





• 覚えるのは無理！W

• しかも行がまたがると追込み・追出し処理などでアキ量が変化する

• 日本語は両端揃えなので

結論

• アキは場合分けが多いし覚えるのは困難

• でも気にしないと見にくいし、僕みたいな人が嫌がる

• 気にすると泥沼

• 最初から自動でやってくれるソフトウェアを使いましょう

結論

• 泥沼をしっかり実装してくれた人たち

• Adobe InDesign, Illustrator など

• Microsoft Office Word

• pLaTeX / jsarticle とか

結論

• Adobe 製品だと自分で設定もできる

• 特に InDesign はめっちゃ細かく設定できる（キモい）

• むしろこのプリセットを眺めるほうが勉強になる

結論• 泥沼を実装しなかった人たち

• Apple iWork（Pages, KeyNote など）

• Microsoft Office PowerPoint

• 普通のテキストエディタ

• 各種ブラウザ

結論

• PowerPoint も KeyNote も実装してない

• スライドではあきらめよう……

結論

• Microsoft　←多少許せる

• Apple　←ゴミ

• Adobe　←神（頭おかしい）

補足 1　両端揃え

両端揃え• 日本語は「両端揃え」

• Word だとデフォ、Pages は設定しないとならない

• 行頭字下げとともに設定しておくべき処理

• 日本語は両端揃えじゃないと相当気持ち悪い

• 欧文組版でもそうすることになっている

両端揃え

両端揃えと左寄せ

補足 2　欧文組版ルール

欧文組版ルール• 一般的なのは Hart’s Rules というもの

• そもそも単位系が違う

• M の横幅を基準とする（1 em）

• 12 pt のフォントサイズならだいたい 12 pt＝1 pica＝4.21 mm

• （日本ルールでいう）欧文間隔は 1/4 em から 1/3 em

• これ以外の具体的なスペースに関する規定はあんまりない

欧文組版ルール• Microsoft の Character design standards

• たぶん欧文フォントの作る上での最も良い参考資料

• これにも特に書いてない

• 文字の余白を作るときもビジュアルで決めろと書いてある

• は？ｗ

欧文組版ルール

• 実際に測ってみる

• Minion Pro だとスペースがだいたい 0.254 em くらい

• 始め括弧の ADW は 0.39 em くらい

• よくわからん！


• 少なくとも「日本語の組版ルール」とは間隔の感覚が違う

• これが全角括弧・句読点を使うべきもう 1 つの理由

• 半角括弧の大きさは半角（二分）ではない！

• 半角スペースの大きさも半角（二分）ではない！


• ザッツ・アメリカン！

補足 3　ルールは本当に正しいか

どちらが美しい？夜は弁当が 10％引きになる。今月のお小遣いは￥500 だ。

夜は弁当が 10％引きになる。今月のお小遣いは￥500 だ。

どちらが美しい？夜は弁当が 10％引きになる。今月のお小遣いは￥500 だ。

夜は弁当が 10％引きになる。今月のお小遣いは￥500 だ。

○正解

×誤り

ルールは本当に正しいか• JIS X 4051 では％（後置省略記号）の後や￥（前置省略記号）の前

はアキ量がないことになっている

• Word でも InDesign でも Illustrator でも正しく処理される

• なお半角にすると Adobe 系統は「欧文用文字」という扱いをして

四分アキを入れている




before








hangrubyhang


cl-14　和字間隔 1/4 af 注 8）注 8）





1/2 afhang

rubyhang

1/4 afhang

rubyhang

rubyhang



1/4 behang

1/4 behang

1/4 behang ×


1/2 afhang

rubyhang

1/4 afhang

rubyhang

rubyhang



1/4 behang

1/4 behang ×





cl-26　欧文間隔 1/2 af 1/4 af 注 13）注 13）


1/4 afhang 1/4 be 1/4 be 1/4 af


line head 注 17） × × × × × × 注 14）注 15）注 16） × 注 13） × ×




ルールは本当に正しいか

• でも僕はアキがあったほうが綺麗だと思うんだ

• バランス的に

ルールがおかしいと思ったとき• ルールは「キミの感性」と合うとは限らない！

• 対処方法はだいたい 3 つ

• 既存のルールを破壊（無視）する　→　強い人に殴られる

• 使わない　→　「10 パーセント」とか「500 円」とか

• あきらめる　→　既存のルールは《正しい》ので

まとめ

まとめ• Word を使いましょう

• Pages は捨てましょう

• 詰め組は諦めましょう

• スライド作るときも諦めましょう

• 真面目にデザインしたいなら Adobe に課金しましょう

Thank you for your ご清聴．

まとめ• Word を使いましょう

• Pages は捨てましょう

• 詰め組は諦めましょう

• スライド作るときも諦めましょう

• 真面目にデザインしたいなら Adobe に課金しましょう

Thank you for your ご清聴．欧文間隔（三分）とひらがなの間は空きなし↓

↓ひらがなと欧文用文字の間は四分アキ

漢字類と句点類の間は空きなし↑

↑タイトルは字面詰めがよい

↓本文はベタ組がベター

←行間は二分～全角アキ

Design

美しい文章を作るために 第2回 余白編

美しい文章を作るために第2回余白編