趣味Web 小説 2005-11-11

Advice349 SEO-Equation

ご依頼人と Web サイトのご紹介

膨大な情報を提供する本格的な HTML / CSS / SEO 解説サイトです。(注:SEO 関連の記事は現在、執筆中)

著者の上田遼さんは「長屋王」「松永久秀」「島左近」など日本の歴史の中でも謎多き人物(奈良の地域に関する)について研究されている方なのですが、興味本位で2004年の夏頃に趣味の Webサイトを作ったことがきっかけで、それ以来徐々に Webサイト作成の奥深さの面白さにのめり込むようになったのだそうです。ということは、まだ管理人暦1年余り。とてもそのようには見えず、吃驚させられます。

上田さんは SEO-Equation のように巨大なサイトをどのようにして効率よく製作・管理されているのか? そのヒントとなりそうなのが、CGIスクリプトのコーナです。XHTML-Note Ver1.1 - 厳格なXHTML1.1のHTMLファイルを吐き出す。構造指定と表示の指定を完全分離。という XHTML-Note の完成度は高く、上田さんが Perl にも造詣が深いことがわかります。

SEO-Equation は何らかの CMS (ブログツール含む)を利用して個別の記事を作成し、手動作成と思しき目次ページを一部組み合わせて全体を構成されているようですね。数年前まで新聞社サイトのような CMS はとても趣味レベルでは手が届くものではないと思われていたわけですが、短い間にずいぶん状況が変わりました。しかし今でも、CMS をきちんとカスタマイズして導入されている方は決して多くない。私自身もそうですけれども、安直に日記を書くためだけに使っているケースが大半です。上田さんの努力には頭が下がります。

ともかく、よい解説サイトなので、興味のある方はぜひ一度、訪問されるとよいでしょう。

ご相談の内容

評価はいりませんので、ここをこうした方がいいと思った点を遠慮なく、私がやる気を亡くすような口調でも結構ですのでバシッと言って欲しいです。私は、つい最近まで平気でホームページビルダーで作成しており、HTMLの存在を知ったのも半年前ぐらいで、只今、脱!初心者をめざしております。

私では気付いていない点は腐るほどあると思いますので、グサッと突っ込んでください。よろしくお願いします。

謙虚も度が過ぎれば嫌味になると思う。私は HTML とか CSS とかの解説をいったん書こうとして、結局、挫折した人間です。なぜ挫折したか。それは、他にいくらでもいい解説があって、屋上屋を架す虚しさに耐えられなかったからです。けれども、解説は自サイト内で完結させたいという思いだけはあって、忸怩たる思いを抱えてきたわけです。

上田さんはその点、詳細な HTML と CSS のリファレンスを完成させているわけで、少なくともその点だけでも私を上回る能力をお持ちだといえましょう。所詮、私も趣味でやっている人間に過ぎないわけですが、上田さんに只今、脱!初心者をめざしております。といわれてしまっては立つ瀬がない。せめて対等の立場として、「何かご意見があればよろしく」ということであれば、いくつか気になったことや思い付きを語ることもできるわけですけれども、グサッと突っ込んでくださいとなると手に余ります。

ご依頼人はみな、何らかの点で私より優れた方ばかりです。私にはとても書けない小説とか、イラストとか、面白い日記や、ゲームのデータなど、様々な素晴らしいコンテンツを持っていらっしゃる。そのことには自信を持っていただきたい。その上で、よりよいウェブサイト作成に関する私の意見を参考程度に聞いてほしい。そのようなスタンスで、私はアドバイスしたい。その点、ご理解ください。

アドバイスいろいろ
1.

XML 宣言で encode の指定がなされているのですが、meta 要素でも指定しておくべきではないかと思います。私の環境では、なぜかよくわかりませんが、ブラウザが文字コードの選択を誤ることが少なくありませんでした。meta 要素での指定は XML 宣言内での指定を繰り返すだけですから冗長なのですが、安全確実のために許容できる範囲内でしょう。

2.

おそらく、現状の最大の問題はナビゲーションでしょうね。

企業サイトなどでも、「サイトマップとナビゲーションを対応させない」事例はよく見かけます。情報の階層をそのまま示すのがわかりやすいとは限らないので、「利用頻度を軸にナビゲーションを構築していく」という考え方です。「SEO-Equation」は、まさにそういった考え方にしたがって作られているわけです。そのこと自体は、良くも悪くもなくて、結果的に成功しているのか否かが重要です。

サイトマップによれば、最上位カテゴリは9項目存在します。そのうち、最上位ナビゲーションに採用したのは「ホームページ作成」「SEO/SEM対策」「検索エンジン情報」「HPヘルプ掲示板」の4項目。この選択は、非常に正しいと私は考えます。メインコンテンツをきちんとアピールしていくのは重要なことだと思います。

混乱しているのは、トップページです。メイン領域にお勧めコンテンツを並べるのは構わないのですが、なぜか情報整理に前述の4大コンテンツを採用せず、新たに「Web Authoring」というトップページにしか登場しない新カテゴリを作成し、その直下に「CGI掲示板スクリプト」「HTML解説」「CSS解説」「XHTML解説」「ホームページ作成リンク集」の5項目を並べています。これはちょっと理解し難い。

トップページの左カラムは主要コンテンツ一覧なのですが、ここに14のリンクが並んでいます。14という数字からもわかる通り、やはりサイトマップと対応していない。「HP作成と公開」「ホームペ-ジ作成」「HTML解説」「CSS解説」「XHTML解説」「HP作成リンク集」「SEO/SEM対策」「検索エンジン情報」「HPヘルプ掲示板」「WWW資料・情報」「インターネット考察」「相互リンク」「簡単相互リンク」「HP作成Tips(ランキング)」となっています。どうも選択の基準がよくわからない。

3.

あらためて文書全体を見渡してみましょう。

まずヘッダーにナビゲーションを skip するリンクとサイトマップへのリンクがあります。

次に最上位ナビゲーションバーがあり、4大コンテンツへのリンクとサイト内検索が用意されています。

ナビバーの下に現在地情報(いわゆるパンくずリスト)があります。パンくずリストはサイトマップに準じて作成されています。そして個別記事からサイトのトップページへ戻るリンクは、このパンくずリストの左端にしか用意されていません。

メイン領域は2カラムのレイアウトで、左カラムがナビゲーションリンク柱、右カラムが本文領域です。リンク柱の内容は文書毎に異なります。よかれと思ってそれぞれに工夫を凝らした作者の意図は理解できるものの、統一されたルールがないようです。かなり恣意的にリンク柱の内容が決められているという印象です。

フッターにはページの先頭へのリンクと、「ホームページ作成リンク集」「Web標準仕様」「SEO-Equationについて」「広告掲載について」「連絡先」へのリンクが並びます。

4.

私は現在のナビゲーションに致命的な欠陥があるとは思いません。行き止まりもリンク切れもなく(例外:「Webページの最適化」から「次項」へのリンク)、便利なナビゲーションがたくさん用意され、親切だと思います。ただ、何だかおかしい。

どう、おかしいか。

まず、ヘッダーにサイト名のロゴがありますが、常識的にはそこにトップページへのリンクを入れます。しかしそのロゴは CSS によって読み込まれた背景画像ですから、別の手を考える必要がありますね。

そこで私なら、ナビゲーションバーにトップページへのリンクを含めます。それは当然、パンくずリストと重複します。しかし気にしないでよいのです。asahi.comOMIURI ONLINE もそうなっています。Yahoo!オークションも同様です。だから安心してください。大勢の閲覧者が怒って文句をいうようなナビゲーションではないことだけは確実です。

そして現在地情報。ある意味、現在のナビゲーションの中で、最も理に適っているのが、この部分です。サイトマップと完全対応し、膨大なコンテンツ群の中で、現在閲覧中の情報がどのように位置づけられているか、一目瞭然です。便利ですね。この明快なナビゲーション設計のルールを、他の部分にも拡張していくべきです。

間を飛ばしてフッターを見ましょう。一見しておかしいのが「ホームページ作成リンク集」と「Web標準仕様」です。これらはふつう、フッターの中に配置されるコンテンツではありません。よってこれを追い出します。どこへ? 常識的には、サイドバーです。

横にリンクを並べる方式は、絶対的なスペースの不足に悩まされます。よって、横並べ方式のナビゲーションバーは、厳選リンク集とするか、非常に短い言葉を用いてズラリ並べるか、多段タブを採用するか、といった工夫を必要とします。横スクロールバーはなるべく出したくない。だからたいへんです。

縦にリンクを並べるサイドバー方式なら、たくさんのリンクを放り込むことができます。縦スクロールバーはあまり嫌われないからです。ただし一覧性と可読性には少し劣るかもしれない。

4大メインコンテンツの代わりに最上位カテゴリ9項目を全て並べるのは難しいので、サイドバーの拡張を考える方がよいでしょうね。

5.

状況を整理しますと、ナビバーにトップページへのリンクを追加し、フッターから2項目をサイドバーへ移動しよう、ということでした。

ではサイドバーの設計はどのように行うべきか?

基本方針として、サイドバーの内容は固定し、サイトマップに対応させるべきです。もちろん、「ホームページ作成」の目次では、下位階層を展開してよいでしょう。ただし、あくまでも下位階層だとわかるように展開しましょう。そうすれば個別記事へ遷移したとき現在地情報がスッキリ理解され、混乱を避けることができます。

トップページにおいても同様で、とくに展開しておきたい下位階層のコンテンツは、展開表示してもよいのです。ただしそこでも、前述の通り、それが下位階層のコンテンツであることがわかるようなナビゲーションとしなければなりません。

下位階層の展開とは、具体的には「ホームページ作成」などのサイドバーで「HTML解説」の下位項目として「ページ設定」などを並べている様子を援用されればよいでしょう。ただし実際には「HTML解説」自体が「ホームページ作成」の下位項目なので、私の提案を実現するためには、少なくとも3階層を表現できるスタイルを考案する必要があるでしょう。

6.

サイドバーの設計について、別解を示します。

階層表示はわかりやすい反面、見た目が煩雑になるきらいがあります。またサイドバーの内容を固定するということは、項目の並び替えができないということであり、登場順序の遅い項目の下位コンテンツを展開すると、画面をスクロールしなければそれらをクリックできないという問題も生じます。

そこで、サイドバーの中に、2つのリストを入れる手があります。

上に表示するのが、ローカルルールにより登場するナビゲーションリスト。下に登場するのが、内容固定のグローバルなナビゲーションリスト。

このようにすれば、項目内リンクはスクロール無しでクリックできます。また現在の工夫を概ね残すことができましょう。

ただし、ローカルナビゲーションの部分がきちんと階層表示されない以上、リンク先がサイト内のどのような位置にある文書なのかは、直感的には理解しづらいことを承知しておいてください。グローバルナビゲーションの方で、現在地に関する何らかの情報を提示する(例えば現在地の上位階層にはマークを付けるなど)ことも検討されるとよいでしょう。

7.

グローバルナビゲーションとしてのサイドバーは、常識的には個別記事にも表示すべきです。企業サイトなら、確実にそうするでしょう。しかし、趣味の個人サイトが用意するナビゲーションとしては、全ページにリッチなナビゲーションが入るのは、いささかうるさいような気もします。

また、リンク集など、サイドバーを入れ難いデザインのコンテンツもあるわけで、現在のように各カテゴリーの目次のみサイドバーを入れる方針でよいのではないでしょうか。

ナビバーとの競合は、じつは考えなくてよいのです。意外に思われるかもしれませんが、トップページへのリンクについて「ナビバーとパンくずリストの競合は問題ない」と述べたように、サイドバーとナビバーの競合もまた、大多数の閲覧者にとって何ら不都合となりません。どちらか好きな方を使うだけの話です。ダブっているからといって、とくに困ることはないわけです。

8.

WWW資料・情報」のコーナだけデザインが異なるのは、やはり少し気になります。暇を見つけて他とデザインを合わせてみてはいかがでしょう?

9.

アドバイスは以上です。

ちなみに、当サイトのナビゲーションは、手抜きに手抜きを重ね、最小限の案内で済ませようとしたものですから、上田さんの目指す方向性とは真逆です。参考にはなりません。

関連記事一覧

Information

注意書き