ayanpaci_50.gif

アドバイス その3 (基礎と遊び心と油断)

レイアウトポイント: 手を加えないというアレンジ

ある程度の形が出来てくると、ついついもっとアレンジを加えて面白くしていきたいという罠にはまりやすい。
それは技術が向上したという確かな証拠であるとともに、基本を崩しやすい状況でもあるがや。
そうならんためにも、まず自分の頭の中にある完成予想図を忠実に再現していくことをやってちょ!何かを加えるアレンジもあるが、「何かを削るアレンジ」の方がより高度なテクニックなんだなも!

<前回のあらまし>
マージンと各コンテンツの主従関係に悩むシェラ。
アフィリエイト・インテリジェンスのうかさんのレイアウトを参考に表をいっぱい使って直してみる。
そうして出来上がったものとは?

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

syera_04.gif

ayanpa_logo.jpg
(あやんぱ)

ほよよよよよよよよよ~~~~~~~!
自分でどう思うん?ええ感じかも?
おいらはええと思うがね。
もちろん細かい技術的なことをいったらまだまだうっすらぼんやりしとるが、全体の骨組みみたいなものはちゃんと出来てると思うがや。

syera_04_a.gif

保険とスキルに段差もあって目線もちゃんと見せたい順に流れるし、文字の扱いもちゃんと差を出せているし、画面のイメージもくどさが無くなったし…。

つっこみを入れるとしたら罫線が太すぎるってことかな。
あとグーぐるとの間隔がまだでかいということかな?

syera_04_b.gif

それに、枠と枠の線がぶつかってまっとる。
保険の話~とかのコンテンツの右の余白がまだ気になるなあ。 
年配の人にも見やすいようにと行間を大きく空けていると思うんだが、ちょっと開けすぎな感もあるなあ。
フォントをもう1~2ポイント大きくしてちょこっとだけ行間詰めてみない?画面が縦に長すぎると思うんだがや。
…と今気になる点はこんくらいかな?

もう基礎は出来上がってきているので、あとはシェラさんの遊び心次第だなも。
例えば企業HPによくみられるコンテンツバーをつくってみるとかね。
アップルコンピーターのHPのようなしおり形式とかもええかも。

もし、年配の方にも目を疲れさせないで読ませたいと思ったら、地味だけど効果的な技がある。
それはうっすらぼんやりとグレーのバックに文字を並べるということ。
真っ白な画面に黒文字は確かにはっきりと見えるで見やすいが、目を疲れさせてしまうこともあるんだがや。
だで、ちょっと画面全体の輝度を落としてあげると目に優しくなる。
コンテンツはくっきりと、文章はふんわりと見せてあげると人にやさしいイメージができると思うがや。
ま、これは好みだとおもうけどね。

うかさんはとても勉強家な人なんだなあと思ったがや。
CSSとかHP作成のノウハウは是非うかさんに聞いてみてちょうだい!おいらはまったく歯が立たにゃー。
おいらも教えてもらわねば!
--------------------------------------------------------------------------------

http://syarousi-ol.com/topgallery/050512-1index.html

syera_05.gif

schera.gif
(ちゃっかり シェラ)

こんばんは~(^ー^)ノ
行間は表を使ってるので、なかなか狭くならないんですよー。
なんとかいじくってみますねー。
罫線もこれ以上細くならないと思ってたら、
いじくってるうちに細くなりましたよーo(*'▽'*)oあははっ♪

>例えば企業HPによくみられるコンテンツバーをつくってみるとかね。
>アップルコンピーターのHPのようなしおり形式とかもええかも。

またむずかしーことを|||||/( ̄ロ ̄;)\|||||||

>保険の話~とかのコンテンツの右の余白がまだ気になるなあ。

下の年金の話とかは保険の話と違って長いんですよーー。
下に合わせるとあれぐらい?
字と行間を直せればなんとかなるかも??

とりあえずゴールデンウィーク終わったから、
ぼちぼち直して行きますよー(^ー^)ノ
うかさんブッチャ師匠が話してると、
宇宙人みたいで何言ってるんだかわかりましぇん。。。
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)

何度も文句ばっか言っとったけど、自分ではどんな感じざんしょ?
「人の批判は言いやすいし心地良い」自分のことは棚に上げ上げ~~!
とりあえず基本的なとこは押さえてあると思うで、あとの技術的なことはうかさんブッチャさんにおまかせ!!
おいらは言いたいだけ言って逃げるのであった…。
「スナフキ~ン!」
--------------------------------------------------------------------------------
うか
嬉し恥ずかし(*-_-*)
私の名前を出していただけて光栄です(^^)
ウチのサイトは「三段組」ではなくて、基本的には「二段組」なんです。
この右と左のレイアウトで黄金率を使わせてもらってます。

デザインで言う「黄金比」はayanpaさんのおっしゃるとおりで、それに近付けるべく作ってはいるのですが、広告を貼ってナンボのアフィリエイター的かつ個人的視点で言いますと、黄金比は「468×250px」もしくは「180×468px」です。(って言い切っちゃったよ、おいら…)

あんまり詳しいこと言うとウチのサイトで書くネタがなくなっちゃうんでアレですが(^^;、468pxは一般的に一番大きなバナーのサイズ「468×60」がすっぽり入りますし、250pxはGoogle AdSenceのレクタングルのサイズです。

ただ、250pxのサイドバーを右に持ってくるときは上のような考え方でしっくりくるのですが、左にサイドバーを表示させる場合、幅は180pxくらいがよさそうです。これは黄金率とかとは別に、「左側」ということと「色の濃さ」による認識度の違いによるものだと思います。ま。文字の大きさによって変わってくると思いますのでなんとも言えませんが…。(どうなんでしょ、ayanpaさん)

また、ayanpaさんのおっしゃる通り、白地に黒文字ですとキツイ感じがしてしまいますので、背景を薄いグレーにしないかわりに、ウチでは文字の色を#333333~#666666の間くらいで指定してます。

> 均等なマージンで並んだ枠はきっちりした感じがでて安定して見えるはず

まったくその通りだと思います。ウチでは上下左右・中間、それぞれ10pxずつの余白をとってます。

▼シェラさん
背景なしのサイトでしたら、「アフィリエイト インテリジェンス」より
「ソファーショップ(http://sofa.uka-p.com/)」の方が参考になるかもしれません。(手前味噌ですが…)
CSSは、HTMLを複雑にしないで細かいことができるので、覚えればとっても便利なものだと思いますよ(^^)
#長文、失礼しましたm(__)m
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)

おお!うかさんこんにちは!
よく見つけてきましたねえ。
陰口のようにこっそりシェラさんに言おうと思っていたんだが…。

黄金比…それは目指せば目指すほど挫折者が殺到する魔の領域だなも。
それをきちんと押さえながらやれるというのはなかなかできるもんじゃにゃーでよ。
最初からレイアウトがあって、それに合わせて文章が出来上がったかのような完成度で、まるで彫刻家が木を彫りだすときにすでに完成の姿が見えているような気がしたなも。
そうかあ、HP作成してにゃーということはこれだけそれに携わっている人との認識の差が出るもんなんだにゃー。勉強になったなも。

>「色の濃さ」による認識度の違い

うん、おいらの思うのは、色や文字の左右の「対比」からなるということだがや。
だで、左側、右側というのは目線の流れ方の問題であって、
それが目立つか目立たにゃーかは、対比としてどれくらいの差をつけているかだと思うんだがや。
確かに左側に幅の広いものがくると目線がそこで停まってしまう恐れがあるで、素直に右下に目線が流れるようにするには短めにし、右ななめ下の部分になにかワンポイントになるようなものがあるとええと思うがや。
イメージとしては横の罫線を「すべり台」とした場合、どのように目線は滑っていくか?を考えるなも。

おいらはHP作成においてCSSやその他SEOなどの知識は皆無だで、「見せ方」のみにおいてでしか意見が言えにゃーなも。
うかさん、HP作成コンサルタントとかやったらええのに!
うかさんみたいな技術は必ずHPを作成する人にとってかなり重宝される存在だと思うなも。
--------------------------------------------------------------------------------
うか
> よく見つけてきましたねえ。

ブッチャさんのところで名前を見つけたので、もしやと思いまして(^^;

> 黄金比…それは目指せば目指すほど挫折者が殺到する魔の領域だなも。

完璧を求めようとしてたら多分挫折してたと思いますが、黄金比を参考にウチのサイトに合うサイズを指定したら、自分でもしっくりきました。
お褒めの言葉をいただいて大変嬉しいのですが、これもayanpaさんのコラムがあったからこそ。感謝してます(^^)

> そうかあ、HP作成してにゃーということはこれだけそれに携わっている
> 人との認識の差が出るもんなんだにゃー。勉強になったなも。

なんと言いますか、普通の制約のないサイトを作る分には箱の大きさを先に決めて中にテキストを入れていけばいいんでしょうけど、アフィリエイトの場合、箱の中に入れるもの(バナー広告)の大きさがある程度決まってるので、それを掲載することを前提に作っていくと、あーゆー感じになっちゃうんですよねぇ。

> 確かに左側に幅の広いものがくると目線がそこで停まってしまう恐れがあ
> るで、素直に右下に目線が流れるようにするには短めにし、右ななめ下の
> 部分になにかワンポイントになるようなものがあるとええと思うがや。

ほほぉ、そういうことですか☆
サイドバーは狭い部分に文字が密集しがちになるのに比べて、メインスペースでは広いスペースに適度な改行を加えてテキストを並べる…なんと言いますか私は白い部分(余白)の量が影響してるのだとばっかり思ってました。

> うかさん、HP作成コンサルタントとかやったらええのに!

な、な、な、なにをおっしゃいます(^^;;;
でもソースを見て「ここをこうしたら?」みたいなことはできるかも…(照)
私にはもったいないようなお褒めの言葉におぼれず、まずは「見せ方」をお勉強させてもらいたいと思います。
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)

いえいえ、うかさんの腕なら仕事は出来るなも。
もっと自分を前面に、前に突き抜けろ~~~!
-----------------------------------------------------------------------
schera.gif
(バブリー・シェラ)

┃電柱┃_・)チラッ
うかさんとインテリジェンスなお話を繰り広げてますねーφ( ̄ー ̄ )メモメモ
でも、むずかしーので箇条書きにまとめてください(≧∇≦)

>何度も文句ばっか言っとったけど、自分ではどんな感じざんしょ?

(*゜・゜)ンッ? いい感じぃ~~( ̄▽ ̄)
納得しないとやんないっスよ

>おいらは言いたいだけ言って逃げるのであった…。

逃がさへん(・_・ )―C<―_-))))))ズリズリ_________......


背景をグレーにしたら、薄汚れた感じになるんじゃ??と思ってたので、うかさんのいただこっかなぁ♪
>ウチでは上下左右・中間、それぞれ10pxずつの余白をとってます(うか)

しかし、文字にしろ、余白にしろ、こんなにキッチリ計算されてたのかぁ。
そりゃー違うはずだ。。。
降参!!降参!!

ソファーショップ、また進化してるーー。
すんご~~い!!!Σ( ̄□ ̄;)
うっかりソファー買いそうになっちゃった。。

ayanpa大将もうかさんも、シェラのレベルを認識してくだしゃい。
ビート板でバタ足やってるシェラに、バタフライで試合に出ろ!!って
言ってるよーなものですよーー。

あ!3人だから宗方コーチに尾崎さんに藤堂さんと呼んで差し上げましょう。
どの役がいいですか?キャハハ!!彡ヾ(▽≦*)ツ...ヾ(*≧▽)ノ彡キャハハ!!
--------------------------------------------------------------------------------
うか
▼シェラさん
> 背景をグレーにしたら、薄汚れた感じになるんじゃ??

極薄のグレーですからそこまでにはならないと思いますが、グッと引き締まった感じがする一方、さわやかさは削られそうですね。きっと。ロゴを生かすためにも文字色を若干薄くしてあげた方がいいかもしれません。

> しかし、文字にしろ、余白にしろ、こんなにキッチリ計算されてたのかぁ。

えぇ。サイト作るときは「電卓片手に」が基本ですから(笑)
#って、マジ話です、これ(^^;

--------------------------------------------------------------------------------
schera.gif
(ちゃっかり・シェラ)

\(o⌒∇⌒o)/新コラム(空白と余白)、箇条書きになりましたねー。
わかりやすいですよー。
このページを睨みながら、やればいーのか。
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)

うかさんナイスアドバイス!
さすがわかってらっしゃる。
そうだなも、うかさんの言う通りだなも。
うかさんのええところはパクッって…いや、参考にさせてもらって自分なりのアレンジをシェラさんは繰り広げていけばええなも。
そうすればアラビアンナイトが現れるかもよ?

ところで突っ込んでええかもシェラさん。
自己紹介とプロフィールって…、一緒のことじゃん!!
--------------------------------------------------------------------------------
schera.gif
(ちゃっかり・シェラ)

―( ̄∇ ̄;)→グサッ!!!
最初は「自己紹介 お仕事編」と「プロフィール」だったんじゃ!
でもって、プロフィールは下のほーにあったんじゃ!!
するどいつっこみじゃ!
(* ̄ー ̄)"b" チッチッチ 漢字と英語(カタカナだけど)
イメージが違うからいいんじゃ!(たぶん)

うかさんの<サイト無料作成企画>でちゃっかり頼んで、
それを見たayanpa大将がw( ̄o ̄)w オオー!とビックリ。
実はうかさんだよ~~~ん( ̄∇ ̄)うひょひょひょ♪ と
いう作戦がすでに崩れちゃった。。。
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)

ふふふふふ、甘いな。
チェック厳しいで~。
自己紹介とプロフィール…卑怯だ…。
実はおいらもうかさんにサイト作成申し込もうと考えていたりして。

(シェラさんの一言)

schera.gif

このあたりからかなり技術的な部分になってきましたねー。
他の人にとったら技術のうちにはいらないことですが、
罫線を細くするとか行間とか、すごく時間がかかっちゃいました。
うかさんが電卓片手にサイトを作るというのは衝撃でしたね。
そこまで計算して作りこまれてるからピシッときれいなんだなぁ。


<あやんぱ&シェラの余談>

schera.gif
(バブリー・シェラ)

ところで・・・ブッチャ師匠と飲んだんですってぇ~~(;一一) ジィー
ayanpa大将はかなりぶっ飛んだ人らしいですね(* ̄m ̄) ププッ
掲示板からもわかるけど(* ̄m ̄) ププッ
ayanpa大将と話が合う(合ってる?)シェラって( ̄□ ̄;)!!

ブッチャ師匠が一泊旅行って時点で、ひょっとしてと思ってたですよ。
でもって、ayanさんのサイトの更新履歴が間違ってたので、
(5/10わらしべ日記更新)やっぱり?と思ったですよ。
--------------------------------------------------------------------------------
ayanpa_logo.jpg
(あやんぱ)

そうなんだがや、なぜかブッチャさんがリングの貞子の様に我が家に現れたんだがや。
すっごくクールな二枚目だと思ってたが、実はブッチャさんもかなりのぶっ飛びキャラだったな も。
でも、おいらたちのノリに初回だからかどうか、少し遠慮してたなも。
まあ、次回はブッチャさんを肴に呑もうと密かに企んどる。
それがいつになるかはわからんが…。



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



トラックバック

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

コメント


korabo_180.gif

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