日本語が綺麗になるBootstrapテーマ「Honoka」をつくった

f:id:windyakin:20150526222351p:plain

報告記事を書いてなかったので書く。

Bootstrapテーマの「Honoka」を作って公開した。コンセプトとしては「日本語環境に特化したBootstrapテーマ」だ。もともとBootstrapは英語圏で作られたものなので，英文を表示するには適していても，日本語の文を表示するには文字サイズや，フォントの指定が足りなかったりする。今までBootstrapを読み込んだ後に別のCSSファイルで日本語フォント指定とかを行っていたけど，面倒になってきたので「最初から指定してやればいいじゃん」ってことでBootstrapテーマを作ることにした。

もともとSANOGRAPHIXさんの「Rin」っていうフロントエンド開発用のプロジェクトテンプレートに触発されて，自分用の「Eli」を作っていたのだが，あれもこれもとやっているうちに，プロジェクト自体があまりにも大きくなりすぎてしまい公開する目処が全く立たなくなってしまった。結構色々とやってたのでこのまま放置し続けるにはもったいないと思い，せめてもとその中に含まれていたBootstrapテーマ部分を切り離して公開したのが「Honoka」である*1。

Honokaの一番の特徴は日本語フォントを指定したことにある。英数字であれば今流行のウェブフォントが使えるが，文字数が多くフォントファイルが大きくなってしまう日本語ではトラフィックから考えてもあまり現実的ではない。なので今回日本語のフォントについてはOSにプリインストールされているフォントを指定した。また，ただ単に日本語フォントを指定するのではなく，部分部分に応じてフォントを使い分けている。簡単に言うと見出しについてはOS Xであれば「ヒラギノ角ゴ」，Windowsであれば「メイリオ」で表示されるが，本文については「游ゴシック」を指定してる。これらのフォントを選択した理由については，昨年末にシス研 Advent Calendarに語っているので暇があれば読んで欲しい。

ウェブを取り巻く日本語フォント環境〜CSSのフォント指定はこうすることにしました〜

sysken.org

読むのが面倒な人のために一言で要約すると，游ゴシックはOS X Mavericks以降もしくはWindows 8以降にプリインストールされているフォントで汎用性が高く注目されているフォントである。しかしその書体には若干明朝体っぽいクセがあるため，可読性は高いが視認性はイマイチだから見出しには使わなかった。

他にも特徴としてナビゲーションバーからBootstrapっぽさをなくすようにしたり*2，カラーパレットを鮮やかにしたり*3と自分好みの変更も行っている。

ウェブサイト自体は土曜日の朝に公開したのだがあまり流入がなかったので，ウェブ製作系のブログに連絡した所「いいですね！」と賛同してもらい，早速記事にしていただいた。

Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka

coliss.com

めっちゃ丁寧に解説されていて感動したのだが，何より驚いたのが拡散され具合。怒涛の勢いで拡散されて，はてなブックマークトップにきてたり，何故か韓国語圏にまで話題になってて「メディアの力ってすげえ」と感じた。

あと１ブコメでドメインのネタ*4について突っ込みがあったのが嬉しい。実はテーマをつくるより先にドメインを取得していた。μ'sネタでなんかドメイン取れないかと探っていたら「k.osaka」で「コウサカ」になるじゃんってことで，osakaドメインの一般受付開始日にネタで取ったもの。しかし使い道がなさすぎて「じゃあ今作っているBootstrapテーマを「Honoka」という名前にして公開しよう」ということになった。トップページにあるキャラクターのシルエットについては，絵の書ける友人に無理を言ってイラストを描いてもらったものをIllustratorでトレースして彩色したものだ。

反響もそれなりにあり，非常に嬉しいので今後はきちんとBootstrapのバージョンアップに追いついてアップデートを進めていきたい。