タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
「Noto Sans」とは GoogleがAdobeと共同開発したフォントファミリー。 webフォントで日本語が使えるメリットは大きいので積極的に使っていきたいところです。 しかし、「Noto Sans」はとにかく種類が多い… ほぼ同じ内容なのにGoogleとAdobeで名称が異なり、さらにその中でも似たようなフォント名で分かれているので非常にややこしいです。 結局どれを使えば良いのか。 今回はwebフォントとして使用をする前提でそれぞれの違いと用途による使い分けを検証してみたいと思います。 どれだけの種類があるのか ざっくり「Noto Sans」=「Source Han Sans」=「源の角ゴシック」ではあるのですが、Google側ではNoto Sans、Adobe側では源ノ角ゴシック（Source Han Sans）という名称でリリースされています。 さらに細かく分けると以下のようにな
等幅半角の欧文フォント「Noto Sans Mono Extra Condensed」 - 遠近法ノート
最近発見したんですけども、Google Fontsにある「Noto Sans Mono Extra Condensed」って等幅かつ半角の欧文フォントなんです。 なぜ今まで誰も気がつかなかったんだ……。 プログラミング向けの等幅フォントであるNoto Sans Monoには、標準のほか、Semi Condensed／Condensed／Extra Condensedがあります。書体でコンデンスっていうのは幅が狭いタイプのことです。4書体それぞれに9ウエイトのファミリーを持っている書体群だったんですね*1。このうちExtra Condensedは最も幅がタイトで、幅は和文全角のちょうど半分。つまり等幅半角だったんです。 fonts.google.com リンク先には標準のサンプル画像しかないですが、Download famiyのボタンでDLして解凍すれば、中のstaticフォルダにフォントフ
「源ノ角ゴシックとNoto Sansならトラブルないと思ってました」的 AdobeXDで使うフォントの話｜Risa Yuguchi
この記事はAdobe XD アドベントカレンダー 2020 の2日目の記事です。 ときどき相談をうけるのですが、Adobe XDでWebサイトやサービスをデザインするときにどのフォントを使っていますか？ 最近では商用利用できる日本語フォントの種類はかなり増えました。一方Adobe XDは、Adobe FontからインストールできるフォントであればCreative Cloudとしての性質で自動的にインストールしてくれますし、USBで繋いでないデバイスプレビューでも自動的にダウンロードして表示してくれます。 今回は定番かつ安定的に使用できる二つのフォントと利用するときに注意が必要なフォントを二つ解説しました。 [おすすめ/名前注意]源ノ角ゴシック次の二つの条件のうち片方が揃ったらこれを選ぶのがおすすめ。 ・MacとWindowsの人が混ざっている ・スタータープランの人が参加している源ノ角ゴシ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Google FontsのNoto Sans Japaneseが重い？記述を変えたら速くなるかも！｜さとうあまみ 👾 佐藤あゆみ
「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を読んで高速化できたというレビューの中に、Webフォントの「Noto Sans Japaneseが重いようなので、サイトから外してみました」と書かれていたので、そのフォローとしてこのnoteを書きました。 Google Fontsから読み込む際の記述を変えれば、速くなるかも知れません。 Noto Sans Japaneseで表示が遅くなる？書籍を読んで、実際に高速化してみたという記事の中に… WEBフォントの「Noto Sans Japanese」って読み込むのめちゃくそ重いんですね という声がありました。 かつては遅かったかも…？かつて、Google FontsからWebフォントが読み込まれるまでの間は、ページ上にはそのフォントを利用している文字（文章）が表示されませんでした。 文字が書かれている部分が真っ白な状態のままフ
フォントを軽量化 使うweightを3つに絞ったとはいえ、1ファイル16~17MB。フォントファイルを軽量化(サブセット化)していきましょう サブセットフォントメーカーをダウンロードします。 https://opentype.jp/subsetfontmk.htm Windows用とMac用が別ですので選んでください。 ダウンロード後、インストールし起動するとこのようなソフトが開きます。 ①作成元フォントファイル 参照から選択できます。今回はNotoSansCJKjp-Regular.otfを例にします。 ②作成後フォントファイル 基本的には元のファイルと同じ名前で良いです。場所は混乱しないように別の場所を指定すると良いでしょう。 ③フォントに格納する文字 第1水準漢字、非漢字文字、アスキー文字をコピペします！ 唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍
Noto Sans Hinted と font-feature-settings: 'palt' | blog.jxck.io
Intro Noto Sans のサブセット生成を見なおし、 Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。 作業と検証の記録を兼ねて、実施結果を記す。 fonttools これまで、フォントのサブセットの生成には以下の 2 つのツールを使用していた。 サブセットフォントメーカー WOFF コンバータ しかし、 macOS を Catalina にあげたところ、これらが起動できなくなり、フォントが生成できなくなった。 これまで GUI で行なっていたが、せっかくなので自動化するために、代替コマンドを探し、プロセスを組んだ。 いくつかツールがあるが、今回は fonttools に同梱された pyftsubset を採用することとした。 fonttools/fonttools pyftsubset こ
日本語Webフォントの増加更に、これまで欧文フォント中心のWebフォントに、無料で使える日本語フォントが増えてきました。 Google Fontsで紹介されている日本語フォントは現在8種類あります。 Notoフォントの絶対的支配 上記の8種類の中で、圧倒的に多く使われているのが、「Noto Sans JP」です。このNoto Sansは知名度も高い ＆ 6種類のウェイトが用意されているということで選ばれる割合が高いと推測できます。 じゃあNotoフォント万歳じゃないか！なんの問題があるんだ！？ ここが問題なのです。デザイナー主導でサイト制作・フォント選びを行ってしまうと「とりあえずNoto Sans」になりがちな気がします。 見た目だけで選ばないでほしい確かに、Webフォントを使えばAndroidでもiosでも同じ見た目を担保できます。尚且つNoto Sansは美しい。 しかし、Webフォ
【GAS】Googleドキュメントで Noto Sans JP などの日本語Google Fontsを使う - Qiita
Google Docsは共同編集が非常に便利なツールです。 しかし美しい・きれいなフォントが少ない、と感じたことはありませんか？ ググってみると、ブラウザの設定から表示されるフォントを変える方法は出てくるのですが、それだと印刷時やPDF書き出し時に「MSゴシック」などあまり美しくはないフォントになってしまいます... また、源ノ角ゴシックなどの一部のフォントはフォントリストに表示されず、利用できないと思う方もいるかも知れません。 それでM PLUSフォントを使って我慢している方もいると思います（このフォントも綺麗ですが...） みなさんそれで諦めてしまっていませんか？？ 実はGASで隠されたフォントを有効化することで、Google FontsにあるフォントをGoogle Docsで利用できます！！ もちろん、ドキュメント以外にもスライド・スプレッドシート等で使用可能です。 さらに、GASに
「Noto Sans JP」と「源ノ角ゴシック」なにが違うの？ 〜我々はどちらを使えば良いのか問題〜｜加藤朋義
意味が分からない。 「NotoSans JP」と「源ノ角ゴシック」は全く同じフォントだという。 名前からして、かたや英語、かたや日本語で共通点が何ひとつない。 名前が2つあるのに、指すモノは1つ。真実はいつも1つだけど、名前は2つあってもいいのか。混乱しないのか。 そんなのあんまりだと思い、ザッとインターネットをサーフィンしてみたが、ほとんどの人が 「あ、そうなんだ」 と静かに受け止めている。 自分も周りが「よい」と言うのなら流されてしまう没個性的な人間である。 ここで声高に異を叫んでも、何の生産性も向上しない。 しかし、である。名前が違うということは「何か」が違うのだ。 まず、その「何か」について、見ていきたい。 ※手っ取り早く「どの名前のフォントを使用したら良いのか」を知りたい方は下記の目次から「結局、どの名前のフォントを使えばよいの？」から飛び去ってください。 「Noto Sans」
Googleの「Noto Sans CJK JP」は便利なフォントだ。オープンソースだし、Webでも使えるし、わりと見やすいし、モダンな感じだし、ウェイトは7種類もある。 「Noto Sans」と「源ノ角ゴシック」日本語のNoto Sansというと、同じデザインにもかかわらず、Noto Sans JPとか、Noto Sans Japaneseとかがあってややこしい。さらに、Adobeからも「源ノ角ゴシック」というのがあり、これもまた同じデザインだ。混迷を極めている。「Noto Sans」と「源ノ角ゴシック」の違いは、こちらの記事が分かりやすい。 Noto Sans CJK JPがいいと思った実際に使うとなると、同じデザインであればどれか一つに絞ったほうがよいと考え、「Noto Sans CJK JP」をチョイスした。決め手は、①多くのウェイトが揃っている、②中国語、韓国語にも対応している、
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
【GAS】Googleドキュメントで Noto Sans JP などの日本語Google Fontsを使う - Qiita
Google Docsは共同編集が非常に便利なツールです。 しかし美しい・きれいなフォントが少ない、と感じたことはありませんか？ ググってみると、ブラウザの設定から表示されるフォントを変える方法は出てくるのですが、それだと印刷時やPDF書き出し時に「MSゴシック」などあまり美しくはないフォントになってしまいます... また、源ノ角ゴシックなどの一部のフォントはフォントリストに表示されず、利用できないと思う方もいるかも知れません。 それでM PLUSフォントを使って我慢している方もいると思います（このフォントも綺麗ですが...） みなさんそれで諦めてしまっていませんか？？ 実はGASで隠されたフォントを有効化することで、Google FontsにあるフォントをGoogle Docsで利用できます！！ もちろん、ドキュメント以外にもスライド・スプレッドシート等で使用可能です。 さらに、GASに
{{retired.name}} fonts are being removed from Adobe Fonts on {{retired.retirement_date}}; {{message.actionLabel}}
「Web フォント」を使って OS 依存しない日本語対応の等幅フォント Noto Sans Mono CJK JP を適用する - Corredor
最近の Windows と Mac は、「游ゴシック体」という同一のサンセリフ・フォントを標準搭載するようになった。メイリオとヒラギノ、MS P ゴシックと Osaka のように、OS ごとに標準フォントが異なり、ウェブサイトの見栄えが OS によって異なってしまう問題を最小限にできるようになってきた。游ゴシック体の適用方法については以前から数回記事を書いてきた。 neos21.hatenablog.com neos21.hatenablog.com ↑コッチで紹介しているやり方の方が良い。 一方、このサイトは技術ブログであり、コードを掲載する機会も多いので、等幅フォントについても気を使う。コード内のコメントには日本語を使うので、日本語文字を有する等幅フォントで、OS 間で差異がない (少ない) モノをずっと探してきた。残念ながら、Windows は MS ゴシックくらいしかなく、Mac
Inter × Noto Sans JP は何がすごいか
Noto Sans JapaneseとInterは、ともにGoogle Fontsで人気のWebフォントです。 PCロールの表示にも採用しています。（閲覧環境により適切に指定されない場合があります。） これらがなぜ多くの人々に利用されているのか、紹介します。 これらのフォントを愛用するきっかけになれば幸いです。 どんなフォント？ Noto Sans Japanese Noto Sans JapaneseはGoogleが開発しているフォントです。 "Noto"はラテン語の"noto"（書く、印をつける、メモする）や、"no tofu（豆腐）"に由来しています。 ちなみに豆腐とは□のような文字化けです。 https://fonts.google.com/noto/specimen/Noto+Sans+JP InterはコンピュータのUIをはじめ、様々な場面で使用されている英文フォントです。 h
こんにちは！ワタナベです。 大分暑くなってきましたね…！我が家では扇風機がフル稼働しております(笑) 今回は「Notoフォント」について書いていきます！ Notoフォントとは NotoはGoogleによって開発されたオープンソースのフォントファミリー。 通常「フォントファミリー」は同一書体の複数ウェイトのセットを指すが、Notoでは広範な言語を包括する意味で用いている。 引用：Wikipedia ゴシック体で「Noto Sans」、明朝体で「Noto Serif」がありますね。 それぞれWebフォントとして使う事もできます。
この記事では Webフォント「Noto sans JP」をサイトに設定して公開するまでの、全ての手順を画像付きで解説します。 CDN経由での導入がメインですが、ダウンロードして使う方法も補足で記載します。 ここからイントロ文章を挟みますが すぐに手順がしりたい！ っという方は 読み飛ばして、事項の「主な手順」から確認してください。 ウェブサイトを制作する上で、どうしても頭を悩ませるのが「Font（フォント）」の問題。 OS（MacやWindowsなど）によって、フォントがかわりデザインがしょぼくなる、、 可読性が悪くなる、、 デザインカンプと違いませんか？とクライアントに言われる事も、、 フォントを統一したいが 日本語のwebフォントは重い、遅い。 英語と比べて ひらがな、カタカナ、漢字、etc、、、 文字数が圧倒的に多くファイルサイズは何倍にもなります。 そこで、従来はサブセット化（よく
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM製高品位フォント「IBM Plex」がv6.0.0に ～日本語フォントも利用可能／Googleの「Noto Sans CJK JP」やAdobeの「源ノ角ゴシック」に飽き足らない人に新たな選択肢
【WEBフォント】Noto Sans系日本語フォントは結局どれを使えばいいのか検証してみる | oku-log
Noto Sans JPを使うための手順。
【サイト高速化!】Noto Sansを軽量化してWEBサイトに使う方法 | SEO対策なら株式会社ペコプラ
とりあえずNoto Sans。は、やめませんか？という話｜tomono(UI/UX Designer)
Noto Sans CJK JPが見つからない｜25728121
Noto Sans CJK JP | Adobe Fonts
「Noto Sans(Serif) 〇〇」なんとなく使っていませんか？
Webフォント｜Noto Sans JPをウェブサイトに設定する全手順
qiita.com/aktsmm
search.app
mecfs.ncnp.go.jp
www.tenkouji.jp
docs.google.com
www.tokyo-sports.co.jp