明朝体や縦組みでWebサイトを「和風デザイン」に！

Webサイトは、基本的にゴシック系のデバイスフォントを使うことが多いですが、お客様の業種によっては「和風デザイン」にするため、h1、h2などの見出しに明朝体や縦書き文字を使うことがあります。
まずはWEBデザインで明朝体を扱う３つの方法を、コーダー目線でメリット、デメリットを挙げて紹介します。

1. 画像で作成する

WEBサイトをデザインする段階で、デザイナーが文字を装飾加工しながら見出しを配置する場合は、画像で制作する方法が考えられます。

メリット

• 文字をデザインの一部として配置できる
• デバイスやブラウザによる依存がないので、誰もが同じ形、デザインで表示できる
• 文章の改行位置が揃えられる
• 特殊な形のフォント（勘亭流や筆文字など）が使える

デメリット

• 画像を切り出さなければならない。文字修正や更新が発生すると、もう一度新しい画像を作らなければならないので手間がかかる
• レスポンシブ対応の場合、文字の大きさや文章の長さを考え、スマホ用に別画像を作成する必要がある
• SEO効果が弱い
• 動的な更新には適さない

デバイスフォントを使う

更新頻度の高いサイトの場合は、ユーザー側のPCにインストールされたフォントを表示させる、この方法が一般的になります。

メリット

• データが軽く読み込みが早い
• 文言の修正や更新がしやすい
• 動的に扱える
• 簡単なhtmlの知識でお客様側でも更新を行える

デメリット

• ユーザーのPC内フォントに依存するため、制作側とユーザーが同じ見え方をしているとは限らない（文中の改行位置や文字詰めなど）
• MacやWindows、タブレットやスマートフォンなど各デバイス、ブラウザごとのフォントの違いで、見え方や印象が異なる
• 使用できる書体が限られているためデザイン的な特徴が出しにくい

以前はデバイスフォントの明朝体は見づらく古臭い印象が強くなるため、あまり使われませんでした。しかしcssで文字にアンチエイリアスをかけることにより、Windowsでもかなりデザイン的に扱えるようになり、使用サイトも多くなってきました。

下記CSSの記述で文字にアンチエイリアスをかけることができます。

h2{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1, 1.01);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(1, 1.01);
    -ms-transform-origin: 0 0;
    -ms-transform: scale(1, 1.02);
    -o-transform-origin: 0 0;
    -o-transform: scale(1, 1.01);
}

３. Webフォントを使う

デバイスフォントと同じ様に用いられますが、cssにフォントデータ読み込んで使う方法です。Google Webフォント（Noto Serif Japanese）やGoogle Fonts + 日本語 早期アクセス、 Adobe 源ノ明朝などの無料のWebフォントの出現によりかなり導入しやすくなってきました。
Noto Serif Japanese
Google Fonts + 日本語 早期アクセス
Adobe 源ノ明朝

メリット

• 文言の修正や更新がしやすい
• 動的に扱える
• ユーザーの環境に左右されず、見え方の差が少ない
• 様々なフォントを使用できるため、デザイン的に特徴を出せる
• SEO対策になる
• htmlの簡単な知識でお客様側でも更新を行える

デメリット

• 書体によってはデータが重くなり、初期読み込みに時間がかかる
• 書体によっては使用料が発生する

こちらの記事も参考に
無料日本語WEBフォント。その設定方法とライセンスに注意！

明朝体をサイトで扱う３つの方法を簡単に取り上げましたが、どの方法にもメリット、デメリットがあります。
最近はWebフォントを使う傾向になってきましたが、最初の読み込み時間を考えると完璧というわけではありません。サーバの状況やサイトのデザイン、クライアントの更新状況に配慮し、どの方法を使うのが一番良いか、その時々で検討する必要があります。

テキストの縦組み

そして、もう一点「和風デザイン」を採用するうえで「縦組み」という方法があります。こちらも少しだけ触れておきましょう。

日本語には左から右への「横組み」と、書籍や新聞などの一般印刷物での上から下へ、そして左側へ改行をしていく「縦組み」の二つの記述方法があります。書道など、筆で書く書体は上から下へと流れるようで、とても美しく感じられるので、和風デザインで縦組みを取り入れたいと思うこともあるでしょう。Webサイトの縦組みもデバイスフォントやWebフォントを使い、cssを駆使することである程度は表現できるようになってきました。
デザインやSEOの点から「タイトルや見出しぐらいはテキストで縦組みにしたい」と思うことがあるのではないでしょうか。

下記CSSの記述で縦組みが可能になります

h2{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

まとめ

数多くのWebサイトが存在する中で、新しい技術を使い、いかにお客様の個性を表現し印象に残るデザインにするかはWebデザイナーの課題の一つと言えます。「和風デザイン」に明朝体や縦組みを取り入れることで、より日本的な幅広い表現の演出ができるようになってきています。メリットを生かし、ステキなサイトをデザインしていきたいものです。

弊社でデザイン、コーディングを行った、明朝体＆縦組みを取り入れたWEBサイトはこちら
株式会社有田屋様
株式会社みまつ食品様

WEBプログラマー ／ H.C