［2002.04.28］
とくに問題はないのですが、現状のようにすっきり見せるのであれば、テーブルレイアウトである必要は全然ありません。正しいHTMLとCSSを使えば、もっとすっきりとしたソースでまったく同じデザインを実現できます。もちろん表示も速くなります。補記に例を示しました。JavaScriptのように難しいものに手を出すチャレンジ精神は素晴らしいと思います。そのエネルギーのごく一部を、HTMLの記述にも向けていただければと思います。
とくにリンク集など、画像の縦横のサイズをルール通りに記述するだけで、表示は遥かに速くなります。今までできなかったデザインが可能になる、という派手さのない作業なのでつまらなく感じるかもしれませんが、正しいHTMLを勉強されると、じわじわと効果が身にしみてきます。
縦長のデザインになっていますが、果たしてその必要があるのかどうか、少々疑問です。無駄なスクロールを減らして、コンパクトに見せた方が便利ではないでしょうか。おそらく最も人気があると思われる日記のページのように、読むべき内容があって縦長なのはかまわないのです。しかし例えば、表紙や各コンテンツ目次の上部など、無駄に改行が入っているのはもったいないとしかいいようがありません。
日記から表紙に戻るリンクをたどると新しく画面が開きます。これは不便ではないでしょうか。また、表紙の下の方に、青文字下線付きなのにリンクではないという部分があります。勘違いしてしまいます。読者を困惑させる要素は、なるべく排除していきましょう。
毎日充実している日記なのですが、いわゆる日記サイトとしてみると、いささか過去ログの閲覧が面倒かな、という印象です。毎日読む閲覧者には問題ないのでしょうけれども、一気に2か月分程度を読む私のような日記読みには、一日分ずつしか表示されないのはイライラの種でした。けれども内容はおもしろく、非常にいいと思いました。
元のファイル
CSSでそっくりにデザイン［例1］
CSSでそっくりにデザイン［例2］
CSSで新デザインに［例3］
［例1］のCSS抜きHTML文書
［例2］のCSS抜きHTML文書
［例3］のCSS抜きHTML文書
URI：http://homepage2.nifty.com/tatsuoM/ ［2002.04.28］
内容の割に表示が遅いわけですが、その理由は、やはりテーブルの使いすぎです。ただ縦方向に文字を揃えるだけなら、CSSに変えた方がよいと思います。読込終了分から逐次表示されるので体感速度がかなり改善しますし、単純にソースがきれいになるのでデータ量自体も減ります。（ビルダーなどのソフトを使用されているならテーブルの方が楽でしょうから無理にとは申しませんが）
なお、画像を使用する際には必ず、縦横のサイズを指定すべきです。それだけで表示速度がいくらか変わります。
ページによってテーマカラーもデザインも変わってしまうので、印象が散漫になっています。カッコいいデザインを目指すのであれば、デザインの統一感を出すよう気をつけられるとよいでしょう。
慎重に行き止まりを避けており、致命的な問題はありません。サイトが巨大なので、統制の取りきれない部分も多いでしょうが、表紙へのリンクさえしっかりしていれば、どうにか支障なく閲覧できるものです。
さすが3年目となると内容が違いますね。素晴らしく充実しています。「世間知らずの僕たちが大人になるための考察。」など、興味深く読ませていただきました。
［2002.05.01］
とくに重いページはないとはいえ、無駄なページ、無駄な画像が多いことは残念です。例えば「正門→玄関→目次」という回り道がありますが、私なら表紙を目次にします。壁紙は1種類（あるいは背景色のみ）にします。小物画像も小さなものに変えます。そのかわり、目次のページに更新情報も載せます。各コンテンツの簡単な紹介文も載せます。
情報の取捨選択を行って、サイト全体の閲覧効率を高めよう、ということです。
入り口が一層きれいに、かつわかりやすくなりましたね。ただやはり、慣れない状態であれこれ手を広げすぎているという印象を受けます。
まず壁紙を1種類にしましょう。本当は1種類にする必要はないのですが、経験不足の間は1種類が無難。2種類というのはかなり難しくて、2種類の選び方の解説は複雑怪奇です。しかしこれも、長く1種類の壁紙で我慢しているうちに、自然とわかってくる場合があります。
次に、小物画像を思い切って整理しましょう。種類を3種類以内、大きさも小さなものしか使わない、といったルールを設定されるとよいでしょう。タイトルなどの大物画像は残すとしても、ナビゲーション周りの画像は整理なさるべきです。
内容はいいけれどもデザインの勉強がちょっと追いつかないという場合、とりあえず制限の多い「初心者ルール」に従ってみることをおすすめいたします。（初心者ルールというのは上記2項目以外にも多数あります。全部調べようとすると大変ですから、まずは5つか6つくらいのルールにしたがえば十分かと）
「選択の余地」が狭まって寂しく思われるかもしれませんが、とりあえずはそれで「けっこういいデザイン」が手に入ります。デザインの勉強をしてリベンジするのは、思い切り内容を充実させてからでいいのかもしれません。
ところで、初心者ルールってどこで勉強したらよいのでしょうか。残念ながら、初心者ルールを網羅したサイトはない、というのが現実です。
私はデザインアドバイスを既に100件もこなしておりますが、当初はこれほど長くアドバイスを続けるつもりはありませんでした。もともと「文章の素材屋さん」コーナーに初心者ルール集を作成しようと考えたわけですが、毎晩ひとつずつ新しいルールを思いつく始末。これではいつまでたってもコンテンツが完成しないということで、とりあえず10件ほど実際のサイトにアドバイスしてみて、本当に重要な初心者ルールを厳選しよう、と考えたのでした。ところが、なかなか、「これだ!」と絞り込むのは難しいんですね。そんなわけでいまだに結論が出ないまま、アドバイスを続けているわけです。
壁紙は1種類、サイト構造は3層以内、というのはもう決定でいいと思っていますが、残りが難しいんです。
「初心者ルール」という言葉は、じつは私の造語なんですが、とにかくプロはそういった制約を無視しています。無視しているけど、人気のあるサイト、使いやすいサイトを作ります。でも初心者は、セオリー通りにやった方がうまくいくということです。
初心者ルールは、アクセスアップ講座系サイトや、サイト批評サイトがコンテンツとして置いている「こんなサイトはダメ」みたいな文章の中に登場します。ですから、手当たり次第に情報を集め、読んでいけば初心者ルールの全貌は見えてきます。けれども、やはりそれは面倒ですよね。初心者ルールをもっと効率よく勉強する方法はないのでしょうか?
もちろん、あります! それがサイト批評サイトへの批評依頼です。管理人さんたちが、なおぴ〜さんのサイトを最も効果的に向上させるための初心者ルールを教えてくれます。せっかくタダなんですから、どんどん頼んでみたらよいと思います。1サイトだけに頼むと、誰かさんに影響を受けすぎてしまいがち。そうならないよう、多くのサイトの意見を集めましょう。
内容がよければデザインなんて、とはいいますけれども、サイトの構成については少しずつ見直されるとよいかと思います。「サイト構造は3階層以内におさめなさい」とは適当なアドバイスの典型のようにいわれますが、素人には効果絶大の格言です。3という数字はけっこう厳しくて、さてどうしたものかと頭をひねりつついろいろなサイトをめぐっていると、「あーそういうことか」と見えてくるものがあるでしょう。
3階層とは、「2クリック以内で目的のコンテンツにたどりつく構成」と言い換えてもよいでしょう。よくあるのが、「総合メニューから大項目を選択→項目別メニューから小項目を選択→目的のコンテンツ」という流れです。ちなみに、私のサイトは2階層、コンテンツまで1クリックとなっています。
内容はいいんですよね。文章を頑張って書き溜めていらっしゃる。それだけに、デザインが惜しいと思います。ぜひ、初心者ルールの勉強をなさって下さい。まずスタート地点を設定しましょう。
自己満足がダメとは限らないと思います。私はむしろ、どんなに人にほめられても、自分が満足できないサイトはダメなんじゃないかと思うのです。多くの場合、他人にほめられることが自己満足につながるわけなので両者は一致するのですが、ほめられるためだけに自分のやりたいことを我慢するのは、やはりつまらないでしょう?
ここをなおしてみてはどうですか? という意見に従ってみて、やっぱり前の方がよかったと思ったら、迷わずもとに戻すべきだと思います。他人は結局、無責任です。最後は、自分を信じてください。
［2002.05.01］
問題ありません。軽くて効果的な画像を慎重に選択されているようです。またテーブルを適宜切り分けているため、効率よく表示されていますね。
ただ、画像のサイズを指定されると、一層の表示速度向上を望めます。テーブルの表示が画像読み込みのたびにガクガクと変動するのは、画像の縦横の長さが指定されていないため、ブラウザの予想が外れた分だけ補正されているのです。ちゃんと読み込まれる画像のサイズを記述しておけば、最初から正しいサイズのスペースが予約され、画像はその空いたスペースに読み込まれることになります。
またソースのダイエットのため、CSSを利用されるとよいでしょう。とくに外部CSSファイルを利用されますと、キャッシュも働きますから、実質10％以上のダイエットになります。
HTMLは本来、文章中のある部分が持っている意味を明示するためのものです。例えば牧場長様のサイトの表紙でいえば、文字色deeppinkに指定されている部分は「強調」されているのでしょうから、本来のHTMLでは<em>という開始タグと</em>という終了タグで囲んで<em（強調）>要素として明示するのが正しいということになります。
牧場長様は強調のためにdeeppinkという文字色を指定されましたが、IEというブラウザは<em>要素を「斜体」で表すことにしています。牧場長様はそれでは不満ですよね。強調部分は「標準の文字」で、しかも「文字色deeppink」でなければならないとお考えでしょう。そこでCSSを利用するわけです。
例えば、外部CSSファイルに以下のように記述します。
em
{font-style:normal;
color:deeppink;}
これで、<em>要素はすべて「標準の文字」かつ「文字色deeppink」で表示されるようになります。
ふつうにfont要素で色を指定するのに比べて面倒くさいと思われたでしょうが、この発想はアクセシビリティーの面から非常に重要です。といいますのは、例えば音声読み上げブラウザの場合、font要素で文字色deeppinkが指定されていても、読み方は変わりません。色を声に表すことは不可能だからです。しかし<em>要素でマークアップされた部分を読む場合はどうでしょうか。<em>要素は「強調」を意味しているわけですから、ちゃんと「大きな声」で「ゆっくりと」読んでくれます。
HTMLでマークアップするというのは、そもそもこういうことなんですよ。見た目を制御するためではなくて、文章のある部分が、どのような意味なのか、役割なのかを明示するのがHTMLなんです。
HTML4.01ではfont要素は「非推奨」になりました。それはなぜかといいますと、font要素はどんな意味も明示しないからです。だから、HTMLとしては価値がないということになったんですね。font要素で行っていた見た目の制御は、CSSを使えば、全て代替できるんです。例えば先ほどの<em>要素について、文字のスタイルと色を指定したように、です。
標準の文字色とは違う文字色や文字サイズを一部に指定する場合、それは大抵、「強調」を意味します。強調を示す要素は2種類あり、ひとつは<em>要素ですが、より強い強調を<strong>要素で示すことができます。たった2段階ではつまらないとお考えであれば、CSSの設定で、<em><em>〜〜〜</em></em>というように二重強調にした場合の表示方法なんかも決めることができますので安心です。
em
em
{font-size:150%; font-weight:bold;
color:red;
text-decoration:underline;}
と指定すれば、<em>要素の二重強調は文字サイズが通常の1.5倍、太字、文字色red、下線付きで表示されるようになります。同様に、三重強調でも四重強調でも指定可能です。
font要素では下線をつけたり太字にしたりは不可能ですよね。CSSの方がデザインの自由度は高いということも押えておいてください。
さて、表示速度のお話でした。
<font
color=deeppink>〜〜〜</font>
と書くのと、
<em>〜〜〜</em>
と書くのでは、当然のように下の方が文字数が少ないですよね。CSSと正しいHTML記述ならソースをダイエットできるということなんです。
しかも、CSSと正しいHTML記述には、さらにいいことがあります。
例えば、強調部分の色をblueに変更したいな、と思ったとしますよね。font要素を使っている場合、いちいち全部のdeeppinkをblueに書換えなければいけません。これは面倒です。
CSSと正しいHTML記述を使っていれば簡単です。たったひとつのCSSファイルを書き換えるだけで、全部の<em>要素の色が変わります。<em>要素自体には色の情報は入っていない、というのがミソなんです。
これを応用すると、HTML文書はそのままに、ページのレイアウトまで変更することが可能です。私のサイトをご覧ください。
http://www2.loops.jp/~hkt/design/
ページの最下部にデザイン変更用のセレクトボックスがあります。最初はdeceiver（詐欺師）というCSSが適用されているのですが、それをdummy[IE5-6]に切り替えてみてください。突然、フレームが出現します。けれども、ソースを見ていただければ、最初のデザインとあとのデザインがもとは同じHTML文書であることに気付かれるでしょう。CSSを効果的に用いると、擬似フレームまで実現できるのです。
これがどういうことを意味するかといいますと、これまでリニューアルのたびに全部のHTMLの記述を見直していたものが、CSSファイルひとつを書き換えるだけですんでしまうということなんです。しかも私のサイトのように、閲覧者に好きなデザインを選んでもらうことさえ可能なんです。
単に表示速度という観点からだけではなくて、今やもう、はっきりいってfont要素は古いなあと感じていただけたのではないでしょうか。
牧場長様がCSSにどれほどお詳しいか私にはわかりませんけれども、もし知っていながら利用されていないとすれば、非常にもったいないと思います。NN4.xのシェアがIE6登場以降、減りに減って4〜7%です。企業や学校以外の、いわゆる個人ネチズンに限れば2%程度です。NN6はむしろIEよりもCSS対応が進んでいますから不安はありません。Opera6もiCabもCSSにはばっちり対応しています。
というわけで、CSSと正しいHTML記述についてのセールストークでした。
背景画像をしっかり統一させたのが大正解。サイトの雰囲気はしっかりとコントロールされています。小物画像もテーマに沿ったもので、すっきりまとまっています。
サービスバランスシートなどの視覚に訴えるプレゼン資料も効果的に使われています。
サイトの構成、フレームの切り方、いずれも非常に安定しており、私はまったく困惑することがありませんでした。非常によいと思います。
強いていえば、検索エンジンにフレームないページがヒットした場合に備えて、フレームを解除した上で表紙を表示する「Home」へのリンクが用意されているとよいかもしれません。
私は長らく、お小遣い稼ぎ情報のサイトに偏見を持っておりました。いい加減な情報を「正しい知識」と強弁して恥じない「ホームページ」作成支援サイトと同列の分野と認識しておりました。おざなりの情報収集、適当な情報提供……。しかし牧場長様のサイトは、地に足のついた確実な情報を、十分練り上げよく考えられた形で提供されている。単に数ばかりそろえて、中身は伝聞情報ばかりのサイトを見飽きた私にとって、これは心地よい衝撃でした。
どうか末永く、そして楽しく、サイト運営を継続されることを願ってやみません。
［2002.05.04］
テーブルをバリバリ使っていますが、見た目の派手さの割に画像の使用が抑えられており、意外に表示が速かったのが印象的です。カウンターの表示が遅く、わずかに気になりましたが、それは仕方ないように思います。
なお、画像を使用する際には、縦横のサイズを指定すると表示が少し速くなります。また、代替文字は必ず指定しましょう。セキュリティー上の問題が気になる場合や、情報収集の目的によっては、画像オフで閲覧する閲覧者もいます。回線の不具合で画像のDLに失敗して、画像が表示されない場合もあります。ですから、標準のHTML4.01では画像の代替文字は必須とされています。
いろいろな色を使っていらっしゃいますが、色のトーンがだいたい揃っており、色彩的な統一感は失われていません。それでも、例えば「不定期日記」と「リンク」の色はもう少し淡くすべきだと思いますし、ところどころ、強調しているとは思えないのい不用意に濃い色が使われている部分があります。改めて点検されてはいかがでしょうか。
レイアウトについて意見いたしますと、左寄せのページと中央寄せのページが適当に入り混じっており、サイト全体のデザインの統一感を大きく損ねています。また各ページのデザインをみても、テーブルの横幅が揃っていないなど、バラバラとした印象を受ける部分が多くあります。つまらないと思われるかもしれませんが、きれいなサイト、カッコいいサイトを作ろうとお考えであれば、各ページのレイアウトにはもっともっと統一感を出すようにしなければなりません。
ホームへ戻るリンクが完備されているので､とりあえず問題はないでしょう。当面はレイアウトの修正が先のような気がします。
将来的には、同一項目内のコンテンツを「←Prev」「Next→」などのリンクで接続されると、閲覧しやすくなります。ぜひ挑戦なさって下さい。
現在十分に人気があるようですから、ぜひこの調子で楽しくサイト運営を続けていっていただきたいと思います。