マーケティングエンジニアの試行錯誤メモ

今日は、サイトのデザインについて調べてみた。

左上の魔術師理論　というものがある。

簡単に言うと、人はまず画面の左上をみる傾向がある。
だから、

　・ウェブサイトをつくる人は、重要な主張を左上に置け。
　・逆にウェブサイトの左上を見れば、そのサイトが主張したいことがわかる。

という話。
また、携帯で閲覧したり、 LinuxやBSDでLynxを使ったことのある人ならわかると思うけど、
ブラウザがまず最初に読み込む位置 : 左上に重要情報をもってくるといいらしい。

　SEO的にも。

というわけで、
自分が管理しているいくつかのブログおよびサイトのデザインを一新した。

　・左側においていたサイドバーを、右に入れ替えると同時に、
　・初心者にとってわかりずらい３カラムをやめて、２カラムにしてみた。

実際のところどうなのかについては、様子見。
ちなみに、左上の魔術師理論への反論もある。

　ユーザーは中央を見る

というもの。

私が個人的に思うのは、

　・左上も中央も、ケースバイケースだろうということ。
　・他のコンテンツとのバランスこそが大事。
　・ごちゃごちゃしてたら、左上も真ん中も目立たないしわかんない。

そしてもっと重要なことは

　・人は、いつも見ているサイトの構成に似ているサイトをまず見る。

これが一番大きいのではないかと思う。
だから、マーケターの私の見解としては、

●読者ターゲットでわける。
　・いつもYahooで少ししかNetを使わないようなターゲット向けには、Yahoo式コンテンツ。
　・パソコン＝mixiのようなタイプには、２カラムか３カラムのmixiライクなデザイン。
　・いつもケータイしかみないよって人たちには、シンプルな１カラムデザイン。
　・仕事＝メールというメール多用派の人たちには、Becky!orGmailorOutlookライクなデザイン。
　・あらゆるサイトに見慣れているパワーユーザ向けには、左上の魔術師理論のような配置。　

●ライバルサイトでわける。
　・自分がつくりたいサイトのライバルサイト（≒アクセスを奪いたいサイト）にあわせる。
　　それが左上なら左上。真ん中なら真ん中。という感じで。

というところかな。
だからこれは、ケースバイケースということ。
時と場合で柔軟に考えていかなきゃならないなーと思う。

って、えらそうなこと書いたけど、このブログはそういう意味では・・・
自分のメモという目的が８割なので、自己満足デザインかも（笑）

今日は、前から直したかったプライベートブログの色を修正した。
スタイルシートをいじくりまくったおかげで、
色々な構造が見えてきた。

ところで。

男女の脳の構造の違いで、
「男性よりも女性の方が、色の違いをビビッドに感じ、そして見分けることができる」　
という話をきいたことがある。

で、科学的医学的な裏づけなどは専門化に譲るとして、
私と妻は、そのまんまこれにあてはまる。

私は色のセンスがない。
なので、横に妻をおいて、一緒にみてもらった。
微妙な色の違いが、わかんないので。

さて、色々調べる中、カラーコードを指定する時に、
今日は、RGBでの256指定と、#ffffff の形の変換はどうやるんだ？
と、少しだけとまどった。
例えばこのサイトにいくと、変換してくれる。
10進と16進の違いなのか。

スタイルシートの指定は#ffffffだけど、
画像処理ソフトによってはRGB値でしてしなきゃいけない場合もあるから、
知らないとまずい。

tableタグで試行錯誤した。
スタイルシートで定義したフォントサイズが、なぜか無効になってしまうのだ。

いつもお世話になっている小粋空間さんのサイトに、
トラブルシューティング情報があった。

どうも、ブラウザのバグに起因する問題らしい。
XML宣言の話とか、モードの話だとか細かいことを考え出すと、
悪い癖が出てきてこわい。

趣味に走ってしまうとビジネスのスピードがおちて本末転倒。
とにかく解決だけを急ぐ。
んで、解決方法としては、
スタイルシートで、th td要素に対して定義してやればいいらしい。
例えば↓。

２．th 要素、td 要素に直接プロパティを設定する
　　
　th, td {
　 font-size: 10px;
　}

以上、小粋空間さんから抜粋。

ほんとだ。直った。

アンダースコアで、ブラウザごとの振る舞いを変える方法を学んだ。

例えばスタイルシートでfont-sizeを定義しても、
ブラウザによって振る舞いに違いが出る。つまり、フォントサイズが違う。

あるいは、同じpaddingとかmargin設定だと、
「ずれ」が出てしまって美しくない表示になって困ることがある。
それを調整するのが、アンダーバー（アンダースコア）による指定。

とりあえず、以下３つを覚えておけばいいかな。

　_font-size と font-size
　_padding と padding
　_margin と margin

例えば、

font-size:12px;
_font-size:11px;

と書けば、まずいったん全部12pxになる。
で、次にIE系だけが、_font-sizeを読んで、11pxになる。

これで、IEとそれ以外での表示のふるまいの違いを調整できる。
めでたしめでたし。