未経験者でも簡単に綺麗なデザインのWebサイトを作成することができるフレームワーク、Bootstrap。実はBootstrapには、日本語を美しく表示するためのツールがあることをご存知でしょうか。この記事では、美しい日本語を表示する「jpn.css」と「Rin」という2つのツールをご紹介していきたいと思います。Webサイトを作成しようと思っている方は、参考にしていただければ幸いです。

SE

確かに、スタイルによっては日本語だと違和感を覚えるものもありますよね。

PM

そうですね。文字の表示の仕方はサイトの印象を決めるうえでとても重要なので、ぜひ最後まで読んでいってください。

日本語を美しく表示するツール1｜jpn.cssとは

Bootstrapで美しい日本語を表示する1つ目のツールは、「jpn.css」。
日本語だと不格好に見えてしまうスタイルでも、カッコよく、美しく表示することができるツールです。他にも以下の特徴があります。

では、どのくらい美しさが変わるのか、配布サイトで確認してみましょう。
（配布サイト）https://kokushin.github.io/jpn.css/

jpn.cssを無効にすると、文字が横に潰れているため文字間の空白もなく、少し読みづらい印象になっています。
jpn.cssを有効にすると、文字の間に適度な隙間ができ、スッと頭に入ってきやすい表示になっています。

配布サイトを下へスクロールするとデモサイトがあります。いくつかデモファイルがあるので、気になる方は見てみると良いでしょう。

日本語を美しく表示するツール2｜Rinとは

Bootstrapで美しい日本語を表示する2つ目のツールは、「Rin」。
可愛らしい名前が印象的ですね。では、Rinの特徴を見ていきましょう。

では、どのくらい美しく表示されているのでしょうか。同じく配布サイトで確認してみましょう。
（配布サイト）https://rinhoshizo.la/

Rinのテーマを適用すれば、適度に丸みを帯びたフォントで非常に読みやすくなることが分かります。また、フォントと適度な文字間の隙間が、柔らかな印象を与えてるため、手書きでなくても温かみが伝わってくる文章になっていますね。

SE

確かに、ツールを使うとグンっと読みやすさが増していますね。

PM

そうですね。Webサイトの場合、見た目の読みやすさは特に重要ですよ。

Bootstrapで美しい日本語を表示しよう

この記事では、jpn.cssとRinという2つのツールをご紹介していきました。見た目の美しさは、Webサイトの離脱率などにも関わってきます。表示の仕方を変えるだけで印象が大きく変わりますので、ぜひこの機会に利用してみてはいかがでしょうか。