8年前に当ブログにて、東京工業大学管弦楽団（東工大オケ）の公式サイトが2006年にリニューアルしたこと、公式サイト自体は1996年から存在していることを書きました。
- 東工大オケ 公式ウェブサイト | b4log (2006年6月23日の記事)
そして2014年、東工大オケの公式サイトが8年ぶりとなる大規模リニューアルを行いました。が、リニューアル後のサイトの構造が、SEO的にアクセシビリティ的に、どうもあまりよろしくない、というかダメになっているようなのであります。
何故私がこのサイトをダメだと思ったか、を説明する前に、リニューアル前のサイトについて説明いたします。
東工大オケ公式サイト(2006)について
前述したように、東工大オケ公式サイトは2006年5月頃に大規模なリニューアルを行い、それまでの3ペイン配置から2ペイン配置にした他、サイトデザインの統一性を目指し、またXHTML 1.0、UTF-8化など、将来にわたって長く使えるようなサイトデザインを行っていました。
その後、「ヘッダー画像がモノクロなのは味気ない」と、2008年度からはいくつかの画像をカラー化されました。この他、多少の修正はあったものの、大きな変化は無いまま8年間この様式が続きました。
なお、このヘッダー画像は毎年更新されていたわけではないようです。2013年当時のサイトを見ると、トップページには2009年12月の定期演奏会での写真が使われていました。なおこの演奏会は自分が出演していた最後の演奏会で、引退して6年以上経過してもなお私が写真で確認できていたわけです。
東工大オケ公式サイト(2014)について
さて、現在の東工大オケ公式サイトについて。楽団公式Twitterにて以下のようにツイートしていることから、どうやら2014年2月27日に現在のデザインに変更したようです。
本日より、東工大管弦楽団のHPをリニューアルしてちょっと見栄えよくなったりしました^^
http://t.co/e75H8Qb4Dd
今後とも、私たち東工大管弦楽団をよろしくお願いいたします。
— 東工大管弦楽団 (@titech_kangen) 2014, 2月 26
見栄え、ねえ…。
このサイトが良くないと言える原因の一つ（というより、原因の大部分）は、フレーム構造であることです。上部フレームにヘッダー画像とメニュー、下部フレームに主コンテンツを配置しています。
@b4takashi 前回のデザインは某さんが超力入れて作ってたの覚えてる。フレームセットレイアウトとかSEOもへったくれもねぇ感じだな。
— 鳥 (@cookloow) 2014, 4月 30
現状のデザインは、SEO的に良くない状況といえるのですが。さて、SEO（検索エンジン最適化）とは何でしょうか。詳しい話はWikipedia先生に訊くのが一番ですが、ここは具体的なケースを想定して考えてみましょう。
コンテンツ間の移動がしづらい
例えば、貴方が知り合いから「次の東工大オケの演奏会は以下のURLで確認してね！」と、メールやSNSで紹介されたとしましょう。
チラシの画像があり、日時と場所、指揮者と曲目が書かれており（チケット料金が書かれていませんが）、おおむね演奏会について貴方は理解することが出来ました。
さて、ここで「そういえば東工大オケっていつから活動しているんだろう？前回の演奏会ではどんな曲を演奏したのだろうか？」と貴方は疑問に思ったとしましょう。さて、先ほどのページ、東工大オケの「今後の演奏会」のページから、どうやって他のページ、たとえば過去の演奏会一覧や楽団紹介のページに移動すればよいでしょうか。
お分かり頂けたでしょうか。そう、他のページに辿りつけないのです。主コンテンツとメニューを分離した結果、各々のページから他のコンテンツに移動がしづらくなるのでる。
「ブラウザのURL欄から、schedule.htmlを削ればいいじゃないか」という意見もあるでしょう。確かにそうすればトップページに戻れます。しかし、それは最適な解決策でしょうか？わざわざ閲覧者に、ページのリンク以外を操作してもらい、適切な文字列を削る（例えば/~tito/まで削ってしまうと、目的のページに辿り着くのはさらに困難になります）ことを、閲覧者に強いることは、果たしてウェブサイト管理者として適切な態度でしょうか。
それに、ユーザーが常にブラウザのURL欄を表示しているとは限りません。ディスプレイの表示領域が小さいスマートフォンでは、URL欄は表示されないのがデフォルトの動作です。また、URL欄を表示させて、文字列を削るというのはスマートフォンやタブレット端末では、PCで操作するよりももっと煩雑な操作となります。
PCのブラウザでも、URL欄が表示されているということは、未来永劫そのままという保障はありません。現在提供されている多くのモダンブラウザ（Internet Explorer、Mozilla Firefox、Safari、Opera、Google Chromeなど）は、ドメイン名を強調し、それ以下のディレクトリ（上記例では/~tito/schedule.htmlの部分）は目立たせないようにしています。また、ChromeやFirefoxでは今後アドレスバーを無くすかもしれません。まだ実験段階ですが、実際にそういった試みは進んでいます。
「では、各コンテンツページにトップページへのリンクを追加すればいいじゃないか」という意見もあると思います。では、このコンテンツページのどこにリンクを貼りますか？
ページの一番上？そこにリンクを貼ると、トップページから正規の手順で「次の演奏会」ページに辿り着いた際に、上部フレームのメニューのすぐ下に「トップページへ」というリンクが現れることになります。その手順で閲覧している閲覧者にとっては不要なものが目につきます。
それではページの一番下？そこにリンクを貼って、閲覧者はトップページへのリンクが用意されていることに気付くでしょうか？わざわざスクロールバーを一番下まで操作することを強いるのは、余計な動作をしているように思えます。
以上のように、各コンテンツページからトップページへのリンクを貼ることは好ましくありません。そもそも、そのような手間を掛けるくらいなら、最初から各コンテンツページにメニューを包含して、フレーム配置を止めればいいだけです。
検索エンジンに適さなくなる
先ほどの「SEO的に良くない」という話ですが、具体的に検索エンジンにどう影響をおよぼすのでしょうか。
例えば、東工大オケの情報を知るために、「東京工業大学管弦楽団」と正式名称で検索するとどうなるでしょうか。Googleで検索してみましょう。
見事、一番上に東工大オケの公式サイトが出てきました。何も問題はないように見えます。
それでは次に、同様に「東京大学音楽部管弦楽団」を検索するとどうなるでしょうか。
やはり一番上に東大オケのサイトが出てきました。が、その下に、東工大オケでは示されなかった「Concert」「Contuct Us」「Tickets」「Introduction」というリンクも表示されています。
これはYahoo!検索でも同様で（「東京工業大学管弦楽団」の検索結果 – Yahoo!検索、「東京大学音楽部管弦楽団」の検索結果 – Yahoo!検索）、公式サイトの内部リンクもある程度示すことで、検索しているユーザーがどの情報を知りたいかすぐさまアクセスできるようにしているのです。
東大オケはそのリンクが表示されて、東工大オケでは表示されないのは何故か？それは一つ前のセクションで言った、「直接コンテンツにアクセスすると、他のページに移動できないから」ということを、検索エンジンも把握しているからです。そのため、公式サイトのトップページしか案内しない、というか案内できないのです。
レイアウトが崩れる可能性がある
今までのスクリーンショットは、全てウィンドウ幅を1024pxに固定していました。この幅を狭めて、例えば820pxにしたらどうなるのか。
なんということでしょう！メニューが消えてしまいました！
もちろん本当に消えたわけではなくて、上部フレームをスクロールして下に遷移すればメニューは表れます。しかし何故楽団ロゴまで消えてしまうのか、こちらは完全にどこかへ消えてしまいました。
このように、上部と下部のフレームを別に設置することになる結果、このように思わぬ所でレイアウトが崩れてしまう可能性があります。
「そもそも今は820px以下の環境で閲覧している人は少ないのでは？」と言う方もおられるかもしれません。しかし最近ではタブレット端末やスマートフォンの普及で小さい画面での操作がまた増えています。それに画面がハイビジョン化して、今度は2つのブラウザ画面を並べて表示させている人も、増えたとか増えないとか。
ウィンドウの幅を小さくして、フレームの横スクロールが出るならまだしも、見た目が大きく変わってしまうようなレイアウトの崩れは、どうあっても無い方が良いのです。
他にも、「印刷でのレイアウトがブラウザの表示と異なる」とか、「他サイトへのリンクをフレーム内で開く恐れがある」（現状では、楽団紹介＞顧問・トレーナー＞野崎知之と進むと、東工大オケのフレーム内に野崎氏のサイトが表示されてしまいます）などの不具合があります。
ではどのようにサイト構成すべきなのか
今まで「フレーム配置のココが駄目！」を挙げていきました。それでは、東工大オケ公式サイトはどのように構成するべきだったのでしょうか。
一番の解決策は、「フレーム配置を廃止、各ページにそれぞれ各ページヘのメニューを載せる」というのが、最も手っ取り早い方法でしょう。
東工大オケ公式サイトには、現在およそ20ページしかないようです（パスワードの必要な団員向けページを除く）。それだけの数ならば、一つひな形を作成すれば、あとは残り19ページにコピー＆ペーストすれば良いわけです。100も200もページがあるならともかく、それだけのページ数なら手間ではないはずです。
もしメニューの内容が頻繁に変わるようなら別の方策が必要かもしれません。PHPなどによる動的ページ生成や、CMSの導入を検討するべきです。しかし現状の「ホーム」「楽団紹介」「今後の演奏会」「過去の演奏会」「団員募集」「リンク集」「連絡先」「団員専用ページ」という項目は、今後数年間、いや十数年も変わることはないでしょう。
「コンテンツをスクロールしても、上部のメニューが常に表示されるようにしたい！」というのであれば、CSSでメニューの部分をposition: fixed;とか指定すればいいだけです。…ただ、現在の上部フレームは243pxもあって、ノートパソコンの環境だと可読領域が著しく小さくなってしまうので、あまりおすすめできない方法ではあります。
ただ、誤解してほしくないのは、現在の東京工業大学管弦楽団公式サイトの意義をすべて否定するわけではない、ということです。演奏会に必要な情報は入手できますし、文字の色使いなどは特に問題ないようです。ただ、先代のサイトからSEO的に低下している、ということです。
東工大オケの皆様におかれましては、今後このサイトを運営していくか、それとも再度リニューアルするのか、双方の手間と得られるべき効果を思案した上で、今後のサイト管理をしていただきたいと思う所存でございます。
2005年度入団の東工大オケ元団員、B4たかしより。
