• 締切済み
  • 暇なときにでも

デザインガイドがほしい

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

共感・応援の気持ちを伝えよう!

  • 回答数6
  • 閲覧数50
  • ありがとう数30

みんなの回答

  • 回答No.6
  • pluto
  • ベストアンサー率100% (1/1)

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

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • Webサイトの横幅の修正について

    半年前に初めてWebサイトを作成しました。 文法チェックサイトを使いながら、正しくコーディングはしました。 Webサイトの見た目については、満足はしてませんが、少しずつ良くしていこうと思ってます。 しかし、Webサイトの横幅のサイズに問題があったと思ってます。 他の同じジャンルのWebサイトを見ると、どこも幅は950ピクセルくらいです。 私が作成したWebサイトは820ピクセルです。 このことから、横幅を950ピクセルくらいに修正しようと思ってます。 そうなると、画像サイズの修正や余白の調整、テキスト文字数の調整などを行う必要があると思います。 全てのページを修正するのは大変だと思いますが、ヘッダーやフッターは全ページで同じなので、思ったより大変じゃないような気もしてます。 Webサイトの横幅を修正するうえで、なにか気を付けることがあれば教えて下さい。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • ブログ記事 一行分の文字数について

    ブログをしています。仕様スキンは「Sex Pistols DESTROY」です。 一行の文字数をもう少し多く(長く)したいのです。今は一行に30文字程入りますが、40~55文字を希望しております。 スキン設定の横幅「本文」を、最大(800ピクセル)にしても、なぜか横幅は広がらず、一行分の文字数も変わりません。 HTML編集をして、設定を変えることができるのかもしれませんが、どうも巧くできません・・・。 ご存じの方おられましたら、アドバイスをお願いいたします。

  • iモード用サイトのデザイン的余地

    tableは使えない、 フォントサイズも変えられない、 背景に画像も使えないと、 デザインの幅がかなり狭い (逆に言うと、楽ちんな) iモード用サイトですが、 そこに デザイナーさんのセンスを投入するだけの デザイン的余地はあると思われますか? 実際にデザイナーさんに依頼して ずっと良くなったとか、 そういうお話があれば教えて下さい。 よろしくお願い致します。

  • 回答No.5
  • pluto
  • ベストアンサー率100% (1/1)

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

参考URL:
タイポグラフィのゼミ資料など

共感・感謝の気持ちを伝えよう!

  • 回答No.4
  • pluto
  • ベストアンサー率100% (1/1)

みなさん良いお答えをお持ちなので恐縮ですが、私も答えてみさせてくださいませ。 一般に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で作っていろいろためされてはいかがでしょうか。 長々とゴメンナサイ。

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

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

  • 回答No.3
  • kamuy
  • ベストアンサー率32% (51/156)

改めて回答をば 基本サイズ コレは、フォントサイズでしょうか? 基本的に、フォントサイズについては特に指定する必要はありません。 下手に指定すると、妙にデカかったり、やけに小さかったりして、 かえって読みにくくなります。(このサイトみたいに(笑)) 一行の文字数 コレも同様ですね。 私がやっているように、文脈ごとに、切ってしまうとか、 一定の文字数でもって無差別に切ってしまうとか、 段落内では改行を入れず、 表示側の設定(ブラウザの画面サイズとか)にゆだねるとか、 色々方法・考え方はありますが、 結局は読む側にも好みがありますので、 決定打を出すのは難しいですね。 となれば、表示側にゆだねてしまうのが楽ですね。 あとはまあ、月並みですが、色々と見て回るしかないですね。 以上、主観でした。 …あれ? 「客観的なデータ」が必要なのか… では、上記は参考まで、ということで。

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

  • 回答No.2
  • kamuy
  • ベストアンサー率32% (51/156)

回答ではないですが。 デザインというより、内容的なモノなのですが、 まずはテキストだけでどこまで表現できるかを試してみると良いですね。 その上で、特別なタグなどを使用せずに文書の構造だけで、 どこまで読みやすく出来るかを試してみましょう。 で、最後に装飾的なものを施していくという感じですね。 一般的なプレゼンテーションとか、論文とかと同じような作り方になりますが、 アメリカなどでは「Webプレゼンテーション」なる表現もありますから、 基本的表現という意味で云えば、旧来の方法も通用するわけです。 …ん? …こりゃ、サイト全体のデザインでなく、ページ(群)についての内容ですね(笑)

参考URL:
しまった、的を外してる(爆)

共感・感謝の気持ちを伝えよう!

質問者からの補足

参考になります。 内容(ページ)については、最も大きく且つ根本的な問題なので常に頭が悩みでいっぱい。 プレゼンテーションから出発し、企画が風船のように膨らみ、文字数が膨らみ、整理すべき情報が膨らみ、頭が飽和する… デザイン(装飾)に至るまでの洗い直しや編集など、他者へのアウトプットには視点の切り替えが必要なので面白いけどうなされます。

  • 回答No.1

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

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

関連するQ&A

  • Illustratorで文字の回りこみは・・?

    Adobe Illustratorでの質問です。 テキストを入力し、改行しないと、テキストのサイズに応じてどんどん横に広がると思いますが、 ある一定の幅を決め(例えば文字数、例えばピクセル単位)、そこまで文字が来たら、自動的に改行するように出来ますか? 自分でいちいち改行するのは面倒ですので。 例えば決まった範囲の幅に文字を入れたい場合などに使いたいです。 使用環境: Windows XP Illustrator 10

  • webのレイアウトデザインについて[勉強中]

    印刷専門のデザイナーですが、最近webサイトのデザインの仕事があります。 コーディングは外注なので、デザインだけIllustratorで作っているのですが、 やはり、ピクセル中心の概念を考えると、IllustratorよりPhotoshopでレイアウトした方が正しいですよね? ひとつ聞きたいのですが、Illustratorでマージンを設定するとき、ササッと四角を描いて「ガイドを作成」をするんですけど、Photoshopで同じことできますか? 定規から引っ張って作る、天地左右に永遠に伸びるガイドしか作成できないのでしょうか? また、そうじゃないPhotoshop流のマージン設定方法があるのでしょうか。

  • 名刺のデザイン

    フリーランスで映像関係のアシスタントディレクターをしているものです。名刺を作ろうと思い、デザインしているのですが、名前の部分をデザインフォントを使用し、配置をやや凝ったものにしようと思います。といっても姓(二文字)を縦に並べ、その横にそれより大きなサイズ(高さ、幅は縦に並んだ二文字の高さと同じ長さ)の一文字の名を配置、連絡先等々の情報の文字列と大きさ、位置ともにバランスよく配置する、という程度のものです。(名前以外の連絡先等々はごく普通のゴシックで配置も特にデザイン的な施しはしません) デザイン的にはこの程度で、ちょっとだけ洒落たデザインにした、工夫したというくらいの印象を与えるものだと思います。見た目もシンプルですっきりした感じです。 あちこちの会社を渡り、プロデューサークラスの方ともご挨拶しますが、名刺のデザインとして、ごくごく普通のフォント、デザイン、レイアウトのもののほうが無難であるとか、少しでもデザインフォントを使ったものはマナーとして失敬にあたるとか、そういったことはあるでしょうか。一応そんなことも考慮しておこうと思い、質問しました。 よろしくお願いします。

  • 自動サイズ調整

    Access97を使用しています。 フォーム上のテキストBOXにデータをモジュールで入力するのですが その際、テキストBOXの幅より大きいデータが入った場合、 出てしまいます。 この時、モジュールで自動調整する方法はあるのでしょうか? 要望としては、文字数が多い場合、自動でフォントサイズを小さくする です。

  • CSSでの幅、長さなどの指定

    CSSのソースをみると、 ボーダーの幅、ボックスの幅、マージン、パディングと いった大きさをピクセルではなくemや、%で指定している のをよく見かけますがデザイン上は、どちらを使うのが 正しいですか? 原則としてはピクセルを使うのが正しいと Webサイトや書籍でも書いてあるのですが、それがなぜなのかも よく分かりません。 この疑問について教えていただけたら幸いです。

  • 画面のプロパティ デザインの詳細をデフォルトに戻したい

    WinXPにメイリオフォントを入れてみました。そして「画面のプロパティ」「デザイン」「詳細設定」ですべてのフォントをメイリオに変えてみたのですが、あまり気に入らなかったので元のフォントに戻したところ、タイトルバーのボタンやタスクバーの幅やフォントサイズ、時計に曜日が出るようになってしまいました。 これらをデフォルトにしたいのですが、元の数値等がわかりません。どなたかすべての「指定する部分」のデフォルトの数値等ご教授いただけませんでしょうか。 よろしくお願いします。

  • ワード2003の文字間隔を詰める方法

    ワード2003で、一行あたりの文字数と行数をページ設定で指定して文章を作成しているのですが、文字の間隔が空いてしまっていて、読みずらいです。 文字数と行数を変えずに文字の間隔を詰める方法はありますか? ちなみに、余白を広げたり、フォントのサイズを大きくしてみたりしたのですが、一行あたりの字数が変わってしまい、ダメでした。どなたか分かる方いらっしゃったらよろしくお願いします。

  • イラストレータ 同一フォントの選択方法

    イラストレータ9.0で、同一フォントを一気に選択してサイズ変更をしたいのですが方法がわかりません。同一色、同一線幅などは「編集」「選択」でできるようですが...。かなりのデータのフォントサイズを変更しなくてはいけなくて困っています。フォントは線は無しで、一行にサイズの違うフォントも打っています。ご存知の方はぜひ教えて下さい。

  • この画面の幅について

    この画面(OkWeb質問の画面)についてなんですが、画面の幅をせまくすると、自動的に一行の文字数が減って行数が増えますが、たまに、文字が隠れてしまう時があるんですが。 ごくたまに、最大画面にしないと読めないものもあります。 これは、どうしてでしょう?

  • Access 2013 レポートのフォントサイズ

    いつもお世話になっております。 今回Access2013のレポート(帳票)についてお伺いしたいことがあります。 帳票のデザインを行っている際、テキストでデータベースとの連結をしますが、 その際にテキストで設定された長さに合わせたフォントに自動調整して表示 するということは可能でしょうか。 エクセルなどではセルに合わせた枠の大きさに文字サイズを合わせて大きくなったり 小さくなったりしますが、これと同様の機能があれば、 データベースの文字数が全て表示されると思いました。 またこのような問題を回避するためには何か策があれば おしえていただければと思います。 どうぞよろしく御願いいたします。

専門家に質問してみよう