夜のひんやりした空気とスミレの花が印象的なウェブサイト。妖精さん（?）も可愛いですね。
管理人は初めてのＨＰで無我夢中で作成しました
という撫子さんです。ＨＰ作成の為のリンク集とアフェリエイトがあります。
とのこと。アドバイスのご依頼があったのが10月4日、最終更新が10月20日……。でも、掲示板を見ると活動中ではあるらしい。ああ、よかった。通販とＴＶゲームにハマってる専業主婦の方だそうですが、最近は忙しくて更新が滞っているのだという。
ソースを見るたびに これで良いのか？と不安です。また、メインを役たつリンク集と思ってますが、アフェリエイトも捨てきれません。その為にまとまりがありません。現在、役たつリンク集を もっと細かくカテゴリーを増やし紹介するサイトを多くする為に作成中です。よろしくお願いします。
- 0．
まさか4ヶ月近くも待たされるとは思っていらっしゃらなかったでしょう。申し訳ありません。
- 1．
ソースを見るたびに これで良いのか？と不安
になる件について。ちょっと難しい話をしますので、注意して読んでください。
問題は、どのような基準で「良い」「悪い」を判断するのか、ということです。撫子さんが HTML についてどのような理解をもち、今後、どのように付き合っていこうと考えていらっしゃるのかが重要なのです。
もし、HTML は「結果としての見た目」を実現するための手段に過ぎないと割り切り、また閲覧環境を限定していくことを是とするならば、ソースを見て不安を感じる必要はありません。自分のイメージどおりの表示結果が、自分の環境において実現できたなら、それで満足していい。既に良い結果が得られているのに、過程について思い悩むことには、さしたる意義がありません。なぜなら、「結果こそが重要」という立場を貫く限り、過程を見直したところで満足度は上昇しないからです。
そうではなくて、「HTML についてもっと知りたい」といった希望があるならば、お勉強するしかありませんね。やっぱり、知りたいと思っているだけで何もしないなら、いつまで経っても、ただ不安なままです。時々思い出したようにソースを眺めているだけでは、HTML を理解することはできません。
- 2．
撫子さんは現在、ウェブサイトを paperboy&co. のウェブアプリケーション woopa! で作成されているのですね。（注：woopa! はロリポップ！レンタルサーバーの契約者以外は利用できませんので nadesiko さん以外の読者の方はあしからず。いちおう体験版は操作可能です）
woopa! はホームページビルダーの「どこでも配置モード」と同種のツールで、
- 作業画面内に画像やテキストなどの様々なパーツを放り込む
- 各パーツにはそれぞれ長方形の領域が与えられる
- 各パーツの表示位置、縦横の長さなどを指定する
……という手順でウェブページを作成します。長方形の領域は当然のように div 要素で表現されます。表示位置や縦横の長さはインラインスタイルシートとして記述されます。
このツールの美点は、何はともあれ、製作者が HTML の制約をほとんど気にしなくてよいことにあります。あまり理解されていないことですが、じつはテーブルレイアウト（表組みを用いたレイアウト方式）だって、非常に多くの制約を抱えていて、作者の希望するデザインを簡単に実現できるものではない。福笑いと同等の簡便さでデザインできてしまう woopa! は、ホームページビルダー付属のウェブアートデザイナーによる画像作成と同等の自由度を持っているといえましょう。
ウェブデザインを画像作成と同等の手法で行うのは間違いだ! という主張は理解できます（後述）。あるいは、画像作成のような手法で作るなら、最終的な完成形も1枚の画像にしてしまったらどうか? という極論も、ひとつの論理として筋が通っているとは思う。
ただ、現実問題として、全部画像にしてしまったら、テキスト情報の更新が面倒くさくなり過ぎます。たいてい更新されるのはテキスト情報ですよね。だから、変えたい部分だけ簡単に変えられるほうが便利だったりするわけです。また全面的な画像化ではファイルサイズが激増し、読み込みも大変になってしまう。リンクを全てイメージマップで実現するのも、たいへんな手間です。woopa! でテキストリンクのパーツを作って、マウスで適当に位置を動かす簡便さを再現し難い。折衷案として、woopa! やどこでも配置モードの需要が出てくるのは不思議なことではないと思います。
- 3．
woopa! は HTML の制約を考えずに結果としての見た目だけを重視してスタイルシートを駆使すれば、ウェブデザインはこんなに自由度が上がるのだ、という事実をよくあらわすツールです。そのために支払った代償について「気にしない」という価値判断をなさるなら、今後も便利に使い続けてかまわないはずです。
逆にいえば、woopa! を楽しく使い続けるなら、HTML がどうのこうのといった話はむしろ忘れてしまった方がよい。ソースは見ないことを勧めます。
正直いって、woopa! で現在実現されているデザインを、他の手法で再現することは簡単でない。
- テーブルレイアウトを使いつつ、文字と画像を少し重ねるような表現を実現するためには、かなりの高等テクニック（たいていの人はそこまで勉強を進められない）を要します。
- そこそこ「まとも」な HTML 文書と外部スタイルシートの組合せで現在のレイアウトを再現しようとすると、多彩な画像を駆使した装飾表現の再現が、非常に悩ましい。そもそも HTML 文書の作成段階で、情報の登場順序をどうするかが大問題となります。
少し話を整理しましょう。
いま、FLASH のことはとりあえず忘れることにしますと、HTML や CSS（スタイルシート）を主とするウェブサイトの製作手法として、3つの方法があります。
- woopa! 方式（＝HPBのどこでも配置モード）
- テーブルレイアウト
- HTML や CSS を「まとも」に使う
それぞれの特徴は、以下の通りです。
- woopa! 方式
ページを構成するパーツを、表示結果だけを基準として、自由に配置する
- テーブルレイアウト
まず表組みを駆使したレイアウトシートを作成し、表の桝目にパーツを入れていく
- HTML や CSS を「まとも」に使う
情報を整理した HTML 文書を作成し、CSS で装飾する
テーブルレイアウトでは表組みによるレイアウトシートを用いますから、ごく簡単にいえば、レイアウト用の枠線を「またぐ」ことができません。微妙に「ずらす」表現などは非常に実現に苦労することになります。
HTML 文書を「まとも」に作成する場合の制約は、もっと根本的に厳しいものです。
HTML 文書のソースを見ますと、ようはその中身はテキストファイルです。1行目から順番にあれこれ書かれている。ブラウザの表示結果では、段組とか、いろいろできますけれども、ソースに段組はありません。情報の流れはひとつしかない。
撫子さんは home.html で、カレンダー、スミレの画像、便利なリンク集を横に並べていますね。多分、どれから見てもらっても問題ないのだろうと思います。しかし HTML 文書をきちんと作ろうとするならば、ソース上の登場順序を、しっかり決めないといけません。繰り返しますが、HTML 文書には、ひとつの流れしか存在しません。ふたつ以上の情報を、同時に流すことはできない。
ウェブサイトを作るとき、現状のパソコンのインターフェースが2次元なので、私たちはついつい2次元配置をベースに物事を考えてしまいます。しかし HTML 文書の仕様は、それを許していない。HTML 文書はテキストファイルで、だから情報を1次元に配置することしかできないのです。
もちろん、HTML の制約にはきちんと理由があります。しかし、woopa! で HTML の制約を気にせず気ままにウェブサイトを作ってみて、これまで何か困ったことが起きたでしょうか? おそらく、何一つ困っていないだろうと思います。
多くの閲覧者は視力に問題がなく、Windows 版の IE6 を利用してウェブを散策しており、ブラウザの表示領域を横幅 800px 以上に広げています。文字サイズの設定は「中」または「小」の人が多い。画像やスクリプトの利用を許可する初期設定を変更していない。
だから、「問題」は表に出てきません。最近は ADSL や光ケーブルなどのブロードバンド環境の利用者が大半だから、たくさんの画像を利用していることにも不都合ない。そんなわけで、撫子さんのウェブサイトにおいて、きちんと HTML をお勉強する「必要」はないかもしれない。
おそらく、というかほぼ確実に、woopa! を使い続ける限り、「まとも」な HTML 文書は作成できません。だから HTML を気にするということは、woopa! の使用をやめることを意味します。その代償は小さくないことに、注意してください。
以下、woopa! 方式を否定する意見を書きますが、ここまでに私が書いてきたことをお忘れなく。撫子さんご自身にとっての損得を考えて、結論を出していただきたいと思います。
- 4．
撫子さんのウェブサイトで、どんどん文字サイズを大きくしていくと、画面内にたくさんのスクロールバーが出てきます。それは何故か?
woopa! 方式では、各パーツを包含する div 要素に位置情報と縦横の長さを入力しています。文字サイズを大きくしていけば、どこかで規定の縦横の長さを突破してしまう。だからスクロールバーが出ます。
内容にあわせて大きさが伸縮すればいいのに……たしかにその通り。でも、無理難題というべきですね。woopa! 方式では全てのパーツの配置を作者が決めているわけですから、ひとつのパーツの大きさが変化したときに、他のパーツの配置をどう調整したらいいのか、ブラウザには判断しかねます。パーツの配置にルールがないから、しょうがないのです。
ここ、注意してください。ルールがなければ、コンピュータは無力なのです。「ここにこのパーツを配置しなさい」と命令されれば、その通りにしますよ。でも、文字が大きくなって、作者の指定した配置ではレイアウトに不都合が生じたとしても、コンピュータは気にしてくれません。
一方、woopa! は、「ルールを考えなくていい」ツールです。だからこそ、深く考えずに、好きな位置に好きなパーツを置けるのですね。作者がどのような意図でそのパーツをそこに置いているのか、いちいちコンピュータに教えないでいいから、楽ちんなのです。
- 5．
テーブルレイアウトは、表組みによるレイアウトシートを作成し、桝目の中にパーツを置いていく仕組みであると説明しました。
このレイアウトシートが、即ちコンピュータに作者の考えているレイアウトのルールを教える役割を果たしています。内容次第で桝目の大きさは伸縮自在、幅だけを指定するといったことも可能です。
ではテーブルレイアウトは万能なのか? もちろん、そんなことはありません。
人間は複雑な思考過程を経て、レイアウトを決定します。けれども、人間はそのデザインルールをきちんと表現することができない。だから、表組みによるレイアウトシートなどという、単純な仕組みを使わざるを得ないわけです。いやしかし、それにしても、テーブルレイアウトは単純すぎます。
上図 A は見出しと本文の左側のラインが揃っている様子を示しています。テーブルレイアウトだけで本文を少し見出しよりも奥まった位置にレイアウトしたいと思ったら、ただそれだけのために図 B のように表の桝目をひとつ増やさねばなりません。マウスでパーツを適当に動かす woopa! と比較して、この面倒くささは異様に思われるでしょう。
そして、実際にテーブルレイアウトに必要な知識を頑張ってお勉強して、「さあサイトを作るぞ!」と意気込んでみても、表組みは所詮、表組み。まったくもって融通が利かないことに気付かれるはずです。
それでどうなるのかといいますと、シンプルなデザインを目指すことになるでしょう。パーツを大幅に減らし、単純なレイアウトの文書を作成するわけです。（その後、お勉強の進捗にしたがって再び凝ったレイアウトを実現できるようになったりならなかったりする）
- 6．
HTML とスタイルシートを「まとも」に使うとどうなるか。
テーブルレイアウトと同様、これはこれで極めていけば、woopa! で実現できる程度のデザインの多くは再現できるといいますか、そもそも woopa! だって使っている道具は同じスタイルシートなのだから当たり前といえば当たり前の話。
ただし、そういうレベルにはなかなか到達しないものですし、そもそも、現在、撫子さんが woopa! を使って作っているサイトのデザインが「HTML 文書の装飾」として素晴らしいものかどうかは疑問の余地があります。
ここはちょっと補足が必要だと思うので寄り道しますけれども、じつはウェブデザインには3つの方向性があり、それはここまで説明してきた3つの製作手法に概ね対応しています。
- woopa! 方式
「ウェブデザイン」であること自体、とくに意識しない。ポスターのデザインと同じような感覚でレイアウトする。
- テーブルレイアウト
事実上の標準となっている「ウェブサイトのデザイン」の型を再現する。ヘッダー、フッター、段組とか何とか、そういうことに目がいく。
- HTML や CSS を「まとも」に使う
HTML によってマークアップされた文書の構造を、わかりやすく表現するためにデザインする。
HTML とはどのような技術か。簡単にいえば、用意したテキストのあちこちに「タグ」をつけてですね、これが文書のタイトルです、ここが見出しです、ここからここまでがひとつの段落です、といった文書を構成する要素を明らかにする（＝マークアップする）ものなのです。
CSS に代表されるスタイルシートとはどのような技術か。簡単にいえば、見出しの見た目はこういう風にしましょう、段落の前後は1行分開けましょう、といった指定をするものなのです。
プロになるとまた違うのでしょうが、素人がチラシを作るときにですね、段落とか、見出しとか、考えていないと思いますね。何をどこに、どんな大きさで配置するか、そんなことばっかり考えてる。別にそれはそれでいいのですけれども、見出しも段落もない文書を、HTML 化する意味があるのかどうかは微妙なところ。だって、マークアップのしようがないでしょう。
でも、見出しも段落もない文書だって、HTML 文書にすることはできてしまう。div 要素という、とくに意味を与えられていない要素を使い、それをスタイルシートで装飾していけばいいわけです。見出しだから、見出しらしく表現しよう、というのではなしに、この div 要素はここに配置しよう、といった塩梅。この div 要素、あの div 要素……みんな同じ div 要素なのに、全部バラバラに配置などをするわけだから、行き当たりばったりのデザインになっていく。
「まとも」な HTML 文書では、そんなことはありえないわけですよね。タイトル、見出し、本文、小見出し、本文……。そして「見出しのデザインはこうです」とスタイルシートで指定すれば、全部の見出しが同じデザインになる。非常に統一感が出る。読者も一目で、文書の構造が概ね理解できるようになる。「これが見出しだね、そしてこれがひとつの段落、次が小見出し、云々」
そういうわけなので、「まとも」に HTML や CSS を使うと、ウェブページの見た目は、ある意味でつまらないものになります。HTML には僅かな種類の要素しかないし、ソースを見ての通り、情報の流れはひとつしかない。HTML 文書をスタイルシートで素直に装飾すれば、段組もありえないということになります。
- 7．
HTML を「まとも」に使って、どんないいことがあるのか。
残念ながら、撫子さんがすぐに実感できるような「いいこと」は、ほとんど何もないのではないかと思います。
それなのに、HTML を「まとも」に使うためには、少なくとも1日はマジメにお勉強しなければならないし、また1日頑張るだけで実現できるレイアウトや装飾は、非常にシンプルなものでしかありません。そして何よりつらいだろうと思うのは、マジメに勉強していくと、現在、撫子さんが思い描いているであろうウェブサイトの完成図が崩れてしまうことです。
前項で説明したように、現在の撫子さんのウェブデザイン観は、少なくとも HTML の思想とは相容れないものです。woopa! では、HTML が持っている「本来はこう使うべき」という制約を見事に隠蔽しているから、単なる道具として「使えりゃいいでしょ」という方向性で押し切ることができるわけで、ソースを見て「これでいいの?」と考え始めたら、撫子さんの目指してきた到達地点までもが否定されてしまうわけです。
- 8．
現在の撫子さんのサイトの作りを「よくない」といえる根拠は、たくさんあります。
- 例えば、主に視覚障害者が利用する音声系ブラウザは、ソースに書かれている順番どおりにテキスト情報を読み上げます。woopa! では、後から追加したパーツがソースの後ろにどんどん付け足されていきます。そのため、いろんなパーツを足したり引いたりしながら作られたウェブサイトは、ソース上のパーツの順番と、視覚系ブラウザ（IE などの、いわゆるふつうのブラウザ）における表示結果から想像されるパーツの順序が対応しないことになります。これを読み上げると、ワケがわからないことになってしまう。
- あるいは、読者がウェブページの内容を気に入って、ひとつながりの文章をコピーする場合を考えましょう。画面上では段落A→段落Bの順番に見えるのに、じつは段落Aが後から全面的に差し替えになっていた場合、コピーアンドペーストすると段落の順番がひっくり返ってしまいます。そもそも文章をマウスでドラッグする段階で「アレレ?」なことになるわけですが……。
- そして製作者自身にとっても、あまり嬉しくない点があります。ウェブサイトをどんどん更新していこうとすると、似たようなレイアウトのページをいくつも作りたくなったりするわけです。違うのは文章だけなのに、毎回毎回、装飾用の画像をたくさん配置するのって、面倒くさいですよね?
- 日記を毎日更新しようと思います。最新の日記はページの上の方に表示したいな、と思ったのだけれど、そのためには毎日、過去ログを下の方へマウスで移動させて、空間を作らなきゃいけない。超めんどくさい。
- 現在のデザインが気に入らなくなったので、リニューアルしたいと思います……って、ええっ!? 面倒くさすぎる! 今から、全ページを作り直すの? ということが、将来、生じないとも限らない。
こうしていろいろ問題があるからといって、じゃあ、HTML を勉強したら、今すぐ、何かいいことがあるだろうか。いや、それはない、と。
むしろ、短期的には、お勉強したって、あまりいいことはないのです。頑張って勉強したのに、今よりずっと寂しい見た目のウェブサイトになってしまう。それに、当面は慣れないことをやるわけだから、woopa! を使い続ける方がだいぶ楽だと思うでしょう。
けれども、将来、ずっとウェブサイトを更新し続けるなら、どんどんサイト内の文書を増やしていくおつもりなら、お勉強なさった方がよいでしょうね。それも、できることなら、テーブルレイアウトじゃなくて「まとも」な HTML や CSS の使い方を勉強された方がよいと思います。
- 段落をひとつ作るたびに、パーツの大きさと配置をいちいち決める面倒くささとはもうおさらば! 毎日の更新では、レイアウトのことなんか気にせず、どんどん文章を書いていけるようになる。
- 音声系ブラウザでもオッケーです、とかいえると、ちょっとだけカッコいいかもしれない。
- 文章の追加、削除、いずれも気ままにできちゃう。コピーも自然な仕上がり。
- たったひとつの外部スタイルシートファイルを書き換えるだけでリニューアル完了!
注：もし当サイトを表示したとき、画面右上の隅にセレクトボックスが出ていたら、スタイルシートの切替によるリニューアルを体験できます。HTML 文書に手を加えなくても、スタイルシートを交換するだけで見た目を大幅に変えられることを確かめてください
まあ、1日や2日でそういうことを実感できるものではないし、ひょっとすると、お勉強してよかったと思う前にウェブに飽き飽きしてしまう可能性だってあるのです。中学校で何となく柔道部に入って、それがきっかけで柔道を嫌いになってしまう人って、けっこういるんですよね。別に柔道だけがどうというのではなくて、習い事というのは、そういう危険みたいなものを持ってる。
多分、最初の一歩を踏み出す前に相談されたなら、HTML を勉強することを勧めたろうと思うわけですが、既に woopa! で楽しくいろいろやっているわけで、この段階で方向転換をするべきだと断言するだけの自信はありません。
- 9．
今後の更新、サイトの方向性について。
初めてのＨＰ
だそうですし、無我夢中で作成
されたとのことなので、いろいろ迷うのは当然かと思います。アドバイスは簡単で、「まとまりは気にしなくてよいので、やりたいことは全部やってください」これに尽きます。
このアドバイスは強力です。仕事なら潰れるかもしれませんが、これは趣味の話なので、「撫子さんが、じつはそれほど興味を持っていないこと」は絶対に続きません。自分の気持ちの話なのだから、やってみなくてもわかりそうなものですが、意外なことに（?）これはやってみなきゃわからないのです。
ま、そうはいっても、だいたいやる前から結果の見えている物事というのはないではない。とりあえず、リンク集はですね、自分のために作成するに留めるのがよろしいかと思います。他人のためにリンク集を作ろうとしても、これはなかなか続きません。
また1ページで収まっている間はいいけれど、どんどん掲載数を増やしていくならBookまーくというサービスの「公開Bookまーく」などをご利用になると、便利でよろしいのでは? ウェブサイトから自分の公開Bookまーくへリンクすればいいのですね。
Bookまーくで不満であれば、Yomi-Search のようなリンク集作成 CGI を利用されてはいかがでしょう?
そしてアフィリエイトですけれども、単に商品紹介ページを作るだけでどんどん売れて小遣い稼ぎになる……わけもなく、金儲け目当てではうまくいかないことが予想されます。だいたい、自分がよその素人の商品紹介ページからモノを買うことなんて滅多にないでしょう。他人も同じなんですね。というわけで、別のことで人を集めて、ついでに「お勧め商品」も少し紹介していく、そんな方向性を目指すのが常道です。
ロリポップのレンタルサーバをご利用になっているので、ロリポブログで日記のようなものを書き始めるのが、多分、一番いいのではないでしょうか。で、サイドバーにお勧め商品を並べる、と。
例えば、まあ、こんな感じですかね。上記リンク先のブログでは、紹介している本が年1000冊以上、売れているそうです。その100分の1、年に10冊売れたらいいかな、くらいの目標からスタートされるとよいでしょう。いや、そんなものですって、はじめは。
ブログに何も書くことがない? よそのブログを見てみますと、単なる日記を皆さん書いていらっしゃいます。それでいいと思います。とりあえず、はじめてみると面白いかもしれない。3割くらいの人は、意外と何かしら書くことが見つかって、そこそこ続くようです。逆にいうと7割は……なのですが、あまり気にしなくていいと思います。お金が余計にかかるわけじゃないので。
アドバイスは以上です。