クリックして別ページを表示する場合に、別のウィンドウを開いて表示するかどうかという話である。
強制的に別ページを開かせるには、a要素に、target="_blank"を指定する。
基本的には、ユーザに選択肢を与える方がよいとされている。
なぜならば、ユーザはブラウザの「戻る」「進む」ボタンを使うことが多いからである。あるページを見て、見終わったら戻るボタンを押して、前のページに戻るのである。
それが、別ウィンドウを開いてしまうと、前のページの戻るという指定ができなくなる。必要ないと思ったら、そのページを閉じる、という手間がかかってしまう。
このようなユーザに対しては、常に同じウィンドウ内で次のページが表示されるように指定しておくのがよいということである。
しかし、別ウィンドウを開くのが悪いとはいいきれない。
例えば、気になる商品や情報をとりあえず開いておいて、後で順々に見たいときには、別ウィンドウで情報を開いておきたいこともある。
リンクをクリックすることで、別ウィンドウを開かせるのであれば、予め断っておくのである。
最も親切な方法は、別ウィンドウを開く場合のリンクを、リンクテキストの隣に小さく用意しておくことである。
2011年5月6日金曜日
表示速度
ウェブサイトにアクセスしたときに、すぐに画面が表示されなければ、ユーザはイライラしてしまい、あまりに待たされるようならば、他のサイトに移ってしまう。
ブロードバンドが当たり前の昨今では、それほど待たされることはないかもしれないが、それでも回線が細い場合には、混み合ってきたら中々表示されなくなることもある。
理想的には10秒以内にページが表示されることである。
ページの読み込みが遅くなる理由は、ページのサイズである。
ページサイズは、HTMLファイルに書かれているテキスト以外に、表示しようとしている画像やFlash、CSS、JavaScriptなどの外部ファイルも含まれる。これらの総合計ファイルサイズが、ページサイズとなる。
回線別の最大ページサイズ
56Kモデム --- 65KB
ADSL（1M） --- 1MB
以上のように、回線の速度によって、10秒以内に読み込めるページサイズは変わってくる。
画像や、動画のようなものをたくさん使っていれば、別であるが、普通にウェブサイトを作っていれば、1MBなどという大きさのページになることはあまりない。
重くなるのを避けるテクニック
ページサイズをなるべく軽くするには、以下のことに注意しよう。
(1) ファイルに余計なテキストを書かない
HTML、CSS、JavaScriptなどのファイルに、余計なタグやコメントを書き込まないようにする。特にコメントを大々的に書いてしまうと、その分読み込む速度に影響を及ぼすといわれている。とはいえ、後々ファイルを管理する際にある程度のコメントは必要となる。最低限のわかりやすいコメントを心がけよう。
(2) レイアウトやデザインはCSSでまとめる
HTMLファイルに直接レイアウトや見た目に関する処理を書くよりも、外部CSSファイルに書いたほうがよい。フォントサイズ、色、レイアウトといったデザインは、他のHTMLファイル内でも同じものを使うことが多い。それならば、外部CSSファイルに、まとめて書けば、1つ設定するだけで、複数のHTMLファイルに適用することができる。
(3) CSSの設定をなるべく字数の少ないものに変える
例えば、border-left、border-top、border-left、border-bottomの4つを指定するのであれば、一度に、borderプロパティで指定する。また、0pxとしたいのであれば、0とだけ記述する、というように、なるべく少ない字数で収まるようにする、ということである。
ちまちまとした感じに思えるかもしれないが、こういう細かい積み重ねが大事である。
(4) 画像の画素数は下げる
画像処理ソフトで、画像のサイズを変更したときに、色の数を減らすなどしてなるべく画像のサイズを落とすようにする。特に、画像を鮮明にする必要がないような場合には、ギリギリまで下げよう。
(5) 広告などの貼り付けは最低限にする
アフィリエイトなどの広告をベタベタと貼ると、これが結構なサイズを持っていることがある。特に、JavaScriptを読み込むようになっている広告の場合は、複数のJavaScriptを読み込むようになっていると、かなりの時間を要することがある。実際に表示してみて、あまりに重いようならば、広告を減らそう。
(6) 目安をユーザに知らせる
ファイルをダウンロードする場合には、そのファイルのサイズや、ダウンロードにかかる所要時間などを書いておくと、ユーザがどのくらいの時間がかかるのかが事前にわかるため、待っていられるようになる。
ブロードバンドが当たり前の昨今では、それほど待たされることはないかもしれないが、それでも回線が細い場合には、混み合ってきたら中々表示されなくなることもある。
理想的には10秒以内にページが表示されることである。
ページの読み込みが遅くなる理由は、ページのサイズである。
ページサイズは、HTMLファイルに書かれているテキスト以外に、表示しようとしている画像やFlash、CSS、JavaScriptなどの外部ファイルも含まれる。これらの総合計ファイルサイズが、ページサイズとなる。
回線別の最大ページサイズ
56Kモデム --- 65KB
ADSL（1M） --- 1MB
以上のように、回線の速度によって、10秒以内に読み込めるページサイズは変わってくる。
画像や、動画のようなものをたくさん使っていれば、別であるが、普通にウェブサイトを作っていれば、1MBなどという大きさのページになることはあまりない。
重くなるのを避けるテクニック
ページサイズをなるべく軽くするには、以下のことに注意しよう。
(1) ファイルに余計なテキストを書かない
HTML、CSS、JavaScriptなどのファイルに、余計なタグやコメントを書き込まないようにする。特にコメントを大々的に書いてしまうと、その分読み込む速度に影響を及ぼすといわれている。とはいえ、後々ファイルを管理する際にある程度のコメントは必要となる。最低限のわかりやすいコメントを心がけよう。
(2) レイアウトやデザインはCSSでまとめる
HTMLファイルに直接レイアウトや見た目に関する処理を書くよりも、外部CSSファイルに書いたほうがよい。フォントサイズ、色、レイアウトといったデザインは、他のHTMLファイル内でも同じものを使うことが多い。それならば、外部CSSファイルに、まとめて書けば、1つ設定するだけで、複数のHTMLファイルに適用することができる。
(3) CSSの設定をなるべく字数の少ないものに変える
例えば、border-left、border-top、border-left、border-bottomの4つを指定するのであれば、一度に、borderプロパティで指定する。また、0pxとしたいのであれば、0とだけ記述する、というように、なるべく少ない字数で収まるようにする、ということである。
ちまちまとした感じに思えるかもしれないが、こういう細かい積み重ねが大事である。
(4) 画像の画素数は下げる
画像処理ソフトで、画像のサイズを変更したときに、色の数を減らすなどしてなるべく画像のサイズを落とすようにする。特に、画像を鮮明にする必要がないような場合には、ギリギリまで下げよう。
(5) 広告などの貼り付けは最低限にする
アフィリエイトなどの広告をベタベタと貼ると、これが結構なサイズを持っていることがある。特に、JavaScriptを読み込むようになっている広告の場合は、複数のJavaScriptを読み込むようになっていると、かなりの時間を要することがある。実際に表示してみて、あまりに重いようならば、広告を減らそう。
(6) 目安をユーザに知らせる
ファイルをダウンロードする場合には、そのファイルのサイズや、ダウンロードにかかる所要時間などを書いておくと、ユーザがどのくらいの時間がかかるのかが事前にわかるため、待っていられるようになる。
2011年5月3日火曜日
title要素をまじめに考える
HTMLのtitle要素をまじめに考えよう。
title要素は、各HTMLファイルに必ずつけよう。title要素は、そのページのタイトルにあたる。これは、そのページをブラウザで表示したときに、ブラウザの一番上の欄に表示される。また、検索エンジンは、title要素がある場合には、優先的にtitle要素の内容を、検索結果の見出しとして表示するようになっている（title要素がない場合は、内容を適当に表示する）。そのため、title要素に書かれたテキストは重要になってくる。
あなたが検索エンジンを使って、何かを検索したときに、検索結果に表示されたサイトを実際に見てみようとする動機は何だろうか？以下の2つのうち、どちらかに属さないだろうか？
(1) より上位に表示されたコンテンツ
(2) 内容の説明文が自分の求めているものに近そうなコンテンツ
(1)の仕組みは、検索エンジンの動作によるもので、より上位に表示するためには、内容が充実していること、他者から人気のあるサイトであること、SEOにもきちんと取り組んでいること、など、様々な要素が絡んでくる。検索エンジンの検索結果の上位に表示するための考え方については別の機会に説明する。
ここでは、(2)の説明をする。検索結果に表示される見出し文や概要は、すべてそのページの内容が反映される。検索エンジンが勝手に説明文を作ってくれるわけではない。あなたがそのページで書いた内容が表示されるのである。つまり、その文章を見て、興味を持った人があなたのページにアクセスしてくるのである。アクセスしてもらうには、見出しや概要が人をひきつける内容でなければならない。最初に書いたように、title要素に書いた内容は、検索結果の見出しに相当する。検索結果の概要は、ページ内の冒頭に書かれた内容や、主要な文章からの引用になる。あなたが本を読もうと思うときは、その本のタイトルをみないだろうか。次に目次をみないだろうか？つまり、人は、タイトルや見出しに、それ以下に書かれている内容が凝縮されていると考えるものなのである。このタイトルをおざなりに書いてしまえば、それだけあなたは損をしていることになる。
ウェブオーサリングソフトなどを使っていると、title要素をきちんと設定しなければ、「無題」などとされることもある。「無題」と表示されているウェブページほどみっともないものはないし、非常にもったいないことをしている。
title要素の入力方法
title要素の重要性は理解してもらえたと思う。次は、具体的な入力方法である。ただ闇雲にタイトルを入力すればいいというものではない。基本は、そのページ内を端的にあらわす内容にすることである。そのページ内の情報を端的にあらわすためには、そのページ内の重要なキーワードとなる言葉をタイトルに盛り込むことである。しかし、そのために、タイトルがやたらと長くなったり、支離滅裂な日本語になってしまうのはいただけない。検索エンジンで上位に表示されても、人が読んだら意味不明なものでは、あまり近寄られない。
タイトルは、ブラウザの上の欄に一文がすべて読める程度の長さにするのが望ましい。具体的には、30～40字であろう。もっと短くてもいいかもしれない。ただし、これにあまり拘り過ぎなくても、例えば、ウェブサイトの名前を入れておくのも、SEOとしては有効な場合がある。だから、最初にページの概要がわかる見出し文を入力し、その後にスラッシュなどで区切ってウェブサイト名を表示しておく、という方法もある。非常に短い略称でウェブサイト名を表示することができる場合は、最初にサイト名を持ってくるのも有効である。そのサイトが有名であれば、ユーザは、それを見たときに、「あ、あのサイトなのか、ならば安心だ」となる。アマゾンがいい例である。
title要素は、各HTMLファイルに必ずつけよう。title要素は、そのページのタイトルにあたる。これは、そのページをブラウザで表示したときに、ブラウザの一番上の欄に表示される。また、検索エンジンは、title要素がある場合には、優先的にtitle要素の内容を、検索結果の見出しとして表示するようになっている（title要素がない場合は、内容を適当に表示する）。そのため、title要素に書かれたテキストは重要になってくる。
あなたが検索エンジンを使って、何かを検索したときに、検索結果に表示されたサイトを実際に見てみようとする動機は何だろうか？以下の2つのうち、どちらかに属さないだろうか？
(1) より上位に表示されたコンテンツ
(2) 内容の説明文が自分の求めているものに近そうなコンテンツ
(1)の仕組みは、検索エンジンの動作によるもので、より上位に表示するためには、内容が充実していること、他者から人気のあるサイトであること、SEOにもきちんと取り組んでいること、など、様々な要素が絡んでくる。検索エンジンの検索結果の上位に表示するための考え方については別の機会に説明する。
ここでは、(2)の説明をする。検索結果に表示される見出し文や概要は、すべてそのページの内容が反映される。検索エンジンが勝手に説明文を作ってくれるわけではない。あなたがそのページで書いた内容が表示されるのである。つまり、その文章を見て、興味を持った人があなたのページにアクセスしてくるのである。アクセスしてもらうには、見出しや概要が人をひきつける内容でなければならない。最初に書いたように、title要素に書いた内容は、検索結果の見出しに相当する。検索結果の概要は、ページ内の冒頭に書かれた内容や、主要な文章からの引用になる。あなたが本を読もうと思うときは、その本のタイトルをみないだろうか。次に目次をみないだろうか？つまり、人は、タイトルや見出しに、それ以下に書かれている内容が凝縮されていると考えるものなのである。このタイトルをおざなりに書いてしまえば、それだけあなたは損をしていることになる。
ウェブオーサリングソフトなどを使っていると、title要素をきちんと設定しなければ、「無題」などとされることもある。「無題」と表示されているウェブページほどみっともないものはないし、非常にもったいないことをしている。
title要素の入力方法
title要素の重要性は理解してもらえたと思う。次は、具体的な入力方法である。ただ闇雲にタイトルを入力すればいいというものではない。基本は、そのページ内を端的にあらわす内容にすることである。そのページ内の情報を端的にあらわすためには、そのページ内の重要なキーワードとなる言葉をタイトルに盛り込むことである。しかし、そのために、タイトルがやたらと長くなったり、支離滅裂な日本語になってしまうのはいただけない。検索エンジンで上位に表示されても、人が読んだら意味不明なものでは、あまり近寄られない。
タイトルは、ブラウザの上の欄に一文がすべて読める程度の長さにするのが望ましい。具体的には、30～40字であろう。もっと短くてもいいかもしれない。ただし、これにあまり拘り過ぎなくても、例えば、ウェブサイトの名前を入れておくのも、SEOとしては有効な場合がある。だから、最初にページの概要がわかる見出し文を入力し、その後にスラッシュなどで区切ってウェブサイト名を表示しておく、という方法もある。非常に短い略称でウェブサイト名を表示することができる場合は、最初にサイト名を持ってくるのも有効である。そのサイトが有名であれば、ユーザは、それを見たときに、「あ、あのサイトなのか、ならば安心だ」となる。アマゾンがいい例である。
2011年4月30日土曜日
ブラウザの違い
ウェブサイトは、ブラウザによって若干表示が変わることがある。これは、各ブラウザが採用しているHTMLのレンダリングエンジンが違うことに関係する。
InternetExplorer ---
Firefox ---
Google Chrome ---
Opera ---
Safari ---
主に有名なブラウザは以上の5つである。なお、利用者数は、IEが5割以上、次いでFirefox、次にGoogleChromeとなっている。最近では、それほどの差異はなくなりつつあるので、インストールして観てみるとよい。
なお、ブラウザによってわずかながらデザインにずれが生じたりすることにこだわり始めると、かなり苦労することになる。場合によっては古いバージョンは切り捨てたり、記事が読めれば多少崩れるのは目をつぶるくらいの考えでいたほうがよい。シェアの大きい上位3つくらいできちんと表示されていればよいのである。
また、Linxというテキストブラウザがある。これは、HTMLの構造を理解し、テキストだけで表示するブラウザである。画像やCSSによるレイアウトなどはすべて無視され、上から登場した順番にただテキストを表示する。このブラウザを使うと、検索エンジンがそのサイトを見るときと同じ状況を人の目で見ることができると言われている。つまり、検索エンジンがどのようにサイトを理解するのかがわかるのである。
こういったテキストブラウザで一度自分のサイトを確認することも、ユーザビリティを理解するには大切なことである。画像に説明文がついていない、ということが一目でわかるのである。
InternetExplorer ---
Firefox ---
Google Chrome ---
Opera ---
Safari ---
主に有名なブラウザは以上の5つである。なお、利用者数は、IEが5割以上、次いでFirefox、次にGoogleChromeとなっている。最近では、それほどの差異はなくなりつつあるので、インストールして観てみるとよい。
なお、ブラウザによってわずかながらデザインにずれが生じたりすることにこだわり始めると、かなり苦労することになる。場合によっては古いバージョンは切り捨てたり、記事が読めれば多少崩れるのは目をつぶるくらいの考えでいたほうがよい。シェアの大きい上位3つくらいできちんと表示されていればよいのである。
また、Linxというテキストブラウザがある。これは、HTMLの構造を理解し、テキストだけで表示するブラウザである。画像やCSSによるレイアウトなどはすべて無視され、上から登場した順番にただテキストを表示する。このブラウザを使うと、検索エンジンがそのサイトを見るときと同じ状況を人の目で見ることができると言われている。つまり、検索エンジンがどのようにサイトを理解するのかがわかるのである。
こういったテキストブラウザで一度自分のサイトを確認することも、ユーザビリティを理解するには大切なことである。画像に説明文がついていない、ということが一目でわかるのである。
OSの違いを意識する
殆どの人がWindowsでサイトを作っているであろう。または、Machintoshもありうる。しかし、それ以外にもLinuxや携帯端末やスマートフォンという状況も考えられる。
これらすべてに対応するのはかなり厄介なことであろう。対応するというには、これらのOSでの環境を実際に見てみるのが第一である。そのためには、それらのマシンがなければならない。しかし、個人でそれらを集めるのは難しい。集まったとしても、そこまでやらなければならないサイトなのだろうか。そういったことも考えたい。
ただし、携帯でも観られるサイトを作りたいと考えるのはごく普通である。こういった場合には、エミュレータを使うという方法がある。
エミュレータ
エミュレータとは、ある環境で、別の環境をつくりだして、動作を確認することができるようにするものである。例えば、Windows上でMachintoshの環境を擬似的につくったり、携帯の環境をつくったりすることである。
一時期、ゲーム機のエミュレータが流行ったが、違法に使う人が多いので、お薦めできない。しかし、コンピュータのエミュレータ（特に携帯）は、各社からエミュレータが公開されているので、これを利用することで、自分の環境で確認できるようになる。
・NTT DoCoMo
・au
・Softbank
また、Machintoshのエミュレータも一応発表されている。
・Pear PC
これらすべてに対応するのはかなり厄介なことであろう。対応するというには、これらのOSでの環境を実際に見てみるのが第一である。そのためには、それらのマシンがなければならない。しかし、個人でそれらを集めるのは難しい。集まったとしても、そこまでやらなければならないサイトなのだろうか。そういったことも考えたい。
ただし、携帯でも観られるサイトを作りたいと考えるのはごく普通である。こういった場合には、エミュレータを使うという方法がある。
エミュレータ
エミュレータとは、ある環境で、別の環境をつくりだして、動作を確認することができるようにするものである。例えば、Windows上でMachintoshの環境を擬似的につくったり、携帯の環境をつくったりすることである。
一時期、ゲーム機のエミュレータが流行ったが、違法に使う人が多いので、お薦めできない。しかし、コンピュータのエミュレータ（特に携帯）は、各社からエミュレータが公開されているので、これを利用することで、自分の環境で確認できるようになる。
・NTT DoCoMo
・au
・Softbank
また、Machintoshのエミュレータも一応発表されている。
・Pear PC
デザイン
ユーザビリティにおいて、デザインは重要である。スタイリッシュにこだわろうとすると、実はとても使い辛いものになる。最近のブログの傾向などがそれである。
文字を小さく、色も背景と近くするといったことは、なんとなくデザイン的に綺麗に見えるものである。カッコいいサイトを意識するあまり、文字を9ptや8ptに設定しているサイトも多く見受けられる。しかし、そのサイトの文字はユーザにとっては読み辛い。リンクの下線を無闇に消したり、リンクテキストの色を変えることは、ユーザにとって、それがリンクであると理解させることができるのか、を考えてからするべきである。
また、それとは全く反対で、デザインに拘らないサイトも読み辛い。ページの端から端まで文字がしきつめられていて、文字と文字の間隔も狭く、行間も100%のままだとしたら、目が疲れてしまう。紙媒体のものと違い、ディスプレイはそれ自体が発光しており、余計に目が疲れるものである。だからこそ、可読性は紙媒体よりも確保しなければならないのである。
独りよがりを避ける
上記以外に、容量の大きい画像をたくさん貼り付けるという行為も、ページの読み込みに時間がかかって、ユーザをイライラさせる原因になる。画像をたくさん張りたいならば、サムネイルで見せて、クリックしたら大きい画像にするなど、必ず方法はある。
ウェブサイトは、誰かがアドバイスしてくれることは少ない。既に競合があるのであれば、わざわざ改善を要求するのではなく、もっと読みやすい競合サイトに流れていくだけである。サイトは基本的には自分だけでつくるものである。独りよがりになってしまいがちなところを、客観的に見ることができるように常に気を配らなくてはならない。
独りよがりを避ける簡単な方法は、誰かに見てもらうことである。気のおけない仲間に観てもらって感想を言ってもらうのでもよい。勇気があるならば、掲示板にURLを貼ってもいいかもしれない。ただし、掲示板で告知すると、真似る人が現れる可能性もあることに注意した方がいい。
文字を小さく、色も背景と近くするといったことは、なんとなくデザイン的に綺麗に見えるものである。カッコいいサイトを意識するあまり、文字を9ptや8ptに設定しているサイトも多く見受けられる。しかし、そのサイトの文字はユーザにとっては読み辛い。リンクの下線を無闇に消したり、リンクテキストの色を変えることは、ユーザにとって、それがリンクであると理解させることができるのか、を考えてからするべきである。
また、それとは全く反対で、デザインに拘らないサイトも読み辛い。ページの端から端まで文字がしきつめられていて、文字と文字の間隔も狭く、行間も100%のままだとしたら、目が疲れてしまう。紙媒体のものと違い、ディスプレイはそれ自体が発光しており、余計に目が疲れるものである。だからこそ、可読性は紙媒体よりも確保しなければならないのである。
独りよがりを避ける
上記以外に、容量の大きい画像をたくさん貼り付けるという行為も、ページの読み込みに時間がかかって、ユーザをイライラさせる原因になる。画像をたくさん張りたいならば、サムネイルで見せて、クリックしたら大きい画像にするなど、必ず方法はある。
ウェブサイトは、誰かがアドバイスしてくれることは少ない。既に競合があるのであれば、わざわざ改善を要求するのではなく、もっと読みやすい競合サイトに流れていくだけである。サイトは基本的には自分だけでつくるものである。独りよがりになってしまいがちなところを、客観的に見ることができるように常に気を配らなくてはならない。
独りよがりを避ける簡単な方法は、誰かに見てもらうことである。気のおけない仲間に観てもらって感想を言ってもらうのでもよい。勇気があるならば、掲示板にURLを貼ってもいいかもしれない。ただし、掲示板で告知すると、真似る人が現れる可能性もあることに注意した方がいい。
ユーティリティはシンプルに
ユーティリティとは、機能のことである。サイトに持たせる機能はシンプルなほうがよい。多機能は複雑で、何をすればいいのか、どこにいけばいいのか、混乱をきたす。だから、メニューの数は多すぎてはならない。せいぜい、5～6がいいところであろう。
また、JavaScriptを使ったり、Flashを使って多機能なものを装備したとしても、それらが本当にユーザの手助けになっているのかを考える必要がある。ここで動画は必要だろうか、わざわざ回転しながら画像を拡大させる必要があるのか、など。余計なものはそぎ落とそう。
また、JavaScriptを使ったり、Flashを使って多機能なものを装備したとしても、それらが本当にユーザの手助けになっているのかを考える必要がある。ここで動画は必要だろうか、わざわざ回転しながら画像を拡大させる必要があるのか、など。余計なものはそぎ落とそう。
サイト構築
サイト構築とは、
(1) 企画・設計
(2) 作成・公開
(3) テスト・修正
の3つの作業の繰り返しである。
一度作ったらおしまいではなく、つくったページのできばえを確認し、誤字脱字のチェックはもちろん、リンクのチェック、文章の読みやすさ、操作性といった面から確認を何度も行う。場合によっては、複数の方法論をテストして、どれが一番よいか結論を導き出すことも必要である。こうして使い勝手のよいサイトになっていく。
(1) 企画・設計
何事も始める前には企画が必要である。やみくもにhtmlをつくりはじめても、まとまりのないサイトになってしまう。まとまりがないと、どこにどんな情報があるのか、ユーザには理解できなくなる。分かり辛ければユーザは去っていく。
まず、サイトの目的・目標を設定しよう。そのサイトはユーザに何を与えるサイトであるのかを定義する。そして、自分が与えようとしている情報は、ユーザのニーズがあるものであるのかどうかを考える。つまり、ターゲットを設定するのである。
わかりやすく考えるには、5W1Hが役に立つ。
What --- 何のためのサイトか（サイトの目的・目標）
Who --- 誰のためのサイトか（ターゲット）
When --- いつ利用するサイトか（ニーズ）
Where --- どこで使うサイトか（ユーザの利用環境）
Which --- どっちを使うか（競合の把握）
How --- どうやって使うか（使い方の流れの設定）
What
何のためにつくるか、何をもってして目的達成とするか、ということである。
ここで、自分に嘘をついても仕方がない。正直に何をしたいのかを考えて企画書の一番最初に書き出そう。この段階では、余計なことを考えないでよい。とにかく自分がしたいこと、目標を書く。
Who
ターゲットを決める。自分の目的を達成するには、どんな人に読んでもらえばいいのか。自分がつくろうと思っているサイトは、誰にとって読まれやすいものなのかを考える。ターゲットがはっきりすれば、サイトのつくり方もおのずと決まってくる。例えば、若ければ字を小さめに設定することもできるが、年配がターゲットならば、字は大きめの方がいい、となる。
When
それでは、自分がつくろうとしているサイトは、設定したユーザが本当に読みたいと思うものなのだろうか。それがユーザニーズの把握である。ターゲットユーザは、どんなときにこのサイトを使うのだろうかを考え、それらを書き出しておく。これは、提供する情報の方向性に影響してくる。もし、自分のやりたいことがユーザニーズとかけ離れていると思えるようであれば、ターゲットの設定をやり直すか、サイトの目的を変更する必要がある。
ニーズを把握すると、サイトの構造の組み立て方も考えられる。例えば、まとめて1ページですべての情報を読みたいと思うか、細切れにして1ページの情報量が少ないほうがいいのか、などである。
Where
ユーザの利用環境とは、コンピュータの環境であったり、実際に見る場所のことであったりする。接続環境は、もはやADSLか光接続が主流なので、あまり気にする必要はないかもしれない。それ以外にも、OS、ブラウザ、モニタの解像度の違いや、会社で見るのか（人の目が気になるのか）、家で見るのか（人の目が気にならないのか）といったことまで考える。
Which
自分の作ろうとしているサイトは、殆どが既にあるサイトである。今までなかったサイトを作るとしたら、それは相当にニッチであるか、つい最近できた製品・情報しかない。ニッチなものはニーズも少ない可能性もあるし、最近の製品・情報は、すぐに類似サイトがいくつもできる可能性が高い。競合をチェックできない分、サイト作成に慣れていない人には作り辛いジャンルとなる可能性もある。
既にあるサイトである場合、他のサイトのいいとこどりをすることができる。検索エンジンでサイトのキーワードをチェックしてみればいい。検索にひっかかったサイトを簡単に評価してみよう。デザイン、情報、機能などざっと見て、書きだしておこう。
大事なことは、競合よりも優れたものにすることである。だから、いいとこどりをするだけではダメで、競合にはない機能や情報を盛り込む必要がある。何があって、何がないのかを把握しよう。
How
ユーザがサイトを利用するときの、流れを決める。シナリオづくりである。ユーザはまずどこを見て、どのように辿って、ユーザニーズを満たした上で、自分がサイトを作った目的・目標を満たすか、という流れを考える。
ユーザがそのサイトに来るということは、検索エンジンやリンクをクリックして、そのサイトにある情報を得ようとしているのである。そのユーザごとの目的や動機、サイト内でどのように動いてほしいかを書き出そう。
ここで考えたシナリオは、後でサイトの機能や記事を書くときに役立つ。
(1) 企画・設計
(2) 作成・公開
(3) テスト・修正
の3つの作業の繰り返しである。
一度作ったらおしまいではなく、つくったページのできばえを確認し、誤字脱字のチェックはもちろん、リンクのチェック、文章の読みやすさ、操作性といった面から確認を何度も行う。場合によっては、複数の方法論をテストして、どれが一番よいか結論を導き出すことも必要である。こうして使い勝手のよいサイトになっていく。
(1) 企画・設計
何事も始める前には企画が必要である。やみくもにhtmlをつくりはじめても、まとまりのないサイトになってしまう。まとまりがないと、どこにどんな情報があるのか、ユーザには理解できなくなる。分かり辛ければユーザは去っていく。
まず、サイトの目的・目標を設定しよう。そのサイトはユーザに何を与えるサイトであるのかを定義する。そして、自分が与えようとしている情報は、ユーザのニーズがあるものであるのかどうかを考える。つまり、ターゲットを設定するのである。
わかりやすく考えるには、5W1Hが役に立つ。
What --- 何のためのサイトか（サイトの目的・目標）
Who --- 誰のためのサイトか（ターゲット）
When --- いつ利用するサイトか（ニーズ）
Where --- どこで使うサイトか（ユーザの利用環境）
Which --- どっちを使うか（競合の把握）
How --- どうやって使うか（使い方の流れの設定）
What
何のためにつくるか、何をもってして目的達成とするか、ということである。
ここで、自分に嘘をついても仕方がない。正直に何をしたいのかを考えて企画書の一番最初に書き出そう。この段階では、余計なことを考えないでよい。とにかく自分がしたいこと、目標を書く。
Who
ターゲットを決める。自分の目的を達成するには、どんな人に読んでもらえばいいのか。自分がつくろうと思っているサイトは、誰にとって読まれやすいものなのかを考える。ターゲットがはっきりすれば、サイトのつくり方もおのずと決まってくる。例えば、若ければ字を小さめに設定することもできるが、年配がターゲットならば、字は大きめの方がいい、となる。
When
それでは、自分がつくろうとしているサイトは、設定したユーザが本当に読みたいと思うものなのだろうか。それがユーザニーズの把握である。ターゲットユーザは、どんなときにこのサイトを使うのだろうかを考え、それらを書き出しておく。これは、提供する情報の方向性に影響してくる。もし、自分のやりたいことがユーザニーズとかけ離れていると思えるようであれば、ターゲットの設定をやり直すか、サイトの目的を変更する必要がある。
ニーズを把握すると、サイトの構造の組み立て方も考えられる。例えば、まとめて1ページですべての情報を読みたいと思うか、細切れにして1ページの情報量が少ないほうがいいのか、などである。
Where
ユーザの利用環境とは、コンピュータの環境であったり、実際に見る場所のことであったりする。接続環境は、もはやADSLか光接続が主流なので、あまり気にする必要はないかもしれない。それ以外にも、OS、ブラウザ、モニタの解像度の違いや、会社で見るのか（人の目が気になるのか）、家で見るのか（人の目が気にならないのか）といったことまで考える。
Which
自分の作ろうとしているサイトは、殆どが既にあるサイトである。今までなかったサイトを作るとしたら、それは相当にニッチであるか、つい最近できた製品・情報しかない。ニッチなものはニーズも少ない可能性もあるし、最近の製品・情報は、すぐに類似サイトがいくつもできる可能性が高い。競合をチェックできない分、サイト作成に慣れていない人には作り辛いジャンルとなる可能性もある。
既にあるサイトである場合、他のサイトのいいとこどりをすることができる。検索エンジンでサイトのキーワードをチェックしてみればいい。検索にひっかかったサイトを簡単に評価してみよう。デザイン、情報、機能などざっと見て、書きだしておこう。
大事なことは、競合よりも優れたものにすることである。だから、いいとこどりをするだけではダメで、競合にはない機能や情報を盛り込む必要がある。何があって、何がないのかを把握しよう。
How
ユーザがサイトを利用するときの、流れを決める。シナリオづくりである。ユーザはまずどこを見て、どのように辿って、ユーザニーズを満たした上で、自分がサイトを作った目的・目標を満たすか、という流れを考える。
ユーザがそのサイトに来るということは、検索エンジンやリンクをクリックして、そのサイトにある情報を得ようとしているのである。そのユーザごとの目的や動機、サイト内でどのように動いてほしいかを書き出そう。
ここで考えたシナリオは、後でサイトの機能や記事を書くときに役立つ。
ユーザビリティに必要なもの
ユーザビリティに必要なものは以下の5つである。
(1) 操作性
(2) 視認性
(3) 情報量
ユーザビリティとは、ユーザにとって使いやすいかどうかを図る度合いである。
操作性とは、何も説明書がなくても、感覚的に使い方がわかる、ということである。どこにメニューがあるか、ボタンの意味がわかるか、といったことから、自分の現在位置を把握できるか、あるページから別のページへの移動がしやすいか、といったことも含む。
視認性とは、そのページの内容の読みやすさである。文字が小さすぎないか、文字の色が背景と似た色になっていないか、スクロール量が多すぎないか、どこがコンテンツでどこが宣伝なのかなど、ユーザにとって何がどこにあるのか目で確認しやすいかどうかということである。
情報量とは、ユーザが求める情報がそのサイトにあるかどうかである。
上記の3つのうち、情報量は、他の2つよりも重要度が高く、この1点で優れているサイトは、ユーザを集めることができる。情報量において唯一無二であれば、ユーザはそのサイトを利用するが、類似サイトというのは数多く作られるもので、ニッチなジャンルであっても、そこを狙ってサイトを作る人がいつか必ず現れると思っていた方がいい。
他を寄せ付けないサイトをつくるならば、1に情報量、そして2・3に操作性、視認性を確保することである。
(1) 操作性
(2) 視認性
(3) 情報量
ユーザビリティとは、ユーザにとって使いやすいかどうかを図る度合いである。
操作性とは、何も説明書がなくても、感覚的に使い方がわかる、ということである。どこにメニューがあるか、ボタンの意味がわかるか、といったことから、自分の現在位置を把握できるか、あるページから別のページへの移動がしやすいか、といったことも含む。
視認性とは、そのページの内容の読みやすさである。文字が小さすぎないか、文字の色が背景と似た色になっていないか、スクロール量が多すぎないか、どこがコンテンツでどこが宣伝なのかなど、ユーザにとって何がどこにあるのか目で確認しやすいかどうかということである。
情報量とは、ユーザが求める情報がそのサイトにあるかどうかである。
上記の3つのうち、情報量は、他の2つよりも重要度が高く、この1点で優れているサイトは、ユーザを集めることができる。情報量において唯一無二であれば、ユーザはそのサイトを利用するが、類似サイトというのは数多く作られるもので、ニッチなジャンルであっても、そこを狙ってサイトを作る人がいつか必ず現れると思っていた方がいい。
他を寄せ付けないサイトをつくるならば、1に情報量、そして2・3に操作性、視認性を確保することである。
登録:
投稿 (Atom)