Web サイトに使われているフォントが気になることありませんか？僕はあります。そんな時に何のフォントが使われているか調べる方法です。

Fonts Ninja

今回は Chrome 拡張機能である Fonts Ninja を使用します。

これは今回ように Web サイトに使われている Web フォントを知りたい時に活用できます。

機能はフォント・タイポグラフィ情報の取得と試し打ちの2つあります。

情報の取得

拡張機能をインストールし、追加されたアイコンをクリックすると、そのページで使われているフォントが一覧で表示されます。

さらに、マウスを特定の文字列にもっていくと、その箇所で使われているフォントやサイズ、色、行間などタイポグラフィ情報が表示されます。

試し打ち

取得した Web フォントを試し打ち（試し書き）することもできます。

表示された、フォント一覧の部分をクリックすると、そのまま文字をタイプすることができます。

欠点

この Fonts Ninja を使っても、全てのフォントが正確に表示されるわけではないようです。

CSS 以外からも情報を取ってきているようですが、限界があります。あくまで参考程度に使うと良いのかもしれません。

おわりに

海外の企業のサイトとかだと、オリジナルの書体とか作っていて見るのも楽しいですね。日本でもこれぐらい自由になれば楽しいのに。

僕はブラウザのブックマークバーをほとんどアイコンだけにしているのですが、たまに見辛く感じます。そこで仕切りを作って見やすくしようということです。

ブックマークバー

何も設定しないとブックマークバーにはファビコンとタイトルが表示されます。

ただ、ブックマークの登録の際にタイトルを削除するとファビコンだけを表示することができます。一例として普段僕が使用しているブックマークバーの一部がこちらです。

ただ、これだとサービスのアイコンがだらだらと並んで、少し見辛いです。そこで区切って見やすくしてみましょう。

仕切り用サイト

仕切りのアイコンを表示するだけのページを用意しました。見本はこちらです。

このような感じで、例えばサービスの種類ごとにまとめて置くことができます。

リンク一覧です。

• 黒の線

• グレーの線

• 白の線

• 黒のスラッシュ

• グレーのスラッシュ

• 白のスラッシュ

• 黒の四角

• グレーの四角

• 白の四角

登録方法は、サイトにアクセスし、ブックマークバーに登録します。その際にタイトルは空欄にしておきましょう。あとは場所を移動させるだけです。

おわりに

ブックマークバーをアイコンだけにしてる人には便利だと思うので、是非使ってください。他のマーク / 色がよかったら言ってくれれば追加します。

前回はハードウェア編だったので今回は好きなソフトウェアです！

ちなみに、パソコンを新しくセットアップするときにインストールするソフトの一覧はこちらにあるので、今回登場するのはほとんどこのリストの中のものになります。

好きなものリスト

エンジニアリング

iTerm2

ターミナルにはiTerm2を使ってます。最初はなんか他の人が使ってたからぐらいの理由で使い始めたんですが、設定など自分好みにしたりして、なんだかんだ気に入って使ってます。

iTerm2じゃないといけない絶対的な理由はない気がしますが、好きですね。

Sublime Text

かれこれ5年以上使っていて、ライセンスも購入しました。

すごく気に入っていて、ターミナル上で他のエディタを開くコマンドをエイリアスでSublimeに置き換えるようにしてます。.zshrcにはこんなのalias vim="subl"がずらっと並んでます。バカですね。

こんなに好きなSublime Textですが、実は最近VS Codeがなんか良さそうで、少し気になっているので、そのうち浮気してしまうかもしれません。

ブラウザ

Vivaldi

デザインを比較的自由に変えられたり、メモ機能があったり、ページ全体のスクショがあったり、パネルがあったりと、見た目も機能も充実していて好きです。

特に気に入ってる機能としてはタブスタックとタイリングですね。複数のタブを1つのグループとしてまとめたり、並列して見れる機能です。

Google Chrome

久しぶりにAndroid端末（Pixel 3a）を買ってGoogleの技術に染まってみようと思い、2年ぶりぐらいにPCでもChromeを使ってみたら、色々進化していてかなり使いやすくなってました。

標準のダークテーマであったり、設定画面がいい感じでまた使っても良いかもと思えました。初めてまともにブラウザを使い始めたのはChromeからなので、それもあってやっぱり好きです。

デザインツール

Adobe Illustrator

パワポが嫌いなのでプレゼン資料もイラレで作り、このブログも含め、僕の作りサイトはイラレで作られた図であふれています。もうイラレがないと何もできない気がするってぐらい活用してます。

あと、新しいフォントを入れたときはだいたいイラレでいじって遊んだりしています。

Sketch

UI/UXデザインをする機会は少ないですが、好きです。

なので使う機会も少ないですけど、好きです。

そこまで使わないけど、なんか好き。そんなソフトがあっても良いでしょう。

おわりに

ハードウェアに続いてソフトウェアについて語ってきましたが、次はおそらく最後？となるフォント編をお届けしたいと思います笑。