5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

読みやすい長文サイトの「条件」

1 :ハイソ:03/06/01 05:21 ID:SP3UxSnd
情報、論文、小説、コラム、俺の主張etc……
いきおい長文になりがちなサイトのデザインはどうすればいいですか?

背景色、フォントカラー、アンカーリンク、字間、インデント、その他
「こうすれば読みやすいサイトになる!」というデザインとその技術を
検討しましょう。
逆に、「こんなデザインじゃ長文なんて読めたもんじゃねぇ!」という
ダメ例も歓迎。長文サイト運営者はココを読んでお客さんの「読みやす
さ」を勉強しよう!

参考(になるかわからないけど)リンク
http://plaza14.mbn.or.jp/~rooms/basement/gyoukan.html


注)「内容を充実させろ」「面白い長文を書け」ってご指摘は充分
承知しています。このスレは「読みやすさ」を追求していくものな
ので、内容の充実は各自で頑張ってください。

2 :Name_Not_Found:03/06/01 05:49 ID:evD1u1GN
2

3 :Name_Not_Found:03/06/01 07:02 ID:???
3

4 :Name_Not_Found:03/06/01 07:52 ID:???
4

5 :Name_Not_Found:03/06/01 08:10 ID:???
5

6 :Name_Not_Found:03/06/01 08:18 ID:???
6

7 :Name_Not_Found:03/06/01 09:53 ID:???
7

8 :Name_Not_Found:03/06/01 09:56 ID:???
リンク先みたけれど,微妙かな。

行間はある程度あけた方が見やすいのは事実。
読みやすい・読みにくいは人によって違いがあるから,代替スタイルシートを希望。
あと,SXGA+ぐらいでみると,無茶苦茶横幅が長いサイトはなんとなく疲れる。

これは内容にも関わるかも知れないけれど,論理構造がきちんとしていない長文は
読みにくいな。見出しはきちんとつけて欲しいと思ってしまう。

9 :Name_Not_Found:03/06/01 10:52 ID:???
>>1
長文はフレーム使え。
strict厨にはわからんだろうけどフレームに勝るナビゲーションは
存在しないしw

10 :Name_Not_Found:03/06/01 12:41 ID:???
>>1
> <TABLE>もしくは<BLOCKQUOTE>を使って両脇にマージンを
こんなの勧めるのか?
素直にCSSでいいと思うけど

11 :Name_Not_Found:03/06/01 15:37 ID:???
長文を使用しない
これ最強

12 :ハイソ:03/06/02 03:20 ID:50hdBdcS
あれ? 結論出ちゃった?
論理構造を「ちゃんと」して(>>8
CSSでマージンとって(>>10
長文はサクサク別ページに分けて(>>11
フレームでナビゲーションする(>>9

まぁ、あとは好みの問題なんだろうけど、背景色とかはどれくらいが読みやすいん
だろう。テキストが黒の時はここみたくefefefくらいがいいのかなぁ。僕はちょっと
暗くてヤなんだけど。

ついでにテキストサイズは固定しないほうがいいよね? そうだよね?

13 :Name_Not_Found:03/06/02 04:46 ID:???
背景色#eeeに文字色#003

14 :Name_Not_Found:03/06/02 06:54 ID:???
>>12
テキストサイトで背景のサイドがありすぎると目がカチカチしてくるからいやだな。
テキストサイズが小さいサイズで固定されていると,正直読む気が失せる。

なんやかんやで2chは良くできていると思う。

15 :Name_Not_Found:03/06/02 08:10 ID:???
>>9
Frame!=Strictではないよ。

16 :Name_Not_Found:03/06/02 09:03 ID:???
>>9
フレームのサイトは2ちゃんしか見ないですが、何か?

…と、煽りはさておき。
文字93〜95%、行間140〜200%、字間0.07をよく使っています。
文字…000000〜404040くらいまでの黒系を使用。
背景…白より若干色があるくらい。
記事部分…65〜80%か、450〜550ピクセル。
記事以外の背景には、賑やかな壁紙を使うこともある。

自分が長文書くときはこんな感じですが。

17 :Name_Not_Found:03/06/03 17:11 ID:???
長文書くときは、一行あたりの文字数が多くなりすぎないようにしてる。
許される環境なら<br>使ったりもするけど。

18 :Name_Not_Found:03/06/05 18:18 ID:2+S0sDmR
<pre>タグで完全に固定しろ

19 :­:03/06/05 18:21 ID:yQEE1TAP
>>18
そうだね!それがいいね!最高だね!頭良いね!

20 :これ、最強:03/06/09 15:38 ID:???
 ・XGA対応にテーブルレイアウトなし
 ・背景#0000FFに文字#000000
 ・<font size="2">

↑実在するよ

21 :Name_Not_Found:03/06/19 23:10 ID:???
このスレ、もってきようによっては良スレになりそう。
長文の時の配色のよしあしとか、どうだろう?
文字と背景、どんな組み合わせが一番見やすいかな?

22 :Name_Not_Found:03/06/19 23:33 ID:???
そだね。

単純な見やすさだけではなく,のっけている文章にもよると思う。
深刻な話にパステル調の背景や,明るい話におどろおどろしい背景はいやだ。

あと,背景に画像を並べるのはよほどの技術がないと,よみにくいだけ。

23 :Name_Not_Found:03/06/19 23:46 ID:???
>>22
やっぱり文章の内容と背景の兼ね合いも重要だよね。
ただ単に見やすくても、アングラっぽかったら(黒字にしろとか)、特に女性とかは帰宅なくなっちゃうかも。
色が人の感情に与える影響は大きいらしいし。

単に配色という観点ですが、こんなサイトがありますた。
ttp://www.mars.dti.ne.jp/~fuming/index.html

24 :Name_Not_Found:03/06/20 09:32 ID:???
俺は二十行を越える文章は、二十行前後のきりのいいところから
飛ばし読みをしていることに気づいた。

面白い文章でもつまらない文章でも英語でも二十行移行は飛ばし読み。


25 :Name_Not_Found:03/06/20 10:40 ID:???
長文って、どの程度から長文と感じるんだろうな。
800字くらいか?

26 :Name_Not_Found:03/06/20 20:25 ID:tDTJwa5m
>>23
サイト紹介どーもー。

27 :Name_Not_Found:03/06/20 22:14 ID:???
>>25
1ページに原稿用紙2枚ぶんぐらい・・・だからそれぐらいから私には長文に感じるかな。

28 :ハイソ:03/06/21 01:05 ID:???
コラムとか、論文とか(そんなにオオゲサなもんじゃなくてもええねんけど)、
章立て項立てがキチン作りやすい文章なら、800字とかそれくらいで別ページに
切るのはやりやすいかもしれないけど、小説とかだとそのへんルーズに
なりがちやから、「別ページに分けるタイミング」って難しいかもね。
ただ<Hx>を指定できないような(つまり章立て項立てをきちんとできないような)
長文ってのは、>>8の指摘のように読みにくくなるから、これはサイトデザイン云々
以前の問題ってことで。

ちなみに、文庫本の見開きは42字*32行=1344字詰が一般的。(文庫本は縦書きやけどね)
読みやすさにかけてはイチバンの紙メディアの数字だから、webではこれくらいを
上限とするのはどうだろうか。

参考文献:
野口悠紀夫 「『超』文章法」(中公新書)


29 :Name_Not_Found:03/06/21 01:19 ID:???
公の場に書き込むときに関西弁を使う阿呆の気が知れん

30 :ハイソ:03/06/21 01:58 ID:???
申し訳ありません。以後気をつけます。ご指摘ありがとうございました。

31 :Name_Not_Found:03/06/21 05:53 ID:???
>>28
文庫本は縦書きだが、多くのウェブサイトは横書き。
集中力の問題だと考えると、縦書きと横書きでは読むスピードに違いが
出るだろうから、そこらへん加味するとどうだろう








32 :Name_Not_Found:03/06/21 07:55 ID:???
みんな頭良すぎ。
厨な漏れには付いていけないよ。
>>16
字間ってどうやって指定するんですか?
教えて君に愛の手を。

33 :Name_Not_Found:03/06/21 12:46 ID:???
>>32
おっぱいすってくれたら教えてあげる

34 :Name_Not_Found:03/06/21 13:04 ID:???
>>32
CSS使う。letter-spacing。

35 :Name_Not_Found:03/06/21 13:27 ID:???
21さんの登場で息を吹き返してきたな。

長文かどうかは感覚的なものだけれど,最初にどういう方向性の文章か
何をテーマにしているのかがわかっていれば,多少退屈でも我慢できる。

バルザックなど,最初の方が退屈でしかたがないが,名作だとわかっているから読むが,
Webだと,最初の10行くらいで,だいたい見切りをつけちゃう。

36 :Name_Not_Found:03/06/21 13:31 ID:???
あと,>>31のいうとおり,文庫よりWebの方が,読んでいてつらいかもしれない。
それだけに挿絵や,写真・説明図などの要素も大切だと思うな。

延々と文字列だけが並んでいるサイトに行くと,「うおっ」ってかんじで,
ひくなあ。
右に挿絵があったり,左に挿絵があったりすると,文章を読む方にもリズムの
変化が生まれる気がするよ。もちろん,挿絵次第だけれど。

リズムを変えるために巨大文字にしたり,ボールドにしているところもあるけれど
よほど文章がうまくないと,単なるDQNになりがち。

37 :Name_Not_Found:03/06/21 15:10 ID:???
フォントサイズ変更はお勧めできない。

あと、スクロールバー見た瞬間にやる気なくなるようなサイトあるよね。
色も長さも。

38 :Name_Not_Found:03/06/21 15:22 ID:???
スクロールバーはまあデザインの範囲だからOKなんだけど、
それでもたまにうぜぇと思ってしまうのがある
スクロール部分を全部同じ色で統一してるやつ
どこにスクロールバーあるんだよヴォケ!とスクロールバーの所を連打
あれはなにがしたいのかわからん

39 :ハイソ:03/06/22 01:14 ID:???
>>32
最初に挙げた参考(になるかどうかわからない)リンクへドーゾ。

紙媒体とwebの違いっていえばいろいろあるだろうけど、webはディスプレイで見る
ってのが、見た目では一番の違いだと思う。次点でスクロール存在。
ディスプレイ=発光するもの、ってのが意外と目にツライんだと思う。文字を読ませる
には難儀なメディアだからこそ、少しでも工夫したいわけで……。

また文庫本を引き合いに出すと、手元の文春文庫に定規あてて測ったら
高さ:15.3センチ
上余白:1.5センチ
下余白:1.3センチ
だった。
webではこれを横に倒して左右の余白に各10%程度……。
横書きだからこそもうちょい余白をとってもいい気がする。

ちなみに、紙の色は2ちゃんねるの「新聞みたいなグレー」ではなく、黄色っぽい。
#ffefd5って感じ。けどディスプレイだと目に痛いかも。

>>36
挿絵はともかく、図表は適時挿入してほしいです。(webに限ったことじゃないけど)
簡単にリズムつけるとすれば、<hr>だけでも随分マシになるかと。

>>38
同意。
スクロールバーとかリンクとか、ナビゲーションにかかわるところは
あんまり色遊びして欲しくないです。

40 :Name_Not_Found:03/06/22 12:20 ID:???
長文読むときに、飽きたなと思ったら、その原因を考えて報告しよう。

俺の今日読んだ長文は、言ってることが前半と違っているような気が
してわけわかんなくなった時、飽きたね。

読み直そうという気が沸かない。
文庫だと、しおり挟んでちょっと戻って読み直したら、またすぐ元の部分に
戻れるけれど、WEBだと元の位置に戻すのも結構めんどくさくないか。




41 :Name_Not_Found:03/06/22 13:07 ID:???
>>40
首尾一貫してない時点で、既に文章としてダメじゃない?
そういうのは文庫だろうとダメだと思う。

42 :Name_Not_Found:03/06/22 21:24 ID:???
英文学科に通ってるんだけど、長文はcoherentがないと駄目だっていつも言われます。
日本語だってそうだと思います。(日本語だとなんていうんだろう…)

43 :Name_Not_Found:03/06/22 21:30 ID:???
論理的にまとめられていたらいいんでねぇの?

段階を経て書かれていれば、ある程度読みやすい文章構成となる。
例えば起承転結をはっきりとするとか。

もちろん段落分けも重要な要素だと考える。
これは失敗してはいけない部分で、適当にやってはいけない。
意味の区切れはもちろん、大段落の区切れもはっきりとすべきかもしれん。

44 :43:03/06/22 21:39 ID:???
1を見て思ったこと

段落の始めを一文字開けるのはまぁいいのだが、ほぼ一文ごとじゃ駄目だと思うよ。
やっぱり意味の区切れでやったほうがいいと思う。
もうちょっと一段落を大きくしたほうが(・∀・)イイ

45 :Name_Not_Found:03/06/22 23:16 ID:???
段落分けのリズム感は大切だと思う。
でもこれは文章自体のリズム感ともいえるから、
文章力上げろって話に近くなってしまうんだけど。

大切なことや特に言いたいことは、短い文、短い段落でまとめる。
それ以外のこと(だいたいの場合だらだらした説明)は
長さにこだわらず意味の区切れごとに分けていく。

とにかく、一律の長さの段落がだらだら続くのがすごく嫌だ。

レイアウトに関しては…
文章部分の横幅は700ピクセル以内でないとだめだ。
もし10ptとかfont size=2とかだったら500ピクセル以内。
line-heightは個人的には140%が一番好き。

46 :ハイソ:03/06/23 01:09 ID:???
>>43
文字数にもよると思うけど、起承転結毎にページを分けた方がいいのか、同一
ページに一気に載せちゃうか。
漏れは多少長くなっても同一のページに載せてて欲しい。

>>45
700ピクセルって、>>45のディスプレイでってこと?
一行の文字数が多くなると読みにくいのはわかるけど、ピクセル指定のレイアウト
って、ねぇ。最悪横スクロールっていう悲劇が……。(まぁ700ならたいてい大丈夫
だと思うが)
emで指定するほうがいいと思うんだけど、どうでしょう?

47 :Name_Not_Found:03/06/23 01:53 ID:???
ロードの過程でスクロールバーががんがん細くなってくのを見ると
読む気がそがれていく。

マウスをクリックして次のページに移ることはちょっとした気分転換にも
なるし、また次の日読むときにも都合がよいかと。

>>41
書き手は、首尾一貫しているつもりでも、読み手の受け取り方によって、
一貫していないように思われることもありえるんじゃないか。


48 :Name_Not_Found:03/06/23 06:51 ID:???
>line-heightは個人的には140%が一番好き。
禿堂。
けっこうline-heightを意識していないところが多くて困る。
だからといって,line-heightの代わりに,一行ごとに書く奴はウザイ。

49 :Name_Not_Found:03/06/23 09:09 ID:???
>>48
それってIE3で致命的なバグがあったからイメージ悪くなってると思う。


50 :Name_Not_Found:03/06/23 09:48 ID:???
ところでline-heightの指定は単位付けない方がいいとか見た気がする。


51 :Name_Not_Found:03/06/23 12:05 ID:???
>>50
http://www.pugx3.com/bfi/html/howto/lineheight/
NN4、IE3避けみたいだね。

52 :50:03/06/23 12:09 ID:???
>>51
お、サンクス。 初めて見たな、そのサイト。

53 :ハイソ:03/06/25 00:54 ID:???
一行ごとに改行が入ってたりするの、そいつなりに工夫した結果なんだろうね。
フロンペでサイト作ってたCSSのことなんかサパーリ時代にやってました。
(自身を顧みて反省)
見た目的には行間200%とあまりかわらないんだけど、そもそも200%は開けすぎかも。
120〜180%が下限と上限、140〜160%が適切な範囲じゃなかろうか。

54 :Name_Not_Found:03/06/25 02:26 ID:???
>>53
>フロンペでサイト作ってたCSSのことなんかサパーリ時代にやってました。

日本語?
フロンペがFrontPageっぽいとは思ったが、それにしても意味不明。

55 :Name_Not_Found:03/06/25 02:46 ID:???
<br>などで整形しない長文サイトは、やはり読みづらいですかね?
アクセシビリティを重視すると、<br>や<pre>はあまり使えなくて。

56 :Name_Not_Found:03/06/25 02:54 ID:???
>>55
どういう意味?適度な部分で改行しない、って意味?
<br>連発はうざいが、適当なところで改行は別にいいのでは。

漏れいろんな文章サイトに載せてるんだけど、
発言の「」のあたりとか、どう処理していいものか毎度悩む。

<p>Aはこう言った。<br>
「セリフ」<br>
しかしそれを聞き入れる者はなかった。</p>

「」の前後って、書式に習うと改行するしかないんだよね。

57 :ハイソ:03/06/25 04:28 ID:???
>>54
フロンペ=FrontPageExpressで作ってたころ、かつ「CSS? なにそれ?」
ってな厨のころ……って意味。行間あける為に

<p>我輩は猫である、名前はまだない。<br>
<br>
「じゃあ、ラブリーちゃんと呼んでやる」<br>
<br>
それだけは、ちょっと……。</p>

って感じで無理矢理行間を作ってたわけです。(嗚呼、恥ずかしい……)

>>55
<br>や<pre>がアクセシビリティに悪いっていうの、詳しく説明してほしい。
正直、知らんかった。

>>56
「引用」を表すタグがあるんだから「会話文」を表すタグも欲しい。
ないものねだりしてもしょうがないので、素直に<br>使うしかないと思われ。
まぁ、ライノベもどきを書いてる小説サイトならガンガン改行してもそれが味(?)
になるかもしれないけど、論文書いてるサイトだと、バカっぽく見えるだろうね。


58 :Name_Not_Found:03/06/25 07:12 ID:RfIIKNwB
なんだかんだ言っても<br>で読みやすい文となるならそれでいいじゃん。

うちは逢えて<br>でやってるが、読みやすいといわれますよ。目がちかちかするって人がたまにいるので色は考える必要あり


59 :Name_Not_Found:03/06/25 09:36 ID:???
>>58
全然ダメ

60 :Name_Not_Found:03/06/25 10:13 ID:???
>>59
喧嘩する気はないので理由を明確に述べよ

61 :Name_Not_Found:03/06/25 10:30 ID:TJfY4W0i
おお!すごく良スレだなぁ
俺のサイトも今リニューアルしててちょうどそこを考えていたところ。

最近は、10ptで書いてるところ多いけど、デザインが引き締まるっつう
だけで全然メリットないよね。読み物部分に関しては。
ちょっとアンバランスだけど、トップページやリンクページを
10ptにして読み物コンテンツは行間15ptの文字11ptにしてみた。


メニューつけて一連の段落ごとにページ分けるか、
全部一気に書いちまうか、実は今現在もすごく悩んでいる。

初めは>>47のゆうようにスクロールバーの問題があったので、
スクロールバーが出ない程度で区切ってみたが、鬼のような
ページ数になった。多すぎる「クリック」っでだんだん読む気が
薄れるなぁと思って3スクロールぐらいにしてみることにしたよ。

結局、この部分って人それぞれだよね。2パターン作ったので
一ヶ月ごとに入れ替えてログ見てみようと思う。

それから行間と同じくらい大切なのが文中の「小見出し」だよ。
段落の頭にたとえば「読み物は小見出しが命」見たいな一行要約を
入れるわけ。本とか見るとその辺のテクがわかるよ。

っで、小見出しと本文はインデントをつける方がよい。

そういう意味でも>>50
http://www.pugx3.com/bfi/html/howto/lineheight/
は秀逸だよ。実際すごく読みやすいよね。

まぁ侍魂みたいなものには小見出しは不要だけど
特に説明文を書く人なんかは重要だとおもう。

62 :Name_Not_Found:03/06/25 10:33 ID:???
59ではないですが、改行はUAに任せるべき、という考え方があるんです。
brで強制改行をすると、ブラウザの横幅が広すぎても狭すぎても困ることがありますので。
それと、視覚整形のための改行は、htmlとして間違っているという意見もありますね。
論理的に意味のあるbrなら良いのですけど。

63 :Name_Not_Found:03/06/25 10:35 ID:???
と、>>62>>60宛て

64 :Name_Not_Found:03/06/25 10:42 ID:k9zEf2b7
http://www.4japan.tv/~7s_gate/bigagent/index.cgi?ID=kkkk007
http://www.lo-po.com/owner/?3425
http://www.adultshoping.com/addclickport.cgi?pid=1055777477
試しにやってみれば?

65 :Name_Not_Found:03/06/25 13:11 ID:???
>>62
このスレではHTMLとしての正しさとか、そういう他スレでなされる
べき(あるいは他スレでも出来る)話題についてはしないほうが有意
義なスレになると思うんだがどうだろう。



66 :Name_Not_Found:03/06/25 14:12 ID:???
そうだな。じゃあ話を戻そうか。
改行しない長文ってどうよ。

67 :ハイソ:03/06/26 01:26 ID:???
う〜ん、どうしても「文章の書き方」に絡んでしまうなぁ。
章、節、項、段落、文。と文章には階層があるわけで、

章=ページ単位もしくは<h1>
節=<h2>
項=<h3>
段落=<p>

↑こうするのが一番自然な流れだと思うんだけど、この下の「文」をいちいち<br>
で改行するのは、やっぱり不適切だと思う。
UAの「折り返し機能」と<br>による改行は別モノだから、ちゃんと意味の切れ目で
<br>を使うのであれば、問題ないと思う。
>>66の言う「改行しない長文」ってのは解釈が難しいけど、段落構成(<p>の使い方)
が真っ当な文章なら、途中で改行しなくても悪くはないと思う。(会話文
の場合は、行を変えて……そういや小学校の作文の時に習ったなぁ)

改行の少ない長文の場合「うわ〜、文字がいっぱい!」と見た目の圧迫感があるので
行間や余白は多めにとっとくといいかもしれないね。

68 :ハイソ:03/06/26 06:18 ID:???
悪例として、
http://www.aozora.gr.jp/cards/000129/files/682.html
↑青空文庫からひっぱってきました。
文字数は15,395字。ソースはすごくシンプル。つか、素っけなさすぎ。
当然左右のマージンも行間も字間も無し。背景真っ白文字は黒。
段落に至っては<br>と全角スペース。<p>は無し(一個あったけど閉じ忘れ)

森鴎外クラスの文豪だからこそ、迫力があると無理に誉めることもできるけど、
この圧迫感は……。
極端な例だが、参考までに。

69 :Name_Not_Found:03/06/26 12:10 ID:???
>>68
こいつは酷いね。目線を右から左に戻すときに、行を見失う。
試しに line-height: 1.8; を指定して読んだら、普通に読めた。
それでもまだゴチャゴチャしてる感じはあるが。

70 :Name_Not_Found:03/06/26 17:15 ID:???
長文レビューとコラムのサイトやっとります。
このスレは参考に何かとなりそうなので勃ってうれすぃ。

自サイトとお付き合いのあるサイトさん、
行間開けてないし、改行もほとんどしてないんですよ。
多分それがマイスタイルマイデザインと思いこんでるみたいなんですけど。
そんな訳のわからぬこだわりは窓から打ち捨ててほしい。

魅力のあるしっかりした文章を書かれる方なので、残念というか勿体無いというか。


71 :Name_Not_Found:03/06/27 05:32 ID:???
>>68
 こういうのよくみかけるね。

 しかしこれはへんにHTML化されてない分、何らかの二次利用などには
向いてそうだが。



72 :ハイソ:03/06/27 09:49 ID:???
>>70
他人に強制するようなものじゃないけど、やっぱり読んで欲しくて公開しているわけだから
読んでもらいやすいように工夫する、そういう心遣いはやっていきたいです。
「勿体無い」ってのが正直な感想なんだよね。

>>69 >>71
森鴎外を出してきたのはちょっと恣意的だったかも、と反省。
同じ青空文庫の宮沢賢治をローカルで弄ってみたんだけど、なかなかの難物でした。
何らかの二次利用を考えるとしても<hx>くらい打ってて欲しかった。素のテキストで
ベタっとしててくれる方が作業しやすかったよ……。

ちなみに行間1.8、左右のマージン10%、paddingでも5%とってみた。背景色がピンクでも
文字の回りを白系にすると読みやすさは全然(・∀・)イイ!!
この方法だと色遊びもできて便利かも。

73 :Name_Not_Found:03/06/27 12:42 ID:???
よみやすいcssをうpしてちょ

74 :Name_Not_Found:03/06/28 00:27 ID:???
>>73
専用スレがあるよ

75 :Name_Not_Found:03/06/28 02:53 ID:???
>>68

俺のサイトそっくり。。。

76 :Panawave Research Institute:03/06/28 20:15 ID:???
>>75
い`

77 :Name_Not_Found:03/06/30 12:50 ID:adXX1fYG
http://www.houritu.info/houritu/keihou/000.html
こんな感じはどう? 刑法の解説のサイトなんだけど。

78 :Name_Not_Found:03/06/30 20:41 ID:???
>>77
会話文のところが、改行が入ると読みづらいな。
<dl>でマークアップすれば良くなると思うんだが。
他は良いんじゃないだろうか。
個人的な好みをいえば、背景が眩しいのが少々つらいかも。

79 :Panawave Research Institute:03/07/01 01:14 ID:???
http://www.npa.go.jp/keibi4/it2.htm
警視庁のサイトだが…。
激しく読みにくいと思わないか?

80 :Name_Not_Found:03/07/01 01:29 ID:cOPjpjUM
>79
背景がクソだね

81 :ハイソ:03/07/01 18:42 ID:???
>>77
文章量は多いのに項立てがしっかりしてて一つ一つが短いので、装飾がなくても
読みやすい。その上で行間とったり色を合わせたり、読みやすいようにとの気遣いが
見てとれて良サイトだと勝手に認定したい。
漏れは眩しいとは思わなかったけど(ディスプレイがヤニで汚れてるのか?)文字が
右から左までっていうのが気になりました。窮屈な感じがしない?
>>79
背景に「文字」は絶対にやってはいけないなぁ。
英字紙みたいな小さなアルファベットがごちゃごちゃ並んでいる画像なら、まだ
大丈夫かもしれんが(それでも見づらいだろうなぁ)、こんなに主張の激しい背景
だと文字が埋もれてしまう……。色はいいのに。

82 :Name_Not_Found:03/07/01 20:04 ID:E3V7rKE8
>>79
背景が「笑点」だったら祭りにするのに…

83 :Name_Not_Found:03/07/01 21:29 ID:???
>>77
っていうか紙幣をスキャンするのは犯罪じゃないのかな。
刑法解説となると気になるな。



84 :Name_Not_Found:03/07/01 21:37 ID:fziSs8hY
私が作りました(^O^)
http://nuts.free-city.net/index.html

85 :ハイソ:03/07/02 03:10 ID:???
踏めねーよ。

86 :Name_Not_Found:03/07/02 07:02 ID:???
>>83
スキャンする行為自体は問題ないのでわ?財務省のサイトも
アウトになっちまうでしょ。
↓参考
http://www.mainichi.co.jp/life/law_building/build/internet/internet_qa.html

87 :Name_Not_Found:03/07/02 07:38 ID:???
>>79
ものすごい背景だな。担当者はこれを見て読みにくいと思わなかった
のだろうか。不思議だねぇ。

で、俺が考えるのは、優先度の高い順に、

1 配色(原色×、パステルカラー×)
2 行間(150%を標準としたい。ブラウザの標準値×)
3 適切な項目立て(章、節、……)と、見出し
4 ワンポイントの挿絵(挿絵と言うほどでなくてもよい。例えば>>77
   要所要所に「青色の■」があるが、ああいう奴)
5 全体的なデザイン(CSSでイケてる……スレとかを参照)

一気に変えるのは大変だから、やばげなサイトの人は、この順序で
サイト一新に挑戦してみてください。


88 :ハイソ:03/07/03 02:40 ID:???
>>86
文字が小さく固定されてるのがイクナイ……って言おうと思ったけど、>>83へのレス
だったのね。

>>87
配色のパステルカラーについては、白地にワンポイント(例えば見出し部分の背景
とか水平線代わりの画像とか)ならばいいと思うんだけど、「背景色」の誤字だと
すれば激しく同意。(つか昔やってしまってた、パステルカラー背景)

>一気に変えるのは大変だから
↑長文サイトって、何気にページ数も増えません?
漏れのとこでも120ページくらい(あんまり分割してないのに)あるので、サイト一新
の時は苦労しまつた(身から出た鯖)

89 :Name_Not_Found:03/07/03 07:02 ID:???
>>88
そうですね。背景色とか、文字色、それも極端なパステルカラーのことです。
女性のサイトにありがちなやつ。短い日記なんかだとまだマシですが
長文でそれは頂けないです。正直いって、数行読んだだけで、もういいやと
思って「戻る」ボタンを連打したサイトが結構あります。

長文読ませるのに奇抜な色はNGですね。一見すると味も素っ気もないような
背景でいいと思うのです。ポテトチップスってのは色々な味がありますが、
一番売れているのはスタンダードな「うす味」なんですよね(コンビニバイト談)。


90 :Name_Not_Found:03/07/03 07:07 ID:???
>>81
煽りではないので教えて下さい。

>文字が右から左までっていうのが気になりました。
右から左までってどういう意味ですか?


91 :Name_Not_Found:03/07/03 07:20 ID:???
81ではないが、
画面いっぱいに文字が表示されることに圧迫感を感じる、ということだろ。
それぐらい読み取れよ。

92 :Name_Not_Found:03/07/03 07:21 ID:???
>>91>>90へのレス

93 :ハイソ:03/07/03 13:43 ID:???
>>90
左から右までって書けばよかったのかな? もしくは端から端まで隙間なく、と。
marginを指定して欲しいってことなんです。ディスプレイって横長なのに、文字も
横書きだからそもそもが読みづらいと思うんだ。
縦長の紙に縦書きに印刷すれば読みづらいのと同じでつ。

>>91
ありがd

94 :Name_Not_Found:03/07/03 15:14 ID:???
>>93
なるほど、左から右と言われれば直ぐに意味がわかります。
だが文庫本も縦長に縦書きのはず。要はマージンということになりますか。


95 :Name_Not_Found:03/07/03 15:54 ID:???
背景画像をいじって読みやすくすることってできないかな。
ウチのサイトは薄く横縞を入れているが、効果のほどは微妙。

96 :Name_Not_Found:03/07/03 16:53 ID:???
>>95
文字のサイズ変えても大丈夫?

97 :Name_Not_Found:03/07/03 16:56 ID:???
>>96
文字に合わせているわけじゃないから。
横線じゃなくて、ストライプ状の柄ってことね。

98 :ハイソ:03/07/04 01:14 ID:???
>>94
文庫本は見開きで横長。
あくまで見た目重視なので「見開き」を基準に考えてます。
新書判だと小説とかは二段組、ノンフィクションは段組無しが多いようですが、いずれに
しても、見開きで考えれば横の方が長いです。

一方、横書きの書籍の場合、見開き単位で考えれば二段・四段組になっているので、
縦の方が長くなっています。

んで、この書籍でいうところの「見開き」に、webの「スクロール」が相当するかと
いうと漏れは疑問に思っています。一度に見える範囲は、やっぱり限られますから。

横書きは縦長に、縦書きは横長に。左右に15%づつマージンとったら、文字の領域
は70%になるわけですから、横の方が短くなります。(たしかディスプレイの規格
って、縦:横=3:4だったはず。横が7掛けで3:2.8になりまつ)

↑全画面表示前提の数字ですが(w

99 :Name_Not_Found:03/07/04 01:26 ID:???
>>98
もうちょっと要約して書いて。

100 :ハイソ:03/07/04 01:58 ID:???
すまん。
>>94へのレスとして
「見開きで見れば横長じゃん」

・横書きなら縦長に書きたいので、左右に充分余白とるといいと思う。

以上2点について書きました>>99

101 :age:03/07/05 21:11 ID:???
age

102 :Name_Not_Found:03/07/06 23:13 ID:???
<p></p>を使うと、段落の間に空行できますよね。
あれ、無くす方法ないのでしょうか。
創作なので、無意味な空行を避けたくて<br>を使ってしまいます。
でもHTML文書として、段落には<p>を使うべきなんですよね。

せめてCSSでなんとかできないか、調べまわり中です。

103 :Name_Not_Found:03/07/06 23:35 ID:???
p{
margin-top: 0px;
margin-bottom: 0px;
}

こんな感じ?
俺もCSS勉強し始めだから自信ないけど

104 :Name_Not_Found:03/07/06 23:56 ID:???
あ、なるほどマージン設定すれば・・・
試してみます。ありがとうございます!

105 :Name_Not_Found:03/07/07 01:14 ID:???
ほほえましいスレ違いですね

106 :Name_Not_Found:03/07/07 10:45 ID:???
だらだら書いてたら、いつの間にかhtmlのファイルが一つで30KBに達した。
読みづらいんだろうな。分けるか。

107 :Name_Not_Found:03/07/07 11:51 ID:EXC0lJm9
>>106
きちんとナビゲーションなどが作られており、文章の項立てもしっかり
できていれば30KBぐらいなら通常の知能がある奴ならちゃんと読めるよ。
なおGoogleのキャッシュ機能は100KBまでのファイルが対象なので、
それを超えるのは良くない。


108 :Name_Not_Found:03/07/07 11:52 ID:cK2Aeh5t
>>1-107
おまえらのサイトはチンカス

109 :Name_Not_Found:03/07/07 11:56 ID:???
>>108
(*゚д゚) 、ペッ 

110 :Name_Not_Found:03/07/07 11:59 ID:???
>>107
30KB程度で十分です。あまり細かく分けられると読むのがメンドイです。


111 :Name_Not_Found :03/07/07 18:57 ID:???
>>102さん
別に<br>で問題ないと思う。
一つの文章は<p></p>でまとめらて、その中での改行は<br>。
文章が変わるなら一行分開いてた方が読みやすくないですか?

112 :Name_Not_Found:03/07/07 19:14 ID:???
pでマークアップしたいが、行間を開けたくないといってるんだから、
>>103の解決法がベストだと思うぞ。

113 :Panawave Research Institute:03/07/07 19:54 ID:???
<P>〜</P>って文章以外のところで使うのは不適当?
例えば、トップページで
<HTML>
<HEAD>
</HEAD>
<BODY>
<P><IMG src="file:///C:/Documents and Settings/ADMIN/Application Data/IBM/HomePage Builder Version 6/tmp/logo1.gif" width="21" height="33" border="0" alt="f
"></P>
<P>文章</P>
</BODY>
</HTML>
こんな記述があったとして、上の<P>〜</P>は画像の段のみに使われてるけど、Pが段落を表すものだから不適当?
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src="file:///C:/Documents and Settings/ADMIN/Application Data/IBM/HomePage Builder Version 6/tmp/logo1.gif" width="21" height="33" border="0" alt="f
">
<P>文章</P>
</BODY>
</HTML>
こうすべき?それとも上のままでいいかな?

114 :111:03/07/07 19:55 ID:???
ゴメンね(‘д`)

115 :Panawave Research Institute:03/07/07 19:55 ID:???
ごめん、なんか余計なものが入っちゃったけど、言いたいことは分かってくれたと思う。
ホームページビルダーだとこうなっちゃうんだよね…。
どうしたらいいものか。こんな糞ソフト使ってるほうが悪いのかな?

116 :Name_Not_Found:03/07/08 00:03 ID:eKeonV4m
>>115
BODY直下のIMG要素は、StrictなHTMLでは認められない。
divでくくるのが本来の解決法といえる。
さらに詳細を知りたいならStrictスレもある。
ビルダーだけが糞ソフトではない。たいていのソフトは
正確無比なHTML文法を吐き出すという意味では、糞。


117 :Name_Not_Found:03/07/08 00:16 ID:???
>>116
まあ<br>連発する俺のほうが糞

118 :Name_Not_Found:03/07/08 00:18 ID:???
>>116
div じゃなくて、h1 とかのほうがいいと思うな。
ロゴの画像らしいから。
何のロゴかは知らないけどさ。ケースバイケースでいこう。
div に限定すべきではないと思った。


119 :Name_Not_Found:03/07/08 00:27 ID:???
>>1の小説っていうの見て思ったけど、
しょぼいフリースペースで小説とか詩とか掲載するサイトは
広告とか入ってて雰囲気ぶち壊しになってて萎えるじゃん
でもフレーム使った場合一番目立つところに広告を置けば他のフレームの
広告は消しても良いことになってる。
じゃあ広告置く用にページを一つ用意して、その真ん中に
でかい iframe を配置して、その中に文章を表示するのはどうかな?
うざいですか? ごめん‥‥‥良い案だと思ったんだ‥‥‥

120 :Name_Not_Found:03/07/08 00:40 ID:???
フォントは等幅とプロポーショナル、どっちがいいかな?
へたれ小説書きで、今は等幅使ってんだけど

121 :ハイソ:03/07/08 01:09 ID:???
>>120
個人的にはプロポーショナルフォントがいい。
字間を開けすぎると文字が散らばって読みにくいんじゃないだろうか?
(実験してないからわかんないけど)

というか、フォントはいちいち指定しない方がいいんじゃないかなぁとも思う。

122 :Name_Not_Found:03/07/08 03:32 ID:???
本文のフォントがMS UI ゴシックってのはDQN?


MS UIゴシックは読みやすさに関しては賛否両論と聞いたことがあるのですが・・・

123 :Name_Not_Found:03/07/08 05:10 ID:???
>>122
フォントは読者に任せるのがいちばん。
見慣れてるフォントのほうが落ち着いて読める。

124 :Name_Not_Found:03/07/08 08:45 ID:???
現在のウェブ、長文と言う時点で負け組だろう。情報や論文、コラムはヴィジュア
ルを使い効率良く出来るし小説はさわりだけで本文はダウンロードさせればいい。

俺の主張?いらん!

125 :Name_Not_Found:03/07/08 11:12 ID:???
誰か>>124を訳してくれないか。
なにか凄いことを言ってそうなんだが、意味が分からん。

126 :Name_Not_Found:03/07/08 12:08 ID:???
テキスト垂れ流しは糞。
ヴィジュアルに凝れ。

ということか。

127 :Name_Not_Found:03/07/08 13:28 ID:???
>>125
ワラタ

128 :Name_Not_Found:03/07/08 21:00 ID:???
> 情報や論文、コラムはヴィジュアルを使い効率良く出来るし
具体例を挙げてくれると助かる。

129 :ハイソ:03/07/08 21:30 ID:???
>本文はダウンロードさせればいい。
? ごめん、意味わかんない。
DLさせてプリントアウトさせるの? そんな手間かけさせるよか読みやすいよう
工夫するのが自然じゃないかなぁ。DLしたところで読みやすさ読み難さって変わらない
し、第一、閲覧するってことはDLしちゃってるってことだし。
あ、もしかしてHTML形式にこだわるなってこと? HTMLじゃない形式で読みやすい
カタチがあるのなら、教えて欲しい。「一太郎で作ってそのままUL」みたいなこと
ではないんですよね?

130 :Name_Not_Found:03/07/08 22:35 ID:???
おまいら、>>124は勢いに任せて言ったはいいものの、
引っ込みがつかなくなってる香具師なんだから優しくしてやれw

131 :Name_Not_Found:03/07/08 23:40 ID:???
>>129
なんだかんだいって適当(=適切)に改行された.txtは読みやすいよ。

それから、紙は読みやすいんだ。
印刷しやすいように配慮するのも、いいと思うな。

というのは、今日長文ページを印刷しようとしたら、勝手にページ設定を
無視してはがきくらいの大きさで改行して印刷しちゃうわけ。
しょうがないからHTMLをダウンロードして、邪魔なタグをとったら
ようやくまともに印刷できるようになったけど、さくっと印刷させてほしかった。



132 :Name_Not_Found:03/07/09 04:01 ID:???
http://www.yin.or.jp/user/moriya99/atoz/h6.00.htm

俺、このサイト参考にしてるよ。
読ませることにこだわりたいよね。

133 :Name_Not_Found:03/07/09 04:19 ID:???
等幅フォント読む気にならん

134 :Name_Not_Found:03/07/09 06:55 ID:???
>>132
こりゃどうも。読ませてもらうよ。


135 :Name_Not_Found:03/07/09 08:17 ID:???
>>131
たしかにそういうことがあるなぁ。
ところで,ここにいる人は印刷用のCSSって用意してる?

136 :Name_Not_Found:03/07/09 08:28 ID:???
>>132
リンク先のサイト、ソースを見ると・・・
本当にコンテンツを“見せる”ことにこだわってるのね。。。

137 :Name_Not_Found:03/07/09 09:43 ID:???
>>136
たしかにすごいなFrontPagだとああなるんだろうか。

あと背景色の照度を下げるのは賛成だけれど,暗くしすぎではないのだろうか
他のサイトを見たあとだとかえって読みにくい気がする。
でも全般的には役に立った。ありがとう。

138 :Name_Not_Found:03/07/09 10:48 ID:???
>>102
Strict-HTML スレッド
http://pc.2ch.net/test/read.cgi/hp/992708594/429
http://pc.2ch.net/hp/kako/992/992708594.html
段落の頭の一字下げに全角スペースを使いたくない俺も
>103の方法でやってる。

p{ margin-top: 0px;
margin-bottom: 0px;
text-indent: 1em;}
にして、意味段落ごとに<br>で区切る。

<p>〜形式段落〜</p>
<p>〜形式段落〜</p>
<br>
<p>〜形式段落〜</p>
<p>〜形式段落〜</p>

これでどーだ?

139 :Name_Not_Found:03/07/09 11:51 ID:???
>>138
stricterなら、三段目のpにclass名を与えてmargin-topを指定するべきかも。
普通の人ならbrでいいけど。

140 :102:03/07/09 13:22 ID:???
>138
そうですね、私もそれに落ち着きました。いい感じです。
>103さんに改めて感謝。
あとは行間を入れて、BODYの上と左右にマージン10%ずつ入れて。
HTMLでは

<p>本文</p>
「台詞」<br>
「台詞」<br>
<p>本文</p>

・・・って感じで、今書いてます。


ところで行間は130%でとってるんですが、やっぱり狭く感じます?
150%くらいが好きだという意見をよく見かけるのですけど・・・。

141 :Name_Not_Found:03/07/09 20:18 ID:???
個人的にはチト狭いな。150%は欲しい。書籍の行間を定規で測ってみるのも
面白いかも。


142 :141:03/07/09 20:25 ID:???
僕の場合は、130%や140%、150%、180%などで
それぞれ長文を読んでみて、どれが一番しっくりくるか、と
実験して見たところ、150%に落ち着きました。
短文で実験した場合、140%〜180%はどれも読みやすく
感じてしまうので、ある程度長い文で試して見てください。


143 :Name_Not_Found:03/07/09 23:18 ID:???
>141-142
そうですか・・・。私の感覚を押し付けるのも問題ですしね。
自分では130%が一番しっくり来てたんですが、
一般的な感覚から外れてますね。広げることにします。


144 :Name_Not_Found:03/07/09 23:49 ID:???
>>143
出来上がりを見ていない人の意見なんて、もっと
ほどほどに聞いておいたほうがいいんじゃないだろうか。

作り手の考えは、大事にしてほしい。

145 :Name_Not_Found:03/07/10 04:37 ID:???
130は狭すぎ。180%がおすすめ。

146 :Panawave Research Institute:03/07/10 06:31 ID:???
このスレ見てて、やっぱ行間の好みってすごく分かれるものだなあと思った。
いっそのこと130%バージョンと180%バージョンを作るかな。

147 :Name_Not_Found:03/07/10 07:05 ID:???
180%とかいってんのは年寄り

148 :Name_Not_Found:03/07/10 08:38 ID:???
フォントサイズについて考えよう
http://pc2.2ch.net/test/read.cgi/hp/1042293757/
このスレが参考になるかな

149 :143:03/07/10 10:16 ID:???
>144
文章表現、内容に関しては、そうだと思います。
伝えることを意識した文章でさえあれば、あとは作り手の考えを大事にすべきだと。

けど、見栄えに関しては閲覧してくださる方に合わせることが大事かなと。
ただでさえWeb上では長文を読むのに向いてないわけですし・・・
文章そのものが自分の表現したいことで、見栄えはその補助ですしね。

・・・おや?
するとユーザーのスタイルシートに委ねるのが一番?
けど、自分で設定してる人って多くはないだろうしなぁ・・・。

150 :143:03/07/10 10:19 ID:???
スマソ。

× 文章そのものが自分の表現したいことで、見栄えはその補助ですしね。

○ 文章で書いた描写と内容こそ自分の表現したいことで、
  見栄えは文章を読んでもらうためのものですしね。

・・・言いたいこと、伝わってるといいな。

151 :sage:03/07/10 10:25 ID:???
ユーザースタイルシートは、現状では理想論になってしまいますね。
スタイルシート?なにそれ?ていうユーザーがWEBの標準ですし。

152 :Name_Not_Found:03/07/10 13:53 ID:???
>>135
印刷時は左余白ゼロにしたいんですけど、そういうのできますか?
代替スタイルシートしかない?


153 :Panawave Research Institute:03/07/10 17:17 ID:???
スタイルシート書けた状態でも、スタイルシートかけない状態どっちでも綺麗に読めるサイトが一番いいのかも。
でもスタイルシート使う場合、たいていスタイルシートでしかできないような事もやってるから難しいよね。

154 :Name_Not_Found:03/07/10 19:10 ID:???
>>152
<link rel="stylesheet" type"text/css" href="screen.css" media="screen">
<link rel="stylesheet" type"text/css" href="print.css" media="print">
でプリント用のスタイルシートを用意するのではだめかな?

155 :Name_Not_Found:03/07/10 19:31 ID:???
ごめんtype="text/css"ね。

156 :152:03/07/13 00:39 ID:???
>>154
あ、そうだね(゚д゚)!
もう、馬鹿だな僕は!!
ありがとう。

157 :Name_Not_Found:03/07/14 17:26 ID:???
このスレも抽象論は大体出尽くしたのかな。
やはり具体例がないと盛り上がらないか……。
でも,個人サイトを晒すのはよくないし……。

158 :Name_Not_Found:03/07/14 18:10 ID:???
p{
font-size:smaller;
line-height:130%;
}

漏れの基本スタイル。
小説書きだけど敢えてtext-indentはつけてません。
(フォントサイズは色々な事情がアレするのでコレ)

159 :Name_Not_Found:03/07/14 18:50 ID:???
http://www.homelesspixel.de/remix/
カスイケスレから。長文サイトじゃないけど。

こういうレイアウトなら、横幅が無闇に長くなるのを自然に防げるなと思った。

160 :Name_Not_Found:03/07/14 22:22 ID:???
>>159
きれいなサイトだね。デザインとしてはありがちだが,レベル高い。
でも長文サイトの場合,サイドメニューに何をいれるべきなのか迷う。

161 :Name_Not_Found:03/07/15 00:04 ID:???
>>159
よくある3段組レイアウトだと思うんだが、何か特別なところでもあるのかな?
本家W3Cは float:left 3連発、>>159のサイトは両端を position:absolute にして
3段組を実現しているが、いずれもTABLEレイアウトを排除するための一般的な方法。

表紙のページには向いているが、長文がダラダラとあるページに向いているのかな?
という気はするが。

162 :Name_Not_Found:03/07/15 00:53 ID:???
>159
却って横幅が短くなりすぎていると思った。
頻繁に改行が入ると目を動かす回数が増えて辛い。

163 :Name_Not_Found:03/07/15 03:15 ID:???
>162
自分もそう思った。
800×600で見たとき、このくらいの文章量ならちょうどいいけど
これより見出しごとの文章が長くなるとすごく見づらそう。
800×600でお気に入りを横に表示したりしたときにゃ目も当てられない。
1024×768だと、文章の部分はいい感じなんだけれど
サイドメニューのせいで画面から圧迫感を受ける。

うーん、メジャーなブラウザが
max-widthに早く対応してくれりゃいいんだけれど…

164 :山崎 渉:03/07/15 09:51 ID:???

 __∧_∧_
 |(  ^^ )| <寝るぽ(^^)
 |\⌒⌒⌒\
 \ |⌒⌒⌒~|         山崎渉
   ~ ̄ ̄ ̄ ̄

165 :159:03/07/15 10:12 ID:???
いや、このままのレイアウトが使えるなんて思ってないよ。
単に横幅を狭くする一例として挙げてみただけ。
横幅を制限したいと考えてる人は多いと思うから。

166 :Name_Not_Found:03/07/15 12:43 ID:???
>>165
なるほどね。
でも,そうするとVGAなどへの対処が問題になるね。
代替スタイルシートしかないのかな。

>>163
げっ,max-widthに対応していないブラウザあるのだ……いかん。
思いっきり使っていた……。

無知な自分を晒しage

167 :山崎 渉:03/07/15 14:05 ID:???

 __∧_∧_
 |(  ^^ )| <寝るぽ(^^)
 |\⌒⌒⌒\
 \ |⌒⌒⌒~|         山崎渉
   ~ ̄ ̄ ̄ ̄

168 :Name_Not_Found:03/07/15 19:22 ID:???
山崎よ。寝るのが早いぞ。

169 :Name_Not_Found:03/07/16 13:12 ID:???
良スレになりかけage

170 :Panawave Research Institute:03/07/17 02:19 ID:???
ttp://www.bea.hi-ho.ne.jp/sigong-12472/andorraj.html

こういうサイトは読めないぜ…

171 :Name_Not_Found:03/07/17 06:16 ID:???
>>170
なんかすべての条件を満たしている感じだな。
・背景に画像を使うのはすごく難しい
・適切に分けろ
・行間を広く
・ナビゲーションを…
でも,小さい文字に固定しなかったのが救いか……

ちなみに内容をちょっと読んだが,読者への配慮に欠ける気がした。
読者として何の話をしたいのか,それがどのくらい続くのかしりたい
のに,延々と平板な描写が続くだけなのはつらい。

人のサイトにケチつけてもうしわけないが,自分だって多少はあて
はまるのかもしれないという反省とともに。

172 :Name_Not_Found:03/07/17 09:04 ID:???
書いている本人には気づきにくいんだよね。
ページとして読み難くても文の内容を既に知っているせいでそのことが気になりにくいと言うか。

自分も長文の多いページをupして、そこの内容の記憶が薄れた頃に見てビクーリすることあります。




173 :Name_Not_Found:03/07/17 11:18 ID:???
背景画像は致命的かもしれん・・・
テキストがものすごく面白くて、ブックマークしてるサイトがあるのだが、
勿体ないことに背景が字にかぶって読んでられない印象がある。
そのサイトを見る時だけ、web上の色を採用しないにチェック入れてるよ・・・ああ勿体無い。
すべてのテキストを<b></b>でかこっちゃってるのも、ちょっとつらい。
太字にしないと文字が浮き出ないって段階でなにかがおかしいことに気づいてホスィ・・・

・・・とか言いつつ、うちもこの間までテキストをテーブルで囲っちゃってたりしたのだが。
ハズカシー

174 :Name_Not_Found:03/07/17 12:42 ID:???
>>172
> 自分も長文の多いページをupして、そこの内容の記憶が薄れた頃に見てビクーリすることあります。
それ,俺もするな〜。自分ではなんとか読めるんだよな。

とくに興奮して書いたとき。
自分では感動しているから,早く気持ちを文章に残しておきたいんだけれど,
主語を省略したり,専門用語を連発したりで,他人からは読めたもんじゃない
文章になってしまう。
だからページの文章でも,手紙でも,一日おいて頭を冷やしてからupするように
している。朝起きて読んでみると「なんじゃこりゃ」と思って訂正することですこしは
読みやすい文章になる気がする。ちなみにこの文章は勢いだけで書いていますが。

175 : ◆FoxMX6a/hk :03/07/22 06:00 ID:???
ガイシュツと思われるが、背景色とのコントラストが強すぎると読んでもらえにくい。
自分がそういうサイトを読まないからw

んで、自サイトに長文を載せる際の提案をひとつ。
どこかの英文サイトの本文をコピってきて、自サイトのレイアウトに貼り付けてみる。
あるいは、青空文庫の小説なんかで同じことをやってみる。
これらは読むのに労力が要るから、ロードしたときに「お腹いっぱい感」を感じやすい。
最近のレスにもあるように、自分で書いた文章は長くても苦にならないからね。

176 :Name_Not_Found:03/07/23 00:48 ID:???
他のスレで見つけたんだけど
http://www.kanzaki.com/docs/html/color-check
ここの、コントラストと読みやすさの関係ってのが参考になるかも

177 :Name_Not_Found:03/07/23 20:40 ID:???
>176
ナイス!
早速ブクマしますた。参考にしよう。

178 :Panawave Research Institute:03/07/23 21:17 ID:???
どーでもいいけど、私サイトのせる場合は直リンクは避けよう。

179 :Name_Not_Found:03/07/23 21:31 ID:???
なぜ?ヲチ板じゃあるまいし

180 :Panawave Research Institute:03/07/23 21:36 ID:???
>>179
どこの板から来たなんて向こうには伝わらないよ。
全てリファラにはhttp;//ime.nu/が残るでしょ。

181 :Panawave Research Institute:03/07/23 21:36 ID:???
;→:の間違い。ゴメソ。

182 :Name_Not_Found:03/07/23 21:41 ID:???
>>180
いやだから、ヲチ板ならime.nuを残さないようにする必要も多いと思うけど
そうじゃないならime.nuでもいいじゃない

183 :Panawave Research Institute:03/07/23 21:47 ID:???
>>182
言ってる意味がいまいちよく分からないが。
どこの板に限らず、向こうに伝わる情報はhttp://ime.nu/これだけ。
どの板にさらされてるかなんて、こっちが分かってても向こうには分からないでしょ。
神経質なウェブマスターだったら、URL変えられたり、アクセス拒否されて、後々自分の首を絞めることになるよ。

184 :Name_Not_Found:03/07/24 02:33 ID:???
(´-`).。oO(今さら神埼タソがそういうこと気にするか…?)

185 :Name_Not_Found:03/07/24 02:34 ID:???
以前 fj で話題になった「小説をHTMLデータ化する場合」
http://groups.google.co.jp/groups?threadm=9tjb14%24fgs%241%40news3.dti.ne.jp

Google なんでスレッドが切れちゃってますけど。

CSS の class セレクタや quotes の値が日本語で書かれているので、
適宜置き換えたり Unicode にエスケイプする必要がありますけど。

186 :Name_Not_Found:03/07/24 03:16 ID:SUJs7TuP
ここはホームページでも40字改行をしてるみたいだけどな(ぷ

ttp://www.maromaro.com/readtop.html

187 :Panawave Research Institute:03/07/24 04:18 ID:???
>>184
お前の言い分って小学生のいいわけみたいだな。

188 :Name_Not_Found:03/07/24 08:09 ID:???
>>187
特定の場所からのリンクを拒む人か?って話

189 :Panawave Research Institute:03/07/24 08:15 ID:???
>>188
>>178は誰だからいいとかじゃなくて、私サイトのせる場合の一般的なことを言ってるの。
勝手に読み替えないでくれ。


190 :Name_Not_Found:03/07/24 08:20 ID:???
( ´ _ゝ`)フーン

191 :Name_Not_Found:03/07/24 08:35 ID:???
自治厨ウゼー

192 :Panawave Research Institute:03/07/24 08:50 ID:???
>>191
厨房は論破されるとすぐそれだよな。

193 :Name_Not_Found:03/07/24 08:52 ID:???
名前から電波な香具師が(ry

194 :Panawave Research Institute:03/07/24 08:54 ID:???
>>193
名前に話を摩り替えるなよ。


195 :Name_Not_Found:03/07/24 08:58 ID:???
>>178-194
全員逝け。

196 :Panawave Research Institute:03/07/24 08:59 ID:???
>>195
ごめんよ。
濡れとしてはごく普通の指摘をしたつもりだったけど。
もうこないよ。

197 :Name_Not_Found:03/07/24 09:00 ID:???
直リンも厨房も粘着もスレ違いも全部同レベルだと思われ。

198 :Panawave Research Institute:03/07/24 09:02 ID:???
>>197
うん。だからごめんなさい。

199 :Name_Not_Found:03/07/24 09:06 ID:???
今時直リン云々は個々人の良識に任せてるもんだと思ってたけどな。
っつか晒されるのも叩かれるのも嫌だっつうんなら、
ドキュメントなんぞアップロードしなければいいわけで。

<!--ここまでスレ違い-->

200 :Name_Not_Found:03/07/24 09:14 ID:???
>198
ほんとにもう来なくていいから。

今度の改装にあわせて、サイトを黒背景から白背景に変えようと思うんだが、
テキストの色はやっぱ黒系か青系が読みやすいんだろうか?
赤とかも結構好きなんだけどな、俺。

201 :Name_Not_Found:03/07/24 09:15 ID:???
>>200
色合いにもよるかな。

漏れは#efefef背景に#000030文字でやってるけど、
これくらいの背景なら#600000文字とかでもいいかと。

202 :Name_Not_Found:03/07/24 18:53 ID:???
そんなときこそ>>176ですよ

203 :ハイソ:03/07/24 19:32 ID:???
>>201
赤い文字に対して偏見持ってました。
実際に試してみたら思ったよりも読みやすいですね。#600000。
やっぱり背景色とのコンビネーションなんだなぁと実感しました。

個人的には背景#efefefの文字#000030をマネさせてもらいたいと思いました。
白地に黒文字、よりもちょっと色入ってるだけで細やかな配慮というか、奥ゆかしくて
オサレでカコ(・∀・)イイ!!

閲覧者の何%が気付いてくれるかわからないけど(w

204 :Name_Not_Found:03/07/24 22:56 ID:???
というか300、030、003くらいのが一番見易い気がする。

205 :Name_Not_Found:03/07/24 23:06 ID:???
背景色は#CCC、#DDD、#EEEくらいかな

206 :201:03/07/25 13:34 ID:???
>>203
多分「赤い文字」って表現するから先入観持つのかと。
名前で指定できる色とか一通り見ると勉強になるかも。

207 :Name_Not_Found:03/07/25 16:27 ID:???
#600000は言うほど明るくない。小豆色に近い。


208 :Name_Not_Found:03/07/25 17:43 ID:???
まぁRGBのRだけ数値があるから赤っちゃ赤だが

209 :Name_Not_Found:03/07/27 13:46 ID:vkB0LLJz
「原稿用紙400字50枚分くらいを平然と1ページに収めたりしている」
らしい長文サイトだが、読みやすい。
「このページについて」に制作方針とか参考になるよ

http://www.aa.alpha-net.ne.jp/mamos/



210 :Name_Not_Found:03/07/27 14:06 ID:???
>>209
読みやすいね。まあ、縦に長すぎるのは少し苦痛だけど。
それと緑色の文字がリンクだったり、そうじゃなかったりするのが不便だと思った。
コントラスト低めなのもどうだろう。

どうなってるのかソース見てみたら・・・これでValidバナー貼ってるんですか・・・

211 :Name_Not_Found:03/07/27 16:40 ID:???
直リンもできないWEBなんてWEBじゃないな。

212 :Name_Not_Found:03/07/31 02:38 ID:???
↑スレスト

213 :山崎 渉:03/08/02 02:19 ID:???
(^^)

214 :Name_Not_Found:03/08/02 23:05 ID:???
>>209
リード部が秀逸だね。まあ,雑誌に寄稿したものやボツになったが
埋もれさせるのは勿体ないものをのせているんだろうが。

215 :Name_Not_Found:03/08/10 23:10 ID:???
保守

216 :ハイソ:03/08/14 20:29 ID:???
そろそろ出尽くしたのかな?

あえて避けてるのかもしれないんだけど、ルビの付けかたにはまだ言及がなかったな……。
>>209のサイトは青空文庫に倣って <<るび>> で囲ってるけど、漏れの場合は (るび)
で囲ってる。まぁ難読漢字を使わないのがいいんだろうけど、当て字的に使いたい場合が
あるわけで、そんな時はちょっと困ったりしています。

強引にルビをつける方法もあるんだろうけど、やっぱカッコ書きが手軽かな? 読みにくい
んだけど……

217 :Name_Not_Found:03/08/15 02:32 ID:???
そもそもルビを付けないと読めないような漢字を使わない。

218 :Name_Not_Found:03/08/15 03:05 ID:???
俺も難読漢字は言い回しを変える。
当て字は明らかに誰でも読める場合を除いては使わないな。
()内にルビは人名に使うけど。

219 :Name_Not_Found:03/08/15 03:08 ID:???
ルビ振らないと読めない名前ってDQNの書く小説もどきみたいだな。

220 :Name_Not_Found:03/08/15 03:34 ID:???
>>219
簡単でも読み方が数通りある場合、()内ルビを使うことがあるよ
例えば恵美(えみ)と読むか(めぐみ)と読むか迷いそうな時などに。

221 :Name_Not_Found:03/08/15 11:37 ID:???
>>220
そういう悩みはあるね。

小説のサイトで,登場人物にひらがなで名前を呼ばせていたよ,
「えみちゃん,どこなのー」みたいな感じで。
でも,ちょっと不自然だった。

222 :山崎 渉:03/08/15 16:23 ID:???
    (⌒V⌒)
   │ ^ ^ │<これからも僕を応援して下さいね(^^)。
  ⊂|    |つ
   (_)(_)                      山崎パン

223 :Name_Not_Found:03/08/16 10:28 ID:???
<RUBY CLASS="space">漢字<RT>ルビ</RUBY>

ってCSSでつけるのは一般にはあんまりしないの?
面倒なのか、CSS対応してない人のため?

224 :Name_Not_Found:03/08/16 14:17 ID:???
>>223
クラス名だけ書かれてもコメントのしようがない。

225 :Name_Not_Found:03/08/16 18:58 ID:???
>>223
よくわかっていないのだが,ようするにCSSで対応しろってことかな?
たしかに,CSSで対処しているサイトの方が多いような気がする。

括弧書きにすると解説みたいだし。

63 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)