縦書き
はじめました

縦書き表示の提供を開始しました。
スマートフォンでの表示・編集にも対応しています。
縦書きのまま編集できるので、仕上がりをイメージしながら作業が可能です(一部のブラウザを除く)。
国産システムならではの新機能をぜひご利用ください。

使い方

現在は、文章・見出し・画像・ロゴ(サイト名)の各ブロックが縦書きに対応しています。
これらのブロックの「装飾」から縦書きの設定が可能です。

一.装飾で設定装飾のテキストタブにある「縦書き」のチェックでオン⇔オフを切替えます。
他に高さと上下中央揃えが設定できます。縦書きでは折返し位置を決めるために必ず高さの設定が必要です。
二.雛形もあります「パパっと装飾」から雛形を選択するだけで手軽に縦書きが使えます。
三.縦書きのまま編集一部のブラウザを除き縦書きのままで編集ができます。
仕上がりをイメージしながら作業ができるので便利です。
縦書き編集に対応していないブラウザ(スマホ全般など)では、横書きの編集に切り替わります。
四.リンクや強調も縦書き編集でも一部をリンクにしたり、文字を強調する部分装飾が利用できます。
マウスやキーボードで装飾したい文字を囲い右クリックを押すと装飾ウィンドウが表示され、リンクを設定したり、文字の色・サイズなどを変更できます。

見え方

現在ご覧のページには縦書きを利用しています。
もし縦書きが確認できない場合は、異なるブラウザから確認をお願いいたします。
縦書きはスマートフォンでの表示にも対応しています。
縦書き表示に未対応のブラウザはAndroid 2.xの標準ブラウザやOpera Miniに限られており、多くの端末で縦書き表示されます。

主たるPC・スマホブラウザでの見え方

上手に使う

注意すべきポイント

ホームページ=横書きであることが広く浸透しています。
ホームページ閲覧者の多くが左上から視線を動かすことがある実験で立証されています。
右から左に読み進める日本語の縦書きは、これに当てはまらないため、上手に使うことでインパクトを与えることができる一方、使い方を誤ると違和感だけを与えてしまうことになります。
効果的に使って、横書きだけではできない表現を実現しましょう。

明朝と相性良し

縦書きの文字を明朝体にすることで、小さな文字は読みやすく、大きな文字はインパクトのある表現ができます。
縦書きと明朝体はとても相性が良く、組み合わせて利用するがおすすめです(ただしAndroidは明朝体が使えないのでゴシックに変換されます)。

長文には不向き

次の理由から長い文章には不向きです。

  • スマホなどウィンドウ幅が狭い端末では、スクロールしながら読むことになり不親切
  • スクロールが必要な場合は、標準で文末から表示されるので、一度文頭までスクロールする必要があって面倒
  • スクロースしないように高さを大きく取ると読みづらくなる
  • Android2.x系では、横書きに変換されるが、コンテンツの一部が非表示になってしまう

閲覧者が最も時間を掛ける「読みどころ」は、皆が慣れている横書きが親切。
どうしても縦書きを使いたい場合は、段落を細かく分けるなど工夫をしましょう。

縦書きと横書きを組み合わせる

ホームページ=横書きであることに皆がなれているため、視線は基本的に左から右へと移動します。
そこで、文節のタイトルだけを縦書きにして左側に配置し、本文を横書きで設置することで、

  • 左→右の自然な流れに従う
  • 見出しを縦書きにしてインパクトを与える
  • 本文を横書きにして読みやすさを確保する

といったメリットだけを享受できます。

半角英数を使う、使わない

半角英数の表示方法はブラウザによって異なり、

  • 半角英数は時計回りに90度回転して表示
  • 半角英数も縦書き
  • 半角数字のみ縦書き(桁数指定可)

が混在しています。
まめわざでは1番目の表示方法よりも2・3番目の方が見やすいと判断し、意図的に実装しています。
しかし、どれが見やすいかは人それぞれのため、全てを満足させるのは困難です。
そこで、

  • 半角数字のかわりに漢数字か全角数字を使う
  • アルファベットのかわりにカタカナか全角英字を使う

ことで、意図的に表示方法を統一するのがベストの解決策と言えます。

IE11で半角英数・全角英数・日本語表記(和暦・漢数字・カタカナ英語)を比較

縦書きにはバグや曖昧な仕様が残る

ホームページ言語は、英語など西洋の言語に合わせていると思われる仕様が多く、縦書きはいわば重要度の低いローカルなルールです。
その為、縦書きにはバグやブラウザごとに異なる曖昧な仕様が残っています。まめわざでは、これを意識せずに利用できるよう配慮していますが、次のような問題が残っているので、ご注意願います。

  • IEでは、縦書きにするとアイコン(文章編集時にShiftまたはCtrlまたはAltを押しながらクリックして挿入)が回転し、かつその中心軸がズレる
  • 半角数字を縦書きにすると、Safari系で左右位置が中心軸からズレる
  • Safariでは、縦書き編集時に動作が重くなることがある(どうしても気になる場合は、一旦横書きに戻してから編集し、編集終了後に縦書きに戻してご利用ください)

CSSでの指定

技術情報

縦書きのCSS指定はとてもシンプルで
writing-mode:tb-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
とするだけです。
-moz/-o/-webkitは旧バージョン向けのプレフィックスです。
tb-rlはIE独自仕様への対応です。

次に半角英数の縦書き対応として、
-webkit-text-orientation:upright;
text-orientation:upright;
が利用できます。
Webkit系が対応しているためスマホでは高シェアで対応しており、全体でもシェアを押し上げています。
これに対応していないブラウザ用に次の選択肢となるのは、半角数字の縦表示対応です。縦書きにはならず、数字が1文字分のスペースに詰めて横書き表示されます(分かりづらいので図で確認してください)。
-ms-text-combine-horizontal:digits;
-webkit-text-combine-upright:digits;
text-combine-upright:digits;
digitsのあとに数字を設定して詰める字数の「しきい値」を設定できます。「digits 3」とすれば3桁の数字までは縦表示に対応します(数字を省略すると2桁)。

99%のブラウザが縦書きに対応

日本語には縦書きと横書きの両方がありますが、ホームページについてはほとんど全てが横書きです。
ときどき見かける縦書きは「文字を埋め込んだ画像」であることが多く、この表示方法が長らく一般的でした。
画像ではない文字の縦書表示は、仕様自体は昔からあったものの普及が進みませんでした。
ところが、ここ最近のブラウザ(ホームページ閲覧ソフト)の勢力図の変化や、縦書きへの新規対応などがあり普及が拡大。
PCで中堅のシェアを持つFirefoxが昨年対応したことでシェアが100%に近づきました。

現在の代表的な未対応ブラウザとしては古いAndroid・Safari・Firefoxが挙げられますが、2016年8月にまめわざで調査したブラウザシェアで見てみると、これらのシェアは0.26~0.58%と1%を割っています。この統計ではFirefoxを含めた縦書き未対応の古いバージョンの割合が分かりませんので、これらを加算すると微増の可能性がありますが、それでも1%を超えることはないと思われます。
以上から、現在の縦書き対応ブラウザのシェアは99%を超えている、と考えられます。

2016/12/5