B'scre8

Webサイトの文章に「字下げ（インデント）」は適用するべきか？

2023.12.22

ビーズクリエイトの伊藤です。
皆さんは字下げ（インデント）の使い方や使用場面について困ったことはないでしょうか。
ちなみに字下げとは『文章行頭に空白を挿入して先頭文字を右にずらす』ことです。
今回はWebサイトなどにおける「字下げ」を適用するべきか否かについて考えてみます。
（部分的にはWordなどでも活用できると思います）

目次 [非表示]

1. なぜ字下げに悩むのか
- 1.1. ①字下げは日本語文章の基本作法
- 1.2. ②Webサイトで字下げすると読みづらい場合がある
2. なぜ「字下げ」を使うのか
3. 一番重視すべきは「文章を読みやすく」すること
4. Webにおいて「字下げ」に変わる代替手段は？
5. 結論：Webにおける段落は「字下げ」せず、pタグで改行の表現＋段落間のマージンを確保しよう

なぜ字下げに悩むのか

なぜ字下げするかしないかに悩んでいるかというと、下記3つの内容が要因となります。

①字下げは日本語文章の基本作法

段落の始まりに字下げを適用するのは、学校で教わる文章作法です。
そのため正式なものであればあるほど、キチンと字下げ適用された文章として提供されることが多いんです。

②Webサイトで字下げすると読みづらい場合がある

文章作法なんだから、そのまま適用すればいいじゃないか！という声もあるかと思います。
文章作法どおりにやってみたところ、WEBサイトだと読みづらくなってしまうこともあります。
たとえばこんな文章

　字下げのサンプル文章です。
字下げすることで行頭に約1文字分の空白が挿入されます。
字下げが適応されない場合は2行目以降の行頭部分は空白を無しで文字を詰めて表示します。
WEBサイトで字下げを適用するとこの文章部分のように見た目が若干違和感があるように見えてしまうかもしれません。
一行が表示される横幅が長ければ、この見え方で受ける印象も変わってきます。

字下げを適用すると上記のように表示されます。少し読みづらいんじゃないかな？と思います。
WEBサイトのデザインも関わりますが、文章の横幅表示領域が短い＋短い段落が連続するような場合などにこうなりがちです。

なぜ「字下げ」を使うのか

字下げを使用する理由として、文章における「段落を明確にしたい」ことが理由と思います。
下記サイトによると

参考：Ｗｅｂ文書作成法
http://bunko0.sato296.com/hyoki2/h0.htm

文章作法では、一般的に段落の冒頭は一字下げると定められている。このような約束事はいつ頃誰によって規定されたのだろうか。明治以後であることは、間違いのないところであろうが、私たちはそんなことに疑問を持つことなく、その約束事に従っている。明治以前は、段落意識を持って書く、ということもなかったであろうと思われる。古くは巻物という形態であり、そこにはページという概念さえも存在せず、紙の続く限り延々と続いた。

とあります。
制定されてから作法として定着し、WEBサイトでもそのまま適用されているようです。
しかし、実際にWEBサイトでの見栄えがよろしくなければ、現代に合わせた表現の変更は必要と思います。

一番重視すべきは「文章を読みやすく」すること

結局のところ、字下げが『段落を明確にする＝文章を読みやすくする』ことを目的とするものであるならば、これは手段なのかと思います。
基本的に「目的」は「手段」に優先します。
WEBにおいて「段落を明確にし文章をよみやすく」する「手段」が別にあるならば、そちらを選択することが望ましいと言えます。

Webにおいて「字下げ」に変わる代替手段は？

「字下げ」に変わる読みやすさの手法として「改行」の使用が考えられます。
ただ、WEBサイトの改行で注意しなければならないのが、極力、brタグを使わないということです。
レイアウトを改行＝brタグの多用で構成してしまうと、htmlソースで無数のbrタグを記載されることになってしまいます。
brタグは改行として動作させるためのhtmlタグのため、文章として見える形では反映されず、意味をなさないものです。
マークアップの原則として、「htmlは文章構造でありレイアウトを行わない、レイアウトはCSSで行う」があるため、望ましくありません。具体的なデメリットとして、せっかくの文章が検索エンジンに評価されづらくなってしまいます。

結論：Webにおける段落は「字下げ」せず、pタグで改行の表現＋段落間のマージンを確保しよう

例えばこんば文書の場合、

【原文】

このようにマークアップします。↓

<p>字下げのサンプル文章です。</p>
<p>字下げすることで行頭に約1文字分の空白が挿入されます。
字下げが適応されない場合は2行目以降の行頭部分は空白を無しで文字を詰めて表示します。</p>
<p>WEBサイトで字下げを適用するとこの文章部分のように見た目が若干違和感があるように見えてしまうかもしれません。
一行が表示される横幅が長ければ、この見え方で受ける印象も変わってきます。</p>

するとこのように表示されます。↓

【表示イメージ】

字下げのサンプル文章です。

字下げすることで行頭に約1文字分の空白が挿入されます。
字下げが適応されない場合は2行目以降の行頭部分は空白を無しで文字を詰めて表示します。

WEBサイトで字下げを適用するとこの文章部分のように見た目が若干違和感があるように見えてしまうかもしれません。
一行が表示される横幅が長ければ、この見え方で受ける印象も変わってきます。

いかがでしたでしょうか。WEBではWEBに合わせた文章表現があると思います。
見やすい文章にすることで見る側のストレスは減り、WEBサイトであれば訪問者の離脱率などを下げられるかもしれません。
ぜひWEBサイトで文章作成をする時にお試し下さい。

ビーズクリエイトは長野県東御市にある唐沢農機サービスという農機具屋を母体とした、WEBサイトの制作・コンサルティング事業を展開する部門です。
WEBサイトを通した自社の知名度や評判の向上、問い合わせや商品注文などの売上増などのお悩みについて、WEBサイトの制作やコンサルティングといった形でお手伝いさせていただいています。