ayanpaci_50.gif

アドバイス その2 (部分と全体)

アドバイス その2 (部分と全体)

レイアウトポイント: 
遠目で全体を眺めてみよう

レイアウトは実はコンテンツの位置とマージン(空白)を考えるだけで完成する。
それは「福笑い」をしている状況に似ているなも。各パーツの大きい小さいは後の問題で、
まずはそのパーツを「どの位置にどれくらいの間隔で配置するか?」を決めるんだなも。

目隠ししていないのに寄り目になったり、口がひんまがってまったようなレイアウトになりやすいのは、パーツだけに気をとられて全体を見ていないからだと思うんだがや。そうならないためにも、「遠目でレイアウトを見る」クセをつけとくとええ。一度レイアウト組んだら、モニターから5歩くらい離れて観てみよう!
全体的にきちんとしていれば老若男女に見やすく、コンテンツの主従関係がはっきりして自分の言いたいことがまとまってくる。


<前回のあらまし>
1.バック紙 2.目線の誘導 3.優先順位 4.一画面で見せたい部分を見せる 
について問題定義し、シェラさんに考えてもらった。
一旦は解決したかに見えた…、しかし、また新たな疑問が!

syera_02_ea.gif

schera.gif
(シェラ)
右端が外の白→細い青→コンテンツ内白と全体的に「うっすらぼんやり」してるような気がするんですよねー。


syera_02_e2a.gif
ayanpa_logo.jpg
(あやんぱ)
うっすらぼんやり現象…、それは罫線の使い方にコツがあるなも。
0.5ポイントくらいの濃い目の罫線を面分割に使うとわざわざ水色にバックの色をつけなくてもきれいに見せれるはずだなも。

syera_02_f.gif  syera_02_f2.gif

例えば、「スキルアップしたい・社労士になりたいあなたに」と「得して安心~民間の保険と社会保険~」の間にぶっとく線を入れてまうとダサくなってまうので、「スキルアップしたい・社労士になりたいあなたに」のコンテンツの枠の左端から縦に罫線をひいてみてみてみ?
かなり画面がしまるはずだなも。
そうすれば、「はい画面分割しまして分割線入れました候」でなくなると思うがや。

syera_02_g.gif

それと更新履歴とポリシーの部分の枠の大きさが似てて文章量も同じくらいだでのっぺりとしてまうと思うんよ。
確かに本文は行間を空けて読みやすくする必要があるんだが、ポリシーなどのリード部分は逆に行間を詰めて文字の大きさをもう2~3ポイント大きくしてあげると変わってくるはずだなも。
あと、「保険の話」とかの各コンテンツのタイトルが中心合わせになっとるけど、それを左合わせにしてみてみてみてみてみ?

正直、縦に長いトップになってまっとるで、今の2段より、3段でレイアウトして行ったほうが、

syera_02_h.gif

とかの右の余白とかが気にならんくなるはずだがや。

-----------------------------------------------------

http://syarousi-ol.com/topgallery/050507index.html

syera_03.gif

schera.gif
(シェラ)
なんだかわかんなくなってきましたー(ノ_・。)
黄金率とか特にカラーの対比・・・。大将に言われたことを直したつもりなんですけども、ちゃんとできてるのかなぁ。。。今日は弱気(* ̄m ̄) ププッ


ayanpa_logo.jpg
(あやんぱ)
うん、おいら好みに近づいているなも。罫線はもっと細くてもええなも。
目立たにゃーのにしっかり役立ってるというのが罫線の使い方なので、罫線の魔術師となればプロになれるなも! 黄金率とかカラーとかから入ると余計ややこしくなるのでそんなことは考えずに自由にやってみてちょうだい!


三段組で黄金率にこだわってよく作られているなあと感じているお手本例は、アフィリエイト・インテリジェンスのうかさんのレイアウト。うかさんのレイアウトを参考にしてみるとええなも。実にうまい。たぶん、シェラさんは何か間延びしてまっとって「うっすらぼんやり現象」から逃れていにゃーとおもうんだがや。

その理由はただ2つ、
マージンのとり方と文字の扱いだなも。
syera_03_a.gif

組み方はすんなり決まっているのになんか歯抜けのような印象を受ける…、それは空白が余白になってまっとるからだがや。例えば、サイトポリシーの枠の四方のマージン(空白)は全部ばらばらで、ある画面に適当に置きました!って印象になってまうんだなも。
マージンは上下左右全て同じ間隔にするべし!
それは他の枠に対しても言えるなも!
均等なマージンで並んだ枠はきっちりした感じがでて安定して見えるはずだなも。

もう1つ、文字の扱い。
「得して安心~民間の保険と社会保険~」と「保険の話」・「年金の話」…との関係。

syera_03_b.gif

主従関係がはっきりしてないなも!
大きい枠の中の中くらいの枠の小さい枠…というように「of」で順ぐりに見せる工夫を。
「得して~」が大きいカテゴリーとなるはずだで、「保険~」より目立たせにゃーとかん。何故なら全体を説明する重要な部分だでね。「スキル~」の右枠も同じことが言えるなも。

一度全部背景なしで組んでみてみてみてみてみ? 前回よりはかなりしっかりしてきれいなイメージになっているのだが、まだなんか背景色に頼ってレイアウトしているような気がする…。

色や枠線に気を取られすぎると混乱するで、それなしで組めるようにしてみてちょ!
不安かもしれんけど、枠線も色もレイアウトを補助するためだけのものだで、それをメインにしちゃいかんでね。

P.S.
そうそう、新しいレイアウトを作る際、前回までのレイアウトは別保存しといてちょうだいね。
えてして人は失敗したときは反省するが、成功したときは何も学ばにゃーで、是非3~12ヶ月後にそのファイルを開いて何をしてうまくいったのか、何が変わったのかを確認してちょうだいね!

------------------------------------------------------------------

http://syarousi-ol.com/topgallery/050509index.html

syera_04.gif

schera.gif
(ちゃっかり シェラ)
くたびれた・・・
また直してみましたよ~~(^ー^)ノ  うかさんところを黄金率で見たら、すんごかった!Σ( ̄□ ̄;) 今までも、デザインはきれいだなぁとは思ってたけども・・・。

うかさんとはバナーギャラリーでもお隣さん♪だけど、
その前から仲良しさん♪なんですよー( ̄∀ ̄*)イヒッ! 
なんたってロゴを自慢しに行った数少ない3人のひとりなんだから( ̄‥ ̄)=3 

文字はオッケーです!
しかぁし、マージンはむずかし~~(ρ_;)
表をいっぱい使って直して見ましたよーー。
これでど~だっ!!

歴代のTOPページは保存してありますよん( ̄^ ̄ゞ !!
一番最初ってめちゃめちゃカッコ悪い( ・ノェ・)コショッ

>クリスタルなイメージを与えたいのならええと思うんだが、今回のロゴイメージがバブリーな感じだったので…。

そいえば、ロゴがバブリーなイメージって、すんごいウケましたよー!(≧∇≦)

--------------------------------------------------------------------------------

ayanpa_logo.jpg
(あやんぱ)
>なんたってロゴを自慢しに行った数少ない3人のひとりなんだから

ブッチャさんとうかさんと…あとは誰だなも? そんなに喜んでいてくれていたとは…新今宮のジェットコースターに乗るくらいうれしいがね!


schera.gif

(シェラさんの一言)

2段にしてみたものの、のっぺり長すぎるかなぁと思ったんです。ayanpaさんは、シェラが気になるけど、まぁいっか!と思ってるとこをビシビシついてくるので うっ、やっぱり?直しとこうと思えちゃうんです。
自分ひとりだと、まぁいっか!で済ましちゃってたと思うんですけど、きっちり指摘してくるのでシェラも素直に直しちゃうんですねー。

マージン(空白)ってほとんど意識したことなかったので、表を使ってやってみました。
これが手間がかかって大変だったですけど、意地でもやってやる!と思っちゃいましたね。
ほとんど勝負な気分でした。

コンテンツの黄金率やカラーの対比の部分は、何回も何回も読んで、でもむずかしくってなかなか消化できなかったんですけど、具体的にここを変えてみたら?って言ってもらえたのでわかりやすかったです♪

次へ


<あやんぱ&シェラの余談>
schera.gif
(シェラ)
そーいえば、短足ダンディな大将は、お酒は飲むほうですか??


--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)
おいらはまったくの下戸だで酒は飲めん!
でもみんなが集まると素で酔っ払える性質をもってるがね。
逆に一人だと子ウサギのように孤独死しそうになるが…。
質問! シェラさんはべっぴんさんなのかも?
--------------------------------------------------------------------------------
schera.gif
(シェラ)
質問の答え:
ayanさんを見慣れてる大将が見たら、へちゃむくれかも(≧w≦)ぶっ
下戸だったんですかーー||||||||||||||(* ̄ロ ̄)ガーン||||||||||||||||
シェラの夢&想像がぁ~~~こっぱみじん( ̄□ ̄ !!

--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)
おいらは酒は飲めんけど、飲めるんだがや。
というのは、おいらは勢いにまかせて飲むタイプなので、「酒が飲みたい~!」と思って酒を飲んだことはないが、楽しいから飲むことはあるなも。シェラさんが飲みたい雰囲気を作ってくれればおいらはボトル空けられるで~~~!
へちゃむくれ…ちゃうちゃうちゃう?ちゃうちゃう!
べっぴんさんならおいらは惚れてまうでかんなあ…。

--------------------------------------------------------------------------------
schera.gif
(シェラ)
無理して飲まんでもええ!酒がもったいにゃーで。
料理ブログをよーく見たら、酒飲みメニューは登場しないのでひょっとして・・・と思ってたんですよー。
シェラの(・・*)。。oO(想像図)。
こんなキュートな奥さんとかわゆいお嬢がいたら、毎日家に帰るのが楽しいだろ~~ナ~~。
家で晩酌い~~な~~。たまんないだろ~~な~~(* ̄¬ ̄)ジュル・・・
って独身女子の(・・*)。。oO(想像図)。としてはどーかと思いますけど(ノ∇≦、)ノ彡☆ キャハハ!!バンバンッ!!
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)
あまい!
名古屋名物「ういろう」よりもあまいぞな!

現実。
家に帰って玄関を開けると、そこは「戦場」だった。
うめき声と悲鳴と泣き声がこだまし、あたりいったいはおもちゃが散乱している。
テレビにはクレヨンで60年代を彷彿とさせるヒッピーアートがサイケデリックに描かれ、巨大な海を連想させるティッシュのミステリーサークル。
ナスカ地平のような液体のしみとゴジラのように部屋をさまよう長女。
その脇でayanがどざえもんのようによこたわっている…。
片付け、まんま、お風呂、寝かしつけ…これらをこなすとたいてい日が変わる…。
こんな状態で目に星7つ輝かせて歯から六角形の光を放ちながら晩酌なんてできんがね。
シェラさんも、もし年子をもったらこうなるで~~~!

--------------------------------------------------------------------------------
schera.gif
(シェラ)
初めてわらしべ長者のHP見たときは、下の子ちゃんは、まだおなかの中にいたときだからなぁ。そっかぁ、ゴジラ並の破壊力なのか、かわゆい顔して・・・。シェラはじいさまの相手ばっかしとるで、体力ないな。。。




Posted by ayanpa | コラボ |2006年07月20日 | Comments [0] | Trackbacks [0]



トラックバック

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

コメント


korabo_180.gif

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