デザインノート 04 : 言語と形

Published 2026/09/01

このノートはWebの画面に置かれる文字列を形と言語から考えたものです。短い単語は記号に近く長い文章は面になり改行によって輪郭が変わります。文字列の形はフォントや文字サイズだけで決まらずその前に言語が何をどの単位で記しどこに境界を置きどの方向へ読ませるかがあります。

過去にタイ語と英語のサイトを制作しました。読めない文字列を形だけで判断しないため現地の美術館、博物館、ホテル、ニュース、コーポレートサイトをいくつも見て回りました。美術館やホテルは複数の言語を使う人が訪れる可能性が高くどのように言語を切り替えているかを見ることができます。ニュースサイトでは日常的に読まれるであろう長い文章を見ることができます。タイ語の本文がどのくらいの幅と行間で組まれ、見出しがどこで折り返されると読みやすい状態に見えるのか。短いラベルだけを並べて文字の違いを確かめるのではなく、実際に読まれる文章の輪郭を先に見るための回り方でした。

読めない文字列を見ていると似た形の繰り返しから語の境界や行の切れ方まで想像したくなることがあります。ただ画面に現れている印と読まれる音や意味は単純な置き換えでは結びつきません。形だけを揃えても読まれる単位は揃いません。

『文字の言語学』

フロリアン・クルマスの『文字の言語学――現代文字論入門』は、文字を言語の音を書き写す記号としてだけではなく何を記す仕組みなのかから整理しています。音素を分けて記すもの、子音を中心に記すもの、音節を単位にするものなど、書き言葉はそれぞれ違う切り口で言語を可視化します。

ここで残ったのは分類の一覧というより、一つの言語と一種類の文字が一対一ではないということです。英語は言語でラテン文字はそれを記すために使われる文字です。ロシア語とキリル文字も同じでキリル文字はロシア語だけに属するものではありません。反対に日本語の文章では漢字、ひらがな、カタカナにラテン文字や数字も混ざります。同じ文字を使うことは同じように言語を書くことでもありません。英語とベトナム語はどちらもラテン文字を使いますが、同じ文字の組み合わせで音を記す方法は異なります。

また文字は発音をそのまま漏れなく記録するものではありません。英語の綴りと発音の関係は一定ではなくタイ語の声調も声調記号一つだけで決まらず子音のクラス、音節の種類、母音の長さなどが関わります。読めない文字列を見たときに似た形の繰り返しだけから語の境界や発音を想像しない方がよい理由です。文字は言語の容器であると同時に、言語のどこを一つと見なすかを表す仕組みでもあります。画面に現れる文字列の形はその仕組みの結果です。

同じ輪郭にはならない

「News」のような短いラベルを各言語で並べれば文字の大きな違いは分かります。ただ実際のサイトで読まれるのは短い単語だけではありません。見出しの下に日付と導入が続き、本文の中に固有名詞、数字、単位、リンクが入ります。ニュースや展示の告知であれば、場所と日時、内容、参加条件をいくつかの文に分けて伝えます。

文章になると文字の造形だけでなく語順と文法が形をつくり始めます。原文の一文が翻訳でも一文になるとは限らず、一つの文を二つに分けたり反対に複数の文を結びつけたりした方が自然なことがあります。主語や動詞の位置が変われば、強調したい言葉が行の先頭に現れるか末尾に現れるかも変わります。同じ意味は同じ輪郭をつくりません。句読点や空白も文章の形に含まれます。日本語と中国語は語の間に空白を置かず、句読点が文の切れ目を目に見える形で示します。英語やロシア語は語間の空白が行の中に繰り返し現れます。タイ語の空白は語の境界ではなくより大きな句の切れ目に現れます。文章を離れて一文字ずつ見ているだけでは、この間隔は分かりません。

アラビア語の文章にラテン文字の商品名や数字が入れば一つの行の中に右から左へ進む部分と左から右へ進む部分が共存します。右から左へ進む文字を扱うW3Cの解説でも右から左へ進む文章内の数字やラテン文字は左から右へ表示されることが示されています。読む方向も文章全体に一つとは限りません。

文章を比べるときは行、文、段落を分けて見ます。文は言語の中でひとまとまりの内容を伝える単位で、段落は複数の文を一つの話題や展開として束ねます。画面の幅が変われば行数は変わりますが、それだけで文や段落の単位が変わるわけではありません。翻訳で揃えられるのは伝える内容であって、単語数、文数、段落ごとの長さではありません。

以下は、比較のために作成した架空の展示案内の第一段落です。

日本語：石、木、再生アルミニウムを使った作品と制作過程を、Material Studies 2026で紹介します。
English: Works made from stone, wood, and recycled aluminium are presented in Material Studies 2026 alongside their production process.
ไทย: ผลงานจากหิน ไม้ และอะลูมิเนียมรีサイเคิลจัดแสดงใน Material Studies 2026 พร้อมกับกระบวนการผลิต
简体中文：由石材、木材和再生铝制成的作品在 Material Studies 2026 中与其创作过程一同展示。
Русский: Работы из камня, дерева и переработанного алюминия показаны на выставке Material Studies 2026 вместе с процессом их создания.
العربية: تعرض أعمال من الحجر والخشب والألومنيوم المعاد تدويره في Material Studies 2026 إلى جانب مراحل إنتاجها.

六つの文は同じ素材と展示内容を伝えていますが共通するMaterial Studies 2026が現れる位置とその前後に続く語の順序は揃いません。日本語と中国語でも固有名詞の前後にある空白が異なります。固有名詞の形を基準にすると文字の違いだけでなくそれぞれの言語が文をどのように組み立てているかが見えやすくなります。

Multilingual Paragraphsのデモを開く — 同じ展示案内を六言語で並べ、文章量による行と段落の形を比較する。

「Multilingual Paragraphs」ではこの展示案内の見出し、日付、本文を六言語で並べています。本文を二段落、四段落、七段落に切り替え、文章が連なったときに行と段落の形がどう現れるかを比較します。

意味の切れ目を確かめた上で改行位置を決め打ちすることもありますが本文は画面幅や文字サイズによって成り行きで折り返されます。読者が文字サイズを変える場合もあり制作時に見ていた改行位置は保証されません。二つは同じ文字デザインでも形を決める条件が異なります。

英語やロシア語では空白が語の境界になりそこが改行の主な候補になります。日本語や中国語は通常、語と語の間に空白を入れません。それでも行末では語のまとまりを保って折り返すことが期待されるためブラウザは辞書などを使って境界を推定します。世界の文字における改行方法をまとめたW3Cの解説では、タイ語の同じ句に対して異なる改行候補が現れる例も紹介されています。

動かせる場所

文章が長くなると一行ごとの形だけでなく、段落と段落の間、見出しと導入の間、日付やキャプションと本文の間にある間隔が読む速度を分けます。文章は文字を順番に並べただけのものではなく、行の長さを揃える、語を強調する、行間を空けるといった操作によって一つの面として整えられます。ただ何を動かせるか、どこへ空間を加えられるかは言語によって異なります。

両端揃えでは行の左右を揃えるために文字列のどこかを伸縮させます。英語などのラテン文字では主に単語間の空白が広がり日本語や中国語では文字間にも空間が分配され句読点を先に詰めることもあります。アラビア文字では単語間だけでなく文字の接続部分を伸ばしたり幅の異なる字形を選んだりする方法があります。W3Cの両端揃えに関する解説は同じ長方形の段落をつくるために異なる場所が動いていることを示しています。

文章の一部を強調する方法も共通ではなく英語やロシア語では斜体が使われ、日本語や中国語では書体を変えるほか、傍点、括弧、線なども使われます。日本語、中国語、タイ語、アラビア語を主に記す文字体系にはラテン文字のような大文字と小文字の区別がありません。そのため英語で大文字が担っていた強さをそのまま移すことはできません。行の上下にある空間も単なる余白とは限らずタイ語では一部の母音記号や声調記号が子音の上下に加わり、日本語ではルビのように本文へ別の読みを重ねる場合もあります。多言語を前提にした場合、行間を狭くすることは見た目の密度を変えるだけでなく文字や読みが使う場所を狭めることになります。

「Multilingual Paragraphs」では先ほどの六言語の文章へ同じ操作を加えられます。行端を成り行きと両端揃えで切り替え第一段落の同じ内容を各言語で異なる方法により強調し、行間を変えます。ここで示す強調は各言語に一つだけの正解があるという意味ではなく同じ意味上の役割が必ずしも同じ視覚表現にならないことを見るための例です。両端揃えもブラウザによる現在の表示結果で各言語の組版を完全に再現するものではありません。

同じCSSの値を与えることと、同じ状態の文章をつくることは別です。段落の幅、行間、字間、強調を数値だけで共通化せずそれぞれの文字がどの空間を使いどのように文章の形をつくっているかを見ます。

分ける単位

画面を実装するとき文章は操作しやすい短い文字列へ分けられます。「残り」「3」「件」のように部品化して並べれば日本語では一つの文に見えます。ただ別の言語では数字の位置を変えたり数に合わせて前後の語を変化させたりする必要があります。翻訳する人が文全体を並べ替えられなければその言語の文法よりもUIの部品構成が優先されます。

ロシア語を比較に入れるとこの違いが分かりやすいです。文字列の形に影響するのは造形だけではなく、文法によって単語そのものが変化します。

日本語：1ファイル / 2ファイル / 5ファイル
English: 1 file / 2 files / 5 files
Русский: 1 файл / 2 файла / 5 файлов

日本語では数が変わってもここでの「ファイル」は変わりません。英語では単数と複数の二つが現れます。ロシア語では1、2、5で異なる形が必要です。

仮にUIの文言を「数字＋翻訳した名詞」として組み立てるとこの変化を扱えません。日本語版の文字列を基準に入る箱の幅を決め、あとから訳語だけを流し込む方法では、文法によって生まれる形の違いを後から吸収することになります。文章全体を言語ごとの単位として持ち、実際の文字列を入れた状態で確かめる方が自然です。

本文の一部を太字にしたりリンクにしたりする場合も同じです。原文で強調した語が翻訳後も同じ位置にあるとは限らず複数の語に広がることもあります。文章をHTMLの見た目に合わせて先に分解するのではなく翻訳の単位を保ったまま、その中の変化する値やリンクを扱えるようにします。

これは実装上の国際化だけでなくCMSの項目をどこまで分けるかという編集の問題でもあります。見出し、導入、本文は役割が異なるため分けられますが一文の中の語をレイアウトの都合で別々の入力欄にすると言語ごとに必要な語順と変化を制限します。

一文字という数え方も同じように一つではありません。Unicodeに割り当てられた符号位置であるコードポイント、人がひとつの文字として知覚する単位に近い書記素クラスタ、画面に描かれる字形であるグリフは同じものではありません。『Unicode Text Segmentation』は書記素クラスタ、語、文の境界を決めるための方法を定義しています。文字数の表示、入力欄の上限、カーソル移動、一文字の削除で配列の要素数やバイト数だけを文字数と見なすと、人が見ている単位の途中で分断してしまう場合があります。

以前の日本語環境では「1バイト文字」と「2バイト文字」が「半角」と「全角」に近い感覚で使われる場面がありました。固定幅の文字セルでは全角が半角二つ分に見えるため、保存に使う量と画面上の幅が対応しているように捉えやすい状態でした。この呼び方を現在のWebに持ち込むと、保存量、画面上の幅、人が一文字と感じる単位を混同します。AとＡは同じアルファベットに見えても別のコードポイントです。éは一つのコードポイントで表せる一方、eと結合記号の組み合わせでも同じように見えます。画面上で一つに見えること、プログラムが数える単位、保存に必要な量は一致しません。

ここで先に決めたいのは画面上の幅ではなく、文章がどの単位で意味を持つかです。

同じ画面

長い文章だけでなく、短いUIの言葉にも言語の構造が現れます。

AppleのiPhoneユーザガイドの英語ページ — 同じ記事構造の中にナビゲーション、検索、目次、手順が並ぶ。

AppleのiPhoneユーザガイドは同じ記事と画面構造を日本語、タイ語、簡体字中国語、ロシア語、アラビア語などで比較できます。

例えば記事の題名は英語では「Change the language and region on iPhone」、日本語では「iPhoneで言語と地域を変更する」、簡体字中国語では「在 iPhone 上更改语言和地区」です。iPhoneという製品名は同じでも、その前後の語順と空白は変わります。タイ語、ロシア語、アラビア語へ進めば文字の高さや単語の長さも変わり、アラビア語ではページの進行方向自体が右から左になります。

ここで固定できるのは、検索する、項目を選ぶ、手順を読む、次のページへ移るというUIの役割です。その役割を入れる箱の幅まで固定すると、ある言語では余白が大きく残り、別の言語では折り返しや省略が必要になります。ボタンは文字数から幅を決めず左右の余白を保ったまま内容に応じて伸びるようにする。ナビゲーションは項目数だけでなく実際の語を入れて確かめる。入力欄はラベル、プレースホルダー、エラー文が長くなっても関係を見失わないようにする。短い言葉ほど完成した部品へ後から押し込まず、翻訳された状態で部品同士の関係を見ます。

前のノートで触れた操作の手がかりも、短いラベルそのものであることが多いです。完成した部品の幅へ後から訳語を入れると、言語の違いより先に箱の形が決まります。

Multilingual Text Flowのデモを開く — 同じ文章を検索UIの中へ入れ、六言語での収まり方を比較する。

「Multilingual Text Flow」では同じ文章を検索UIの中へ入れています。検索欄のラベルとプレースホルダー、検索結果の件数、日付、説明、二つの操作ボタン、受付終了の表示を六言語で同じ構造へ置きました。文章だけの比較から一歩進め文字列の違いをUIの中でどのように受け止めるかを見るためのデモです。

多言語サイトは言語切り替えによって常に一つの言語だけを表示するとは限りません。固有名詞、ブランド名、商品名、数字は別の文字のまま文章に入ることがあります。

Stone & Styleでは、タイ語と英語のページを用意するだけでなく、タイ語の見出しの中に英語のブランド名やコレクション名が混ざります。特にNewsではその状態を分かりやすく見ることができます。

同じ画面に別の言語が入るとき、混ざるのはブランド名だけではありません。日本語と中国語には共通する漢字があり、Unicodeでは基本的に同じ文字と認識される漢字を一つの文字として統合しています。ただ実際に書かれる字形には日本語、簡体中文、繁体中文、韓国語などの慣習による違いがあります。「経」と「经」、「語」と「语」のように意味は近くても別の文字もあります。W3Cは「直」という同じUnicode文字を中国語と日本語のフォントで表示し字形が変わる例を『Migrating to Unicode』で示しています。HTMLのlang属性は文書の言語を説明するだけでなくブラウザが適切な字形を選ぶ手がかりにもなります。一つのページに日本語と中国語が混在するなら部分ごとにも言語を示します。

何を残すか

言語が変われば文字列の長さ、行の切れ方、段落の輪郭が変わります。その差をなくすことが目的ではありません。言語から生まれた違いと、箱の幅や改行の固定によって生じる差は別です。

制作のときに見ているのは次の三つです。

この文字列は語、文、段落、UIの部品のどれを単位にしているか
輪郭の違いは言語から生まれているか設計側の固定から生まれているか
翻訳が入る前から幅、読む方向、語順、強調をどこまで固定しないか

すべての言語の特性を網羅することは現実的ではありません。それでも文字の単位、語の境界、読む方向、文法が文章の形に関わると分かっていれば、自身の設計がどの前提に依存しているかに気づきやすくなります。文字列をフォントの問題だけに戻さず、どの単位で意味を持ちどこまで固定しないかを先に見ることで、言語から生まれた輪郭と設計で決めた輪郭を分けられます。

参考

Back to List