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

Advice

徳保隆夫の発言集20

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

Media College

URI:http://shizuoka.cool.ne.jp/telgip/ [2002.06.07]

Wordでサイトを作るなら

Wordで作成されているのですね。それ自体は問題ないのですが、Wordでサイトを作成すると、ふだん「どれだけWordを使いこなしているか」がばれてしまうので注意しましょう。とりあえずh1要素が出現していたので、第一段階クリア、といったところでしょうか。(Wordによる文書の作成は、「テキストの用意→スタイル設定→要素の指定」という手順が鉄則なのですが、スタイル設定と要素の指定をごっちゃにして、「見出しだから文字を太くしよう」などと無駄な頑張り方をしている方が多いのは残念なことです)

Wordでサイトを作成する場合、必須のソフトがあります。ご参考になさってください。別にWordだからソースが複雑になると決まっているわけじゃありません。ちゃんとうまいオプションが用意されているのに、知らない人が多過ぎるというのが現状なんです。私は必ずしもWordによるHTML文書作成を否定しません。

形にとらわれることなく

まだ始まったばかりのサイトですから、とりあえずは悪くないと思います。表紙のレイアウトなどを見る限り、スジがいいですね。ただ、いかんせんWWWの閲覧経験が浅いのか、定石に疎いところがあるようです。サイトを何かに「見立てる」のは先々つらくなります。なぜ多くのサイトが似たような構成、見た目になっているのか……それは決して無意味なことではありません。サイトと本には似たところが多いと思います。あまり「形」にとらわれることなく、「文章とその構成」という本質的な部分を見つめなおしていくとよいのではないでしょうか。

Babywear & gift Petit

URI:http://www.baby-petit.to/ [2002.06.09]

アドバイス

個人の趣味で開設されたネットショップのサイトとお見受けしました。よくできていますね……。

商用サイトらしくするならば、ステータスバーに文字を流すのをやめましょう。あとは画像作成能力の向上如何で、どんどん向上すると思います。売上がどれほどあるのかわかりませんが、もし十分に利益が出ているようなら、WebDesign系の雑誌を買っていろいろお勉強なさってください。大きな企業のサイトがどんなことを考えて作られているか、学ぶことができます。かなり参考になるはずです。

ところで私は半ば趣味のネットショップで大成功したところというとhttp://www.sea-beans.com/(ここの戦略は素晴らしく賢かった)しかしりません。なかなか厳しい世界だと思います。どうか頑張ってください。

ポケモンファンタジア

[2002.06.12]

アクセスダウンの理由

はっきり「これだ」といえる理由はないでしょうね。若いサイトというのは、毎日同じように更新しているのに客が急増急減するということがよくあります。もちろん、長期間継続しているサイトであっても、だんだんアクセスダウンしていくのが通例です。同じことをやっていてアクセスアップできるのは結局、一部の幸運なサイトです。大抵のサイトは次第に寂れていくものです。

デザインとアクセスアップはほとんど関係ありません。とにかく内容が第一、宣伝が第二、あとは小さなことです。デザインをいくらよくしても、内容が同じならアクセスアップはほとんど望めません。

とりあえずサイトの危機を救いたいということでしたら、常連さんを作るに限ります。サイト持ち同士がよいでしょう。お互いのサイトの常連になるわけです。自分の好きなサイトの掲示板に、サイトの最新更新へのよい感想(宣伝や友達募集は絶対ダメ)をていねいに書いて回りましょう。たくさんのサイトに、まめに書き込みをし続けると、誰か一人くらいは自分のサイトの常連さんになってくれます。好きなサイトの管理人が常連さんになってくれると、アクセスダウンがあまり気にならなくなります。そうしてやる気を出して、しばらく更新を続けていくうちに、またアクセスも増えてくるのではないでしょうか。

とにかく、アクセスアップ狙いでサイトのデザインを改善しても、きっと失望することになるでしょう。デザインを改善するのはよいことですが「結局、デザインがよくなるだけに過ぎない」と認識しておかねばなりません。

大津警備保障

[2002.06.14]

仕事の一環なら真剣に

勉強が不十分です。とにかくすぐ作れ、という指示があったのかもしれませんが、あまりにひどいと思います。問題をはっきり認識されているのですから、まずは勉強なさってください。

私は趣味でサイト作りをしている人間です。趣味は趣味であって、仕事はもっとずっとずっと真剣にやっています。だからというわけではありませんが、仕事の一環でサイトを作っているのに、「勉強が不十分で」と臆面もなくおっしゃる神経が理解できません。

ひとつだけ、非常にためになるサイトをご紹介します。ただしそのサイトは「正字正かな」で書かれているので、漢字が苦手な方は少々読みにくいかと思います。けれども、ここでどうかひとふんばりしていただきたい、そう願います。私は、当然、このサイトの内容、一次リンク先の情報を全部読んだ上で推薦しています。茂樹さんも、半分くらいは読んでください。(まず「トンデモ」な「ホームページ入門」を斬るコーナから)

書籍では「ひとりでつくれるホームページHTML入門」がおすすめです。もし書店にあれば「ユニバーサルHTML/XHTML」「スタイルシートWebデザイン」もぜひご一読ください。

もっとすぐに役立つ情報が入用でしたら、「Web Creaters」という雑誌をバックナンバーのある限り入手されてはいかがでしょうか。商用サイトの作り方(内容・構成・レイアウト)について、徹底的に解説されています。ただしHTMLとCSSの説明はほとんどありませんので、そういった基礎知識は別に入手する必要があります。したがって、上記サイトや先に紹介した書籍などで、まず勉強なさってください。なお、いい加減な解説サイトや書籍が非常に多いので、Web技術の解説を探す再には細心の注意が必要です。いわゆる定番本、定番サイトでさえ、平気で大量のウソを教えてくれますので。

補記:

ひとつ書き忘れました。私が例示したサイトは、HTMLとCSSの解説サイトです。HTMLとCSSを使って実際にどのようにサイトを作り上げていくかについてはほとんど情報がありませんので、ご注意ください。

後記

社命で作ったサイトならひどいと思いましたが、趣味で自社のサイトを作ったということであれば、まあまあの出来でした。新しいサイトはさらによくなっているわけですが、いくつか気になることもあるので、私ならこう作るかもしれない、という一案を示します。

改善のポイントは大きく3点あります。

  1. サイト構成を省力化。サイトの構成が冗長に感じましたので、ページ数をできる限り削減しました。クリック1回でコンテンツに到達できます。(註:コンテンツ自体の削減は単なる手抜きです。他意はありません)
  2. 多様な閲覧環境に耐えうるレイアウトへ。ブラウザの文字サイズ設定変更、多くの画面サイズに耐えうるデザインにしました。
  3. HTMLを見直しました。リストはリストとしてマークアップするべきだと思います。また、段落は段落、見出しは見出しです。[02.06.22]

追記

MozillaでもIE6でも、一応ふつうに見られるのですが、横スクロールバーが発生してますね。調べてみたのですが、CSSですね、問題は。bodyの高さと幅を不用意に設定しているのが、いろいろとまずいようです。

私のサイトを含めて、比較的安定した擬似フレームを実現しているサイトをいろいろご覧になってはいかがかと思います。ちょっとしたコツがあるモノですから。とにかく不用意にbodyの縦横を決めるのはやめましょう。非常に問題が生じやすい方法です。よほどよく考えないと、他の記述と矛盾を起こします。というわけで、擬似フレームのCSSファイルを用意しているサイトをいくつかご紹介。

一番すっきりしているのは、position:fixdで擬似フレームを実現することです。私はCSSの伝道者でありたいのでWinIEでも擬似フレームを実現するために別の手段に頼っていますが、素直にposition:fixdを使っているのは以下のサイト。

擬似フレームをつくる、とか、そういった「機能」の部分はCSSをコピーしても何の問題もないと思います。そういろいろやり方があるわけでもなく……。[2002.08.10]

ZERO SHINE GENERATION

[2002.06.14]

いくつかの改善点

色数はそうでもないのですが、雑然とした、よくいえばにぎやかな印象のサイトですね。赤青白という組み合わせが、どうもまとまりが悪いようです。赤の面積が大きすぎるのではないでしょうか。逆に背景画像を赤系にすれば、青がアクセント色程度の扱いになってバランスがよくなるでしょう。デザインに慣れるまでは、複数の色に大面積を与えないことです。

また、文字の背景に色をつけていますね。画像と重なって文字が読みにくいので、補正しているのだろうと思いますが、あまりうまい背景色のつけ方ではありません。たしかに文字は読みやすくなったかもしれません。けれどもデザイン的にはカッコ悪いですね。CSSでp要素全体に背景色をつけるか、あるいはせめて背景色を背景画像と同じ青系の色にしましょう。

なるべく「無駄なスクロールをさせない」のはレイアウトの基本です。ある種のテキストサイトのように、縦長デザインを採用する他なく、また表紙に置かれた最新の更新分のみにアクセスが集中するといった場合は例外です。zerominさんのサイトは典型的な「メニューを通過しなければ意味がない」構成です。メニューの上にある文章だけ読んだって仕方ありません。ならば、まずメニューを持ってきた方がよいでしょう。修正案を作成しましたので、実際にご覧になって検討してみてください。

一貫したレイアウト、ナビゲーションによってサイトに統一感を出すというレベルはクリアしているので、今後はそのデザインのレベルを上げていくよう努力されるとよいでしょう。

ところでスタイルシートを各ページに記述されていますが、これは絶対に外部CSSファイルを利用すべきです。外部CSSファイルを知って損することはありません。

後記

極端かもしれませんが、クールな感じを目指すのであれば、表紙はこれくらいに切り詰めてしまった方がいいのではないでしょうか。[02.06.22]