[ webdev ] よりよい Web サイトを作るための5ステップ

個人サイト、企業サイト、商用サイトを問わず「良い」 Website かどうかというのは大きな問題だ。とくに商用サイトではクリティカルな問題といえるだろう。「良い」サイトを作るためには時間がかかるし考えなくちゃならないことがたくさんある。その問題の答えに繋がるヒントが project83.com から提案された。 project83 によるとポイントは5つあるらしい。構文解釈が難しい英文が多くて頭が痛くなったけど訳してみた。誤訳があると思うので、英語に詳しい人からの突っ込みお待ちしています。

1. Create a call to Action ( アクションコールを作れ )

多くの人が機能とか要素のデザインに没頭しているけど、これらははそれほど重要じゃないんだ。

あなたの目的全体について考えてみよう。「もしユーザがサイトにいる間にこれを行ってくれたら、わたしたちが目指したことが達成できたも同然だ」ということについてだ。最も多いのは商品を購入してもらうことだろう。他には ML への参加だとか、ある項目に書き込んでもらったりというのもある。

アクションコールを1つか、可能ならば2～3作れば他のすべての基礎ができたということだ。こうなれば、全てがあなたの目標の達成を中心に展開されることになる。

アクションコールを作るということには、もうひとつの作用がある。それはウェブ開発において重要な決定を助けるはたらきだ。新しい機能とかを追加しようとするたびに、「これは目標の達成に必要だろうか？」と確認することになるからだ。

反対に、目的を絞る場合はより簡単だ。たとえば #1 をコールする目的は商品を購入してもらうためにビジターを得ることだとしよう。より大きな信頼をビジターに持ってもらう効果的な方法は賞賛の言葉がかかれたリストがあるページに誘導することだ。そのためには、消費者がアナタの商品について話し合える場所を提供して、誰でもそこを見れるようにすればいい。

2. Plan Ahead ( 将来の計画を立てろ。前もって計画しろ )

メインメニューからスタートして、それぞれのページを適所に入れていくというやり方がいい。

このプロセスは大抵はごちゃごちゃするので鉛筆を使うのが良い。でっかい図を描いてメインメニューを書く。それからメインメニューの各項目にぶら下がるページを理解できるように書き足していくんだ。どうやったらアナタの一番大切な目的にぴったり合ったサイト構造になるかな？

わたしが "Creative-types" と呼ぶこの方法を30分も行えば、アナタの目的を達成するのにぴったりなサイト構造ができあがるとおもうよ。

サイトの計画を立てる上で最良の方法は、似たような商品かサービスを提供していて上手くいっているサイトを見つけてメモを取ることだ。

3. Don't Make Me Think! ( ユーザに考えさせるな! )

これはウェブユーザビリティの大御所 Steve Krug が著書 Don't Make Me Think! に記したことと同じだ。単純に、簡単にしなきゃならないってこと。今回紹介する5つのルールの中で一番簡単なはずなんだけど、たくさんのサイトがこの原則に反している。

どうやったらクールに見えるかとかどうやったら強い印象を与えられるかっていうことを考えるのはやめるんだ。その代わりにユーザにとってより簡単になるように考えるんだ。 アナタたちがウェブ開発のエキスパートで専門知識を持っているのはわかる。しかし、余分なものを浪費しないために気をつけなきゃならないことがいくつかある。以下は全部やってはいけないことだ。

1. 不適切な Flash が使われている
2. うっとおしい、いらいらする広告がある
3. ヘルプとか連絡用窓口が見つかりにくい
4. テキストを画像で表示している
5. テキストやコンテンツが暗い背景の上に表示されている
6. わかりにくい業界独自の用語が使われている

4. Content is King ( 内容がもっとも大事なものだ )

ユーザがアナタのサイトを訪れるのは、情報を必要としているからだ。ユーザが必要とする情報をユーザが納得するように配置するべし。さらに、几帳面にアップデートするべし。情報の鮮度を保つことでユーザは再びサイトに来てくれる。

新しい情報は "Latest News" といったそれとすぐわかるような場所にまとめたり、メールで通知したり、ブログを使って発信することができる。とにかく、ユーザがまた来てくれるような工夫をすること。

5. Own it ( 自分で責任を持て )

サイトは自分で責任を持って管理しなきゃならない。たとえサイト構築専門業者に委託して開発してもらったとしても、最終的にはアナタ自身が責任を持って管理していく必要がある。

最後に「これらは特別なことではないけれど、ちゃんと実行すれば軌道に乗るだろう」と締めています。たしかに項目"Don't Make Me Think!" はかなりのサイトで意識されていないと思う。Flash を使わなくてもいいことに Flash が使われていたり、派手な広告がぽんぽんポップアップしてきたりするサイトは多い。最近見たあるサイトではテキストの8割が画像に埋め込まれていたけど、こういうサイトは重いのでユーザが「快適」だと感じることは少ないだろう。気持ちよく使うことができなければユーザはほかに流れてしまう。ウェブが注目されて、新しい企業がどんどん参加している今では、探せば代わりになるサービスはわりと簡単に複数見つかるものだ。ユーザがどれを選ぶかっていったら、いうまでもなく『簡単に』『気持ちよく』使えるサイトなんだよね。そして、ユーザに選ばれたサイト ( だけに限らず、書籍やソフトも ) はブログや SNS といった " 口コミ " でどんどん広まっていく。

Hiring is Obsolete と 7 rules for software start-ups にも書かれているけれど、ソフトウェア、特にWeb の世界では営業部隊ってのは必要ないと思う。営業部隊ってのはお金がかかるし、人が移動できる範囲には限界があるからだ。そんなものに回すリソースがあるならユーザビリティの向上に使った方がよほど効果的だ。

なんにせよ、一番大切なのはユーザビリティということだろう。これを心に留めて今日は筆をおくことにしよう。

Reference:

5 Steps to Building Better Websites
( Project83.com, Web Development, 2006/05/07 )

Don't Make Me Think! 2nd Edition
( Steve Krug 著, New Riders Pub出版, 2005/08/26 )
訳注：Don't Make Me Think！は邦訳も出ていますがそちらは第一版が元になっています。

Hiring is Obsolete( Paul Graham, 2005/05 )

ITベンチャーが守るべき7ヶ条( POLAR BEAR BLOG, 2006/06/19 )