OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

デザインガイドがほしい

  • 暇なときにでも
  • 質問No.1053
  • 閲覧数37
  • ありがとう数30
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 0% (0/6)

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

回答 (全6件)

  • 回答No.1
レベル13

ベストアンサー率 26% (511/1924)

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

お礼率 0% (0/6)

早速のご回答ありがとうございます。
これから書店に行って見てみます。
投稿日時 - 0000-00-00 00:00:00
  • 回答No.2
レベル11

ベストアンサー率 32% (51/156)

回答ではないですが。 デザインというより、内容的なモノなのですが、 まずはテキストだけでどこまで表現できるかを試してみると良いですね。 その上で、特別なタグなどを使用せずに文書の構造だけで、 どこまで読みやすく出来るかを試してみましょう。 で、最後に装飾的なものを施していくという感じですね。 一般的なプレゼンテーションとか、論文とかと同じような作り方になりますが、 アメリカなどで ...続きを読む
回答ではないですが。
デザインというより、内容的なモノなのですが、
まずはテキストだけでどこまで表現できるかを試してみると良いですね。

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

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

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

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

お礼率 0% (0/6)

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

デザイン(装飾)に至るまでの洗い直しや編集など、他者へのアウトプットには視点の切り替えが必要なので面白いけどうなされます。
投稿日時 - 0000-00-00 00:00:00
  • 回答No.3
レベル11

ベストアンサー率 32% (51/156)

改めて回答をば 基本サイズ コレは、フォントサイズでしょうか? 基本的に、フォントサイズについては特に指定する必要はありません。 下手に指定すると、妙にデカかったり、やけに小さかったりして、 かえって読みにくくなります。(このサイトみたいに(笑)) 一行の文字数 コレも同様ですね。 私がやっているように、文脈ごとに、切ってしまうとか、 一定の文字数でもって無差別に切ってしまうとか ...続きを読む
改めて回答をば

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

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

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

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

お礼率 0% (0/6)

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

ベストアンサー率 100% (1/1)

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

お礼率 0% (0/6)

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

ベストアンサー率 100% (1/1)

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

ベストアンサー率 100% (1/1)

もうしわけありませんukhさん。もうひとつ修正です。文字の解像度別見え方の倍率をウィジウィグに対してでなく、各、最小に対してと最大に対しての相互の倍数を書いてしまったようです。正しくは1.3倍、0.65倍、です。ごめいわくをおかけしました。その他、再度チェックしましたので問題ありません。
もうしわけありませんukhさん。もうひとつ修正です。文字の解像度別見え方の倍率をウィジウィグに対してでなく、各、最小に対してと最大に対しての相互の倍数を書いてしまったようです。正しくは1.3倍、0.65倍、です。ごめいわくをおかけしました。その他、再度チェックしましたので問題ありません。
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
このQ&Aにこう思った!同じようなことあった!感想や体験を書こう
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ