2004/12/17　サイト作成（その１）

今回は「サイト作りのきっかけ」の続きで私自身がどうやって作っているかを書いていこうと思う。もっとこうした方がいいよとか意見がある方は是非BBS（メインBBSへ）などに書き込んで下さい。
私自身もちろん勉強中ですので。

前々回の時に書いたとおり、私はドリーム・ウィーバーで作成している。
基本的にある程度頭にデザインを考えていきなり作り始めることが多い。
一時期は大まかに考えたデザインをフォトショップでデザインし、それを使っていた。しかしそれは画像を多様する為、重くなってしまう、つまり容量が増えてしまうという事になってしまうので、それは「きっとユーザビリティーからかけ離れるな」と思い、やめることにした。
現在は出来るだけ容量を少なくしていくようにしている。

W3Cの勧告では基本的な骨組み「HTML（ハイパー・テキスト・ランゲージ）」でデザイン的な要素は「CSS（カスケーディング・スタイル・シート）」でするように言われている。
さらに「SEO（Search Engine Optimization）」などでもこのような作りがいいとされている。ちなみにSEOとは 「検索エンジン最適化」の意味。つまり効率よく検索エンジンに引っかける方法と言えばいいのか。
この辺りの事を少しずつ勉強するようにはしている。（ここ１年は何も勉強してないような・・・。またきっと状況は変わってるのだろうな・・・）

現在、サイトの全体的なリニューアルを行っているが、上記のような事を進めている。これらは基本的なHTMLが分かっていないと非常に辛い。故に完璧な事が出来ないのが私の辛いところ。
その昔なんて<H1>のような段落なんて使うことが無かった私であったが、出来る限り使うようにしている。
私の基本的な構成は以前ならそのほとんどがテーブル・レイアウトに頼っていた。しかしながら勉強していくうちにテーブルレイアウトはいろいろと支障を来すことが分かり、W3Cでも推奨していない事も分かってきた。テーブルはあくまでテーブルとして利用する事が本来の目的でその使用方法を間違えてはいけないのだ。（とは言えまだトップページはまだテーブルレイアウト）

私の作り方は<div></div>のボックスをメインに組み立てている。
例えばこのページで言えば、
<div id="contents2">
<div id="textbox">
<div class="text">
</div>
</div>
<div id="rightmenubox">
</div>
</div>
としている。
まず「contents2」という大きなボックスを作り、その中に「textbox」というボックスを入れる。その中には現在文章（テキスト）が書かれている「text」というボックスを入れている。「rightmenubox」と言うのはこのページの右側にある「メニュー」の場所の事で、このメニュー自体はiframeで別のhtmlを読み込んでいる。この「rightmenubox」は「textbox」と同じ階層に置いてあり、右へフロートさせる事によって、右側に表示するようにしている。

今回このページのメニューは右に置いているが、私的な使用感覚で言えば左にあるのがベストではあるが、このページ自体が「読み物」であるため、メニューは右にする事にした。
なぜかというと人は文字を読む時に「左側から読む」為、画面中央や画面右に設置されていたのでは若干読みづらくなってしまうからだ。

トップメニューは「パンくず式」を使用してみた。これが私的に一番使いやすいのでは？と思ったからである。Yahoo!などでもこの「パンくず式」を使用しているので、使い勝手はいいと思う。階層が下がっていくサイトである場合はこの「パンくず式」が適しているのだ。
ちなみにこの「パンくず式」のネーミングの由来は「グリム童話　ヘンゼルとグレーテル」から来ている。森で迷わないためにパンのくずを落としていったというアレだ。

と言う事で今回はこれくらいにしておこうと思う。
また今回のような気分になったらサイト作成について書いていこうと思う。っと、その前に自分が勉強しなくては行けない。
でわ。