ayanpaci_50.gif

サイトデザインで悩んでいる方へ


屁持論
:空白を見る!

お便りの質問と回答

質問:
「私は個人でサイト運営をしている者ですが、どうしても自分のレイアウトした画面が気に入らず、他のサイトさんと見比べてみても何が違うのか見当もつかず、困っています。レイアウトをきれいに見せるには業者に頼んだり、特別なソフトを使わないとダメなんですか?」

回答:

レイアウトをするにあたって、これが正解というものはにゃーので、好きな雑誌のレイアウトをマネしてみたり、デザインの専門書を参考にしたり、もっと色々試してみるといいがや。
業者に頼んでもええと思うんだが、コストと達成感の問題で、どこまでのレベルを求めているかで判断してもらえばええがね。

特別なソフト…それがどのソフトを指すのかはわからにゃーが、ソフトは自分がこうしたいと思うことを表現するための道具だで、ただ業者の使っているソフトを持っているからといって良いレイアウトができるとは限らんがね
逆に機能がありすぎて迷うこともあるでよ、まず「こんな感じの表現がしたい!」っていうイメージを持って初めてソフト(道具)が生きてくると思うがや。


…と、みんな漠然と「見やすい」とはわかってても、「何故見やすいのか?」の理由がわからーせんと困っている人がおるで、前回までのコラムで複雑に説明し過ぎたと反省し、もう一回できるだけ簡単に説明するなも。



◇ 見やすい画面にするための条件 ◇

その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 「最初に決めたルールで全部を統一する」

トップページのデザインをコンテンツページ全部に当てはめていこうがや!
同じ色、同じ書体、同じデザインで作りこんでいけば必ず統一感は出るでよ、各ページのことは後でええから、まずトップ画面をきっちり作り込んでみてちょ!


とまあ、今のところ思い付くことを書いてみたがや。
上記の8つの項目を守ればきっとレイアウトに対する苦手意識は改善されると思うなも。
これらを意識しても納得できない場合は、また質問してちょ!

あ、そうそう、みんな失敗したときは反省するが成功したときには反省をせんもんだで、
うまくいったときに反省できるように、必ず前回のレイアウトデータは別保存しといてちょ!
どう変わったのか、何故そうしたのかを3~12ヵ月後に見比べて反省してちょ!
前回までのを恥ずかしいと思えたのならば、それだけ成長したということだがや。

最も大事なことは、「誰」に「何」を伝えたいものなのか?ということだで、一人よがりにならんように注意してちょ!

では、バイちゃ!
written by あやんぱ


Posted by ayanpa | 発想編 |2005年09月17日 | Comments [5] | Trackbacks [0]



トラックバック

このエントリーのトラックバックURL:
http://ayanpa.com/cgi/mt/mt-tb.cgi/57

コメント

あやんばsan お久しぶりです♪
そして、以前は本当にありがとうございました。
あやんばsan またまたホームページ制作で行き詰ってしまいました。。。
でも、この質問は使っているソフトが違えば、筋違いになってしまうかもしれません。。。
でも、どう調べても分らず…少しでもヒントになるものが見つかれば…と思い、あやんばsanのところに来てしまいました。

最近ですが。「ホームページビルダー10」を使っています。
「ウェブアートデザイナー」で画像を保存して、その画像を「ビルダー10」で使っています。

それでなんですが、
http://www.monohouse.jp/test/index.html
このページの「お召し上がり時」「お召し上がり方」…など「○○○○○○」の画像の回りなんです。画像のまわりが白くなっているのを…どうしても修正したいのです。。。

「ウェブアートデザイナー」での保存の時に、背景色を入れると、上手くいくんですが…でも、このページの場合、背景が水色のグラデーションになっているから、背景色が上手く設定できなくて。。。

…どこか設定がおかしいのでしょうか~
なんで、画像の回りが白くなってしまうのでしょう???

???。。。伝わりますか。。。???

ちなみに、この画像は、背景としてビルダーに表示されているのですが、普通に「gif」で表示しても変わらないのです。

お忙しい中申し訳ありません。
どうぞ、宜しくお願い致します。


あやんばsan♪
ヘンテコな質問。。。ごめんなさい。。。
でも、本当は。。。頑張ってますよ♪って伝えたかったのも心の中に少しあります♪♪♪
また、報告させてくださいね★

投稿者 みゅう : 2006年03月15日 00:03

あやんばsan
こんばんは♪…みゅうです。
http://www.monohouse.jp/test1/index.html
無事に修正できました。。。

と、いうか…
背景ごと画像にしてしまいました。

もっと、良い方法が発見できたら嬉しいのですが。。。
取り敢えずは回避できました。

これからも。お勉強させてくださいね。 ヽ(・∀・)ノ

投稿者 みゅう : 2006年03月15日 22:08

んちゃ! みゅうさん!
GIF画像でそうなる原因…おいらはピクセルの粗さだと思うんだなも。
円のような曲線の輪郭をピクセル(画面上の粒)で描いていくと、ガタガタと階段のようになってまうがね。
そのため、バックと曲線の境界には、少しぼかしを入れてなめらかに見えるようにするんだなも。
表示設定やプレビュー時で”ピクセル等倍”とかで確認してみるとええかも。
しかも、GIF出力する時は画質もおさえるもんだで、もっと粗くなるなも。
だで、解決方法と言えるかどうかわからせんけど、
・倍の画質で出力してみる。
・輪郭を太くして出力し、フォトショップなどでその輪郭についた白の部分を選択して消す。
・極力曲線は使わない
・グラデーションを使わないで、背景の色で輪郭線をつける
・フォトショップなどで、スライス(画面分割)機能を使う。
などかなも~。
おいらもみゅうさんとおんなじ目にあっとるんだが、たいていそれはフォトショップで輪郭線を一回り削ることで解決しているんだなも。

そうそう、「ガチガチにかっちょええものを作ろう!」とする固さが外れて、見ている側にとっては”安心して読みやすい画面”になってきたような気がするなも。
なかなかやるなお主!

投稿者 あやんぱ : 2006年03月16日 08:55

あやんばさん♪
ありがとうございます。

本当に、次から次へと分らないことにぶつかります。
誰か助けて~って感じです(笑)

あやんばさん。本当にありがとうございました。
あやんばsanから教えていただけた方法…試してみますね☆

投稿者 みゅう : 2006年03月27日 23:53

参考になれば幸いだなも!

投稿者 あやんぱ : 2006年03月28日 21:25




当サイトの内容・構成・デザイン・画像の無断転載、複製(コピー)は一切禁止です。
Copy right (C) Since 2004/8/1 ayanpaのデザインうんちく All Right Reserved.