手軽屋
ツール一覧

縦書きの句読点・小書き字・長音の組版ルール

CSS Writing Modes Level 4 と日本語組版慣習に基づく、縦組み4つの基本ルール

1. 行頭禁則: 句読点・閉じ括弧は列頭に置かない

日本語の縦書き組版には、特定の文字を列の頭（行頭）に置いてはならないという「行頭禁則」の慣習があります。対象文字は句読点「、。，．」、感嘆符・疑問符「！？!?」、閉じ括弧「）」』】〉》」」」、繰り返し記号「ゝゞ々ヽヾ」、長音「ー」、補助記号「”’」など。なぜ禁則かというと、これらは前の文字に「くっついて」意味をなす文字で、列頭に単独で置くと意味の流れが切れて読みにくくなるためです。組版ソフトは禁則対象文字が列頭に来そうなとき、前列の末尾に「ぶら下げ」るか、前列の文字を1文字繰り上げて回避します。本ツールは「ぶら下げ方式」を採用し、前列の高さが規定値±1字の範囲で伸びる形にしています。

2. 縦組句読点の右上配置

横書きの「、」「。」は字面の下中央（ベースライン上）に置きますが、縦書きでは伝統的に字面の右上に寄せて配置するのが日本語組版の慣習です。これは活版印刷の時代、句読点活字を字の右上に配置して縦の流れを止めない設計を引き継いだもの。CSS Writing Modes Level 4 の仕様にも縦組み時の句読点配置についての記述があり、フォント側で OpenType 機能の vert / vrt2 / vpal が定義されていればブラウザは自動で適切な位置に配置します。本ツールはCanvasで描画するため OpenType 機能に依存せず、句読点を字幅の35%右上に明示的に寄せて描画。これにより、どのフォントでも一貫した縦組句読点位置が得られます。

3. 「ー」「〜」「…」「（）」「「」」の90度回転

長音記号「ー」、波ダッシュ「〜」「〰」、三点リーダ「…」「‥」、ダーシ「―」「‐」「－」「—」、丸カッコ「（）」、カギカッコ「「」」、二重カギ「『』」、隅付きカッコ「【】」、山カッコ「〈〉」「《》」、角カッコ「［］」、波カッコ「｛｝」、矢印「→」「←」「↑」「↓」、等号「＝」など、横書きで横向きに伸びる文字は、縦書きでは90度回転して縦向きになります。CSS Writing Modes Level 4 で text-orientation: mixed（縦書き時のデフォルト）にしておけば、ブラウザが Unicode の Vertical_Orientation プロパティを参照して自動回転しますが、フォントによって挙動が異なるため見え方が安定しないことがあります。本ツールは Canvas で明示的に context.rotate(90°) を呼んで描画し、フォント差を吸収しています。

4. 小書き字（っ・ゃ・ゅ・ょ）の縦位置調整

小書きひらがな・カタカナ「ぁぃぅぇぉっゃゅょゎヵヶ」「ァィゥェォッャュョヮ」は横書きでは文字の下半分に配置されますが、縦書きでは字面の右上に微寄せして配置するのが整った組版です。これは仮名の「小書き＝抜けた音・拗音」を視覚的に示すための慣習で、右上に小さく置くことで前の音とのつながりが分かりやすくなります。本ツールはこれらの小書き字を検出し、x座標を字幅の10〜15%右にずらして描画。長音記号と同じく、ブラウザ標準の vertical-rl 任せだとフォントによって位置がバラつくため、Canvas で明示的に補正しています。

5. text-orientation: mixed と半角英数の横倒し

CSS Writing Modes Level 4 の text-orientation プロパティは縦書き時の文字の向きを制御し、mixed（デフォルト）・upright・sideways の3値を取ります。mixed は「漢字・かなは正立、横書き由来の文字（半角英数・記号）は90度横倒し」という挙動で、和文と欧文が混在する文章の自然な見え方を作ります。upright は「全ての文字を正立させる」もので、住所表記や数字の縦書き組版で使われるが、半角英数が縦に細長く伸びるため読みにくい。sideways は「全ての文字を90度横倒し」で、欧文を縦書きにしたいときに使う。本ツールは mixed 相当の挙動を実装しており、半角英数（A-Z, a-z, 0-9）は90度右回転で描画され、漢字・ひらがな・カタカナは正立します。全角英数（Ａ-Ｚ, ａ-ｚ, ０-９）を入力すれば正立できるため、ID・年号などを縦書きで正立させたい場合は全角に変換してください。

6. フォントによる縦書きの差・解決法

縦書きの見え方はフォントが OpenType の vert / vrt2 / vpal 機能をどこまで実装しているかで変わります。Hiragino Mincho ProN / Hiragino Sans / Yu Mincho / Yu Gothic / Noto Serif JP / Noto Sans JP は縦組み機能を持っていますが、句読点の位置・小書き字の縦位置・カッコの回転対応にはバラつきがある。Webフォントを @font-face で読み込んで縦書きする場合、unicode-range や OpenType 機能が落ちることがあり、結果が崩れます。本ツールは macOS / iOS 標準の Hiragino 系を基本フォントスタックに置き、Yu Mincho・Noto Serif JP をフォールバックとして指定。さらに句読点位置・回転・小書き字位置を Canvas 上で明示的に補正しているため、OS・ブラウザを問わず同じ縦組結果が得られます。Web ページに縦書き CSS で表示するときは本ツールで画像にしてからの方が崩れません。

手軽屋ツール実践手順

  1. 縦書き画像メーカーを開く
  2. 縦書きしたい文章を入力（句読点・「ー」「（）」を含むものでOK）
  3. プレビューで句読点位置・回転・小書き字位置を確認
  4. 列頭に句読点が来ていないこと（行頭禁則の動作）を確認
  5. 半角英数は90度横倒し、全角英数は正立になることを確認
  6. 仕上がりに納得したら「画像を保存（PNG）」

関連ツール

参照: MDN writing-mode（5値仕様）、MDN text-orientation（mixed/upright/sideways）、W3C CSS Writing Modes Level 4

関連記事

短歌・俳句をSNSの縦書き画像で投稿するコツ｜X・Instagramで映える1枚の作り方

短歌や俳句をテキストだけでツイートすると、改行・句読点・字下げが崩れて雰囲気が出ない。縦書きの画像（PNG）で投稿すると、5・7・5・7・7の音律も和歌の見立ても一目で伝わります。Xなら横長1280×720、Instagramフィードなら正方形1080、ストーリーズなら縦長1080×1350が無加工で全画面表示。配色は明朝×白か黒地白文字、ゴシック×クリームが定番。本記事では、字数別・季節別・SNS別の縦書き画像投稿テンプレと、改行の入れ方・句読点処理・ハッシュタグの組み合わせを実例で解説します。短歌・俳句アカウントの平均インプレッションを上げる構成の決め方まで、CSS Writing Modes Level 4 の仕様に基づく縦組ロジックと、短歌界・俳句界の慣習を踏まえてまとめました。

縦書きが映えるフォントと配色の選び方｜明朝とゴシック・5配色プリセットの使い分け

縦書き画像は、フォント（書体）と配色の選び方で印象が大きく変わります。短歌・俳句・古典文学なら明朝（Hiragino Mincho ProN / Yu Mincho / Noto Serif JP）が王道で、和歌の伝統美と相性が良い。現代詩・口語短歌・ポップな引用ならゴシック（Hiragino Sans / Yu Gothic / Noto Sans JP）が読みやすい。配色は手軽屋プリセットの白・黒・クリーム・うす青・うすピンクから、テーマ・季節・SNSプラットフォームに合わせて選びます。本記事では、季語と配色の対応表、SNS別のおすすめ書体×配色、文字サイズと余白の比率、印刷物への流用ポイントまで、和文組版の慣習と現代SNSの可読性の両面から整理します。