今から始めるCSSレイアウト・1

遅ればせながらCSSのレイアウトを始めた。


今までHTMLのページ作成で行ってきた、
テーブルを何重にも入れ子にしたり、
透明GIFで正確なレイアウトをしていく方法でなく、
簡単なタグ付けのみをHTMLで行い、
外部のスタイルシートファイルに
デザインレイアウト情報を持たせていく。

推奨される理由としてよく言われるのが、
・WEB標準への準拠
・SEO対策への効果
・読み上げプログラムへの対応
・更新・リニューアルの簡易性
・HTMLがデザインデータを持たないので、携帯での表示が可能
などなどがあげられる。


比較的簡単なページの案件があったので、
テーブルを一切使わずに全部CSSでレイアウトを進めています。

従来のテーブル＆透明GIFに慣れきってしまった自分にとっては、
まったく違う製作方法で最初かなり戸惑いました。


この機会に、DreamWeaverを2004から8にバージョンアップして、
あれこれトライ＆エラーで進めています。




テーブルで組めば、30分もあればできるレイアウトに、
勝手がわからず丸１日かかってしまった（泣）
何よりも、今は慣れることが優先です。


CSSレイアウトの本を読むと、
レイアウトを左揃えにして
絶対位置でレイアウトしていくのが多いようですが、
今回は中央揃えで挑戦です。

とりあえず絶対位置の指定は行わず、
相対位置でレイアウトしていきます。

テーブルレイアウトの時からこだわっているのだが、
ユーザのブラウザ環境によって文字サイズが変わることで、
見栄えが崩れたり、見にくくなったりは絶対避けたいと思っている。

そう考えると、相対的なレイアウトを優先的に選んでしまっているが、
この選択は正しいのだろうか？


ボックスの概念が難しいです。
それをフロートの考え方で左右に並べたり、
普通に縦に並べたり、
慣れるまで戸惑います。


つづく


参考リンク
CSSとは
Macromedia - Dreamweaver 8

Yahoo!デベロッパーネットワークってどうだ？

　



面白いサイトがある。

金融のほのぼのレイクのキャンペーンページだが、
「What do you want?
あなたの欲しいものを入力しよう！」
ってことで、キーワードを入力すると、
それにそった写真がたくさん振ってきます。
http://www.want-to.jp/


これは「Yahoo!デベロッパーネットワーク」というものを使っているらしい。

Yahoo!の検索結果を、
任意のページに組み込む事ができるサービスのようです。

このページはYahoo!の画像検索結果の画像を受け取り、
Flash上で表示している。

何かすごく可能性の感じるサービスに思うが、
どんな使い方ができるかな・・。


これには無いみたいだけど例えば、
「キーワード別月間検索数」とかは使わせてくれないかなー。
これを元にネットショップなどで商品の並び順を決めたら効果ありそう。
OvertureとかGoogleアドワーズの資料使うのも方法か。
いろいろ考えが広がります・・・。


参考ページ
Yahoo!デベロッパーネットワーク

フレームの使用は？

ちょっと今更かもしれませんが改めて。

ホームページを作成するのに、
フレームは使わない方がいい。


フレームを使うと良かったことは、
●メニューだけでひとつのファイルになっているので、
　項目が増えたときなど更新の対応が簡単。
●いつでもメニューが同じ場所にある。
●中ページが長くなって下にずっとスクロールしても、
　瞬時に違うページにジャンプできる。

などがありました。

↓フレームのイメージ




でもこんなディメリットがあります。
1.Googleなどで検索した場合、中ページだけがヒットしてしまう。
2.その場合、メニューが無いのでTOPページに戻ることが難しい。
3.ページごとに独自のアドレスを持たないので、
　個別にブックマーク・リンクすることが不可能。

「ディメリットの1番」が、
何よりも使ってはいけない、最大の理由です。


Yahoo!の検索が2005年10月から、いままでのディレクトリ型から、Googleと同じページ検索に変わった。
これはきっとユーザの検索の方法が大きくかわったからだと思っている。的確なキーワードで、目的の情報になるべく早くたどりつきたいと思っている。簡単に言うと検索窓に「トヨタ」とだけ入力するのではなく、「トヨタ　クラウン」まで入力して、目的のページに向かう。
一昔前ならトップページから入って、ゆっくりページを探したが、今はそんなのんびりとした検索をしないと思う。

その場合フレームになっていたらどうだろう？
中ページがヒットしてしまい、とりあえず１ページだけ情報は見られるが、次のページに行くことも、TOPに戻ることも出来ない。第一デザインレイアウトも、メインロゴがないなどおかしな形で、表示されてしまいます。


単純な話、Yahoo!、Amazonなどなど一般的に有名な大きいサイトで、フレームを使ってるところがあるだろうか？
それは何故ならメリットが非常に少ないからです。

「ページが長すぎると、ページ上部のメニューに戻るのが大変」だと言われることもあります。でもMacユーザならまだしも、Winユーザのマウスにはスクロールローラーが付いています。これえお使えばページの上下移動はほとんど苦ではないと思うがいかがだろう？ページの一番下（必要なら随所）にページ最上部のアンカーへのリンクもつければさらによい。

別窓についても同じように避けた方が良い。
だったらページをたてに長くした方が、先ほどの理由から、はるかに使いやすいと思う。別窓を閉じるのはやっぱり面倒だと思う。
ユーザビリティ、SEO対策考えると、フレーム、別窓は避けるべきだ。



っていう私も何年か前までは、ずいぶんフレームのサイトを制作していました。
背景を左右で固定したりすると、スタイリッシュなことができたり、おもしろがって使っていました。
でもやはり時代の流れが変わってきてると思う。
明らかに進んでいく方向とは違うと思う。

フレームは使わない方がいい。




※ホームページというのは、サイトのTopページを指す言葉で、正確にはWebサイトを呼ぶのが正しい。でも最近、Webサイトを「ホームページ」を使っても良いのでは思っています。ここまで広く使われている言葉だし、わかりやすいと思う。世間で一般的なのに、本来の意味にとらわれてこだわっていくのは、不自然だと思い、普通に使うようにしました。

グループチューブ（SNSのASPサービス）

自分たちの仲間・会社・サークルなどの
オリジナルのSNS（ソーシャルネットワーキングサイト）を
作成できるらしいです。


個人的にはmixiもよくやっていて、
友達とあれやこれやコミュニケーションするのは、
すごく面白いツールだなと思っています。


昨日お客さんと話していて、
社内の情報共有の話になり、
「やっぱりブログですかね～？」なんて話していたが、
家に帰ってきて「mixiを社内だけで使えたらすごくいいよなー」
って思っていたら、やっぱりありました。



↑サンプル画面

これはASPタイプで、
サーバへのインストールなど必要ありません。
月々￥1,000～、安いですね。


でもひとつ思ったのは、
社内の情報共有って、企画段階の情報が行き交ったりして、
秘密にしたい事柄が多いだろうから、
いくら守秘契約がされてるとはいえ、
外部サーバで動くASPだと、お客さんに勧めにくいかな・・・。
どうだろう？


でも、お手軽にSNSを構築できるのは魅力的。


グループチューブ

retrievr - 画像検索サイト

これもまた「はてな特集」より。
すごく面白い！

機能だけで話せばこれは画像検索サイトである。

でも画像を探すのに、キーワードやファイル名で検索したら、
それは普通のGoogleなどのワード検索と変わらない。


このサイトが凄い（面白い）ところは、
手書きの絵を元に画像を検索してくれるところ。





もちろんズバリではないんだけど、
似てるんですよね。





既存の写真・イラストデータからも検索できます。



実務で使うかわからないけど、なんだかすごくわくわくして、
ずっと遊んでしまいます。
何かイメージを作るとき、新しい発想の道具になるかも。


retrievr

ヤフー！・グーグルＳＥＯ対策テクニック

ヤフー！・グーグルＳＥＯ対策テクニック／鈴木将司を読みました。

2005年10月より新しくなったYahoo!のSEO対策について、
初めて本格的に書かれた本だと思います。

内容もわかりやすく整理されているのに、
細部まで検証されており、すごくためになりました。
今までもGoogle対策の本はいくつか出ていましたが、
これはどちらかというとYahoo!に関して重点的に書かれています。


よくこの手の本（記事）で、最後の最後の決め手は教えてくれない感じも多いのですが、
この本はもう全部教えますって内容が気持ちいいです。

そんな内容だけに、他の人に読んでもらいたくないなーって思いました。
内容がSEO対策で、検索サイトにいかに上部表示されるかがテーマなので、みんなが同じ方法やったら、また競争になってしまいます。そんな風に思わせてくれます。


でも、よーく考えると、
結局はここに書いてある内容を「やるかやらないか」なんでしょうね。
こんな貴重な方法を惜しげなく見せてもらっても、
実際は行動に起こし、継続することがやっぱり難しい。

知識を手に入れることよりも、
それを理解して実践する事がいかに大切か。
改めて考えてしまいました。


Amazonへリンク

ネットラジオもこんなに進化した（Last.fm・Pandora）

いやいやこれはすごい！
「はてな」の特集で見つけました。






パソコンで聞くことができるネットラジオだが、
こんなに進化したんだ。びっくりです。

好きなアーティスト名を入れると、
それに似たアーティスト・関連するアーティストを、
ノンストップで再生してくれます。
再生曲のジャケットも表示されます。




同じアーティストばかりずっと聞いてると飽きてしまいますが、
これなら良い感じで「振れて」いて楽しいです。
好きなアーティストから派生したコレクションなので、
意外な発見もあります。

Last.fm
オリジナルプレーヤーをインストールして聞くことができます。

---

Pandora
こちらはブラウザ上で同じように音楽を聴けます。





Last.fmはワイヤレスのAir Mac環境では、
時々音が途切れるのが難点です。
再生レートの切り替えも無いみたい。
Pandoraの方が若干音質落ちますが安定しています。


参考ページ
Hatena::Question「うわっ！こんなサービスウェブで無料公開してるの？」