じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか
こんにちは、ちょっと株式会社デザイナーのモです。
挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。
何の変哲もないテキストとアイコンで構成されたボタンです。
今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。
ずれている、Noto Sans JP
という訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。
論に拍車をかけるためにボタンに分割線を引いてみました。
なぜずれる、Noto Sans JP
これが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのかというと使用フォントをNoto Sans JPにしているからなのでした。
なんでや！Noto Sans JPは最高のフォントやろがい！それはそうなんですがこのフォントは上部余白を広く/下部余白を狭く取っています。
Noto Sans JPの持つ独特の余白が、上下左右中央配置されたアイコンと隣接してしまうとずれたように見えてしまうんですね。
とはいえ可読性やウェイトの豊富さ等々、あらゆる理由から選択肢として挙げられることの多いフォントです。
はいじゃあNoto Sans JPを使う時はアイコンは省いて下paddingに気を遣って調整すれば完璧だねってそうもいかないことってあるじゃないですか世の中アイコンが必要な時だってある…あるじゃん…。すみません熱くなってしまいました。
なにをする、Noto Sans JP
ではどうすればいいのか、以下で考えうる限りの対応策を挙げるつもりではいますが正直デメリットをしっかり持つものばかりです。と言う事で概ね私の悲痛な叫びで構成されています。ギーッ。
ちなみに使用ツールはFigmaとなります。
①上下トリミングを使う
初っ端からすでに危うい橋を渡ろうとしていますが、アイコンと共存するためにはこうでもしないとどうにもならない良い例。
Figmaには上下トリミングというフォント自体が持つ余白を無視し、テキストエリアのみをトリミングする機能があるのですがそちらを使用します。
ここが良くない！
・あくまでデザインデータ上ではOKに見えるが現状これをそのまま反映できるCSSプロパティはまだ一般的ではない
・こんなことしたら実装者に嫌われる
②上余白を持たせたアイコンを作成する
またしても燃え盛る橋に飛び込んでおります。
Noto Sans JPが上広めならアイコンもそうしてしまおう、という目には目を的な例。アイコンの配置を上下中央にせず、上広め下狭めでやってみました。今回は下に1pxずらしています。
ここが良くない！
・Noto Sans JP以外のフォントで表示された場合、今度はアイコンがずれて見える
・ボタン内のテキストサイズが複数パターンあったら各サイズに対応するアイコンの用意が必要
・単純に上下中央配置でないと据わり悪くないっすか（気持ちの問題）
③テキストをフレームで囲って底上げする
これがこの中では一番穏便な対応かもしれない。
分かりやすくするために色を敷いてみました。テキストエリアがピンク、フレームが水色です。フレームの下paddingを+2pxに設定し、過度な上空きを修正しています。
アイコンを囲って上paddingを持たせてもアリ。
ここが良くない（とも言い切れない）！
・フレームを挟んでいるので簡潔なデータとは言い切れない
・でも解消するには最低これくらいしないとという事かもしれない
④なにもしない
とか言っちゃってネ❗❗😅💦
ではなくこの手法（手法…？）を取っている事例は多く、このフォントを使用した以上ズレが生じるのは仕方のないものとして扱っているのかもしれません。わかる。
その中でも単に並べている例もあれば、ズレ緩和からか何かしらの工夫を加えているボタンも散見されました。
左：テキストとアイコンを両極に配置してズレの見え方を緩和させている例。
右：テキストのline-heightを100%にして、ギリギリまでズレを抑えている例（ボタン内で改行が入ってしまった場合、テキストが詰まって見える懸念アリ）
ちなみにコーナー
デジタル庁も④の対応をしているよーと書きたかったのですが、最新版v2.0.0ではアイコンの扱い方が刷新されておりました。
そもそもボタン内にアローなどのアイコンを持つ例は削除されており、テキスト＋アイコンが合わさったリンクはメガメニューのみで使用。また今回で言うところの③の方法でアイコンに上paddingを持たせ、テキストとアイコンのズレが出ないよう対応に変更しているみたい。
アイコン上に2pxのpaddingを設けている
まとめ
さてツラツラと対策例を挙げてきましたが、どの例も何かしらどこかの工程でデメリットが発生しそうな匂いがプンプンするのでデザイナーの独断で決めきるのは中々厳しいのではという結論でございます。
結局完全な正解はなく、組織内で相談しながら都度対応を決めていくのが現状良さそうだな〜と痛感するのでした。
Noto Sans JP君、ほらアイコン君と手つないで〜わあっ仲良しだね〜＾〜〜よかったね〜〜と無理やり和解を図る日々は続く—————。
~𝓕𝓲𝓷~