WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから
スポンサード リンク
年配の方等はインターネットの文字を見るのが嫌いと言います。
私は特に文字を見るのが嫌だと感じた事はありませんが、なんとなく最後まで見れないサイトがいくつかある事は確かですね。
今回はなんとか最後まで読んでもらえるような、見やすい文章の作り方についてです。
文章がみにくい理由は改行が足りない
Webの文章とは不思議なもので、縦に長い文には全くといっていいほど苦痛を感じません。ですから、しつこいといわれるくらい改行を入れたり、３〜６行の文が出来上がったら、そこで１行改行を入れておくだけで驚くほど見やすくなるのです。
また、改行は一行あけるように作ると見やすいと言われますね。
改行一つで最後まで見てもらえるようになる確率はぐっと上がります。
文章に、スペースを作る事が大切ですね。
構成が長くなってしまったら、見出しを入れる
文章によってうったえたい事はたくさんあるという人も要るでしょう。
ただ、それをダラダラと書いてしまうと最後まで読んでくれない人が出てきてしまいます。
よほどその記事に興味のあることが書いているなら別ですが、ちょっとした良い文章も、途中で読まれなくなってしまっては勿体ないです。
そこで、自分の書きたい事を何点かに分けてみましょう。
３点に分けたなら、その１点１点に対して見出しを作ります。
この記事で説明すると『文章がみにくい理由は改行が足りない』と『構成が長くなってしまったら、見出しを入れる』ですね。
特に参考になるのがニュースサイトです。
画像の使い方ももちろんですが、文章のスペースの作り方が非常に参考になります。
また、はてなエントリーの上位にくるサイト様も大体改行の使い方が上手ですね。
参考サイト
・ITmedia
・CNET Japan
比較してみましょう
今回掲載した文章を、改行を殆ど使用しないで、見出しを抜いて掲載するとこうなります。↓
年配の方等はインターネットの文字を見るのが嫌いと言います。私は特に文字を見るのが嫌だと感じた事はありませんが、なんとなく最後まで見れないサイトがいくつかある事は確かですね。今回はなんとか最後まで読んでもらえるような、見やすい文章の作り方についてです。
Webの文章とは不思議なもので、縦に長い文には全くといっていいほど苦痛を感じません。ですから、しつこいといわれるくらい改行を入れたり、３〜６行の文が出来上がったら、そこで１行改行を入れておくだけで驚くほど見やすくなるのです。また、改行は一行あけるように作ると見やすいと言われますね。改行一つで最後まで見てもらえるようになる確率はぐっと上がります。文章に、スペースを作る事が大切ですね。
文章によってうったえたい事はたくさんあるという人も要るでしょう。
ただ、それをダラダラと書いてしまうと最後まで読んでくれない人が出てきてしまいます。よほどその記事に興味のあることが書いているなら別ですが、ちょっとした良い文章も、途中で読まれなくなってしまっては勿体ないです。そこで、自分の書きたい事を何点かに分けてみましょう。３点に分けたなら、その１点１点に対して見出しを作ります。この記事で説明すると『文章がみにくい理由は改行が足りない』と『構成が長くなってしまったら、見出しを入れる』ですね。特に参考になるのがニュースサイトです。画像の使い方ももちろんですが、文章のスペースの作り方が非常に参考になります。また、はてなエントリーの上位にくるサイト様も大体改行の使い方が上手ですね。
という感じになります。どうでしょうか？
皆さんも是非、お試しください。
後書き
誤解を招かれてしまって申し訳ありません。
ここでいう見出しとはhtmlを理解している人たちが使うhタグではなく、目立つ項目を付けてくださいという意味合いです。
説明不十分につき、後書きとさせていただきました。
新ブログ：ITクオリティもよろしく。
スポンサード リンク
 |
 |
 |
 |
» Photoshopちょいテク『惑星を作ってみよう』＋360度パノラマ画像も作れるように
» 最近、ブログを書いている途中に筆が止まる理由がわかった気がする
» ブログエントリ別に見る『注目度10の法則』
» 天才という言葉は、生きている人にいう言葉じゃない気がする
» まるでphotoshop！JavaScriptで実装するクールなカラーピッカー[prototype.js]
» 今後の期待度が高いphotoshopブラシまとめサイト『Quality Brushes for Photoshop』
» FLASHサイト作成インスピレーションの参考になるflashサイト7つ
» あの時、何気なく吸い始めた一本のタバコの値段が900万だと知ったとき
» jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
» [追記]数百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxアドオン
» プロとアマの違いってぶっちゃけたったひとつ
» 一晩で覚えるjQueryの逆引き基礎サンプル7つ
» あなたは大丈夫？知らず知らずのうちに感じている10のパソコンストレス
» よごれた感じのフォトショップチュートリアルとブラシ
» 第2回web開発者インタビュー。マチウケメール便開発者『開発環境はeclipseです！』
Comment
コメント本当にありがとうございます。
このテンプレートに変更したのが、実は昨日。
それまでは、横幅760pxのテンプレートを使用していました。
３月のアクセスログを見た結果、
1 1024x768 29870
2 1280x1024 11290
3 1600x1200 1143
4 1400x1050 1011
5 800x600 246
6 640x480 9
7 その他 7310
これなら840px行けるかなと思い変更。
私のパソコンが1280x1024だったので、お気に入りを表示しても難無く見えていましたが、よくよく考えるとお気に入りを表示すると、1024x768の一番多いユーザーにとって、左マージンが全くなくなってしまうんですね。
この辺を課題に少し変更していこうと思います。
わざわざコメントいただき、ありがとうございました。
はじめまして。朝方にはてなブックマーク経由で携帯電話（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などを参考にするとよいでしょう。
コメントありがとうございます。
このページがh1、h2を使っていることまで見ていただいたとは。
また、携帯電話とは少し盲点でした。
画像解像度その他の7310件は携帯電話が入っているということですね。
h3について、次回すこしCSSをいじる事にしてみます。
非常に参考になりました。
ありがとうございます。
＞望月真琴様
関係無いのですみませんが私もezwebなので望月様のサイトをezwebで拝見した所
文字化けしてて読むことすらできませんでした。ご自身ezwebということでお気づきだとは思うのですが、もしそうでなければ文字化けしていますとお伝えしておきます。
勘違いしすぎ
>ですから、しつこいといわれるくらい改行を入れたり、３〜６行の文が出来上がったら、そこで１行改行を入れておくだけで驚くほど見やすくなるのです。真っ当な文章作法を学んだ人なら，1つの主題を1つのパラグラフに書きます。主題が変ったら，次のパラグラフに移します。HTMLで言えば，1つのパラグラフを，1つのp要素に対応させます。さらに大きい話題の節は，見出し(h1〜h6要素)で階層化します。
次のパラグラフの中身ですが，その冒頭にはトピック文を置きます。詰り，そこで話題が変ったことを明確にする訳です。また，長い文を作らずに，歯切れよく，簡潔さ明瞭さに心掛けることも重要です。これにより，流し読みしやすくなるのです。
適当なところで改行されたのでは，論理が断ち切れて支離滅裂というものです。それこそ読みにくい。
---
>また、改行は一行あけるように作ると見やすいと言われますね。
改行というより，パラグラフの上下に余白（マージン）をつけるのです。
それはCSSの規則によって，p { margin: 1em 0 } という風にします。
別に '0.9em' でも，'1.2em' でも，バランスが好ければ構いません。
---
それにパラグラフの途中で “勝手” に改行（br要素）を入れられても，ありがた迷惑というものです。
そもそも特定の内容幅を想定して “文字サイズ” と “改行位置” を決める，という考えが間違っています。文字サイズというのは，読者が自身の環境あるいは好みに合せて決めるものです。実際に殆どのブラウザでは自由に設定可能です。
一方で，内容幅は容易には変更できません。こうなると寧ろ読みにくいとしか言いようがない。
アクセス統計を取れば，ある一定の結果がでます。しかしそんなものは，身勝手な都合を押し通すための正当化に過ぎません。ウェブというものは，自分と異なる感覚で，異なる環境で，不特定多数の人々がアクセスするのが前提です。
従ってパラグラフの “折り返し位置”というのは，読者に任せるべきです。新聞や雑誌，書籍でも，普通は，“文節単位” や “文単位” でいちいち改行したりしません。
ただし両者では決定的に特質が異なります。紙媒体ではだいたい万人が読みやすい “文字サイズ” と “カラム幅” に決め打ちされるのに対して，ウェブでは読者が自由に決められる余地があります。これがウェブにおける最大の利点なのです。
紙の常識をウェブでも押し付けてよい，となれば，ウェブの存在価値が薄弱としてしまいます。
おもしろいくらい勘違いしすぎてる方がいますのでコメントさせていただきました。
今回の記事を拝見して私は非常に参考となると思いブックマークさせていただきました。
それは文章の作りにはスペースと大きな見出しの効果を教わったからです。
恐らくこの記事を読んで殆どの方がそう思ったのではないかと感じます。
そこになぜbrタグだとかCSSでPタグをつけるようにした方がいいとかの発想が生まれるのかが理解に苦しみます。
そうなるとこの記事のタイトル自体、WEB文章を最後まで読んでもらえない理由はCSSの知識が足りないからになるのでは？
主旨を捉えられない人のコメントほど説得力が無く、ただ自分の知識が上ですよといいたいだけにしか感じれませんよ。
ブログを始めた人にとっても、ブログ内でｐタグやｂｒタグを使っている人なんかいません。インターフェイスがそうなっているからです。
わざわざ初心者ブロガーがpタグを打つことも、それこそありえません。
そもそもWEB文章を書く人はみなp { margin: 1em 0 }というようなCSSの意味を理解していなければならないという考えこそ間違っていると私は思いますよ。
妄信は危うい
関口さんへ。>そこになぜ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タグ”で以て整形されています。ソースをご確認下さい。おそらくこのサービスでは，入力フィールドにおいて改行を挿入すると，それがbrタグに置換されて書き出される，そういう仕組になっています。
しかし『はてなダイアリー』では，きちんとp要素でマーク付けできる仕組があり，寧ろp要素を用いている人のほうが多勢です。非難されるべきはサービス提供側の不備であり，HTMLの仕様ではありません。あなたは無知に基いて発言しています。
>主旨を捉えられない人のコメントほど説得力が無く、ただ自分の知識が上ですよといいたいだけにしか感じれませんよ。
厭きれてものも言えません。どうしてそんなに頑迷なんですか。人というのは，他人から知識を得て成長するものでしょう。私の発言は理想論かもしれませんが，論理的には間違ってはいない筈です。少しは聞き耳を立ててください。
私の意見に反対する前に，件の記事の“主旨”というものが，絶対の真実かどうか疑わねばなりません。妄信は危険です。私はその考えに疑問を呈したので意見した次第です。すべてを受け入れろ，とは申しません。しかし，少しぐらいは理解しようと試みて頂きたい。
主観的な価値判断で一方的に黙殺され，貶められたのでは，まったく発言の甲斐がなく，大変心外であります。
頑強にならず，ウェブについて，HTMLについて，基礎から真剣に向かい合ってください。さすれば，答えが出ます。
トラックバックURL
第91回目はネットのお役立ち情報〜近い科学の未来
from INTER-WEB - 2007/03/15
WEB文章を最後まで読んでもらうには
from なつみかん＠はてな - 2007/03/15
[ネット]WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから ホームページを作る人のネタ帳
from 愚者のニュース - 2007/03/16
[気になったもの]2007/03/17の気になったもの
from 隠の讌飲 - 2007/03/24
Web文章を読みやすくするために心掛けなければいけないあれこれ
from caraldo.net | MT Blog - 2007/09/13
RSS
はてなからきました。
このサイトをぱっと見て、まず『読みにくい』と感じてしまいました（汗
なぜそう感じたのかといいますと、
私が「お気に入り」をサイドバーで出している人間だからです。
おそらく筆者さんは普段「お気に入り」をサイドバーで出さない人なのかなと。出してみれば判るのですが、横幅が足りず、主文がページの端から始まります。これがちょっと見づらい。
前にはてなでアンケートを採っていたかたがいましたが、
２割程度ですが、常に「お気に入り」を表示している人がいますね。
http://plaza.rakuten.co.jp/catfrog/diary/200701140026/
http://q.hatena.ne.jp/1168822647
サイドバーを消してみれば、なるほど、かなり見やすいページだと思いますが。。。
また、サイドバーを出した状態でも、左にインデントといいますか、１cmでもスペースがあればかなり見やすくなるかと。。。
あと、読みにくさとは関係ありませんが、コメントのつけやすさとして、ひとつ思ったことが。このページの上からは、あなたをなんて呼べばよいのかわかりません。私は今回「筆者さん」と呼びました。「管理人さん」などでもよいのでしょうが、
HN でもなにかあれば、、、っと、過去コメントを見ると Yamada さんですか。
トップのどこかで名が判れば、あなたへの意見がもう少し書きやすくなると思います。
私見ながら、失礼しました。