MoogaOneトップ >
このページ
宝石箱のようにきらびやかで、飛び出す絵本のような驚きに満ちているウェブページ。でも、どこに何があるのか、どうすれば目的の情報にたどり着けるのかは、全くもって把握しにくい。そんなウェブページにうんざりした事はありませんか？ レイアウトのためのテーブルタグ調整のために電卓片手に苦労したり、多用している画像の編集・管理にうんざりした覚えはありませんか？
MoogaOneはウェブページのためのHTMLとcssファイルのひな形です。シンプルで、ウェブページを「見る人」「作る人」両方のユーザビリティ（使いやすさ）を最優先して作られています。あらかじめ用意されているHTMLの必要部分だけを編集・保存する事で、ウェブページが作れます。ウェブページ作成ソフトは一切必要ありません。テキストエディタとブラウザさえあれば、作成が可能です。一言で言うとMoogaOneはこれ以上簡単にできないウェブページです。大部分は松山龍彦により作成されています（幾つかのcss、JavaScriptは外部のものを使用しています）。
ブログの流行以来、ウェブページはプロバイダのサーバにアクセスして作るものになりつつありますが、自力でソースを編集してウェブページを作成する場合、簡単なひな形があれば便利です。ひな形のソースははシンプルであればあるほど後々の編集が楽です。編集するページのコンテンツ以外のデザインに関する要素は編集の邪魔になります。MoogaOneではすべてのデザイン要素を別のcssファイルに追い出しました。とりあえず、このページのソースをみていただければ、そのシンプルさが分かっていただけるかと思います。
たとえば、マウスの動きに対応してポップアップするメニュー。たとえばサイト内の検索。たとえばサイトへの個人登録と画面のカスタマイズ。情報の自動配信。スライドショー… これらウェブページのいわゆる動的な要素は、MoogaOneには全く含まれていません。それらがいけないからではなく、単に技術的に作者の範疇外にあるからです。
たとえば、動画を使ったアピール。おしゃれな雰囲気をかもし出すイラスト。目を引くフォント。効果音。これら見る人の興味を誘引するための方策は、MoogaOneには含まれていません。それらは多くの場合、使いやすさを犠牲にします。
MoogaOneは、全てのウェブページの理想形ではありません。ウェブページのあり方はその目的によって様々です。MoogaOneは非商業サイト、多くの情報・メニューのクラスタリングが必要とされるサイトには有効です。
そもそも筆者が MoogaOne を開発するに至ったのは、1999年に職場（図書館）のウェブサイトの作成を担当するようになったことがはじまりです。もともとポスターや印刷物の作成などのグラフィカルな仕事が好きな方だったので、 PhotoShop や Illustrator なんかで自作アイコンなどを作ってページを作るのは楽しいだろうな、みたいな気持ちでした。あとから考えるとその時すでにウェブページのあり方について大きな勘違いをしていました。画像やイラストの華やかさは、多くの場合使いやすさを犠牲にします。
ウェブページ作成担当になってまず最初に悩んだのは、図書館で提供される多くの資料・サービス業務を、ウェブページに載せるにあたってどう仕分けしたらいいのかという事でした。バラバラになったページが相互にリンクしあう、いわゆるハイパーテキストであるところのウェブページの構築には、印刷物とは異なる概念が必要でした。ユーザが一度に見られるのは1つのページだけ。ページ上のリンクをクリックするとカードを差し替えるように別のページが現れる。リンクの錯綜するサイト内の情報は印刷物のように一定の順序で読まれることがない。と言うことは、どのページから読んでもそこで語られている内容が、そのページを読むだけで（他の多くのページを参照せずに）分かるように心がけなければならない。また、ユーザがリンクをたどる過程は、内容の上位概念→下位概念へと移動するようにすると分かりやすい。などなど…
大きくて派手なアイコンを使ったリンクの認知度は高まります。それに反して小さくて地味なテキストだけのリンクは目立たなくなります。これらをどう使い分けるのかも考えさせられました。同時にあまり多くの要素をトップページにつぎ込むのは「使いづらいのではないか」と思い、シンプルな構成にしなければならないという思いもありました。
そして、いろいろ考えた結果、トップページの主要構成コンセプトは「より多くの利用者が使うであろうメインな機能へのリンクのみを、大きなアイコンで示すことで構成する」ことに決定しました。それらは「図書館への交通」「開館時間・カレンダ」「蔵書検索」「Q&A」「図書館紹介」「学外からの利用」「メンバーサービス」「他大学との提携サービス」「特別コレクション」「大学関連出版物」となりました。
しばらくするとこれらのページのどこにも含まれないサービスや利用のための詳細情報がたくさん抜け落ちていることが分かってきました。当初、それらの情報はウェブページ以外の場所（「図書館案内」という冊子の中）に含めればいいと考えていました。ウェブページ上に「詳しくは『図書館案内』をご覧ください」と言及するにとどめる。しかし徐々に、全情報をウェブページに載せなければ意味がないという思いがつのりました。そして、ウェブサイト内に「図書館マニュアル」なる1ページを作り、今まで図書館案内に掲載されていた内容を箇条書きで全て羅列しました。今思えば、ここでもう1つ、ウェブページのあり方についての大きな勘違いをしていました。印刷物の内容をそのままウェブページにペーストすればよいというのは間違いです。
その間違いを正すため、大変な労力が必要なことが分かってきました。今までの何倍もの情報を単一ページではなくハイパーテキスト化してサイトに含めるためには、トップページのメニューを10個以下にする案は、情報の階層が増えるのでやめた方がよさそうでした。表示スペースが足りなくなったため、今まで大きなアイコンを使っていたリンクも小さなアイコンに変更したり、場合によってはテキストリンクにします。また、トップページに存在する数多くのリンクをいくつかのグループに分ける（いわゆるクラスタリング）が必要になりました。資料の検索に関するリンクは「資料検索」という名前で、実際の図書館の使い方についてのリンクは「図書館の使い方」というクラスタにしてひとくくりにしてしました。
クラスタリングは、多くの情報が一度に提示されるサイトにおいて、サイト全体の構成を把握する上で効果的です。どこのウェブサイトでも常識になっています。しかし、情報を種別ごとにグルーピングする事で分かりやすくするはずのクラスタも、その種類が多いと意味が分からなくなり、逆効果です。
そんなこんなで悩んでいた時に Jakob Nielsen 著 "Homepage Usability" なる本に出会いました。有名な 50 の企業・商用サイトのトップページをユーザビリティの概念から徹底的に批判したものです。造語は使わない。意味の推測できない名前は使わない。一般的に使われている表現を使う。表現は統一する。などなど、いわれてみればその通りのユーザビリティが、「一流」サイトでさえ全く守られていないことを科学的に証明した痛烈な内容でした。この本でウェブページのユーザビリティに目覚めてから、関連書を読みあさる日々が続きました。ユーザビリティを知れば知るほど、今まで自分がウェブページの「使い勝手」の重要性について全くと言っていいほど無知・無関心だったことが分かりました。そして次のウェブサイトのデザイン更新時には、ユーザビリティを最優先したものにする方針を固めました。
まず最初に決めたのは「テキスト中心にする」こと。リンクには画像・アイコンは一切使わない。クリックできるかどうか分からないから。（JavaScriptによる画像の差し替えでも可能ですが、編集・管理に手間がかかります。） 青い文字ならクリックできる、クリックした文字は紫になるというウェブページのユニバーサルに認知されている表現だけを使えば良いではないか。なぜ、それ以外にしたがるのか。たぶん作成者が自分を表現したいからでしょうが、ウェブページは人に使われるために作っていたのでは？
次に決めたのは、テーブルタグを使ったレイアウトは使わず、全てのレイアウトを css (Cascading Style Sheet) を用いて行うこと。それまでテーブルタグを使ったレイアウトにさんざん悩まされていました。セルの幅や高さを電卓片手にパシパシ計算せねばならなかったテーブルタグから解放されるためです。それにユーザにもメリットが多いから。cssを使ったレイアウトでは幅を固定しなければ、ウィンドウの幅に合わせて中身も伸び縮みします。印刷しても右端が切れる事がありません。
複数のクラスタは基本的に差別化を行わない事を決めました。どのメニューが求められているかは、ユーザによって、また同じユーザでもアクセス時のニーズによって変わるものなので、作る側がメニューの重要度を勝手に決定・固定してはならないという考えからです。
css を使って、ユーザビリティ優先でレイアウトをデザインするうちに、どんどんと「無駄な要素」を切り捨てていきました。たとえば最新情報のセクションだけは、ほかのセクションと異なり、ブロックの角を丸くするデザインにしていました。しかし、そのためには角を丸くするための画像が4つ必要になります。それら画像ファイルを作るための労力、それらがどのブラウザを使ってもずれずにきちんと表示されるためにつぎ込む労力、加えて角を丸くすることはユーザビリティから見てほとんど意味がないという事実。これらを考慮して角丸デザインは結局不採用にしました。（現在、画像を使わずに可能な技術が開発されたので、これを採用しています。）このようにして数々の「素敵」で「センスの良い」デザインのアイディアをボツにしていきました。
ここまでくるともうデザインしているというより「いかにしてデザインしないか」が念頭にあります。何か思いつくたびに、「それはユーザビリティから見て本当に意味のあることか」を吟味して、もしさほど意味のない事が分かったら、どんなに自分の美的感覚がそれを要求していようが容赦なく切り捨てていきました。ユーザビリティは「好み」を否定します。「こっちの方がスキだから」という理由は、通用しません。なぜこの色なのか、なぜこの大きさなのか、なぜこの言葉なのか、なぜこの順番なのか、なぜこの向きなのか、なぜこのレイアウトなのか、なぜ、なぜ、なぜ… ウェブページつぎ込む要素の全てに対して、答えを出して進んでいきました。そして、デザイナの「こだわり」と「美的センス」を容赦なく奪う悪徳城主のようなユーザビリティに対して「こ、この娘だけはお赦しください～！」と言いたくなる要素だけを残したのです。例えばモノクロにせず色を使うとか。でもそれも最低限ですけど。
その結果、HTMLソースは極めて単純になりました。これなら誰でもが簡単に書ける。自分一人で使っているのはもったいない。ホームページの作成・編集に日々苦労している人々の一助になれるなら幸い。ひな型として公開しよう。そのために、ソースはスペース1つに至るまで吟味を重ねて書かねばならないと思い、ブラシアップする日々が続きました。
ひな型が完成を見たのは Nielsen の本を読んでから約9ヵ月後の2005年4月。自分のこだわりを捨てたデザイン。自分ならではの何かを捨てたデザイン。自分の見栄・栄誉・儲けのためではなく100%これを使う作成者とユーザのためのデザイン。無我のデザイン（バージョン1）という事から MoogaOne と名づけました。紆余曲折の末、たどりついたら雨降りならぬ MoogaOne 。使用すると大体こんな感じのウェブページになります。そのままでもいただけますが、ご自身でカスタマイズするとよりいっそうおいしくいただけるかもしれません。（笑） 利用法については、トップページの「利用の手引き」「著作権・免責事項」をお読みください。作成者・利用者の双方にとって本当に使いやすいウェブページが実現することを祈っています。それじゃ！
お問い合わせメールはmoogaone＠gmail.com（@は小文字にして）まで