WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから

  • 2007/03/15
  • このエントリーをはてなブックマークに追加

スポンサーリンク

文章

年配の方等はインターネットの文字を見るのが嫌いと言います。
私は特に文字を見るのが嫌だと感じた事はありませんが、なんとなく最後まで見れないサイトがいくつかある事は確かですね。

今回はなんとか最後まで読んでもらえるような、見やすい文章の作り方についてです。
IT/Web業界に強い転職サイトGreen

文章がみにくい理由は改行が足りない


Webの文章とは不思議なもので、縦に長い文には全くといっていいほど苦痛を感じません。ですから、しつこいといわれるくらい改行を入れたり、3~6行の文が出来上がったら、そこで1行改行を入れておくだけで驚くほど見やすくなるのです。

また、改行は一行あけるように作ると見やすいと言われますね。
改行一つで最後まで見てもらえるようになる確率はぐっと上がります。

文章に、スペースを作る事が大切ですね。

構成が長くなってしまったら、見出しを入れる


文章によってうったえたい事はたくさんあるという人も要るでしょう。
ただ、それをダラダラと書いてしまうと最後まで読んでくれない人が出てきてしまいます。

よほどその記事に興味のあることが書いているなら別ですが、ちょっとした良い文章も、途中で読まれなくなってしまっては勿体ないです。

そこで、自分の書きたい事を何点かに分けてみましょう。

3点に分けたなら、その1点1点に対して見出しを作ります。
この記事で説明すると『文章がみにくい理由は改行が足りない』と『構成が長くなってしまったら、見出しを入れる』ですね。

特に参考になるのがニュースサイトです。
画像の使い方ももちろんですが、文章のスペースの作り方が非常に参考になります。
また、はてなエントリーの上位にくるサイト様も大体改行の使い方が上手ですね。

参考サイト
・ITmedia
・CNET Japan

比較してみましょう


今回掲載した文章を、改行を殆ど使用しないで、見出しを抜いて掲載するとこうなります。↓

年配の方等はインターネットの文字を見るのが嫌いと言います。私は特に文字を見るのが嫌だと感じた事はありませんが、なんとなく最後まで見れないサイトがいくつかある事は確かですね。今回はなんとか最後まで読んでもらえるような、見やすい文章の作り方についてです。
Webの文章とは不思議なもので、縦に長い文には全くといっていいほど苦痛を感じません。ですから、しつこいといわれるくらい改行を入れたり、3~6行の文が出来上がったら、そこで1行改行を入れておくだけで驚くほど見やすくなるのです。また、改行は一行あけるように作ると見やすいと言われますね。改行一つで最後まで見てもらえるようになる確率はぐっと上がります。文章に、スペースを作る事が大切ですね。
文章によってうったえたい事はたくさんあるという人も要るでしょう。
ただ、それをダラダラと書いてしまうと最後まで読んでくれない人が出てきてしまいます。よほどその記事に興味のあることが書いているなら別ですが、ちょっとした良い文章も、途中で読まれなくなってしまっては勿体ないです。そこで、自分の書きたい事を何点かに分けてみましょう。3点に分けたなら、その1点1点に対して見出しを作ります。この記事で説明すると『文章がみにくい理由は改行が足りない』と『構成が長くなってしまったら、見出しを入れる』ですね。特に参考になるのがニュースサイトです。画像の使い方ももちろんですが、文章のスペースの作り方が非常に参考になります。また、はてなエントリーの上位にくるサイト様も大体改行の使い方が上手ですね。


という感じになります。どうでしょうか?

皆さんも是非、お試しください。


後書き

誤解を招かれてしまって申し訳ありません。
ここでいう見出しとはhtmlを理解している人たちが使うhタグではなく、目立つ項目を付けてくださいという意味合いです。
説明不十分につき、後書きとさせていただきました。


スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

A&C

はてなからきました。
このサイトをぱっと見て、まず『読みにくい』と感じてしまいました(汗

なぜそう感じたのかといいますと、
私が「お気に入り」をサイドバーで出している人間だからです。
おそらく筆者さんは普段「お気に入り」をサイドバーで出さない人なのかなと。出してみれば判るのですが、横幅が足りず、主文がページの端から始まります。これがちょっと見づらい。

前にはてなでアンケートを採っていたかたがいましたが、
2割程度ですが、常に「お気に入り」を表示している人がいますね。

http://plaza.rakuten.co.jp/catfrog/diary/200701140026/
http://q.hatena.ne.jp/1168822647

サイドバーを消してみれば、なるほど、かなり見やすいページだと思いますが。。。
また、サイドバーを出した状態でも、左にインデントといいますか、1cmでもスペースがあればかなり見やすくなるかと。。。


あと、読みにくさとは関係ありませんが、コメントのつけやすさとして、ひとつ思ったことが。このページの上からは、あなたをなんて呼べばよいのかわかりません。私は今回「筆者さん」と呼びました。「管理人さん」などでもよいのでしょうが、
HN でもなにかあれば、、、っと、過去コメントを見ると Yamada さんですか。
トップのどこかで名が判れば、あなたへの意見がもう少し書きやすくなると思います。

私見ながら、失礼しました。

2007/03/15 Thu 20:21| |

Yamada

コメント本当にありがとうございます。

このテンプレートに変更したのが、実は昨日。
それまでは、横幅760pxのテンプレートを使用していました。

3月のアクセスログを見た結果、

1 1024x768 29870
2 1280x1024  11290
3 1600x1200 1143
4 1400x1050 1011
5 800x600 246
6 640x480 9
7 その他 7310

これなら840px行けるかなと思い変更。

私のパソコンが1280x1024だったので、お気に入りを表示しても難無く見えていましたが、よくよく考えるとお気に入りを表示すると、1024x768の一番多いユーザーにとって、左マージンが全くなくなってしまうんですね。

この辺を課題に少し変更していこうと思います。
わざわざコメントいただき、ありがとうございました。

2007/03/15 Thu 21:56| |

望月真琴

はじめまして。朝方にはてなブックマーク経由で携帯電話(ezweb)から拝見していたら、「文章がみにくい理由は改行が足りない」「構成が長くなってしまったら、見出しを入れる」「ちなみに・・・」は他の文章との区別が付きませんでした。

h1~h6要素という「見出し」を示す要素であれば、ezwebでも見出しは区別できるように表示されますので、<font color="#cc0000"><strong>ちなみに・・・</strong></font>よりも<h3>ちなみに・・・</h3>とした方がより良い見出しになると思います。
(h3としたのは、このページでは既にh1がサイト名、h2が記事タイトルとなっているためです。)

見出しについては仕様書の記述( http://www.w3.org/TR/html4/struct/global.html#h-7.5.5)およびhttp://www.kanzaki.com/docs/html/htminfo11.html#S3などを参考にするとよいでしょう。

2007/03/15 Thu 22:35| |

Yamada

コメントありがとうございます。
このページがh1、h2を使っていることまで見ていただいたとは。
また、携帯電話とは少し盲点でした。
画像解像度その他の7310件は携帯電話が入っているということですね。

h3について、次回すこしCSSをいじる事にしてみます。
非常に参考になりました。
ありがとうございます。

2007/03/15 Thu 23:06| |

Aka

>望月真琴様
関係無いのですみませんが私もezwebなので望月様のサイトをezwebで拝見した所
文字化けしてて読むことすらできませんでした。ご自身ezwebということでお気づきだとは思うのですが、もしそうでなければ文字化けしていますとお伝えしておきます。

2007/03/31 Sat 19:21| |

ふぉおばr 勘違いしすぎ

>ですから、しつこいといわれるくらい改行を入れたり、3~6行の文が出来上がったら、そこで1行改行を入れておくだけで驚くほど見やすくなるのです。

真っ当な文章作法を学んだ人なら,1つの主題を1つのパラグラフに書きます。主題が変ったら,次のパラグラフに移します。HTMLで言えば,1つのパラグラフを,1つのp要素に対応させます。さらに大きい話題の節は,見出し(h1~h6要素)で階層化します。

次のパラグラフの中身ですが,その冒頭にはトピック文を置きます。詰り,そこで話題が変ったことを明確にする訳です。また,長い文を作らずに,歯切れよく,簡潔さ明瞭さに心掛けることも重要です。これにより,流し読みしやすくなるのです。

適当なところで改行されたのでは,論理が断ち切れて支離滅裂というものです。それこそ読みにくい。

---

>また、改行は一行あけるように作ると見やすいと言われますね。

改行というより,パラグラフの上下に余白(マージン)をつけるのです。
それはCSSの規則によって,p { margin: 1em 0 } という風にします。
別に '0.9em' でも,'1.2em' でも,バランスが好ければ構いません。

---

それにパラグラフの途中で “勝手” に改行(br要素)を入れられても,ありがた迷惑というものです。

そもそも特定の内容幅を想定して “文字サイズ” と “改行位置” を決める,という考えが間違っています。文字サイズというのは,読者が自身の環境あるいは好みに合せて決めるものです。実際に殆どのブラウザでは自由に設定可能です。

一方で,内容幅は容易には変更できません。こうなると寧ろ読みにくいとしか言いようがない。

アクセス統計を取れば,ある一定の結果がでます。しかしそんなものは,身勝手な都合を押し通すための正当化に過ぎません。ウェブというものは,自分と異なる感覚で,異なる環境で,不特定多数の人々がアクセスするのが前提です。

従ってパラグラフの “折り返し位置”というのは,読者に任せるべきです。新聞や雑誌,書籍でも,普通は,“文節単位” や “文単位” でいちいち改行したりしません。

ただし両者では決定的に特質が異なります。紙媒体ではだいたい万人が読みやすい “文字サイズ” と “カラム幅” に決め打ちされるのに対して,ウェブでは読者が自由に決められる余地があります。これがウェブにおける最大の利点なのです。

紙の常識をウェブでも押し付けてよい,となれば,ウェブの存在価値が薄弱としてしまいます。

2007/04/27 Fri 10:36| |

関口

おもしろいくらい勘違いしすぎてる方がいますのでコメントさせていただきました。

今回の記事を拝見して私は非常に参考となると思いブックマークさせていただきました。
それは文章の作りにはスペースと大きな見出しの効果を教わったからです。

恐らくこの記事を読んで殆どの方がそう思ったのではないかと感じます。

そこになぜbrタグだとかCSSでPタグをつけるようにした方がいいとかの発想が生まれるのかが理解に苦しみます。

そうなるとこの記事のタイトル自体、WEB文章を最後まで読んでもらえない理由はCSSの知識が足りないからになるのでは?

主旨を捉えられない人のコメントほど説得力が無く、ただ自分の知識が上ですよといいたいだけにしか感じれませんよ。

ブログを始めた人にとっても、ブログ内でpタグやbrタグを使っている人なんかいません。インターフェイスがそうなっているからです。
わざわざ初心者ブロガーがpタグを打つことも、それこそありえません。

そもそもWEB文章を書く人はみなp { margin: 1em 0 }というようなCSSの意味を理解していなければならないという考えこそ間違っていると私は思いますよ。

2007/04/27 Fri 19:04| |

ふぉおばr 妄信は危うい

関口さんへ。

>そこになぜbrタグだとかCSSでPタグをつけるようにした方がいいとかの発想が生まれるのかが理解に苦しみます。

段落を段落らしく認識してもらうために,p要素があるのだから,それを用いるのは至極当然のことでしょう。br要素は単なるテキストを強制的に区切っているだけで,段落ではありません。連続brタグは一つに纏められてしまう事があります。

当方としては「CSSでPタグをつける」という,発想に驚きました。Pタグでつけた段落の範囲をそられしく表現するために,CSS仕様に基いてスタイルシートを適用させるのです。デフォルトで構わないなら,その儘でも構いません。

著者側で必然的な空白調整を行いたいと考えるなら,CSSに基いてスタイル指定すべきだ,と言っています。

>そもそもWEB文章を書く人はみなp { margin: 1em 0 }というようなCSSの意味を理解していなければならないという考えこそ間違っていると私は思いますよ。

HTML文書の体裁を効率よく整えたいなら,CSSを理解する他ありません。ただし,余所様で配布される,もしくはサービス側で提供されるスタイルシートを借用しても構いません。それを一寸でも弄ろうと思うなら,多少なりとも知識が必要です。

HTMLでは外観を定義できません。ある外観が得られても,それはスタイルシートの作用によるものです。ブラウザは予めHTML文書を表現するための慣例スタイルシートを内蔵しています。しかしそれは一定ではなく,媒体ごとに異なります。

>それは文章の作りにはスペースと大きな見出しの効果を教わったからです。

HTMLで空白の制御はできません。そういうことはスタイルシートで行います。
意味や構造など,そういう抽象的な役割を主に示すのがHTMLというものです。

>そうなるとこの記事のタイトル自体、WEB文章を最後まで読んでもらえない理由はCSSの知識が足りないからになるのでは?

文章の意味や構造を伝えるには,HTML文書を正しくマークアップする必要があります。それを見やすく,聞きやすく,整えるにはCSSに基いてスタイルシートを適用する必要があります。すなわち,両者の相互作用により情報が認知しやすくなります。

たとえ著者スタイルが適用されない環境でも,適切なHTML文書であれば,前述の通りそれらしく表現されます。さらには読者側も自分好みのスタイルシートを適用する事で,部分的・全体的に著者による体裁を補完できます。

段落をp要素としてマーク付けして置けば,著者・読者の双方でスタイル調整が柔軟になります。空白だけでなく,段落の周囲に枠をつけたりも出来ます。意固地にならなければ,br要素による段落表現が不便であることがお判りになる筈です。

ウェブ文書というのは,紙媒体と異なり,このように柔軟に利用できるよう設計されています。これが最大のメリットです。紙媒体の常識から脱却しなければ,ウェブの真価は発揮されないのです。そのことをお分かり頂きたい。

>ブログ内でpタグやbrタグを使っている人なんかいません。インターフェイスがそうなっているからです。わざわざ初心者ブロガーがpタグを打つことも、それこそありえません。

現にここのブログは“brタグ”で以て整形されています。ソースをご確認下さい。おそらくこのサービスでは,入力フィールドにおいて改行を挿入すると,それがbrタグに置換されて書き出される,そういう仕組になっています。

しかし『はてなダイアリー』では,きちんとp要素でマーク付けできる仕組があり,寧ろp要素を用いている人のほうが多勢です。非難されるべきはサービス提供側の不備であり,HTMLの仕様ではありません。あなたは無知に基いて発言しています。

>主旨を捉えられない人のコメントほど説得力が無く、ただ自分の知識が上ですよといいたいだけにしか感じれませんよ。

厭きれてものも言えません。どうしてそんなに頑迷なんですか。人というのは,他人から知識を得て成長するものでしょう。私の発言は理想論かもしれませんが,論理的には間違ってはいない筈です。少しは聞き耳を立ててください。

私の意見に反対する前に,件の記事の“主旨”というものが,絶対の真実かどうか疑わねばなりません。妄信は危険です。私はその考えに疑問を呈したので意見した次第です。すべてを受け入れろ,とは申しません。しかし,少しぐらいは理解しようと試みて頂きたい。

主観的な価値判断で一方的に黙殺され,貶められたのでは,まったく発言の甲斐がなく,大変心外であります。

頑強にならず,ウェブについて,HTMLについて,基礎から真剣に向かい合ってください。さすれば,答えが出ます。

2007/05/03 Thu 13:21| |

トラックバック

この記事にトラックバックする人はクリック

第91回目はネットのお役立ち情報~近い科学の未来

「INTER-GATE」編集部です。 □JSTバーチャル科学館|未来技術年表 ※...

INTER-WEB:2007-03-15 13:53

WEB文章を最後まで読んでもらうには

WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから ホームページを作る人のネタ帳 このページから学ぶ事は多いですね。要点をまとめてみました。 本文の両サイドには必ずmarginをとる 本文の前にadsenseを入れると閲覧者にとってはウザイ事この上ない

なつみかん@はてな:2007-03-15 22:04

[ネット]WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから ホームページを作る人のネタ帳

これは確かですね。私も長文を書くときは気をつけているつもりです。つもりで終わっている可能性もありますが。

愚者のニュース:2007-03-16 01:41

[気になったもの]2007/03/17の気になったもの

顧客の機能要求に折れないこと! なるほど。 d:id:madness:20050501:1114966456 「嫌なら見なければよい」の間違い ~「嫌だからこそ見る」心理 確かに見なければ批判は出来ないわけだけど、悪意があるとしか思えない批判が多い気がする。  以上GIGAZINEより 以上追々記

隠の讌飲:2007-03-24 21:52

Web文章を読みやすくするために心掛けなければいけないあれこれ

最近今までより長い記事を書くことが増えました。どうせなら最後まで読んでもらいたい、どうやったら最後まで読んでもらえるのだろうかという点をユーザビリティ、アクセ...

caraldo.net | MT Blog:2007-09-13 01:44

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html