屁持論 ：空白を見る！
質問：
回答：
◇ 見やすい画面にするための条件 ◇ その1 「空白を作ることに心がける」 困っている人のほとんどが、隣り合ってる二つの枠の間、また枠内にマージン（空白）を設けることをしとらせん。 製作者本人は情報が満載されてるように見せたいか、スクロールしないで全部見えるようにしたいと一生懸命考えていることはわかるが、「空白は目線の休憩所」だで、空白のない画面は訪問者の人に「息継ぎなしに100m泳いで下さい」と言っているようなもんだがや。   出来れば指一本分の、せめて2～5文字分のマージンを上下左右に均等につけるように心がけてちょ！枠内にぎゅうぎゅう文字を詰め込んだとしても、それをするかしないで全然見栄えが変わってまうでね。 その理屈は構成編のコラム：あなたの視界も黄金率にて！ その2 「常に腹八分目」 空間を空けるなんてもったいないと、隙間さえあれば文字を詰め込んで逆に見難い画面にしてまったらあかんで、画面の大きさを100.とした場合、コンテンツの画面を占める割合は80程度が最適だと思っといてちょ。 高級料理ほど皿に対して料理がちょぼりんとしてるがね。    その3 「ネガではなくポジに目を向ける」  以前のコラムで白黒コピーして見やすい画面か確認してみようと言ったのだが、例えば写真でネガフィルムを見てもらうとわかるのだが、みんな黒くなっているところを見ようとするがね。 でも、これが落とし穴で、実はみんな‘何も映ってない透明な部分との対比’として黒い部分をみているんだがや。つまり、透明な部分がないネガフィルムは真っ黒で何が映っているのか認識できにゃーということだがね。 だで、作る側の立場としては「いかに空白を作るか？」ということを念頭におかないとかん。 それを確認し、さらに詳しく調べるための方法として「白黒反転コピー」をしてみることをおすすめするがや。 今まで「ネガ」でみていたものを「ポジ」にしてみる。 するとどうだろう？ マージンの付けかたがバラバラな人ほど、ポジ状態で見る黒い部分はバラバラになるはずだがや。 レイアウトに慣れた人はこんなところに気を付けているなも。 その4 「認識できる視界の幅は両目の幅」 構成編の黄金率のあたりで書いたが、文章は10pt程度で25文字前後が適当だがや。 これを視界の幅に換算すると80mm程度になるなも。 この幅程度で文章をレイアウトすると見やすくなるはずだで一回試してみてちょ！  その5 「色を使わない」 何言っとんの？と言うかもしれせんけど、最初に色ありきで色々な色を使ってまって収拾のつかにゃー画面になっとる人を見かける。 だで、まずグレースケールだけで作ってみることをお勧めするがや。色やグラデーションや立体を使うと、「目立ったように見える」だけで、実はそれは錯覚なんだなも。  以前に「人間は最初白黒として物体を認識する」と書いたが、白黒の段階できっちりしてないと、とても不安定な画面になってまう。是非グレースケール（白～黒）だけで作ってカチっと決めてから色やグラデを使うようにしてみてちょ！ その6 「文章に枠を合わせるのではなく、枠に文章を合わせる」 最も陥りやすい罠だから注意してちょ！ レイアウトの基本は「枠組み」にあるなも。四角のボックスの組み合わせで構成していき、それから文章を流し込むようにしてみよう。 この罠にはまりやすい人は、文章を増やすことは考えても削ることは苦手な人が多いなも。 是非、枠内に収まるようなコンテンツ・文章の量を考えて削れるものは削っていこう。 それは太ってズボンがきつくなってまった人の心理状況に似てるなも。 新しい大きなズボン買う事よりも痩せることを考えよう！（自滅）    その7 「文字にメリハリをつける」 大きく分けて4種類の文字の扱いがあるなも 1. 見出し（コンテンツ全体を示す） 2. リード（コンテンツの概要） 3. 小見出し（コンテンツ） 4. 本文（内容） もちろん細かく言えば中見出し、サブリード、キャプションなど情報の仕分け方で階層を増やすことができるが、ここでは省くなも。 上記の4つのフォントの種類や大きさはスタイルシートなどで最初に設定しておけばいちいち修正する必要はにゃーが、文字の大きさの比率は1＞2＞3＞4で、それぞれ1.5倍以上大きさの差はつけてみてちょ！ 「同じ文字の大きさでも、空白の取り方で差をつけることができる」と構成編で書いたが、まず基本としてこのやり方でやってみてちょうだい！ その8 「最初に決めたルールで全部を統一する」 トップページのデザインをコンテンツページ全部に当てはめていこうがや！ 同じ色、同じ書体、同じデザインで作りこんでいけば必ず統一感は出るでよ、各ページのことは後でええから、まずトップ画面をきっちり作り込んでみてちょ！ とまあ、今のところ思い付くことを書いてみたがや。 上記の８つの項目を守ればきっとレイアウトに対する苦手意識は改善されると思うなも。 これらを意識しても納得できない場合は、また質問してちょ！ あ、そうそう、みんな失敗したときは反省するが成功したときには反省をせんもんだで、 うまくいったときに反省できるように、必ず前回のレイアウトデータは別保存しといてちょ！ どう変わったのか、何故そうしたのかを3～12ヵ月後に見比べて反省してちょ！ 前回までのを恥ずかしいと思えたのならば、それだけ成長したということだがや。 最も大事なことは、「誰」に「何」を伝えたいものなのか？ということだで、一人よがりにならんように注意してちょ！ では、バイちゃ！ written ｂｙ あやんぱ 
Posted by ayanpa | 発想編 |2005年09月17日 | Comments [5] | Trackbacks [0]  トラックバックこのエントリーのトラックバックURL: コメントあやんばsan お久しぶりです♪ 最近ですが。「ホームページビルダー１０」を使っています。 それでなんですが、 「ウェブアートデザイナー」での保存の時に、背景色を入れると、上手くいくんですが…でも、このページの場合、背景が水色のグラデーションになっているから、背景色が上手く設定できなくて。。。 …どこか設定がおかしいのでしょうか～ ？？？。。。伝わりますか。。。？？？ ちなみに、この画像は、背景としてビルダーに表示されているのですが、普通に「gif」で表示しても変わらないのです。 お忙しい中申し訳ありません。
投稿者 みゅう : 2006年03月15日 00:03 あやんばsan と、いうか… もっと、良い方法が発見できたら嬉しいのですが。。。 これからも。お勉強させてくださいね。 ヽ(・∀・)ノ 投稿者 みゅう : 2006年03月15日 22:08 んちゃ！ みゅうさん！ そうそう、「ガチガチにかっちょええものを作ろう！」とする固さが外れて、見ている側にとっては”安心して読みやすい画面”になってきたような気がするなも。 投稿者 あやんぱ : 2006年03月16日 08:55 あやんばさん♪ 本当に、次から次へと分らないことにぶつかります。 あやんばさん。本当にありがとうございました。 投稿者 みゅう : 2006年03月27日 23:53 参考になれば幸いだなも！ 投稿者 あやんぱ : 2006年03月28日 21:25 コメントしてください |
カテゴリー
MoMA Online Store
|
