こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば?」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが(良くない)実際にずれていて、ではなぜそんなことになっちゃっているのか
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で利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
要約 NUROひかりのHGWはデフォルトでIPv6ファイアウオール機能が無効 または 未搭載 の可能性があるので、そのまま使うと家庭内LANがインターネットから見えちゃうからちゃんと設定か対策して使おうぜって話。 この資料を対象とする人 何も考えずに速度が速いだけでNURO光を使っている、「とりあえず使っている」人向けです。 ネットワークやセキュリティを理解していて、自分のルータでセキュリティを維持しつつ使える!って人には全く関係ない話なので気にしなくていいです。読まなくていいです。 IPv6 と IPv4 のセキュリティ ここでは IPv6 と IPv4 のアドレスが割り当てられたPCやスマホとかがインターネットからどう見えるのか?について説明します IPv4 の場合 一般的にIPv4アドレスは1契約につき1アドレスが付与され、それをルータ呼ばれる機器を利用し、家庭内で共有することで複数
ISUCON 12 予選にいつもの id:utgwkk, id:wass80 と :old_noto_innocent: チームで参戦した*1。 結果は 50696 点で本選出場! ここ数回と同様、自分はインフラと分析・観測を担当していた。ただ、毎年似たようなことをやっていてあまり貢献できていないなあという課題感があったので、今回はログやメトリクスの分析環境をしっかり作ることにした。目標は毎回ベンチ終了のたびにコマンドを叩くのをやめること! App 周りについてはチームメイトの記事を参照。 blog.utgw.net memo.wass80.xyz Elastic Stack でアクセスログ・スローログ可視化 ダッシュボード 最高便利 Google Cloud でトレーシング & プロファイリング Trace Profiler やってよかった 構築編 Elasticsaerch + Kib
「Noto Sans」とは GoogleがAdobeと共同開発したフォントファミリー。 webフォントで日本語が使えるメリットは大きいので積極的に使っていきたいところです。 しかし、「Noto Sans」はとにかく種類が多い… ほぼ同じ内容なのにGoogleとAdobeで名称が異なり、さらにその中でも似たようなフォント名で分かれているので非常にややこしいです。 結局どれを使えば良いのか。 今回はwebフォントとして使用をする前提でそれぞれの違いと用途による使い分けを検証してみたいと思います。 どれだけの種類があるのか ざっくり「Noto Sans」=「Source Han Sans」=「源の角ゴシック」ではあるのですが、Google側ではNoto Sans、Adobe側では源ノ角ゴシック(Source Han Sans)という名称でリリースされています。 さらに細かく分けると以下のようにな
今年も id:nonylene id:wass80 と出場しました。最終スコアは50,696点で予選突破できました。分析基盤 (Kibanaやプロファイラ) に流れてきたデータを見つつ作戦を立てて実装する、という流れがうまくはまって順調にチューニングを進められたのがよかったと思います。 最終的なサーバー構成 isuports-1 App (Go) nginx isuports-2 DB (MySQL, player_scoreのみ) isuports-3 DB (MySQL) やったこと リポジトリはこちらです。 github.com 分析基盤まわりの話を id:nonylene が書いてくれたので、こちらもあわせてどうぞ。 nonylene.hatenablog.jp id:wass80 視点の記事もあるので、こちらもあわせてどうぞ。 memo.wass80.xyz テナントごとのDBを
最近発見したんですけども、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フォルダにフォントフ
この記事はAdobe XD アドベントカレンダー 2020 の2日目の記事です。 ときどき相談をうけるのですが、Adobe XDでWebサイトやサービスをデザインするときにどのフォントを使っていますか? 最近では商用利用できる日本語フォントの種類はかなり増えました。一方Adobe XDは、Adobe FontからインストールできるフォントであればCreative Cloudとしての性質で自動的にインストールしてくれますし、USBで繋いでないデバイスプレビューでも自動的にダウンロードして表示してくれます。 今回は定番かつ安定的に使用できる二つのフォントと利用するときに注意が必要なフォントを二つ解説しました。 [おすすめ/名前注意]源ノ角ゴシック次の二つの条件のうち片方が揃ったらこれを選ぶのがおすすめ。 ・MacとWindowsの人が混ざっている ・スタータープランの人が参加している源ノ角ゴシ
「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を読んで高速化できたというレビューの中に、Webフォントの「Noto Sans Japaneseが重いようなので、サイトから外してみました」と書かれていたので、そのフォローとしてこのnoteを書きました。 Google Fontsから読み込む際の記述を変えれば、速くなるかも知れません。 Noto Sans Japaneseで表示が遅くなる?書籍を読んで、実際に高速化してみたという記事の中に… WEBフォントの「Noto Sans Japanese」って読み込むのめちゃくそ重いんですね という声がありました。 かつては遅かったかも…?かつて、Google FontsからWebフォントが読み込まれるまでの間は、ページ上にはそのフォントを利用している文字(文章)が表示されませんでした。 文字が書かれている部分が真っ白な状態のままフ
金沢 曇り、雪の予報ですが、降ってません。 自家製酵母を使ったパンを販売するお店で、じっくりゆっくり発酵させたパン種に、その時々の旬の素材を合わせ、50種類以上あるそうですが、この3品をおいしく頂きました(笑) 【撮影場所 金沢市駅西新町3丁目:2021年01月31日 DSC-RX100M3】 【ノトヒバカラベーカリーHP引用】NOTOHIBAKARAベーカリーの店名は、能登半島固有の木「能登ヒバ」+「~から」+「ベーカリー」から来ています。「能登ヒバ」にこだわったのは、“豊かな空間で本当に美味しいものを”という思いから。かつて、北前船や輪島塗などで親しまれきた「能登ヒバ」を店内のいたるところに使い、まるで明るい森の中のような気持ちいい空間を再現しています。深呼吸したくなるような気持ちよさを、ぜひとも感じていただけたらうれしいです。 ランキング参加中でもう一押しお願いします にほんブログ
フォントを軽量化 使うweightを3つに絞ったとはいえ、1ファイル16~17MB。フォントファイルを軽量化(サブセット化)していきましょう サブセットフォントメーカーをダウンロードします。 https://opentype.jp/subsetfontmk.htm Windows用とMac用が別ですので選んでください。 ダウンロード後、インストールし起動するとこのようなソフトが開きます。 ①作成元フォントファイル 参照から選択できます。今回はNotoSansCJKjp-Regular.otfを例にします。 ②作成後フォントファイル 基本的には元のファイルと同じ名前で良いです。場所は混乱しないように別の場所を指定すると良いでしょう。 ③フォントに格納する文字 第1水準漢字、非漢字文字、アスキー文字をコピペします! 唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍
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フォ
Google Docsは共同編集が非常に便利なツールです。 しかし美しい・きれいなフォントが少ない、と感じたことはありませんか? ググってみると、ブラウザの設定から表示されるフォントを変える方法は出てくるのですが、それだと印刷時やPDF書き出し時に「MSゴシック」などあまり美しくはないフォントになってしまいます... また、源ノ角ゴシックなどの一部のフォントはフォントリストに表示されず、利用できないと思う方もいるかも知れません。 それでM PLUSフォントを使って我慢している方もいると思います(このフォントも綺麗ですが...) みなさんそれで諦めてしまっていませんか?? 実はGASで隠されたフォントを有効化することで、Google FontsにあるフォントをGoogle Docsで利用できます!! もちろん、ドキュメント以外にもスライド・スプレッドシート等で使用可能です。 さらに、GASに
意味が分からない。 「NotoSans JP」と「源ノ角ゴシック」は全く同じフォントだという。 名前からして、かたや英語、かたや日本語で共通点が何ひとつない。 名前が2つあるのに、指すモノは1つ。真実はいつも1つだけど、名前は2つあってもいいのか。混乱しないのか。 そんなのあんまりだと思い、ザッとインターネットをサーフィンしてみたが、ほとんどの人が 「あ、そうなんだ」 と静かに受け止めている。 自分も周りが「よい」と言うのなら流されてしまう没個性的な人間である。 ここで声高に異を叫んでも、何の生産性も向上しない。 しかし、である。名前が違うということは「何か」が違うのだ。 まず、その「何か」について、見ていきたい。 ※手っ取り早く「どの名前のフォントを使用したら良いのか」を知りたい方は下記の目次から「結局、どの名前のフォントを使えばよいの?」から飛び去ってください。 「Noto Sans」
こんにちは櫻井です。 先日、Notoが字詰め(font-feature-settings)効くか検証してほしいと依頼があったので今回はそれを検証していきたいと思います。 早速検証 早速検証していきます。まずはGoogle FontsからNoto Sans JPを拝借してfont-feature-settingsを当てていきましょう。 今回は太さは「font-weight: 400」で字詰めを ・字詰めなし ・halt ・palt ・pkna ・pwid ・hkna ・kern の7つを比較していきます。 全く詰まってないですね。やる気を微塵も感じられないレベルです。Noto Sans JPには字詰めは効かないみたいです。ですがGoogle Fontsには「Noto Sans」はいくつかありました。 ここでひとつ疑問が生じます。字詰めが効かないのはNoto Sans JPだからなのか?それと
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」をチョイスした。決め手は、①多くのウェイトが揃っている、②中国語、韓国語にも対応している、
Ubuntu Weekly Topics Ubuntu 23.04(lunar)の開発 / Notoフォントへの切り替えとglibcのアップデート、Edbuntuの復活への道筋、ROS向けの延長サポート Ubuntu 23.04(lunar)の開発 / Notoフォントへの切り替えとglibcのアップデート, Edbuntuの復活への道筋 Ubuntu 23.04(lunar)では、デスクトップの見た目が少しだけ変わることになりそうです。1月末に投入されたfontconfigの変更にあわせて、NotoフォントがDejaVuよりも優先するように設定されました。これにより、デフォルトではすべての文字がNotoで表示されることになります(もっとも、日本語圏ではこれに類する設定が以前から行われていたので、日本語で使っている限りはそこまで気にするべき変化ではありません)。 これと並行するタイミン
Photo by Alexander Andrews on Unsplash デフォルトでは、 Windows 版の Chrome のフォントはメイリオになっており、大半のサイトはメイリオで表示されます。 しかし、このメイリオ。正直に言ってあまり美しくないと思いませんか? Mac のように綺麗なフォントを使いたいという方もいるでしょう。この記事では、Chrome で表示されるフォントを Mac 並みに美しい Noto Sans に変更する手順を解説します。 綺麗なフォント 一口に綺麗なフォントと言っても色々あります。 その中でも、今回は Google と Adobe が共同開発している、Noto Sans を使用します。 この Noto Sans は非常に高品質なのにもかかわらず、商用・非商用問わずに無料で使えてしまうという優れものです。 今回は、この Noto Sans のダウンロード
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 をはじめ、様々な場面で使用
【目次】◆ご挨拶 ◆プロジェクト立ち上げの経緯 ◆被災状況と復興状況 ◆募集の背景 ◆支援金の使い道 ◆スケジュール ◆リターンについて ◆最後に 【ご挨拶】本ページをご覧いただきありがとうございます。NOTO高農園の高 利充と博子です。 令和6年1月1日に発生しましたこの度の令和6年能登半島地震に際しご心配をいただきまして、誠にありがとうございます。私たちは2000年に脱サラをし能登島で新規就農いたしました。能登島の人の温かさや風景に一目ぼれして移住を決め、料理人の方々とのご縁でレストラン向けの野菜を育て24年が経ちました。 『能登島赤土野菜』とは、能登島の標高の一番高い位置にあり四季のはっきりとした天候の中で育てた野菜です。日中と夜の寒暖差がかなりあるので野菜の味の濃さや甘みにもつながっていると思います。また農園の特徴は畑の土と風と水にあります。赤土という粘土質の土に海から吹くミネラル
With this illustrations pack, you can create your own Notion-style avatar. No design skills are required. There are 190+ items you can mix and match, including hairstyles, eyes, and many facial expressions. You can create more than a million possible combinations. Over 200 customizable items Mix and match hairstyles, eyes, accessories, facial expressions, etc Compatible with Sketch, Figma, SVG, PN
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}}
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く