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

Advice

徳保隆夫の発言集33

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

Co.PokemonCardGame

[2002.08.10]

ナビゲーションは双方向に

各コンテンツに最低ひとつ、表紙へ戻るリンクを用意しましょう。進むリンクと戻るリンクはセットにしなければいけません。一方通行では困ります。

お勉強なさるとよいのでは

サイトのデザインはよく統一されていますし、罫線の多用がいいリズムを刻んでいます。今後はまず、HTMLをもう少しおぼえていくとよいでしょう。せめて見出しやリストの設定くらいは勉強しましょう。現在のようになるべくfont要素を用いないまましばらく我慢して、HTMLの知識が増えてきたら一気にCSSの勉強へと進んだらよいと思います。2〜3日、ちゃんと勉強したらかなりいろいろよくなるのではないかという気がします。

ユウキのページ

[2002.08.10]

背景色はよく考えて

私は低速回線(AirH"32K)利用者なので、背景画像の読み込みに時間がかかります。時には画像OFFでサイトを見て回ることもあります。つまり背景画像が表示されない状態で文字を読む場面がしばしばあるということです。低速回線の利用者は地方を中心にいまだに過半数を占めますから、画像なしでも文字が読めるように工夫する必要があります。

現状の問題点は、背景画像の色と背景色がかなり違うということです。その一方で、文字は背景画像の上で読みやすい色に設定されているので、背景色だけの状態ですと、一部が読みづらくなります。背景色を背景画像に合わせてほしいと思います。

基本の機能を使いこなす

ところで、裏技のページが読みにくいという指摘が出ていますが、せっかくHPB6を使っているわけですから、その機能をちゃんと使いましょう。見出しは「見出し」に設定します。裏技提供者は「アドレス」にし、裏技そのものは「番号付きリスト」にしましょう。素直にちゃんと設定をしていけば、読みやすいページになるわけです。フォントの指定をいじるだけで何でも表現しようとせずに、見出しは見出し、リストはリストに設定するようにしましょう。

例えば、こんな感じです。派手にするのは後からいくらでもできるので、まずは基本に忠実にやってみてはいかがでしょうか。

:hover擬似クラスを用いたリンクの装飾

失礼しました。残念ながらそれはビルダーでやっているのではありません。手書きのCSSファイルで指定している表現です。解説は以下のサイトをご覧ください。リンクの:hover擬似クラスです。

といってもこれだけ読んでも理解不能なので、Let's begin CSS シリーズを最初から順に読んでいただければと思います。やってること自体は頭を使わない簡単なことなのですが、前提知識がいろいろ必要なので、最初の一歩だけは骨だと思います。ドラクエを楽しむには魔法や道具の名前と使い方を覚えないといけないでしょう。それと同じで、覚えてしまえばあとは簡単なんですが、覚えるまでが大変なんですよね。「ザキ」なんて文字を見てもなんだかわかりませんからね。とにかく最初は覚えないと。

夢物語

URI:http://fude88.hoops.ne.jp/ [2002.08.10]

不人気の原因は

一日数万ヒットというところまでいかない限りは、人気についていえばたしかにデザインはほとんどどうでもよいといえます。コンテンツが充実していないことが不人気の原因でしょうね、仰る通り。ただ、デザインはいい方がよいに決まっています。あまりになんだなあ、というか、現在のレイアウトには唖然とさせられます。

もう少し、ふつうのデザインで作ってみてはいかがでしょうか。現在のデザインは個性的というよりも、手抜きですね。

ドヒ電気

[2002.08.11]

仕事のサイトなら

これはお仕事で作っていらっしゃるサイトですか。もしそうならば、ちゃんとプロのアドバイスを受けることをおすすめします。無料のアドバイスサービスがたくさんありますよ。

なお、素人の私にもいえることとして、カウンターは消すべきです。たかが20000ヒット程度では何の迫力もないばかりか、むしろ「その程度か」と思われかねません。企業の信用に関わることですから、カウンターは消しておくべきです。(2002年というのは、ソニーのサイトが一日100万ページビューという時代なんですよ。TSUTAYAのサイトも一日30万ページビューです。だからもう、カウンターは、まともな企業のサイトはつけていません。)

ぼけもんのホームページ

[2002.08.11]

標準モードを勧めます

どこでも配置モードは、特定の画面サイズに対しての「センタリング」しかできません。したがって、それより小さな画面なら右に寄りますし、大きな画面なら左に寄ります。ただそれだけのことです。基本的に、標準モードを使うようにしましょう。

HPBの2つのモードについて

よくわからないでHPBを批判されても困るので、補足を少々。HPBにはどこでも配置モードと標準モードがあります。どこでも配置モードはページを構成するあらゆるパーツをdiv要素に入れて絶対座標で左上の角を原点として配置します。DWのレイヤーを素人にも扱いやすくしたものです。画像を重ねて配置するなど、従来は実現に手のかかった表現を簡単に扱えるので、IBMではHPB一番の売りと考えているようです。箱でも説明書でも、優先的に紹介されています。

しかしながら……広告チラシ作成ソフトなら便利な機能なのでしょうが、WWWは閲覧者が自由に画面や文字のサイズなどを選べますからね。どこでも配置モードは、アイデア倒れの機能です。これを使ってそこそこ見られるサイトを作ろうと思ったら、小窓を開いて画面サイズを固定し、さらに文字サイズまで固定しなければなりません。(HPBのどこでも配置モードでdiv要素の大きさをem単位で指定するのは不可能です)

センタリングを実現するには画面サイズに対して相対的に要素の位置を決める必要がありますから、どこでも配置モードでは絶対に不可能です。特定の画面サイズに対するセンタリングは可能なのですが。したがって、HPBの良心的な解説書は、いずれも標準モードを勧めています。

標準モードは他の作成ソフト同様、テーブルレイアウトを中心に考えられたモードです。センタリングはお手の物です。また基本に忠実に使いこなせば、W3Cのサイトのような、複数の「文書を配置」するタイプのテーブルレイアウトを簡単に実現できます。ただしHPBの操作のみで完全なCSS依存のレイアウトを実現するのは困難です。

ところで、斜体、太字などフォント周りの装飾は一般ユーザにとくに人気がある機能なので、HPBでも非常に目立つところにボタンが用意されています。これはさすがに両モード共通です。

というわけでぼけもんさん、迷わず標準モードを勉強しましょう。もしよければHTMLとCSSのお勉強もしてみてください。お勉強は大変かもしれませんが、山を越えるとサイト作成が非常に楽になります。私のサイトの場合、文章は長時間かけて書き溜めたものですが、HTML文書の作成の手間自体は1ページ5〜30分です。なお、ふつうに標準モードを勉強するだけでも、だんだんサイトの作成は楽になっていくはずです。どこでも配置モードよりも、慣れるにつれて楽できるようになる部分が多いのが標準モードの特徴です。

どこでも配置モードを捨てることになったとしても、がっかりする必要はありません。これまで苦労しながら覚えてきたたくさんのことは、間接的にであれ、今後に絶対役立ちます。それに、既にサイトを持っており、お客様がいるという事実が、ぼけもんさんの背中を強く後押ししてくれるはずです。

CSS周りさえ手書きにすれば、むしろその段階に到達してからがHPBの力の見せ所です。レイアウトのためにHTMLを使わないとなれば、HPBは当然、どんなタグ挿入型エディタよりも高速にHTML文書を作成できるわけです。何せタグを挿入する手間がかからないのですから。私のサイトはほとんどHPBで作成しています。

さらにHPBを使いこなす

ちゃんとセンタリングできています。まずは標準モードを使いこなすことですね。リスト(箇条書き)を挿入するボタンが目立つところにいくつか用意されているのですが、これまで使ってこなかったようですね。見出しの設定もそのすぐそばに用意されているのですが、これもほとんど使っていらっしゃらない様子。これはもったいないです。

たしかにリストはCSSを使えないと妙な黒丸がついてしまって嫌かもしれませんが、ちょっとためしに使ってみてください。箇条書きを見やすくできます。また「管理人のつぶやき」とか「CONTENTS」などは見出し2を設定してはいかがですか。見出しなんですから。文字の大きさなどが気に入らなければ、CSSで変えたらいいのですが、とりあえずはフォントの設定であれこれやってもいいと思います。見出し2のまとまりごとに表のマス目を区切っていますが、区切りは罫線([−]Mみたいなボタン)でもいいんじゃないかと思います。

……などなど、今まで使っていなかったボタンが何を意味するのか、どう使うのか、少しずつ試しながら覚えていくとよいでしょう。そしてHTMLを勉強すると、HPBのいろいろな機能がよく理解できます。よく理解で切ればこれまでよりうまく使えますよね。(HTMLのお勉強に本を使うなら「ひとりでつくれるホームページHTML入門」成美堂出版をおすすめします。HTML解説サイトはこの掲示板でもいくつかご紹介しています。そちらをご覧いただくのもよいでしょう。無料ですし)

あらためてどこでも配置モード批判

CSSでposition:absolute;top:10px:left:10pxみたいな指定をするのはいいんですよ。私もよく使います。でもそれは現状では手書きのCSSなどでやるべきことであって、少なくともどこでも配置モードでやってしまうのは避けるべきです。というのは、どこでも配置モードを使うと重大な問題が3点あるのです。

ソース生成のロジック

どこでも配置モードのソースがどのように生成されるのかというと、じつはオブジェクトが作成された順番にどんどん書かれていくのです。ですから、もし細心の注意を払って見出し1から順に作成していったとしても、後から図版を1枚足したなら、それはソース上では最後に出現します。表示位置はposition:absoluteで決めるからどうにでもなるわけですが、それが逆に問題なんですよね。

というわけでどこでも配置モードでは、よほど注意していなければ意味の通ったソースになりません。読み上げブラウザでちゃんと読めるページをつくるのはほとんど不可能だということです。

例えば、A段落とB段落の間に、新たにC段落を書くとしますよね。これもソースではABCの順番のままなんです。Cはページ上に出現したのが最後だから、ソースの最後にあるわけです。実際の作例のソースをいろいろ見ましたが、リストとリストマーカーの画像が全然違う場所にあるなんていうのは日常茶飯事で、文章の順番がグチャグチャなのは珍しくもなく、なんか妙に大きな画像があると思ったら、遠い場所の文章の背景だったりします。

現在のどこでも配置モードは欠陥品ですよ。少なくとも、アウトラインプロセッサのような機能を現状より断然充実して、ソースにおけるオブジェクトの出現順序を細かく手軽にいじれるようになるまでは、全くお話になりません。

in-lineでCSSを埋め込む

どこでも配置モードは、あらゆる要素を適当にまとめてdiv要素に放り込み、そのdiv要素を画面上のお望みの場所へ配置します。

このとき、div要素は縦と横の長さが自動で決まります。しかも単位はpxです。ここが重要なのですが、これで縦の長さが決まっちゃうんですよ。つまりですね、文字サイズを大きくした場合には、ほぼ確実に内容があふれてしまうという現象が生じるわけです。よくよく注意したって、まずこの問題の解決は不可能です。文字サイズを固定するなどという解決策しかない。

外部CSSファイルが効かない

どこでも配置モードはCSSをすべて<div style="position:absolute; 以下略">という形で出力します。したがって、外部CSSファイルが効きません。ページ単位でデザイン固定のサイトになってしまうのです。よってCSSでレイアウトする最大の利点ともいえる、「サイト内でのデザイン統一が可能」「サイト全体のリニューアルがCSSファイルの書き換えだけで実現可能」「デザインを考えずにHTML文書を作成可能」という3大特長がすべてパーです。

リニューアルのたびに全ページを作成しなおさなければならない。しかもHTMLレベルでの書き換えが必要。

結論

ちょっとこれは使えない、と思いませんか。position:absoluteは私も使いますが、ビルダーのどこでも配置モードでそれをやるのは、どうかと思います。将来は改善されるかもしれませんが、現状ではひどく未熟な技術です。

CSSやテーブルを使わないでも文字や画像を好きな位置に配置できるので、どこでも配置モードはとっつきやすいわけです。テーブルレイアウトさえ難しいと感じる人のために、どこでも配置モードは作られています。福笑いができる人なら誰でもサイトを作れるわけですから。IBMはサイト作成の裾野を広げようということで、他社が手を出さなかった禁断の方法を使ってしまったのではないですか。作者と同じ文字サイズ、同じ画面サイズでなければきれいに見えないというサイトの作り方は問題があります。これはCSSの誤った使い方だと断言できます。position:absoluteがかわいそうだ、とさえいえると思います。