明朝体

基本的な意味と役割

日本語フォントの代表的な分類の一つ。縦と横の線の太さに変化があり、横画の端に「うろこ」と呼ばれる三角の飾りが付くスタイルです。新聞や書籍など長文の紙媒体で読みやすいように発展してきた歴史があり、Web では伝統工芸、高級ブランド、コーポレートサイトなどで「格調高さ・信頼感・静的・文学的」な世界観を作りたい場合に多用されます。

※対義語として語られるのが、縦横の太さが均一でうろこのない「ゴシック体(モダン・カジュアル・動的)」です。

実務における設計ルール(スマホ時代の現実的な設計)

現場で最大の課題となるのが「スマホでの視認性」です。

スマホの小さな画面(12〜14px 程度の文字)で明朝体を使うと、特徴である「うろこ」や細い横線が潰れてしまい、かえって可読性が著しく低下します。そのため、現在の Web デザインでは「世界観を伝える大きな見出しには明朝体を使い、読ませる本文にはゴシック体を使う」というハイブリッドな使い分けが最も安全で現実的な選択となります。

Web フォント vs OS 標準フォントの決断

実務において、明朝体を Web で表示するには 2 つの選択肢があり、それぞれに重いトレードオフが存在します。ここを制作会社と早期に握ることが担当者の腕の見せ所です。

Web フォント(Noto Serif JP など)を配信する場合：
どの端末でも同じ美しい明朝体を表示できますが、日本語フォントは文字数が膨大(数万字)なためデータ容量が極めて重くなります。その結果、読み込み遅延やFOUT(代替フォントから Web フォントに切り替わる瞬間にレイアウトがガタッと崩れる現象)が発生し、ユーザー体験を損なうリスクがあります。導入時はエンジニアに「プリロード(事前読み込み)」や「サブセット化(使う文字だけを書き出して軽量化する技術)」の徹底を指示する必要があります。

OS デフォルトフォント(游明朝、ヒラギノ明朝など)を指定する場合：
データ読み込みが不要でサイトが爆速になりますが、Mac と Windows で表示されるフォントが変わります。「自分の Mac(ヒラギノ明朝)では美しかったのに、上司の Windows(游明朝など)で見たら線がかすれて安っぽく見えた」というクレームが頻発するため、OS 間の見え方の違いをあらかじめ許容できるかの社内合意が必要です。

Web 担当者が陥りやすい落とし穴(NG 事例)

• デザイン偏重：世界観を優先するあまり、スマホで極小の明朝体を本文に使ってしまい、ユーザーが文字を読むのを諦める(離脱する)。
• 軽量化の罠：サブセット指定(軽量化)を忘れて全文字を読み込み、サイトの表示速度が劇的に低下(SEO評価も悪化)する。
• ライセンス違反：印刷物用に購入したフォントを、ライセンス確認せずに Web フォントとして勝手にサーバーにアップロードして商用利用してしまう。
• 視認性の罠：ダークモード設定時、黒背景に細い白文字の明朝体はコントラストが強すぎたり線が飛んだりして非常に見えにくくなる(ウェイト調整が必要)。