フォント逍遥

2021/04/292021/05/01

このウェブサイトを定期的に見ている人はお気付きかもしれませんが……否、そんな人はもはやいないと思うので、わたしだけしか気付いていないと思うのですが、去年からフォントをはじめタイポグラフィ周りがちょくちょく変わっています。今年に入ってからまた調整し直している中で、フォントの選定がまー難しくもあり楽しくもありで、ここ数日でようやく落ち着いてきたというところです。

今のテンプレートにしてから行間とか文字詰めは何度か調整していたのですが、1年前ぐらいからほかのブログとかnoteの記事なんかを読むにつけ、自分とこの（ただでさえ量が多い）文章が読みにくく感じることが多かったということと、最近PowerPoint/Keynoteスライドとか動画なんかを作成するときにフォントについて考えることもあったりして、このタイミングで見直し。

もともとこのサイトではフォントにはほとんど頓着していなくて、この17年間でマジメに検討したのも1、2回ぐらいの話です。まあ、ちゃんと自分でデザインしてサイトを作っていた10数年前はフォントの選択肢なんて大してなかったので、そこから認識がアップデートされてなかったということですね。ＭＳ　ゴシックは好きでなかったので、メイリオが使えるようになったときはさすがに飛びつきましたが、その後はとりあえずメイリオが表示されていればいいや、ぐらいのもので。

とりあえず、とは言いつつ、個人的にはメイリオをけっこう評価していたので、メイリオでもいいっちゃいいのですが、iOSで見たときに表示されるヒラギノ角ゴとの印象の差があるのはちょっと感じていたのと、親しみやすいフォントゆえの、いかにもブログ！という雰囲気を変えてみようかなと思い。

ちなみに下に書く設定はWindows環境を念頭に置いたもので、iOSやmacOS環境についてはそれこそ基本的にヒラギノフォントで表示されればいいや、です。空気とか水みたいなフォントで、言ってしまえば無難な選択肢ですが、Webで表示されるフォントに必要なのは結局そこですよね。無難は普遍です。

本文: 游ゴシック / Open Sans

和文フォントは去年の夏から游ゴシックになっています。比較したのはBIZ UDゴシックとかNoto Sansですが、10年以上前から自分が思っていることとして、モダンな和文フォントは線がしっかりして可読性が高い反面、ブログ記事で見ると文字そのものの主張がやや強くなりがちというのがあって、わたしがいつも書いてる記事は段落ひとつにつき300-400文字はあるので、文字が羅列されていればされているだけなんだかコントラストが強くてギラギラして見えてしまうわけですね。

まあ、特にNoto Sansあたりは綺麗に見せているウェブサイトは非常に多いので、このサイトの内容が悪いだけなのですが、その点で言えば游ゴシックは、読みやすさと美しさを両立しつつ線がシャープで字面はコンパクトという、上記のような懸念を解消できる選択肢でした。これがWindows標準で使えるというのはありがたい話です。ただ、ウェイトがRegularだと逆に細すぎるので、font-weightを500に指定してMediumを表示させています。

そういうわけで、しばらくWindows向けには游ゴシックのみを指定していたのですが、英数字がやや縦に長いのが気になっていて、いくつか欧文フォントを試した結果、Open Sansになりました。もともとこのテンプレートでは見出しに使っていたのですが、曲線にモダンな可愛げがあって、かつ全体的にシャープなので、游ゴシックと雰囲気は通じていると感じます。iOS環境で見た場合のヒラギノとの相性も悪くなかったので、今年の初めぐらいからはこの組み合わせになっています。わたしが飽きるかWindowsのフォント事情がまた変わるまではこれでいくということで。

見出し・ナビゲーション: BIZ UDPゴシック / Open Sans

記事タイトルとか、たまーに使う章見出しにはBIZ UDPゴシックを使うことにしました。これも今年の初めから。ぱっと見モリサワっぽくすっきりしていて、非常に読みやすいUDフォントです（実際はタイプバンクフォントが元になっているようですが）。ただ、英数字の字面がかなり大きいので、これもOpen Sansと組み合わせる形にしています。

それから、下部のタグクラウドとかのナビゲーション欄にもBIZ UDPゴシックを使っています。これこそUDフォントの本来の使い方のような気もしますが、小さいフォントサイズでも可読性が全然落ちません。ちなみにタグクラウドとカテゴリー欄だけ英数字もBIZ UDPゴシックを使っています。

引用文: 游明朝

たまーに、というか稀に使う引用文は、本文からの流れとして游明朝。こういう具合です。

AKB48 Team8茨城県代表 TeamA兼任キャプテンの岡部麟です。

そもそも游ゴシックが游明朝と組み合わせて使うことを念頭に置いて作られているらしいので、使わない手がない。個人的に游明朝という書体はけっこう好きで、実を言えばこっちを本文に使いたいというのもあったりしたのですが、さすがに文章の雰囲気が違いすぎました。

あと、この部分に関しては付属する従属欧文フォント以上にマッチするセリフフォントがまったく見つけられず、混植せずそのまま使用しています。完成度が高いなあと。ヒラギノ明朝も同様。

サイトタイトル: Montserrat

左上のサイトタイトルは今までOpen Sansだったのですが、Montserratの細いウェイトのものを使っています。Open Sans以上にチャーミングなフォントなので、もっとうまく使いたいところではあります。

というふうに、去年の夏ぐらいから断続的に色んなフォントを試しに試し続けてきた結果、そろそろ今の時点での納得できる設定が出来上がってきたというところです。奥が深すぎて沼にも程がありましたが、だいぶ検討はしたので、よほどのことがない限りこれで戦っていくんじゃないでしょうか。自分でAdobe Fontsとか、FONTPLUSとか使い始めない限りは（ない）。あとはmacOSでの見え方が自分で確認できてないので、どこかで見ておきたいとは思っています。

昔話

昔はフォントに頓着していなかったと上に書いてますが、ごく初期はむしろまあまあ拘っていたんですよね。というのも、互換性とか何も考えていなかったからなわけですが。

覚えているのが、ごくごく初期の数ヶ月間、サイトタイトルのフォントにSmall Fontsというドットフォントを使っていたこと。当時はゲームの記事とかが置いてあったので、ゲームっぽいポップさを出したかったのでしょう。ちなみに、この時はスタイルシートを使っていないのでfont要素で直指定。その後何ヶ月かは、当時IE6だけで使えた（！）filter: Alphaプロパティでタイトルに半透明グラデをかけたり（笑）、なぜかスラヴセリフ体っぽくしたり（たぶんCourier New）、まあ遊んでいました。

ここまではサイト開設半年ぐらいの話で、Photoshop Elementsを買ったことをきっかけに妙なフォントをHTMLで指定して使うのをやめて、画像にアンチエイリアスをかけた文字を埋め込んで表示させることを覚えるわけです。これも今思えばそんなことやってたなあという感じ。とはいえ、ほかに書体を持っていたわけでもないので、最初は基本Arialだったような気がしますが、当時のバナーとか確認すると、後になるにつれVerdanaとかTahomaも使っていたみたい。

ちなみに本文は2009年頃までずっとMS UI Gothicでした。縦に長くて文字が詰まっている感じがよかったんですかねえ。サイズは当時の流行に漏れず、8ptとかそのくらい。ビットマップフォントは中途半端なサイズにするとドットの粗が目立ってしまうので、文字をあえて小さくして綺麗なふうに見せていたという。どうにかこうにかはしていましたけど、当時のWindowsのフォント事情はこんなものでした。

2010年にWordPressに移行してからは本文フォントをメイリオにしたぐらいだと思います。もうこのあたりでウェブデザインということをやめてしまったわけですね。ただ、まとまった文章を書くようになるのと同時に全体の可読性を意識するようになって、ちょっと読みにくいなと思ったら文字サイズと行間、文字詰めを調整したりはしていました。このあたりの調整は10年ちょっとの間にそれなりの回数やりつつ、この記事冒頭に続く。

じつはWPサイトになる少し前にサイトデザインを新しくしようとしたことがあって、このハイフンがないサイトタイトルの画像を作ったのですが、結局お蔵入りにしてしまったんですよね。今回変えたサイトタイトルの表記はここから来ています。12年越しの実現（小ネタですらない）。

フロントページ変更

2016/05/182019/01/27

フロントページに記事全文が表示されるように変更しました。

去年から使ってるDailyというテンプレートは1カラムでウィジェットがごちゃごちゃしたりしてないし、幅も広くて写真も十分な大きさで見れるしで概ね満足していたんだけれど、フロントページとアーカイブページにはアイキャッチと抜粋しか載せてなかったのは妥協してた点。たぶんこのテンプレートはフォトグラファーのポートフォリオとかに使えるようになってるので、そういう使い方ならなんの問題もないんだけど、ここは雑記がメインだから悩ましいところだった。サイトをWPに移行にしてから5年ほどずっとフロントページに記事全文を置いてたし、そのまた前のHTML直打ち日記のときも1か月分ぐらいはずらっと見られるようにしてたので、若干拘ってきたところはあったのだが、たまにはちょっと試してみるかということで。最初は割といいじゃんと思ってました。パーマリンクで飛ばないと記事が読めないから記事ごとのアクセス数もわかるし。

ただ、その間にいろんなブログとか見て、やっぱり元のざーっと記事全文を流すスタイルのがいいなあと。記事の中身からしてそんな勿体ぶるようなもんを書いているわけでもないし。というか、勿体ぶることによって勿体ぶるようなもんを書くことを誘導されているような気がするわけです。それがちょっとしんどい。気楽に日記とかぱぱっと書けない感じ。まぁ日記らしい日記なんてその前から大して書かなくなってるのだが、たまに昔の記事見返すとけっこう自由に書いてるなあと思うし、そういうものへの回帰も含めて。あとはWPにしてサーバも移転してからというものの重くてページ遷移がもっさりしてるので、わざわざ記事を見るためにもう一つリンク飛ばないといけないというのが単純に億劫というのもある。

最初は1カラムで別のを探してたんだけど、これがなかなかない。というわけで結局自前でPHPとスタイルシート調整。PHPは相変わらず自前でコンポーズできる気は全くしないが、どの関数がページの中の何を指してるのかぐらいわかればちょいちょいカスタマイズはできる。あとはスタイルシートで記事ページと同じ体裁にして完成。1ページに表示する記事の数も3件に戻したけど、今のままだと（何千字も書いてるライブレポートが並んでるおかげで）ページが縦に長すぎて下のウィジェットに辿り着きにくいので1件ずつでもいい気もする。ただそうなると結局またページ遷移が多いのがなあ。ナビゲーションに関しては改善の余地あり。あとは横幅とフォントも気が向いたら調整します。

先日FlickrのExplore（本日の写真ベスト500）になぜか選ばれた一枚。

Dailyテンプレート

2015/08/282019/01/27

またなんの前触れもなくデザインが変わっている。

前にテンプレートを入れ替えたのが2年前。前のを永久に使い続けてもいい予定だったので2年しか使ってないのが驚きです。今まで使っていたCodium Extendというテンプレートは、カスタマイズを加えまくったおかげで自分の中ではほぼ完璧なものになっていたのですが、使い初めた当初から思っていたこととしてサイドバーが微妙に広いのだけが難点でした。ただどうにも、幅をちょっと調節してもデフォルト以上にベストなバランスが掴めない。よく出来たテンプレートはよく出来てる・・・。結局2年間この部分は変えてなかったのですが、写真とか何枚も載せてるとやっぱりポストエリアが狭苦しく感じてしまう。そういうわけで今よりも気持ち広めな2カラムテンプレートを探していたら、Dailyというテンプレートが1カラムなのになぜか目に留まり、一瞬試してみると予想外にしっくりきたのでそのまま採用してしまった感じです。

ループに記事全体ではなく抜粋を載せるスタイルは初めてだし、アイキャッチ画像を使うのも初めてだし、ウィジェットをフッターに回して1カラムのデザインにしたのはたぶん10年ぶりくらい。フォント周りやthe_excerpt()関数の挙動を調整して気になるところを潰していくと、とりあえず違和感なく使えるようになった。当初のポストエリアの拡張という目的でいえば成功じゃないでしょうか。やっぱり写真が大きく見えるのはいいなあ。アイキャッチ画像が印象的に見えるのが最初に試してみて良かったところでもあります。当然ながらポストエリアが中心に来ているのも読みやすい。全体の幅自体はもっと広くても悪くないのですが、フォントの大きさと行間の幅は維持したいので、文字とのバランスを考えるとこのぐらいがちょうどいいのでは。記事はパーマリンク開かずにループ（index）で読んでくださいというスタイルは今まで少し拘ってきたところがあったので、そこはやや妥協になりますが、ウィジェットも整理して若干ページも軽くなったはずだししばらくこれで行ってみます。

CSS3で仕様が新しくなっていて、ちょっと弄くるだけでも昔取った杵柄では済まなくなっています。PHPもわけわかんないし、自前でテンプレート作りたいとか言ってたけどちょっと無理だわ・・・。