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

Post on:2015年5月25日

Honokaの特徴

Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBootstrapを使って作成されたサイトであればCSSファイルを書き換えるだけで簡単に利用できます。

Bootstrapは残念なことに、フォント指定やサイズ指定が日本語に最適化されているとは言えません。Honokaでは文章や見出しをはじめ、テキストを使用する箇所に対してさまざまなアプローチを行い、より美しく日本語を表示させています。

Bootstrapのデフォルトとどのように変わるか見てみましょう。

Win7+IE10での日本語表示：Bootstrap

Win7+IE10での日本語表示：Honoka

OS X+Chromeでの日本語表示：Bootstrap

OS X+Chromeでの日本語表示：Honoka

Honokaのデモ

デモページでは、Bootstapで用意されているさまざまなコンポーネントで日本語がどのように表示されるか確認できます。

Honoka デモページ

Honoka デモページ：見出しや文章

Honoka デモページ：リストやパネル

他にもナビゲーションやボタンなども日本語表示の最適化が行われています。

Honokaのアプローチ -Bootstrapでの日本語表示最適化

日本語表示の最適化にあたり、作者様からコメントをいただきました。

フォント指定については「本文」と「見出しやボタン」の部分で若干異なっています。本文については可読性の高い游ゴシックを優先的に指定しているのに対し，見出しやinput/buttonなどの部分には游ゴシックをあえて指定せず，視認性の高いメイリオやヒラギノ角ゴを使用するなど差別化を行っています。

本文と見出しは、下記のようにスタイルが定義されています。

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴ
シック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
"メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.42857;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラ
ギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
sans-serif;
  font-weight: 300;
  line-height: 1.2;
}

また、フォントの指定以外にも工夫されています。