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

デザイナーの野尻です。

年もあけ、3月が年度末のお客様から「代表あいさつ」などの更新依頼を多くご用名頂くようになりました。こんなとき、お客様からご提供頂ける文章ですが、正式なものであればあるほど、「字下げ（インデント）」されたものが多いように思います。今回は、Webサイトにおいて「字下げ」を適用するべきか否かについて考えてみたいと思います。

なぜ字下げに悩むのか

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

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

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

②しかしWebで字下げ適用すると読みづらい（場合がある）

文章作法なんだから、そのまま適用すればいいじゃないか！という声もあるかと思います。
しかし実際にそのまま適用すると「なんか読みづらい、、、」となってしまうパターンがあるんです。
たとえばこんな文章

字下げが連続してしまうと、ちょっと読みづらいんじゃないかと思います。
文章の横幅表示領域が短く、かつ短い段落が連続するような場合などにこうなりがちです。

③一般的な結論が出ていない

Webで検索してみても、W3Cのように明確な基準は制定されておらず、比較的著名なWebサイトでも字下げ適用されている所と、そうでない所があるようです。
参考：Web記事でも段落の文頭は1文字空ける？（2015年版）　　
http://www.jkodaira.info/?p=281

そもそもなぜ「字下げ」するのか

そもそもなぜ字下げするのか、それは文章における「段落を明確にする」ためなのかと思います。しかしその作法がいつ制定されたかというと、明確な答えがみつかりません。
下記サイトによると

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

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

とあります。
明示以降に制定されて以来、ずっと作法として定着してたということでしょうか。そうであれば、現代のWebにそのルールをそのまま適用するのは無理があるように思います。

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

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

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

「字下げ」より「改行」のほうが読みやすいというのは、先に紹介したいくつかのブログにも記載があります。このあたり、全面的に同感です。ただし、改行において注意しなければならないのが、極力brタグを使わないということです。
もし改行、つまりレイアウトをbrタグに依存してしまうと、文章中に無数のbrタグを記載されることになってしまいます。brタグは基本的に文章として意味をなさないものです。マークアップの原則として、「htmlは文章構造でありレイアウトを行わない、レイアウトはCSSで行う」があるため、望ましくありません。具体的なデメリットとして、せっかくの文章が検索エンジンに評価されづらくなってしまいます。

結論：Webにおける段落は「字下げ」せず、pタグで区切って段落間のマージンを十分に取るべし

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

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

<p>ビジネスの可能性を実現へと導く。</p>
<p>自分たちの可能性を試す。</p>
<p>リスクと隣り合わせで押しつぶされそうな気持ちを超えて、挑戦していくドキドキ感の中で生まれた事業が成長していく姿を肌で感じ、目で見て、体験でき、貢献できる土壌が当社にはあります。</p>
<p>一丸となってマーケティングを行い、事業の規模拡大や成長戦略を学び、大きな歯車となってグイグイとビジネスを回す原動力として、リアルなビジネスを共に体験しましょう。</p>
<p>村の小さな農機具屋（個人事業主）だった当社ですが、これから数年のうちにIPOを達成して、100億企業・1000人規模の企業に成長することを目指しています。上場の鐘を叩き、そして社会の価値観を変えていく。当社にはその青写真ができています。</p>

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

※このとき段落間に改行（マージン）が無い場合はbrではなく、CSSで解決します。
※ちなみにこちらの原文はビーズクリエイトの採用コンテンツの文章です。興味のある方は右記URLよりご覧ください。https://www.bscre8.com/recruit/

以上、細かい内容で恐れ入ります。
今後も、見やすく、正しいマークアップを心がけていきたいと思います。
（このブログも直さないとな、、、）

ビーズクリエイトではデザイナーを募集しています。

デザイナー募集要項はこちら

Webデザイン、紙媒体（チラシ・パンフレット）デザインに興味のある方、ぜひご連絡ください！

お問い合わせ・ご質問はこちら

応募はこちら