ラベル 企画・設計 の投稿を表示しています。 すべての投稿を表示
ラベル 企画・設計 の投稿を表示しています。 すべての投稿を表示

2011年5月11日水曜日

売りのコンテンツを目立たせる

多くのユーザが見たがるページがあれば、そのページへのショートカットを、トップページはもちろん、色んなページに設置した方がよい。

どのページをユーザがたくさん見ているか、というのを調べるには、アクセス解析を導入すればよい。
アクセス解析とは、どのページにどれだけの人がアクセスしているか、どんなキーワードをつかってアクセスしたか、などがわかるプログラムである。
アクセス解析には、Googleや忍者ツール、FC2などがある。中でもお薦めはGoogleである。

アクセス解析を導入したら、どのページが人気があるのかを調べよう。
そして、そのページへのリンクをサイト内の様々なページに貼ろう。

検索できるようにする

そのサイト内のコンテンツを検索できる機能をつけよう。
検索機能はページの目立つ場所に設置しよう。ページの上部、つまりヘッダーにおくとよい。
また、検索機能は、すべてのページから利用できるようにすること。

2011年5月6日金曜日

階層の深さ

サイトの階層の深さは、大体3階層が理想的とされている。
3階層よりも深くなると、ユーザは迷いやすくなるといわれている。
そのため、できるのであれば、トップページから3階層以内という原則を守ろう。
この3階層というのは、トップページからのクリック数のことである。要するに、トップページから3クリックで求める情報にたどり着ける、ということである。
情報が多すぎて、3階層でまとめきれないのであれば、最大で5階層程度で収めよう。

情報の構造化

グループに分けた情報をさらに、関連付けすることで、そのサイトの構造を決定する。
ウェブサイトにおける構造には、以下の4つがある。

(1) 階層型
(2) 直線型
(3) グリッド型
(4) ウェブ型

(1) 階層型
多くのサイトで使われる構造。あるコンテンツの下に、別のコンテンツがあり、それは別のグループとは関連付けされていない状態。最も、サイトの構造がわかりやすく、ユーザにとっても、自分が今どこにいるのかがわかる。

階層型で注意すべきことは、各グループが他のグループに干渉しないことである。どのグループに入ってもおかしくない、又はどのグループに関係することも若干ずつ入っているような情報を扱うサイトの場合には、他のグループに干渉しないページというのは難しくなる。

(2) 直線型
印刷物で使われている構造。最もシンプルな構造である。すべての情報が並列に並んでおり、他に飛ぶことがない。1ページ目の次には2ページ目が必ず表示され、いきなり5ページ目が表示されることもない。

(3) グリッド型
グリッド型は、図で示せば表のような構造である。それぞれ、隣り合う縦と横のページが関連付けられている。

(4) ウェブ型
ウェブとは蜘蛛の巣である。網目状に関連付けられたページのことで、あるページからあるページに自由にリンクが貼られた状態のことである。
ウェブ型は、自由にリンクを貼ることで表現するため、構造が曖昧になりがちである。このような方法を用いる場合とは、他のコンテンツを参照させたいときなどである。

情報の整理

サイトの構造を考える上で、どのコンテンツがどのグループに属するか、という情報の整理が重要である。
そのためにも、まずはサイトで提供するコンテンツの大項目を決めよう。

大項目を決める方法にはいくつかあるが、その中でも簡単なものが、まずは、思いつく限りのコンテンツを書き出し、出尽くしたら次に、そのコンテンツをグループ分けして5グループぐらいにまとめるのである。
この5グループが、大項目となる。適当な項目名をつけよう。

情報の整理の仕方
情報を整理するには、以下の方法がある。

(1) 50音別
用語集などで使われる。本の索引などを想像すれば分かりやすい。

(2) 地理/場所別
地図や天気などのサイトで使われる。

(3) 時系列
情報系のサイトで使われる。ブログなどがよい例。

(4) トピック別
情報系サイトで使われる。

(5) 作業別
スケジュールなどがそれにあたる。

(6) ユーザ別
ユーザによって見ることができる情報と、見ることができない情報に分けられる。会員用、一般用、初心者用などにわけられることもある。

2011年5月5日木曜日

ディスプレイ領域

サイトの幅を固定幅に選択した場合、その幅をいくらにするか、という話である。
固定幅にするならば、ディスプレイの幅に合わせるのがよい。
現在では、ディスプレイの幅は1280ピクセルが一般的かもしれないが、少し古かったり小さいディスプレイでは、800ピクセルもまだ健在である。そこで、サイトの基本的な幅は最低800ピクセルが考えられる。
しかし、画面内にサイト全体が表示されなくても、メインの記事が読める幅であれば、問題ないと考えると、大体900ピクセルくらいまでは許容範囲ではないだろうか。

固定幅か可変幅か

デザイン面で考えることの一つに、サイトの幅をいくらにするか、ということがある。
まず、サイトの幅を考える上で、サイトの幅を固定にするか、可変にするかを選択しなければならない。

固定幅か可変幅か
紙とウェブの最大の違いは、固定幅と可変幅である。
印刷物は、幅を変えることができないため、必ず固定幅になる。固定幅であれば、1行の文字数も決められる。しかし、ウェブの場合、ウィンドウのサイズを変えれば表示する領域も変わる。

幅を固定にすることの利点は、一行の文字数を決めることができることにある。
目で追うのに疲れない一行の文字数というのは、大体20~40字と言われている。
字の大きさや、字間を変更して文字数を調節することで、40字以内に収めることができる。

可変幅の利点とは、ブラウザのウィンドウサイズを変更しても、常に全ての情報がウィンドウ内に収められるということである。幅を固定してしまうと、その幅よりも小さいサイズでウィンドウを表示したら、すべての情報を読み取るには、横にスクロールしなければならなくなる。
幅を固定にすることは、ウェブの強みである可変を拒否することになる。

固定にするか可変にするかは、デザインにもよるし、好みも入ってくるかもしれない。
最大限ウェブの利点を使うのであれば、可変であるべきという意見もある。

しかし、固定幅を否定することもできない。
固定幅は、可変幅による利点が得られないことを補う利点がある。
それが、文字数の固定による読みやすさと、デザインのしやすさである。
幅を固定にすることで、一行の文字数を決めることができる。これは、読み手にとって、読みやすい環境を与える。
そして、幅を固定にすることは、ウィンドウのサイズが変わっても見た目が崩れないことになる。これは、サイトの運営者側にとって、作りやすい環境を与える。
つまり、読み手と作り手の双方に利便性を与える、固定幅のレイアウトには捨てがたいものがある。
よって、固定幅か可変幅かは、好みが入ってくるのである。

2011年5月3日火曜日

情報には3クリックで辿りつく

 ユーザビリティの高いサイトにおいて、よく言われるのが、3クリックで求める情報にたどり着く、という原則である。
 これは、何も完璧に守る必要はない。まずは、サイトの目的や目標合ったコンテンツを考えよう。そして、いくつかのコンテンツを考えたら、どのように配置するか、サイトの構造を決めて、そのコンテンツがどこに位置するかを決める。そして、それらのコンテンツを求めるユーザがどのようにアクセスしてきて、サイト内でどのように動き、最終的にサイトの目的・目標を満たす動作をユーザにさせるには、どのような導線をつければいいかのシナリオをつくる。
 こういった導線作りが第一である。しかし、それ以外に、人気のあるページを調べ、そのページは別のページからリンクを貼っておき、いつでもワンクリックでそのページにジャンプできるようにしておこう。
 人気のあるページを調べるには、アクセス解析を導入するのがよい。アクセス解析には、様々なものがある。最も単純なものでは、サーバがつけるログである。これは、レンタルサーバでは殆ど提供されないので、有料サーバを借りた場合に有効な調査方法である。それ以外にも、GoogleAnalyticsや、忍者ツール、FC2などもアクセス解析ツールを提供している。これらを導入して、どのページがユーザのアクセス数が高いのかをチェックしよう。
 アクセス数をチェックしたら、「アクセス数ランキング」などのサイドボックスをサイト内に表示させ、そこに上位5番くらいまでの順位を表示させる、といった工夫をするだけで、ユーザを誘導することができるようになる。

ユーザの身になって考える

 大抵の人は、客観的に考えることは難しい。生き物というのは、自分が生きていかなければならないため、人のことよりも自分のことを考えるのは当たり前だ。しかし、自分のためになるからこそ、人のことを考える、という思考が必要である。客観的に観ることで、その結果が自分にかえってくるということである。
 すごい技術があるとする。JavaScriptやFlashでグリグリと画面が動くインタラクティブなものにしようと考えるかもしれない。しかし、それは果たしてこのサイトにユーザが望んでいるものだろうか?それを導入することで、サイトの目的や目標を達成させることに近づくのだろうか。
 もし、その技術を導入することで、ユーザが見たい情報にたどり着くのに1ステップ多くなるのであれば、それはユーザにとっては不親切な技術に過ぎない。あなたの一時的な満足感は満たされるかもしれないが、長期的にはユーザが離れていくことになるので、当初の目的が達成できなくなり、あなたの満足感も満たされなくなっていく。
 ユーザが求めているのは、サクサクと動くサイト、すぐに情報にたどり着けるサイトである。その上で、あなたの目的・目標に誘導できるように作るのが、あなたが第一に考えなければならないことである。

競合サイトの研究

 今作ろうとしているウェブサイトは、よほどニッチなニーズであるか、新しい内容でない限り、誰かに先を越されていると考えた方がよい。
 では、先を越されているからといってやるのをやめるべきかというと、そうでもない。まずは競合サイトがどのようなサービスを提供しているのかを実体験してみよう。それには、競合サイトにアクセスして、そこで一ユーザとしてサイトを利用してみるのがよい。もし、そのサイトがECサイトであるならば、商品の購入手続き(支払の一歩手前でよい)や、会員登録をしてみることである。このとき、入力間違いをわざとしてみよう。その結果、どのような処理をするようになっているのかをチェックする。また、サイトの構成はどうだろうか。コンテンツにはどのようなものがあるだろうか。そのほか、サイト内検索の動作、どのようなコンテンツやサービスにトップページからのショートカットがついているか、他のページからショートカットなどで目立たせているのは何か、宣伝はどこに張り付いているか、なども見よう。
 これらをすべてチェックして、気づいたこと、よい点、悪い点、改善点などを、逐一メモしていこう。そして、いい点は取り入れ、悪い点は気をつけるようにすると、競合よりもよいサイトを作ることができるようになる。