ウェブサイトにアクセスしたときに、すぐに画面が表示されなければ、ユーザはイライラしてしまい、あまりに待たされるようならば、他のサイトに移ってしまう。
ブロードバンドが当たり前の昨今では、それほど待たされることはないかもしれないが、それでも回線が細い場合には、混み合ってきたら中々表示されなくなることもある。
理想的には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月5日木曜日
固定幅か可変幅か
デザイン面で考えることの一つに、サイトの幅をいくらにするか、ということがある。
まず、サイトの幅を考える上で、サイトの幅を固定にするか、可変にするかを選択しなければならない。
固定幅か可変幅か
紙とウェブの最大の違いは、固定幅と可変幅である。
印刷物は、幅を変えることができないため、必ず固定幅になる。固定幅であれば、1行の文字数も決められる。しかし、ウェブの場合、ウィンドウのサイズを変えれば表示する領域も変わる。
幅を固定にすることの利点は、一行の文字数を決めることができることにある。
目で追うのに疲れない一行の文字数というのは、大体20～40字と言われている。
字の大きさや、字間を変更して文字数を調節することで、40字以内に収めることができる。
可変幅の利点とは、ブラウザのウィンドウサイズを変更しても、常に全ての情報がウィンドウ内に収められるということである。幅を固定してしまうと、その幅よりも小さいサイズでウィンドウを表示したら、すべての情報を読み取るには、横にスクロールしなければならなくなる。
幅を固定にすることは、ウェブの強みである可変を拒否することになる。
固定にするか可変にするかは、デザインにもよるし、好みも入ってくるかもしれない。
最大限ウェブの利点を使うのであれば、可変であるべきという意見もある。
しかし、固定幅を否定することもできない。
固定幅は、可変幅による利点が得られないことを補う利点がある。
それが、文字数の固定による読みやすさと、デザインのしやすさである。
幅を固定にすることで、一行の文字数を決めることができる。これは、読み手にとって、読みやすい環境を与える。
そして、幅を固定にすることは、ウィンドウのサイズが変わっても見た目が崩れないことになる。これは、サイトの運営者側にとって、作りやすい環境を与える。
つまり、読み手と作り手の双方に利便性を与える、固定幅のレイアウトには捨てがたいものがある。
よって、固定幅か可変幅かは、好みが入ってくるのである。
まず、サイトの幅を考える上で、サイトの幅を固定にするか、可変にするかを選択しなければならない。
固定幅か可変幅か
紙とウェブの最大の違いは、固定幅と可変幅である。
印刷物は、幅を変えることができないため、必ず固定幅になる。固定幅であれば、1行の文字数も決められる。しかし、ウェブの場合、ウィンドウのサイズを変えれば表示する領域も変わる。
幅を固定にすることの利点は、一行の文字数を決めることができることにある。
目で追うのに疲れない一行の文字数というのは、大体20～40字と言われている。
字の大きさや、字間を変更して文字数を調節することで、40字以内に収めることができる。
可変幅の利点とは、ブラウザのウィンドウサイズを変更しても、常に全ての情報がウィンドウ内に収められるということである。幅を固定してしまうと、その幅よりも小さいサイズでウィンドウを表示したら、すべての情報を読み取るには、横にスクロールしなければならなくなる。
幅を固定にすることは、ウェブの強みである可変を拒否することになる。
固定にするか可変にするかは、デザインにもよるし、好みも入ってくるかもしれない。
最大限ウェブの利点を使うのであれば、可変であるべきという意見もある。
しかし、固定幅を否定することもできない。
固定幅は、可変幅による利点が得られないことを補う利点がある。
それが、文字数の固定による読みやすさと、デザインのしやすさである。
幅を固定にすることで、一行の文字数を決めることができる。これは、読み手にとって、読みやすい環境を与える。
そして、幅を固定にすることは、ウィンドウのサイズが変わっても見た目が崩れないことになる。これは、サイトの運営者側にとって、作りやすい環境を与える。
つまり、読み手と作り手の双方に利便性を与える、固定幅のレイアウトには捨てがたいものがある。
よって、固定幅か可変幅かは、好みが入ってくるのである。
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としては有効な場合がある。だから、最初にページの概要がわかる見出し文を入力し、その後にスラッシュなどで区切ってウェブサイト名を表示しておく、という方法もある。非常に短い略称でウェブサイト名を表示することができる場合は、最初にサイト名を持ってくるのも有効である。そのサイトが有名であれば、ユーザは、それを見たときに、「あ、あのサイトなのか、ならば安心だ」となる。アマゾンがいい例である。
情報には3クリックで辿りつく
ユーザビリティの高いサイトにおいて、よく言われるのが、3クリックで求める情報にたどり着く、という原則である。
これは、何も完璧に守る必要はない。まずは、サイトの目的や目標合ったコンテンツを考えよう。そして、いくつかのコンテンツを考えたら、どのように配置するか、サイトの構造を決めて、そのコンテンツがどこに位置するかを決める。そして、それらのコンテンツを求めるユーザがどのようにアクセスしてきて、サイト内でどのように動き、最終的にサイトの目的・目標を満たす動作をユーザにさせるには、どのような導線をつければいいかのシナリオをつくる。
こういった導線作りが第一である。しかし、それ以外に、人気のあるページを調べ、そのページは別のページからリンクを貼っておき、いつでもワンクリックでそのページにジャンプできるようにしておこう。
人気のあるページを調べるには、アクセス解析を導入するのがよい。アクセス解析には、様々なものがある。最も単純なものでは、サーバがつけるログである。これは、レンタルサーバでは殆ど提供されないので、有料サーバを借りた場合に有効な調査方法である。それ以外にも、GoogleAnalyticsや、忍者ツール、FC2などもアクセス解析ツールを提供している。これらを導入して、どのページがユーザのアクセス数が高いのかをチェックしよう。
アクセス数をチェックしたら、「アクセス数ランキング」などのサイドボックスをサイト内に表示させ、そこに上位5番くらいまでの順位を表示させる、といった工夫をするだけで、ユーザを誘導することができるようになる。
これは、何も完璧に守る必要はない。まずは、サイトの目的や目標合ったコンテンツを考えよう。そして、いくつかのコンテンツを考えたら、どのように配置するか、サイトの構造を決めて、そのコンテンツがどこに位置するかを決める。そして、それらのコンテンツを求めるユーザがどのようにアクセスしてきて、サイト内でどのように動き、最終的にサイトの目的・目標を満たす動作をユーザにさせるには、どのような導線をつければいいかのシナリオをつくる。
こういった導線作りが第一である。しかし、それ以外に、人気のあるページを調べ、そのページは別のページからリンクを貼っておき、いつでもワンクリックでそのページにジャンプできるようにしておこう。
人気のあるページを調べるには、アクセス解析を導入するのがよい。アクセス解析には、様々なものがある。最も単純なものでは、サーバがつけるログである。これは、レンタルサーバでは殆ど提供されないので、有料サーバを借りた場合に有効な調査方法である。それ以外にも、GoogleAnalyticsや、忍者ツール、FC2などもアクセス解析ツールを提供している。これらを導入して、どのページがユーザのアクセス数が高いのかをチェックしよう。
アクセス数をチェックしたら、「アクセス数ランキング」などのサイドボックスをサイト内に表示させ、そこに上位5番くらいまでの順位を表示させる、といった工夫をするだけで、ユーザを誘導することができるようになる。
ユーザの身になって考える
大抵の人は、客観的に考えることは難しい。生き物というのは、自分が生きていかなければならないため、人のことよりも自分のことを考えるのは当たり前だ。しかし、自分のためになるからこそ、人のことを考える、という思考が必要である。客観的に観ることで、その結果が自分にかえってくるということである。
すごい技術があるとする。JavaScriptやFlashでグリグリと画面が動くインタラクティブなものにしようと考えるかもしれない。しかし、それは果たしてこのサイトにユーザが望んでいるものだろうか？それを導入することで、サイトの目的や目標を達成させることに近づくのだろうか。
もし、その技術を導入することで、ユーザが見たい情報にたどり着くのに1ステップ多くなるのであれば、それはユーザにとっては不親切な技術に過ぎない。あなたの一時的な満足感は満たされるかもしれないが、長期的にはユーザが離れていくことになるので、当初の目的が達成できなくなり、あなたの満足感も満たされなくなっていく。
ユーザが求めているのは、サクサクと動くサイト、すぐに情報にたどり着けるサイトである。その上で、あなたの目的・目標に誘導できるように作るのが、あなたが第一に考えなければならないことである。
すごい技術があるとする。JavaScriptやFlashでグリグリと画面が動くインタラクティブなものにしようと考えるかもしれない。しかし、それは果たしてこのサイトにユーザが望んでいるものだろうか？それを導入することで、サイトの目的や目標を達成させることに近づくのだろうか。
もし、その技術を導入することで、ユーザが見たい情報にたどり着くのに1ステップ多くなるのであれば、それはユーザにとっては不親切な技術に過ぎない。あなたの一時的な満足感は満たされるかもしれないが、長期的にはユーザが離れていくことになるので、当初の目的が達成できなくなり、あなたの満足感も満たされなくなっていく。
ユーザが求めているのは、サクサクと動くサイト、すぐに情報にたどり着けるサイトである。その上で、あなたの目的・目標に誘導できるように作るのが、あなたが第一に考えなければならないことである。
競合サイトの研究
今作ろうとしているウェブサイトは、よほどニッチなニーズであるか、新しい内容でない限り、誰かに先を越されていると考えた方がよい。
では、先を越されているからといってやるのをやめるべきかというと、そうでもない。まずは競合サイトがどのようなサービスを提供しているのかを実体験してみよう。それには、競合サイトにアクセスして、そこで一ユーザとしてサイトを利用してみるのがよい。もし、そのサイトがECサイトであるならば、商品の購入手続き（支払の一歩手前でよい）や、会員登録をしてみることである。このとき、入力間違いをわざとしてみよう。その結果、どのような処理をするようになっているのかをチェックする。また、サイトの構成はどうだろうか。コンテンツにはどのようなものがあるだろうか。そのほか、サイト内検索の動作、どのようなコンテンツやサービスにトップページからのショートカットがついているか、他のページからショートカットなどで目立たせているのは何か、宣伝はどこに張り付いているか、なども見よう。
これらをすべてチェックして、気づいたこと、よい点、悪い点、改善点などを、逐一メモしていこう。そして、いい点は取り入れ、悪い点は気をつけるようにすると、競合よりもよいサイトを作ることができるようになる。
では、先を越されているからといってやるのをやめるべきかというと、そうでもない。まずは競合サイトがどのようなサービスを提供しているのかを実体験してみよう。それには、競合サイトにアクセスして、そこで一ユーザとしてサイトを利用してみるのがよい。もし、そのサイトがECサイトであるならば、商品の購入手続き（支払の一歩手前でよい）や、会員登録をしてみることである。このとき、入力間違いをわざとしてみよう。その結果、どのような処理をするようになっているのかをチェックする。また、サイトの構成はどうだろうか。コンテンツにはどのようなものがあるだろうか。そのほか、サイト内検索の動作、どのようなコンテンツやサービスにトップページからのショートカットがついているか、他のページからショートカットなどで目立たせているのは何か、宣伝はどこに張り付いているか、なども見よう。
これらをすべてチェックして、気づいたこと、よい点、悪い点、改善点などを、逐一メモしていこう。そして、いい点は取り入れ、悪い点は気をつけるようにすると、競合よりもよいサイトを作ることができるようになる。
登録:
投稿 (Atom)