デザイン

和風サイトにぴったりな明朝体Webフォント縦書きサンプル[全10種]

スポンサーリンク

本日は、無料で使える明朝体フォントのうち、Webで使いやすいフォントについて縦書きのサンプルを作成してみたので、記事にしてみます。

ちょっとお仕事で、上品な感じでLPをデザインしていたのですが、縦書きで配置したい箇所がありまして。どの書体を採用しようか考えていたのですが、候補の書体の縦書きサンプルっていうのがなかなか見当たらず、せっかくだから作って記事にしてみよう、と思いました。

和風のサイトデザイン=明朝体は定番

デザインの基礎などを取り扱うサイトなどを見ると、明朝体というのは「上品・女性的・繊細」といったイメージとして受け止められることが多いようです。

実際、女性向けの化粧品やサービスなどの広告バナーなどは、明朝体を使用している率が高いように思えます(10代向け等になると少し違うような気もしますが)。

また、明朝体は特に和風のサイトに多用されています。

ゴシック体を使用するより、和の雰囲気を出しやすい為、たとえば老舗旅館ですとか和食料理店、呉服屋さんなど、和風の雰囲気で作りたい場合には見出しやキャッチフレーズだけにとどまらず、本文も明朝体といったサイトデザインを多く見かけることが出来ます。
和風のデザイン=明朝体、というのは定番の組み合わせといえるでしょう。

縦書きの確認について

和風のデザイン=明朝体は定番ですが、もうひとつ和風のデザインにぴったりなのが縦書きです。

Webの世界は基本が横書きですが、やはり日本語は縦書きでこそ美しい、という見方もやはり捨てきれません。本文は横書きで、キャッチコピーなどを縦書きで表示したい、というケースは、決して少なくはないと思います。

が、Webの世界の基本が横書きである以上、フォントの確認をする際もほぼ横書きになります。

Google Fontsにて表示確認をしている画面

縦書きでざーっとでも見比べたいなぁ、と思いましたので、今回ちょっと制作してみました。

無料&Webで使える明朝体フォント

今回は、あらかじめパソコンに入っている2種類の明朝体フォントと、Google fontsの「Serif」「日本語対応」の中からいくつかを選んで縦書き画像を作成してみました。

Browse Fonts - Google Fonts
Makingthewebmorebeautiful,fast,andopenthroughgreattypography

フォント名の表記については、Google fontsで公開されている分はサイトに準拠しています。

ヒラギノ明朝体

游明朝

Noto Serif

Kaisei Tokumin

Kaisei Decol

Kaisei Opti

Kaisei HarunoUmi

Shippori Mincho

Shippori Mincho B1

Hina Mincho

まとめ

今回は、Mac用のヒラギノ明朝体、Windows用の游明朝、Google FontsにあるSerifのフォントの中から和風サイトデザインに使えそうな感じのフォントをチョイスして、並べてみました。

採用についてはサイトデザインにもよるのでこれが一番!ということは言えませんが、何かの参考になれば……と思います。

個人的な好みでは、しっぽり明朝が好きです。
もしくは、無料のWebフォントではありませんがモリサワのTypeSquareで使用出来る「しまなみ」が好きですね。明朝体の中では。

とりあえず、自分のためにまとめた、という側面は無きにしもあらずですが、縦書きサンプル、何かのお役に立てれば幸いです。

コメント

タイトルとURLをコピーしました