たった20KBでショッピングカート機能を実装できるJavaScriptがでました。
SimpleCart.js
http://www.simplecartjs.com/
デモを使用してみた感じ、違和感も物足りなさも感じませんでした。
それなのに20KBですんでしまうとは中々の高性能だと思います。
商品の陳列や注文内容の変更・削除・数量変更などとても簡単にできます。
実際の決済にはPayPalかGoogle Checkoutを利用することになります。
まだ日本で使用するには言語の問題や決済方法などハードルは高いですが、ショッピングカート自体やっかいな機能だと思うのでこういったものはとても助かります。
新しいものをどんどん取り込んで利用できれば今よりもっと
効率的で魅力的なものがつくれそうです。
技術: 2009年8月アーカイブ
最近までDream Weaver上でホットスポットの設定が出来ることを知りませんでした・・・
今まではホットスポットはFireWorksのみなせる技かと思っていましたが。
実はかなり以前のDream Weaverから出来たらしいんです。
しかも実に簡単。
ホットスポットウィンドウを開いて、あとはイメージの上に領域を作るだけ。
領域はいつものごとく、長方形や楕円、多角形ツールを使って書くだけです。
いままでは、使いたくてもFireWorks上でJavaを自動生成させてHTML書き出しをして、
そんな具合でしたが、こんな簡単に出来たんですね。
ちなみにコードで書くとこんな感じです。
<img src="XXXXXX.jpg" width="299" height="190" border="0" usemap="#XXXXX" />
<map name="xxxxx" id="xxxxx">
インライン要素の記述方法
<area shape="エリアの形" coords="座標" href="リンク先">
※SHAPE rect=四角形 circle=円形 poly=多角形
関係図はこんな感じです。
<area shape="rect" coords="左上x, 左上y, 右下x, 右下y" href="リンク先">
<area shape="circle" coords="中心x, 中心y, 半径" href="リンク先">
<area shape="poly" coords="Ax, Ay, Bx, By, Cx, Cy..." href="リンク先">
これで見ると、Java、発生してないんですね。
ＷＥＢページに画像を添付する際、JPEG・GIF・PNGどの画像フォーマットがどのような場面に向いているのかまとめてみました。
WEBページに効果的にフォーマットを適用していくことによって、若干の表示速度向上にもつながります。
最近ではYahoo!ニュースで使用されている画像をPNG8にし、最適化を図ったりもしているようです。
全てのユーザーが同じ回線速度の環境で見るわけではないので、そういった部分も考えなければいけなくなってきました。
- GIF - 基本的に256色のインデックス画像フォーマット。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるのも大きな特徴です。
- JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている。同じ場所に何度も上書きを続けていくと序所に画像が劣化していくので注意が必要です。
- PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現でき、24ビットイメージも表現できる。但し、一部ブラウザではPNGの背景透過を表現できない。
WEBページに効果的にフォーマットを適用していくことによって、若干の表示速度向上にもつながります。
最近ではYahoo!ニュースで使用されている画像をPNG8にし、最適化を図ったりもしているようです。
全てのユーザーが同じ回線速度の環境で見るわけではないので、そういった部分も考えなければいけなくなってきました。
前回に引き続きもう少しユーザビリティについて。
実際にそのページのユーザビリティをチェックする方法について考えて見ます。
■一般ユーザーに直接チェックしてもらう方法
ユーザビリティをチェックするに当たって一番直線的なアプローチで、実際のユーザーに被験者を務めてもらうユーザーテストという方法が存在し、その実験結果をもとに改善を施すことがあります。
ユーザーテストでは、ターゲットとなるユーザーに、実際に Web サイトを利用してもらい、その動きなどから一般のユーザーの動向を検証し
この手法は、ターゲットの選定や被験者の確保、テストの設計、結果の解析など、実施に際し、一定のノウハウが必要となります。
また、場合によっては、アイトラッキングという視線の動きを計測する高価な機器を用いたりすることから、一般的には敷居が高いイメージがあります。
そのため、ユーザビリティを向上させたいサイト運営者が全てそのようなユーザーテストを実施するのは、コストや効率性の面からも難しいといった実情もあります。
■ヒューリスティック評価によるチェック方法
ヒューリスティックとは、経験則という意味で、ユーザビリティの専門家がユーザーインターフェイスを評価し、ユーザビリティ上の問題を検証する手法をヒューリスティック評価と呼びます。
この手法では、評価に必要なガイドラインをあらかじめ用意して、それに基づいて専門家がひとつひとつ検証するという手順を踏みます。
ユーザーテストに比べ、短期間で効率よく、つまりコストも抑えながら実施できるのがメリットと言われています。
メインとなる大まかな項目は以下
【ナビゲーション】
・サイト全体と閲覧中のページとの関係がわかるようになっているか
・いつでも閲覧中のページの上位階層に移動できるようになっているか
【リンク】
・リンク先が HTML でない場合は事前にわかるようになっているか
・同一サイト内へのリンクは同じウインドウに表示しているか
【フォーム】
・各入力項目には入力する内容や条件などが明確に示されているか
・エラー画面が用意され、わかりやすい状況説明と建設的な指示が提示されているか
【構造及び表示スタイル】
・ページタイトルは、＜TITLE＞タグにより、各ページ固有のものがつけられているか
・見出しに＜H＞タグを使っているか
【非テキスト情報】
・画像ファイルに Alt タグが設定されているか
・Flash、PDF が使用できない場合、代替情報により内容を把握できるか
等があげられます。
制作をしていく上で参考にしてみてはいかがでしょうか。
実際にそのページのユーザビリティをチェックする方法について考えて見ます。
■一般ユーザーに直接チェックしてもらう方法
ユーザビリティをチェックするに当たって一番直線的なアプローチで、実際のユーザーに被験者を務めてもらうユーザーテストという方法が存在し、その実験結果をもとに改善を施すことがあります。
ユーザーテストでは、ターゲットとなるユーザーに、実際に Web サイトを利用してもらい、その動きなどから一般のユーザーの動向を検証し
この手法は、ターゲットの選定や被験者の確保、テストの設計、結果の解析など、実施に際し、一定のノウハウが必要となります。
また、場合によっては、アイトラッキングという視線の動きを計測する高価な機器を用いたりすることから、一般的には敷居が高いイメージがあります。
そのため、ユーザビリティを向上させたいサイト運営者が全てそのようなユーザーテストを実施するのは、コストや効率性の面からも難しいといった実情もあります。
■ヒューリスティック評価によるチェック方法
ヒューリスティックとは、経験則という意味で、ユーザビリティの専門家がユーザーインターフェイスを評価し、ユーザビリティ上の問題を検証する手法をヒューリスティック評価と呼びます。
この手法では、評価に必要なガイドラインをあらかじめ用意して、それに基づいて専門家がひとつひとつ検証するという手順を踏みます。
ユーザーテストに比べ、短期間で効率よく、つまりコストも抑えながら実施できるのがメリットと言われています。
メインとなる大まかな項目は以下
【ナビゲーション】
・サイト全体と閲覧中のページとの関係がわかるようになっているか
・いつでも閲覧中のページの上位階層に移動できるようになっているか
【リンク】
・リンク先が HTML でない場合は事前にわかるようになっているか
・同一サイト内へのリンクは同じウインドウに表示しているか
【フォーム】
・各入力項目には入力する内容や条件などが明確に示されているか
・エラー画面が用意され、わかりやすい状況説明と建設的な指示が提示されているか
【構造及び表示スタイル】
・ページタイトルは、＜TITLE＞タグにより、各ページ固有のものがつけられているか
・見出しに＜H＞タグを使っているか
【非テキスト情報】
・画像ファイルに Alt タグが設定されているか
・Flash、PDF が使用できない場合、代替情報により内容を把握できるか
等があげられます。
制作をしていく上で参考にしてみてはいかがでしょうか。
日常で様々なWEBページをご覧になる方は沢山いるとおもいます。
その中で、ページの内容が読みにくいページやほしい情報に中々たどり着けないことはありませんか？
最近のWEBページは動的な要素が増えてきましたが、今でも情報の中心となるものは文章です。
WEBページを見やすくするためには文章を見やすく、効果的に使用することが必要になってきます。
■最適な文字サイズを考える
Web ページにおける文章の読みやすさを考える上で、文字の大きさは最も基本的なポイントでありながらも悩ましい問題です。
WEB制作会社ならクライアント側と文字のサイズで論争になることも多々あるかと思います。
一般的に、モニタ上で文字を読むのが苦手な高齢な方ほど、視認性が高い大きな文字サイズを好む傾向にあります。実際、老若男女、様々なユーザが利用する自治体のサイトなどは、文字サイズが大きいサイトが多いです。
一方、文字サイズが大きいと、一画面に表示できる情報量は少なくなりますから、使い勝手が悪いと反対する方もいるわけです。
ユーザビリティの考え方に基づくと、どちらの要望も理にかなっており、そえゆえ悩ましい、まさに究極の選択ともなりえる問題なのです。
■文字サイズの不満を解消する
もともと Web ブラウザには、文字サイズを拡大・縮小する機能が備わっています。インターネット・エクスプローラーなどは、文字だけではなく画像も含めたページ自体を拡 大する機能も備わっており、本来、その解決はユーザーの操作に委ねられるべきものなのかもしれません。
しかしながら、必ずしもパソコンの操作に長けた人ばかりがサイトに訪れるわけではないため、ブラウザの機能を知らないユーザーにとっても、わかりやすく、簡単な方法で文字サイズを好みに設定できる必要性があります。
解決の手段として、最近、多くのサイトで Web サイト自体に文字サイズの拡大・縮小機能を付与するという機能が導入されています。
実際、Web サイトを巡回していると、ページの右上に「文字サイズ：小・中・大」といったボタンが並んでいることがよくあり、ユーザビリティの施策としての認知度も高いものです。
文字サイズの拡大・縮小機能は、JavaScript とスタイルシートを組み合わせることで、比較的簡単に導入できる機能ですので、一度導入を検討してみてはいかがでしょうか。
いくら凝ったデザインや魅力的なコンテンツを用意したところで、読ませたい文章に目がいかないようでは、命取りとなります。まずは、文字サイズという身近な例からユーザビリティを考えていただければと思います。
その中で、ページの内容が読みにくいページやほしい情報に中々たどり着けないことはありませんか？
最近のWEBページは動的な要素が増えてきましたが、今でも情報の中心となるものは文章です。
WEBページを見やすくするためには文章を見やすく、効果的に使用することが必要になってきます。
■最適な文字サイズを考える
Web ページにおける文章の読みやすさを考える上で、文字の大きさは最も基本的なポイントでありながらも悩ましい問題です。
WEB制作会社ならクライアント側と文字のサイズで論争になることも多々あるかと思います。
一般的に、モニタ上で文字を読むのが苦手な高齢な方ほど、視認性が高い大きな文字サイズを好む傾向にあります。実際、老若男女、様々なユーザが利用する自治体のサイトなどは、文字サイズが大きいサイトが多いです。
一方、文字サイズが大きいと、一画面に表示できる情報量は少なくなりますから、使い勝手が悪いと反対する方もいるわけです。
ユーザビリティの考え方に基づくと、どちらの要望も理にかなっており、そえゆえ悩ましい、まさに究極の選択ともなりえる問題なのです。
■文字サイズの不満を解消する
もともと Web ブラウザには、文字サイズを拡大・縮小する機能が備わっています。インターネット・エクスプローラーなどは、文字だけではなく画像も含めたページ自体を拡 大する機能も備わっており、本来、その解決はユーザーの操作に委ねられるべきものなのかもしれません。
しかしながら、必ずしもパソコンの操作に長けた人ばかりがサイトに訪れるわけではないため、ブラウザの機能を知らないユーザーにとっても、わかりやすく、簡単な方法で文字サイズを好みに設定できる必要性があります。
解決の手段として、最近、多くのサイトで Web サイト自体に文字サイズの拡大・縮小機能を付与するという機能が導入されています。
実際、Web サイトを巡回していると、ページの右上に「文字サイズ：小・中・大」といったボタンが並んでいることがよくあり、ユーザビリティの施策としての認知度も高いものです。
文字サイズの拡大・縮小機能は、JavaScript とスタイルシートを組み合わせることで、比較的簡単に導入できる機能ですので、一度導入を検討してみてはいかがでしょうか。
いくら凝ったデザインや魅力的なコンテンツを用意したところで、読ませたい文章に目がいかないようでは、命取りとなります。まずは、文字サイズという身近な例からユーザビリティを考えていただければと思います。
ホームページ制作会社
