デザインガイドがほしい

質問

Webサイトの企画をしています。
基本サイズ、フォントサイズ（一行の文字数）をどう設定するべきか模索しています。
客観的なデータが欲しいので、統計データやデザイン論など、参考になるサイトをご存知でしたら教えてください。
デザイナーとしての見解についてもよければご意見お願いします。
（最大幅600ピクセル、一行の幅400ピクセル以内で考えています。問題はテキスト！）

回答No.6

pluto

もうしわけありませんukhさん。もうひとつ修正です。文字の解像度別見え方の倍率をウィジウィグに対してでなく、各、最小に対してと最大に対しての相互の倍数を書いてしまったようです。正しくは１.3倍、0.65倍、です。ごめいわくをおかけしました。その他、再度チェックしましたので問題ありません。

回答No.5

pluto

あ、No.4ですが、数値ちがってました。最小キャンバスは574、270（最大余白ヨコ10pix,ウエ16pix含む）ですね。スミマセン。ダブってURLペーストしてるし（苦笑）。修正ついでなんですが、参考までに印刷の世界では（８～10ptでの話ですが）一行20～30字、行間150%～200%（150,175%が一般的）がもっとも読み手に疲労を与えない範囲であるとされているようです。一概にウェブに適用できないでしょうがご活用ください。

参考URL：

タイポグラフィのゼミ資料など

回答No.4

pluto

みなさん良いお答えをお持ちなので恐縮ですが、私も答えてみさせてくださいませ。
一般に640、480のモニタでIE,NNの４までのバージョンを開いたときの共通表示可能範囲はマージンを含んで563、270pix(Hotwired参照)です。ということは563ピクセル内に一行や最小限必要なものが収まったほうがより多くの人が快適に閲覧できます。また、文字の大きさはウィジウィグ（832、642として）に対して画面解像度で最大1.98倍（640、480）最小0.52倍（1280、960の時）に見えるのでその差の中で見やすい大きさを選ぶべきでしょう。私は12pt(fontsize="3"デフォルトですか、、)にしています。ただスタイルシートの時はMacとWinではポイントの解釈が違うのでpxを単位にしたほうがいいと思います。段組や行間の工夫で読みやすさがまたちがってくるので組み見本をHTMLで作っていろいろためされてはいかがでしょうか。
長々とゴメンナサイ。

参考URL：

http://www.hotwired.co.jp/webmonkey/99/43/index3a.htmlhttp://www.hotwired.co.jp/webmonkey/99/43/index3a.html

補足

具体的な資料のご提供、ありがとうございます。
まさにそういう数値としての資料をさがしておりましたので助かります。
印刷物と違いモニターという光源で見るので、見易さを念頭に、画像に含むフォントサイズは15pt程度を目安にデザインを依頼致しました。
フォントサイズについては、今後更新していくうえで試行錯誤していきたいと思います。ありがとうございました。
デザインを依頼致しました。

回答No.3

kamuy

改めて回答をば

基本サイズ
コレは、フォントサイズでしょうか?
基本的に、フォントサイズについては特に指定する必要はありません。
下手に指定すると、妙にデカかったり、やけに小さかったりして、
かえって読みにくくなります。(このサイトみたいに(笑))

一行の文字数
コレも同様ですね。
私がやっているように、文脈ごとに、切ってしまうとか、
一定の文字数でもって無差別に切ってしまうとか、
段落内では改行を入れず、
表示側の設定(ブラウザの画面サイズとか)にゆだねるとか、
色々方法・考え方はありますが、
結局は読む側にも好みがありますので、
決定打を出すのは難しいですね。
となれば、表示側にゆだねてしまうのが楽ですね。

あとはまあ、月並みですが、色々と見て回るしかないですね。

以上、主観でした。
…あれ? 「客観的なデータ」が必要なのか…
では、上記は参考まで、ということで。

補足

ありがとうございます。
基本サイズは表示エリアの最大幅、フォントサイズは文章を編集する上での文字数です。もっというと、“人が一度に理解（処理）できる文字数”なんてデータがあれば楽です。
文章がうまければ意識せずとも短いので問題ないのですが、第３者へ依頼する場合に目安が必要なのと、裏付けがあると説得力がある。
インターネットの場合、基本的に、閲覧者のブラウザやマシン等の環境に依存するので、デザインが難しい。
画像が多くて待機時間がかかるサイトは論外として、えらくフォントが小さすぎて読み難かったり、何をいっているのか解らないサイトを目にするので、そういった自爆を避けるために最低限のガイドが必要かなと。
ターゲットの絞込み方にもよりますが、相手を拒絶するサイトは避けたい。
もっとも、何をいっているのか解らないサイトの場合、問題は内容ですね。

回答No.2

kamuy

回答ではないですが。
デザインというより、内容的なモノなのですが、
まずはテキストだけでどこまで表現できるかを試してみると良いですね。

その上で、特別なタグなどを使用せずに文書の構造だけで、
どこまで読みやすく出来るかを試してみましょう。

で、最後に装飾的なものを施していくという感じですね。

一般的なプレゼンテーションとか、論文とかと同じような作り方になりますが、
アメリカなどでは「Webプレゼンテーション」なる表現もありますから、
基本的表現という意味で云えば、旧来の方法も通用するわけです。

…ん?
…こりゃ、サイト全体のデザインでなく、ページ(群)についての内容ですね(笑)

参考URL：

しまった、的を外してる(爆)

補足

参考になります。
内容（ページ）については、最も大きく且つ根本的な問題なので常に頭が悩みでいっぱい。
プレゼンテーションから出発し、企画が風船のように膨らみ、文字数が膨らみ、整理すべき情報が膨らみ、頭が飽和する…

デザイン（装飾）に至るまでの洗い直しや編集など、他者へのアウトプットには視点の切り替えが必要なので面白いけどうなされます。

回答No.1

shigatsu

デザインガイドと言うわけではないですが、面白い本があります。
トッパンWebサイト入門シリーズ２「Webサイトユーザビリティ入門」
サイトの使いやすさという観点で調査した結果がまとめられています。これに従えば
必ず使いやすくなるというわけでは有りませんが、参考になるのではないでしょうか？

補足

早速のご回答ありがとうございます。
これから書店に行って見てみます。