Noto Sans JPのズレ解消のために今できることメモ

こんにちは。デザイナーのizumiです。
みなさんはNoto Sans JPを使ってウェブデザインをする時、文字のセンターラインをアイコンや画像と揃えるのに苦労していませんか？
Figmaで見た目上の細かな調整はできますが、果たしてそれが実装に向いているのかというと、そうとは言い切れないところがあります。

私はウェブデザインを始めてからこのズレ解消のベストプラクティスをずっと探っているのですが、「将来的にこれでいきたい！」と思える対処法がようやく見えてきたのでメモがてらここにまとめておきます。
（注：実際は既にCSSでできる対処法はあるのですが、実際のビジネスフローに合わず現時点では導入できていない部分があります。）

目次

1. これまで行っていた対処法2つ

この記事を読んでいるみなさんはきっとご存知の通り、Noto Sans JPはアセンダー（上部の余白）が広く、ディセンダー（下部の余白）が狭く設計されています。この上下非対称な余白によって、アイコンや画像と並べた場合に視覚的な中央がズレて見えるという現象が起きています。

アイコンと文字の視覚的な中央のズレ

このズレを解消するために行っていたのが以下２つの対処法です。

【対処法A】アイコンや画像の方に余白（margin-top / padding-top）をつける

ベタですがこの方法が一番多いです。あまり負荷の高い複雑な実装を求めても汎用性やメンテナンス性が落ちるので、この対処法が実状に合っていると感じています。Figmaのオートレイアウトにネガティブマージン（マイナス方向のマージン）が対応すれば、テキストの方にマージンをつけることも今後ありうると思います。

アイコンの上部に余白をつけて見た目上の中央を揃える

他にもCSSの text-box-edge や text-box-trim を使う方法がありますが、現状はまだモダンブラウザの全てが対応しているわけではないのでマイロプスでは使っていません（2026年5月現在）。将来的に使えるようになると嬉しいです。

ちなみにFigmaには文字に対する上下トリミング（ベースラインまでのキャップハイト）機能がありますが、日本語ではキャップハイト（大文字の高さ）よりも実際に見える文字が上下に飛び出てしまい実装指示が難しいため私は使っていません。

【対処法B】アイコンや画像との距離を広げる、もしくはそもそも隣合わせで置かない

こちらもあまり参考にならなくて申し訳ないですが...、距離を広げてズレを目立たなくするか、もしくは割り切って隣に要素を置かないことで対処する方法です。ただここまで来るとNoto Sans JPが案件上の必須要件でない限り、別のウェブフォントに変更することも検討した方が良さそうですね。

文字とアイコンを離すと中央が揃わなくてもそんなに気にならない

2. 今後の対処法（仮）

【対処法C】ズレを補正するためのCSS変数 --font-top-offset を使う

そもそものズレの原因となっているNoto Sans JPのフォントメトリクス値（印刷用語ではフォント・メトリック／英語表記：Font Metrics）を計算して上下のアキの差分を割り出し、CSS変数 --font-top-offset で視覚的なズレを補正する方法です。

フォント・メトリックとは「高さ、幅、スペースなどの個々の文字の値、さらには、文字の平均や最大の高さと幅などの文字全体の値を定義する測定情報」のことです。（フォント・メトリック - 印刷用語集より引用）

こちらのCODE PLUS様の記事を参照すると、

--font-top-offset の計算式：

(usWinAscent - usWinDescent - Cap Height) / 2
= (1.160 - 0.288 - 0.733) / 2
= 0.0695em ≈ 0.07em

となります。（CODE PLUS｜Noto Sans JPのボタンがズレる原因と解決法より引用）

これが実現できれば、実装負荷が高くなく、汎用性やメンテナンス性を保ったままズレを解消するという理想が叶う（！）ことになります。

...ただし残念なことに、実際のクライアントワークの案件進行と照らし合わせてみると、今すぐにこの方法を取り入れるのは難しいと感じています。

なぜなら実装工程の前にデザインをクライアント確認に出す際、あきらかに位置がズレているものを提出するわけにはいかないからです。また実際に一度、--font-top-offset を使用する想定でデザインを作成してみたのですが、「見えているものはズレているが実際は揃う」というイメージを常に意識しなければならず、思考的な負荷も若干高かったです。

以上の理由から、クライアントワークでは既存の対処法で対応しつつ、--font-top-offset はデザイン提出が必要ない自社案件で使用するのが現実的なラインだと感じています。

3. 最後に

全てのモダンブラウザが text-box-edge や text-box-trim に対応する日まで、Noto Sans JPのズレ解消法を探す旅は続きそうです。
デザイン側とフロントエンド側でお互いに理解を深めつつ、負荷が偏らないデザインをこれからも心がけていきたいです。

参考リンク

izumi

アートディレクター／デザイナー

2022年入社。
桑沢デザイン研究所卒業。メーカーでの企画開発、制作事務所でのグラフィックデザイン、地域おこし協力隊でのFab施設の運営やフリーランスなどを経て、マイロプスへ入社。
休日はだいたい読書か映画鑑賞か散歩をしています。

関連記事

Back to Index

お仕事のご相談、採用についてなど、お気軽にお問い合わせください。

お問い合わせ