UJIEN CAFE ロゴタイプ
文字詰めはこうして今の形になった

2026-08-27 作成 | 対象: brand/logo/cafe/svg/ujien_cafe_logotype.svg(幅 149.05)

支給されたロゴデータは、字と字の空き方がそろっていませんでした。字の形は一切変えず、横位置だけを動かして間隔のリズムを整えたのが「文字詰め」です。
この資料は、何を測って何を基準に決めてどう検証してそのあと何が変わっていま手元の正本になったのか、を1枚にまとめたものです。数値はすべて元データの座標系(キャップハイト=大文字の高さ約17.3)で、単位はミリでもピクセルでもありません。

1出発点 — 支給データ

支給データそのまま(幅 154.5)

・書体は Brandon Grotesque(UJIEN=Medium/CAFE=Regular)。支給時点でアウトライン化済み=フォントではなく図形になっているので、フォントの自動カーニングは効きません。間隔は1字ずつ動かすしかない状態でした。
・原本: archive/logotype_prekern_inbox_2026_08_21/ujiencafe_logo.svg(3業態が1ファイルに入った支給データ)

2何を測ったか

隣り合う2字について、それぞれの外接矩形(字をぴったり囲む四角)どうしの水平の空きを全ペア測りました。数字が大きいほど空いている、という単純な指標です。

ただしこの数字は「見た目の空き」とは一致しません。C のような曲線や A の斜辺は、矩形の縁より内側に逃げるので、同じ数値でも目には広く見えます。そこで矩形の数値を土台にしつつ、最終判断は後述の目視テスト(3・5節)で行いました。

※ 実際の「輪郭どうしの最短距離」も併せて計測しています(例: C–A は矩形で 3.31 でも輪郭では 4.39 空いている)。本文の表は 7/22 の記録と単位をそろえるため矩形基準で載せています。

3基準を決めたのは STAND だった

3業態のロゴは UJIEN の5文字が完全に共通です。そこで先に着手した STAND で「そろえるリズム」を決め、それを CAFE・ROASTERY に横展開しました。CAFE の詰め方は、この基準の適用結果です。

決めた4つの基準

基準内容
直線ステム間 6.4縦棒どうしが向き合うペア(J–I・I–E など)は 6.4 に統一。ここが全体のリズムの物差しになる
語間 15.0UJIEN と後半の語の間。支給値は17前後で、2語がばらけて見えていた
A のペアは詰める斜辺の上部が空くので、隣り合う字に寄せる
バー下にタックT・F の横棒の下にできる空洞へ、隣の字を軽く差し込む(欧文組版の定石)

STAND で起きたこと(この工程を CAFE がそのまま引き継いでいる)

STAND 調整前

STAND 調整後

ぼかしテストで「S–T だけ広く見える」という指摘が1件出て、0 / −0.3 / −0.6 の3案を比較 → −0.3 を採用(−0.6は詰まりすぎ)。この1往復を経て基準が確定し、翌工程で CAFE に適用されました。
詳細: ujien-stand-kerning-2026-07-22.htmlujien-stand-kerning-v1v2-2026-07-22.html

4CAFE に適用した中身

ペアごとの間隔(外接矩形どうし・単位=元データ座標)

ペア調整前調整後ねらい
U–J 3.402.80-0.60 Jの上部の空きが大きく見えるため0.6詰め
J–I 6.306.40+0.10 基準リズム(直線ステム同士=6.4)に揃え
I–E 7.006.40-0.60 広すぎたため基準に詰め
E–N 5.905.90±0 Eのカウンターの空気分を織り込み現状維持
N–C語間 17.4015.00-2.40 語間。2語の一体感を高める(広すぎ解消)
C–A 3.313.01-0.30 当時の記録なし
A–F 5.164.41-0.75 当時の記録なし
F–E 5.504.60-0.90 当時の記録なし

・「ねらい」は 2026-07-22 の作業記録に残っている文言です。C–A・A–F・F–E の3ペアは当時の記録に個別の理由が残っていません。数値は今回あらためて実測したものです。
・J–I だけ +0.10 と広げています。基準リズム 6.4 に合わせるための調整で、詰めることだけが目的ではありません。

結果として各文字が動いた量

U
0
J
-0.6
I
-0.5
E
-1.1
N
-1.1
C
-3.5
A
-3.8
F
-4.55
E
-5.45

左の U を固定して、右にいくほど累積で左へ寄る形です(最終的に -5.45)。字形(パスの形)は1点も変えていません。変えたのは水平位置だけです。

全体幅 154.5 → 149.05(−5.45=3.53% の圧縮)。
実寸に直すと、A1ポップのロゴ幅315.5mm で 1単位=約2.1mm、名刺の幅30mm なら 1単位=約0.20mm。看板サイズでは効き、名刺サイズでは見分けがつかないのが正常です。

5ビフォー / アフター

Before — 支給データ(幅154.5)


After — 文字詰め後(幅149.05)

同じ表示倍率で並べています(Afterが少し短いのは圧縮した分)。色はどちらも支給時の #2e6847。ここでは文字詰めだけを比べるため、色は当時のままにしています。

6検証 — 4つの見方で確かめた

間隔の良し悪しは「読めてしまう」と判断できません。読めなくする・ぼかす・小さくする、で確かめました。CAFE は指摘ゼロで通過しています(STAND は S–T で1件の指摘があり修正)。

① 上下反転 — 単語として読めなくして、空きムラだけを見る

Before

After

② ぼかし — 遠くから見たとき/サイネージでの見え方

Before

After

Before は UJIEN と CAFE が離れて2つのかたまりに割れて見えます。After は1語としてまとまります。

③ 極小 — Web・アプリでの最小使用サイズ

190px

120px

80px

潰れ・くっつきなし。

④ 白抜き — 暗い地・発光サイネージ

発光面では白が膨張して字間が詰まって見えますが、その膨張分を織り込んだ詰め量なので、サイネージ用に字間をいじる必要はありません。

使うときの推奨:ロゴの周囲に「U」1文字分以上の余白(クリアスペース)を確保してください。全体幅のおよそ8%です。

7そのあと2回、形は変えずに中身が変わった

  1. 2026-07-22文字詰めを適用・正本に採用

    STAND を承認 → 同じ基準で CAFE・ROASTERY にも適用。調整前データは archive/logotype_prekern_2026_07_22/ へ退避(削除なし)。この時点の詰めは <g transform="translate(…)"> で位置をずらす方式でした。

  2. 2026-08-21詰めをパスの座標そのものに焼き込み

    transform 依存だと、Illustrator や他社ツールに渡したとき入れ子が崩れて詰めが失われる危険があります。そこで座標を直接ずらした状態に変換(15点)。見た目は不変で、4倍描画の画素比較で検証済み(インク総量差 0.005%未満)。同時に CAFE の .ai を新規作成。

  3. 2026-08-21 → 08-25色だけが確定体系へ

    支給色 #2e6847 のままだったものを、まず墨+業態色の2色版へ、同日夕方に業態色1色へ改定(UJIEN と CAFE の主従は書体のウェイト差で足りている、という判断)。8/25 に CAFE=碾茶 #486a2f で確定。アウトライン形状は無変更=文字詰めはそのまま

現在の正本(碾茶 #486a2f・焼き込み済)

8いま使うファイル

用途ファイル
標準(白・生成りの明るい地)brand/logo/cafe/svg/ujien_cafe_logotype.svg
1色刷り・箔押し・小さい文字brand/logo/cafe/svg/ujien_cafe_logotype_sumi.svg
緑1色が使える1色刷りbrand/logo/cafe/svg/ujien_cafe_logotype_gyokuro.svg
暗い地・写真の上brand/logo/cafe/svg/ujien_cafe_logotype_white.svg
Illustrator で編集brand/logo/cafe/ai/ujien_cafe_logotype.ai
見分け方:CAFE のロゴは幅 149.05 なら文字詰め済み、154.4 / 154.5 なら文字詰め前です。古いデータを掴んでいないか、この数字で判別できます。
🚨 業態ロゴはロゴタイプ単独で使います(宇マークとの併用は不可)。

9用語

文字詰め(カーニング)
字と字の間隔を1ペアずつ調整すること。字の形や大きさは変えない。
アウトライン化
文字をフォントではなく図形データに変換した状態。フォントが無い環境でも同じ形で出るが、後から文字として編集はできない。
キャップハイト
大文字の高さ。この資料の数値はすべてキャップハイト約17.3を基準にした座標。
ステム
字の縦棒。J・I・E・N の直線部分など。
タック
T や F の横棒の下にできる空洞へ、隣の字を差し込むように寄せること。
クリアスペース
ロゴの周囲に必ず空ける余白。他の要素を入れない領域。

出典: .company/creative/assets/ujien-logotype-kerning-all3-2026-07-22.html(BEFORE/AFTER の実データ)/ujien-stand-kerning-2026-07-22.htmlujien-stand-kerning-v1v2-2026-07-22.html(基準の決定過程)/.company/secretary/notes/2026-07-22-decisions.md(決定記録)/brand/README.md §3・§4(8/21以降の変更)。
ペア間隔は 2026-08-27 に正本 SVG から再計測(7/22 の記録と全ペア一致を確認)。