Webサイトデザインアドバイス

Advice

徳保隆夫の発言集34

私は方々のサイト批評掲示板でいろいろ書き飛ばしています。その一部を収録。新旧いろいろ入り混じっています。場所もいろいろ。

Utopia. MN

[2002.08.11]

背景画像を改善しよう

配色や背景画像など、よく整えられていると思います。全体のイメージを清冽な印象にまとめていて、好感を持ちました。デザインで気になるのは、メニューフレーム背景の空画像とコンテンツフレーム背景のチェック柄がミスマッチだということです。色はよいのですが、絵柄がけんかしています。メニューフレーム側の背景画像を変えた方がよいと思います。

あとはまあ、gaiax系システムでサイトを作ると、よほどトリッキーなことをしない限りかなりの部分が標準のテンプレートに制約されますよね。フレーム切り分けの位置とか、タイトル画像とか、諸連絡の角丸テーブルとか、カウンターとか、メニューリストのリストマーカーとか。現在のデザインはなかなかいいので、これで満足してもいいかもしれません。それならgaiax系システムにとどまってもよいと思います。

ただやはり、もっとああしたい、こうしたい、という希望がおありならば、gaiax系システムでそれを実現するトリッキーな方法を勉強するよりも、HTMLを勉強して自分で何でも作ってしまう方がいいと思います。よく考えて、その辺りを決めてほしいと思います。(他の方へのアドバイスもご参考に)

POKE☆ROOM

[2002.08.14]

FPEの違法配布

タグで作ったんですか? すごい根気ですね。フレームになっていてよかったですが、とりあえずよければ次のソフトダウンロードして使ってください。

注意を促す

> たか さん

「初心者向けホームページ作成」というサイトがやっていることは、マイクロソフト社の権利を侵害する不法行為です。FPEはたしかに無料ソフトでした。しかし「再配布してもよいソフト」ではありません。マイクロソフト社はFPEの無断複製、無断配布いずれも禁じており、ソースコードも、もちろん非公開としています。

注意しなければならないことは、不法に配布するのも罪ですが、不法に入手したソフトを用いるのも罪になるということです。無料で手に入るWYSIWYG型のサイト作成ソフトは他にいくらでもあります。勧めるならそちらになさってください。

> 脇坂さん

少なくとも上記のURIから入手したFPEは使うべきではありません。

なお、現時点でメモ帳でサイトを作成されているならば、タグ挿入型エディタの方がよいと思います。WYSIWYG型エディタはむしろHTMLに詳しい人が使うべきです。もともとWYSIWYG型エディタでサイトを作成されていた方が不用意に手書きをはじめるとひどいことになりがちなので、ちゃんと勉強しないならソフトだけでサイトを作ったほうがよい、とアドバイスするわけですが、順番が逆の場合は、そのまましっかりHTMLを勉強していただければよいのではないかと。ただし、タグ挿入型エディタはメモ帳より手間が省けるので、いろいろ便利でしょう。

簡易文法チェッカ付のHTMLエディタとして、たしかあおいさんがお勧めしていたのが「HTML Maker AZUKI v1.60」でした。下記URIよりダウンロード可能。

文法チェッカ付の無料ソフトをもうふたつご紹介。

補遺
TTTEditor
私が使っているエディタですが、文法チェックはできません。タブ式のインターフェースを採用しており、複数のファイルを同時に編集可能。またショートカットキーのフルカスタマイズが可能なので、ちゃんと設定すれば非常に便利に使えます。
another html lint
本格的文法チェッカならこちらが唯一無二の存在といえます。
Composer
Mozillaというブラウザを入手すると、おまけでComposerがついてきます。FPEのようなWYSIWYG型の作成ソフトです。Mozillaを起動してCtrl+4と打つとComposerを起動できます。
Homepage Manager
定評のあるソフトで、FPEよりはずっと性能がいいです。フレームに対応しているというだけでも格が違うと思いませんか。Homepage Managerを使ったサイト作成方法の解説サイト(HTMLの観点からはまずい解説のオンパレードですが、とにかくサイトは作れるようになります)もあります。

余録:鑑定のリスク

発端

友達のページです。鑑定してとのこと。

展開

友達自身に言いに来させた方がいいと思います。大体本当に「鑑定してくれ」って言われたという根拠がないし。鑑定してほしいのなら自ら挨拶に来い。と言いたいですな(言ってるやん

慣例では、この手の依頼は無視されるはずだった。ところが今回は違った。白狼さんの注意に続いて、なんと鑑定が行われたのだ。

白狼さんがああ言っているのになんで逝良ぅさんは鑑定したんですか?

間もなく鑑定結果は削除され、すべては決着したかに見えた。ところが。

戦端を開く

他薦禁止というルールはないんですから、サイトの管理人の了解があろうとなかろうと鑑定はしてもよいのではないですか。それでトラブルになるかもしれませんが、素人が頼まれてもいないのに別の素人を批評するという行為は決して珍しいものではありません。

例えば、高校野球の試合をテレビで見ているときに、「ここでなんでスクイズしないかなー。1割バッターにヒット打たせようというのが間違ってるよね」といってみたり、それをWeb日記で公開したり。素人が素人を勝手に批評してはいけないという法はありません。

逝良ぅさんは鑑定を削除する必要はなかったのに、と思うのです。

泥沼の展開

あり?そうだったのですか?以後気おつけマフ

ごめんなさいね、一つ意見をバ。

徳保さんには反対意見です。確かにそういうルールはありませんが、やはりここは他人の場所を出す掲示板ではないように思います。其方のサイト内で「ここをこうすれば?」という意見を出すのは全然構わないと思うのです。寧ろそうしていった方がサイトの向上につながるでしょうし良いと思うのです。

けど、こういう場所の鑑定に出されるのはまた別の話。見ず知らずの人に「ここのサイトどうなのよ?」と判定に出された管理人さんの気持ちも考えてみてください。俺だったら確実にぶちぎれます(苦笑)。何人のサイト勝手に出してんのって。そう言う人もいるのです。

でも本当に頼まれたならともかく、何も言われてないのに鑑定に出すのはダメでしょう。ここを知ってて鑑定に出さない、とかだったら、鑑定してほしくない。気ままにやっていきたい。などと思ってるはずですから。他薦はなしって事にしておいて欲しいですね。ちなみにある程度さっぽろポテトさんに賛成です(なにそれ

一応削除パス入れとこう・・(またかい

自分は他人を勝手に判定しているわけです。そしてそれをWeb日記で公開したりも平気でする。素人が素人を批評することは日常的に行われている。自分がやっていることを他人にされるとぶちぎれるのは身勝手ですよ。じゃあ自分もするな、というわけです。でも、それは無理でしょう。他人について、了承を取らずに意見することはできないなんて世界は息苦しくて仕方がない。上司の悪口ぐらい、勝手にいわせてもらいたいわけです。高校野球で自県の代表がエラーしたら、思いっきり野次りたいわけですよ。勝手に応援もするし、勝手に批判もする。その程度の自由は、日本では認められているわけです。勝手な応援はいいけれど、勝手な批評は許さない、というのは身勝手な話なんです。

身勝手な人が多いから、妙なトラブルがよくおきます。だから、トラブルを避けるという観点からは、鑑定を削除して正解かもしれない。私もわざわざ危ない鑑定をしようとは思わない。けれども、鑑定すること自体は自由なんですよ。だから逝良ぅさんがせっかく時間と手間をかけて鑑定したものを、消すことはないんじゃないかと思うわけです。トラブルを避けるつもりなら、最初から鑑定なんかしない。一定の覚悟はあったのだろうから、周りが騒いでわざわざトラブルを仕立てるようなことをする必要はないんじゃないかと。

なお、よその個人サイトに突っ込みを入れる個人サイトは世の中にたくさんあります。いわゆるサイト批評サイト系に限っても、いくつもあります。ご参考まで。ここは掲示版ですから、もう少し微妙ですが。身勝手な意見ですね 投稿者:徳保 - 2002年09月01日(日) 13時34分05秒

う〜ん。

こちらって「鑑定してもらって、その意見にしたがって自分のサイトを良くしていく」為の掲示板だと思ってました。別に判定自体が悪いわけではなく、その用途というのかな。ここの掲示板のあり方の問題になってくると思うのですよ。

他場所ではそういう批判もOKです、というか個人的に見てるのも面白いし思うところもありますから。その部分では徳保さんに思い切り賛成なんです。

けど、ここの掲示板でやってしまうのはどうなのかなと。先にも述べましたが、ここって「何処がどう悪いのかを聞いて、直していくための掲示板」だと思うのですよ。

ありゃ、なんか言ってることがおかしいわ俺…(死)

他場所ではそういう批判もOKです、というか個人的に見てるのも面白いし思うところもありますから。その部分では徳保さんに思い切り賛成なんです。

ちょっと付けたし。

ただ、それを見て不快に思う人がいるのも否めない状況。確かに身勝手な意見でしょうけども、それが人間って言うものなんじゃないのかなあ。反論されれば腹がたつ(苦笑)。

しかもサイトって、結局自分の趣味な訳ですから。好きでやってのほほんとやってる。自分の好きなことが否定されればそれはまた悔しいのですねこれが。徳保さんも、こうやって自分の意見が曲がった方向に見られたから、逸れに対してのレスをした。おんなじことなんじゃないのかなあとおもう状況。

なんだか意見が「サイト判定」からかなり遠ざかってますので、そろそろ止めておきまーす(苦笑)。っていうかどうなのかこれ…

さっぽろポテトさんを見損なっていたな、と今さらながらに気付かされました。かなり話せる方だったんですね……。というわけで、終幕です。

終幕

私も、この依頼はどうかと思います。だから、無視するか、白狼さんのように出直しを勧めるのが正解でしょう。ただ、逝良ぅさんがいったん行った鑑定を削除した経緯が引っかかるのです。結果的にはトラブルを未然に防いぐ「正解」ですが、どこまでちゃんと考えてのことなのかな、と。トラブルを避けたいという観点を「優先して」削除するならOKですが、「勝手な批評は絶対にいけない」というのでは困るな、と。

今回のようなことはいつだって起こりうるわけです。今回はたまたま、私はサイトの管理人じゃありません、といってくれたからいいけれども、サイトの管理人のふりをされたらこちらには判断のしようがないでしょう。そうしてたくさん鑑定をしてからトラブルに巻き込まれたときに、鑑定人が謝る必要があるのか、鑑定を削除しなければならないのか、そこが気になるわけです。今回は明らかにトラブルの発生が予想されますが、いつだってトラブルが発生する可能性はあるのです。

私は逝良ぅさんに、消した鑑定を復活させるべきとはいっていません。消して正解だったといっています。さっぽろポテトさんの2度目のレスには大いに納得できます。じゃあ何であえてレスをつけたのかといえば、鑑定削除の経緯だけでは不公平だと思ったからです。反対意見がなければアンバランスだからです。削除という判断に一方的に理があるわけではなくて、消すかどうかは「迷うべき問題」だと訴えておきたかったのです。この掲示板には、本人の依頼かどうかを確かめるルールが何もありません。だから誰もが「勝手な鑑定」を行う危険があります。それでトラブルが生じた際に、「消して当然」という意見しか知らなかったら困るのではないかと。身を守る術があるに越したことはないと思うのです。賢い方法 投稿者:徳保 - 2002年09月01日(日) 14時28分51秒

私もこれで打ち止めにします。そもそも白狼さんの意見には賛成なのだし、INGさんもおかしなことをいっているわけじゃない。逝良ぅさんの決断も正解だと思う。さっぽろポテトさんも正論を述べていらっしゃる。みんな正しいけど、話が一方的に流れすぎているのが気になっただけなので……。その割には、ちと書きすぎました。反省。すみません 投稿者:徳保 - 2002年09月01日(日) 14時33分24秒

ヤバイことしてしまったみたいだ・・・・・深く反省!

でも凄く貴重な意見たくさん聞けたので良かったです!徳保さん、なんだか喧嘩腰になってしまいましたが、ありがとうございました!

となりのポポロさん>

サイトの管理人様御本人がいらっしゃれば全然構わないと思うのですよ〜。

徳保さん、勉強になりました。ありがとうございました。

……私の一人芝居でした。お騒がせしてどうもすみません。

ポケモンの広場

[2002.08.24]

コンパクトにまとめよう

非常に無駄の多いデザインですね。「コンパクトにまとめる」ことを目標にして、レイアウトを再考してください。具体的には、「最初の1画面内に目次まで表示されるようにする」よう努力されるとよいでしょう。また、背景画像に直接文字を乗せていますが、「見にくいんでドラッグしてみてね↑」には苦笑しました。たしかにドラッグしてみればきれいですが、それなら最初からドラッグした場合の色使いになっているものを表示させておけばよいだろうとおもうのです。

救いは、いろいろな特殊効果を盛り込んでいるわりには表示に苦労しないこと。案外軽いんですよね。けれどもバナー画像がBMPというのはいただけません。マナー違反です。MacやLinuxではそもそも見ることさえできないし、わざわざ同じ見た目の画像を重くする必要もないでしょう。JPEGなりPNGなりにしましょう。なお、私は「いろいろな特殊効果」がうまく使われているとは思いません。どれも、なくてもいいものばかりです。私なら、それらは外しますね。

改善案

こんなデザインにしてみる手もありますよ、ということで。

CSSで段組

私の改善案がどのような方法で作られたものか、というご質問ですね……。段組デザインの作り方、ということで簡単に説明をしたいところですが、私はCSSであれこれやっていまして、その……簡単には説明できないですね。CSSをかじっている方ならこれでわかるかな、という説明になりますが、よろしいでしょうか。

まずページを内容のまとまりで4つのdiv要素とタイトル周りにまとめます。次に、4つのdiv要素のうち、2つのdiv要素について、ページの左側に10数文字分くらいの余白を取るよう指示します。最後に、残る2つのdiv要素を、position:absolute;で左寄せの位置に指定し、先ほど作った余白に収まるよう横幅を決めます。以上です。

ちんぷんかんぷんかもしれませんが、私も1年前はカコナールさんのようなサイトを作ってました。友人のサイトなんですが、彼がHTMLとか苦手だったので、代わりに私がサイトの作成だけ手伝ってました。当時はCSSなんて存在すら知らなかったんですね。だから、カコナールさんもこれから勉強していただければいいと思います。

参考までに、当時のサイトをちゃんと保存してあるので、もしよかったらご覧になってみてください。ある意味、自信がつくと思います。

でんきねずみごや

[2002.08.24]

優先順位をつけよう

レイアウトの基本は、大切な情報から順番に並べるということ。したがって、少なくともハーボットと目次の順番は逆にした方がよいだろうと思います。私なら、タイトル→目次→更新情報→カウンタ→キリ番獲得者→ハーボット、とするところですが、これには異論もあるでしょう。

なお、同様に考えて、キリ番獲得者の順番は最近のものから表示する方がよいでしょう。

さらに整理されるとよいのでは?

各コンテンツは背景画像が統一されているところまではよいのですが、見出しなど、その他の部分はいまいち統制が取れていないので、あらためて整理してみるとよいのではないでしょうか。

alt属性

リクエストにおこたえして、alt属性について解説します。

検索エンジンや眼の見えない人は、画像を解釈できません。画像があるということはわかっても、それが何の画像だかわからないわけです。また、通信速度が遅い環境でサクサク情報を収集するために、画像をオフにしている閲覧者も少数ながらいます。

そうした場合に対応するのが、画像(あるいはその他の非テキスト情報)のalt属性です。HTMLの決まりでは、必ず指定しなければならないことになっていますが、書かない人が多いですね。書き方は以下の通り。

<img src="***" alt="***" title="***" width="***" height="***">

画像というのはalt属性以外にも書くことが多くて面倒ですね。title属性は、画像の上にマウスを持っていったりした場合などに、画像が表示されている上にさらに情報を表示したい場合に使います。これはなくても構いません。また、IEなど一部のブラウザでは、alt属性があってtitle属性が指定されていない場合、alt属性の内容をtitle属性のように表示します。これはIEの(半ば意図的な)バグです。

alt属性に書く内容は、もし画像が表示されない場合、代わりにどんな文字があったらわかりやすいだろう、ということを考えて決めてください。ただ、そうすると単なる飾り画像の場合に困ってしまいます。画像が表示されない限り、何の意味も持たないわけですから。こんな場合は、alt=""などとすればよいでしょう。alt属性自体を全然書かないのは決まりに違反しますから、属性の中身を何も書かないようにするわけです。

ところで、背景画像にはalt属性がありません。これはつまり、HTML文書では背景画像は飾りに過ぎないということを意味します。したがって、背景画像がないと意味が通じないHTML文書はルール違反です。まめ知識として、ついでに覚えておくとよいでしょう。