| 空間の魔術師 空白と余白3 |
＜15 空間の魔術師 空白と余白３＞
屁持論 ：空白を見る！
質問：
| 「私は個人でサイト運営をしている者ですが、どうしても自分のレイアウトした画面が気に入らず、他のサイトさんと見比べてみても何が違うのか見当もつかず、困っています。レイアウトをきれいに見せるには業者に頼んだり、特別なソフトを使わないとダメなんですか？」 |
回答：
レイアウトをするにあたって、これが正解というものはにゃーので、好きな雑誌のレイアウトをマネしてみたり、デザインの専門書を参考にしたり、もっと色々試してみるといいがや。
業者に頼んでもええと思うんだが、コストと達成感の問題で、どこまでのレベルを求めているかで判断してもらえばええがね。
特別なソフト…それがどのソフトを指すのかはわからにゃーが、ソフトは自分がこうしたいと思うことを表現するための道具だで、ただ業者の使っているソフトを持っているからといって良いレイアウトができるとは限らんがね
逆に機能がありすぎて迷うこともあるでよ、まず「こんな感じの表現がしたい！」っていうイメージを持って初めてソフト（道具）が生きてくると思うがや。
…と、みんな漠然と「見やすい」とはわかってても、「何故見やすいのか？」の理由がわからーせんと困っている人がおるで、前回までのコラムで複雑に説明し過ぎたと反省し、もう一回できるだけ簡単に説明するなも。 |
◇ 見やすい画面にするための条件 ◇
その1 「空白を作ることに心がける」
困っている人のほとんどが、隣り合ってる二つの枠の間、また枠内にマージン（空白）を設けることをしとらせん。
製作者本人は情報が満載されてるように見せたいか、スクロールしないで全部見えるようにしたいと一生懸命考えていることはわかるが、「空白は目線の休憩所」だで、空白のない画面は訪問者の人に「息継ぎなしに100m泳いで下さい」と言っているようなもんだがや。
出来れば指一本分の、せめて2〜5文字分のマージンを上下左右に均等につけるように心がけてちょ！枠内にぎゅうぎゅう文字を詰め込んだとしても、それをするかしないで全然見栄えが変わってまうでね。
その理屈は構成編のコラム（空白と余白U）にて！
その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 ｂｙ あやんぱ
PostScript: パースのコラムもうちょっと待っててちょ！
|
| このページのTOPへ戻る |
次（ピクトグラム）へ |
|
|
