みなさんこんにちわ、えみです。
Noto Sans JP、みんな大好きなフォントだと思うのですが、個人的には苦手意識を持っていました💦
今回テイストサンプルを制作する際、苦手意識払拭のために色々と検証をしてみたので、皆さんに共有したいと思います📚
結論：Noto Sans JPは変幻自在の使いやすいフォント💡
苦手意識を持っていた私がどうその結論に辿り着いたか、簡単に説明していきます。まず、今回私が作ったデザインを見てください👇
今回作ったデザイン
左からシンプル、かわいい、さわやかの3パターンのデザインテイストを担当しました。内容は架空のサイトです。
今回はパッとみただけでテイスト違いがわかるように制作したので、好き放題デザインできたので楽しかったです☺️
ビジュアルの力も強いですが、中身が同じで使っているフォントが同じでも結構な違いが出ていますよね✍️
そもそもNoto Sans JPってどんなフォントなの？
対応のフォントがない時に表示される□。通称豆腐と呼ばれているこの四角をなくすために、GoogleとAdobeが共同開発されたフォントがNoto（No Tofuの略） Sansです🍚
癖がないので使いやすいのですが、私が使うと少し野暮ったい印象になってしまうのがどうも苦手で…今まではあまり上手に使用できていませんでした😂😂😂
個人的にはZen系のフォントが好きでよく使用しています☺️
Noto Sansを使う際は基本に忠実になることで美しくなる
どうしても仲良くなりたかったので、まずは優れたサイトはどのようにNoto Sansを使っているのかを分析しました。
たくさんのサイトを見ていると共通している部分として、基本的な文字調整をしっかりと行っているということに気づきました🙂↕️
文字間の調整を行う
Noto Sansを使う際は、文字間を1%単位でこだわると美しさが変わることに気づきました💡💡
通常のフォントだと、10%だと間延びした印象になってしまうことが多いな〜と思っていたのですが、Noto Sansは10％に設定しても、そこまで間延びした印象にはならず可愛い印象になると感じ、0％の場合ではウェイトを変えることで、私の感じる野暮ったさを払拭することができるな、と感じました💡
ウェイトを変えることで表現を変える
ウェイトを変えるだけでも大きく印象が変わりますよね。
ウェイトに合わせて、文字間もしっかりと調整してあげることで、与える印象も大幅に変わると感じました💡
左はウェイトを太めにし可愛らしい印象に。右はウェイトを細めにしクリーンな印象に。
左のキャッチ（手軽に稼げる〜）はウェイトがMediumの文字間16%で、右のキャッチ（スマホひとつで〜）はウェイトがDemi Lightの文字間5%に設定しています。それだけなのに印象が大きく変えることができました。
Noto Sansはウェイトの種類が豊富で助かります😌
Noto Sansは変幻自在のフォント
結論：基本的な設定をしっかりと行なってあげることでNoto Sansは変幻自在のフォントになる✍️
今回設定したことは全て、タイポグラフィーを扱う上には当たり前のことなのですが、基本に戻りしっかりと設定してあげることで、フォントの良さをきわ立たせることができることを実感しました🙌（（フォントを作ってくださっている方々には本当に感謝です🙏））
更に文字間だけではなく、行間にもこだわってあげることで、もっと素敵なデザインに出来上がります😀
Noto Sansをホームページで使う上には考えなければならないことも多くありますが、とても優れたフォントなのでもっと仲良くなれるようにもっと研究していきたいと感じました📚✍️
つむぐではホームページやバナー制作の際にも、「なんとなく」では作らず様々な視点から意見を出し合い決めています☺️✨もちろんフォントを選ぶ際にも、思い込みで行うのではなく「なぜそのフォントを選んだのか」の意見を出し合い、決めています。皆さんの「こうしたい」を様々な視点から支えますので、是非とも聞かせてくださいね🙌
それではまた〜👋
