
ニュースレター連載:自己サイト診断
自己サイト診断(13)
(A.C.ISSUE !! vol.44 2010年7月7日配信)
前回から少し時間は経ちますが、『アクセシビリティ』〜さまざまな環境への対応〜の3回目を書いていきます。
アクセシビリティは、ウェブサイトを制作する際に、ユーザビリティとともに特に重要視される項目の一つです。また、「ウェブサイトを利用する全ての人が、年齢や身体的制約、利用環境に関係なく、ウェブサイトで提供されている情報に問題なく、アクセスでき、コンテンツや機能を利用できること。」です。
以下にあげる項目をチェックしながら、それぞれのウェブサイトを診断して見てください。
- 4.『アクセシビリティ』〜さまざまな環境への対応〜
- 障害を持つ人を含む、あらゆるユーザにとって利用しやすいウェブサイトであるか?
-
- 4-11.イメージマップはクライアントサイドを使用しているか?
クライアントサイドのイメージマップと同時に、テキストリンクも用意しているか?またあらゆる環境に対応できているか? - 4-12.スクリプト、アプレット、プラグインは代替案が用意されているか?
プラグインをダウンロードするページへのリンクがあるのか? - 4-13.モバイル、子供、外国人などに配慮したコンテンツを用意しているか?
携帯サイトや英語サイトなどあらゆる目的に対応したコンテンツの用意はあるのか? - 4-14.画面全体の明減やコンテンツの点滅、自動的に移動する設定になっていないか?
高速で明減するバナー画像などが使われていないか?(使われていない方が良い) - 4-15.動画を用意しているが、視覚的にしか伝えていない情報には、代替手段が用意されているのか?
視覚情報の代替手段として、音声ガイドやテキストでの代替情報が、用意されているか?
- 4-11.イメージマップはクライアントサイドを使用しているか?
以上、今回はこの5項目です。
次回は『アクセシビリティ』の最終回となります。
弊社では、ウェブサイト診断も承っておりますので、一度、お問い合せ頂ければと思います。
自己サイト診断(12)
(A.C.ISSUE !! vol.36 2010年3月3日配信)
前回から少し時間は経ちますが、『アクセシビリティ』〜さまざまな環境への対応〜の2回目を書いていきます。
アクセシビリティは、ウェブサイトを制作する際に、ユーザビリティとともに特に重要視される項目の一つです。
また、「ウェブサイトを利用する全ての人が、年齢や身体的制約、利用環境に関係なく、ウェブサイトで提供されている情報に問題なく、アクセスでき、コンテンツや機能を利用できること。」です。
以下にあげる項目をチェックしながら、それぞれのウェブサイトを診断して見てください。
- 4.『アクセシビリティ』〜さまざまな環境への対応〜
- 障害を持つ人を含む、あらゆるユーザにとって利用しやすいウェブサイトであるか?
-
- 4-05.フレームの使用は必要最小限にしているか?
フレームを使用してページを2つ以上に分割している。
またはフレ−ム毎にタイトルがつけられているか? - 4-06.識別が必要な情報の場合に、記号や文字装飾を補足説明無しに単独で使用していないか?
「○」「×」などの記号を画像にして適切な代替テキストをつけているか?
また「日付」「金額」「時間」などにも漢字表記を用い、音声読み上げソフトへの対応もできているか? - 4-07.機種依存文字や、半角カタカナを使用していないか?
- 4-08.色や形の識別がつかない環境においても情報を理解できるように配慮されているか?
色や形、強調による区別とテキストによる併記がされているか?
また、背景色と前景色に十分なコントラストがついているか? - 4-09.画像には、代替テキストを記述しているか?
リンクボタンになっている画像にも、代替テキストを使ってリンク先を明確になっているか?
また特に情報を伝えていない画像の代替テキストは、空かスペースのみとなっているか? - 4-10.文字情報は、可能な限りテキストのみで対応しているか?
サイト固定や画像化はさけているか?
- 4-05.フレームの使用は必要最小限にしているか?
以上、今回はこの6項目です。
弊社では、ウェブサイト診断も承っておりますので、一度、お問い合せ頂ければと思います。
自己サイト診断(11)
(A.C.ISSUE !! vol.28 2009年10月21日配信)
今回から『アクセシビリティ』〜さまざまな環境への対応〜を3回に渡り、書いていきたいと思います。
アクセシビリティは、ウェブサイトを制作する際に、ユーザビリティとともに特に重要視される項目の一つです。
また、「ウェブサイトを利用する全ての人が、年齢や身体的制約、利用環境に関係なく、ウェブサイトで提供されている情報に問題なく、アクセスでき、コンテンツや機能を利用できること。」です。
以下にあげる項目をチェックしながら、それぞれのウェブサイトを診断して見てください。
- 4.『アクセシビリティ』〜さまざまな環境への対応〜
- 障害を持つ人を含む、あらゆるユーザにとって利用しやすいウェブサイトであるか?
-
- 4-01.ユーザのための情報を適切に記述していてきちんと対応できているか?
keywords,descriptionの記述がページごとにことなっているか?
DOCTYPE,charsetの記述もあり、重要な画像などには解説があるか? - 4-02.文書構造を無視した表示位置の絶対指定となってはいないか?
表示位置の絶対指定を行わず、たの要素との相対的な関係から表示位
置が決定されているか? - 4-03.HEADに付ける<TITLE>は適切につけられているか?
ブラウザの左上に表示されるタイトルが、各ページのナ陽を端的に表
しており、同じタイトルが存在していないか? - 4-04.単語内に装飾目的にスペースや改行を入れていないか?
単語内にスペースがなく、音声読み上げソフトにも対応しているか?
- 4-01.ユーザのための情報を適切に記述していてきちんと対応できているか?
※音声読み上げソフトは、2文字以上からなる単語の文字と文字の間にスペースが入っていると、1つの単語として認識ができません。
以上、今回はこの4項目です。
弊社では、ウェブサイト診断も承っておりますので、一度、お問い合せ頂ければと思います。
自己サイト診断(10)
(A.C.ISSUE !! vol.25 2009年9月2日配信)
今回は『インタラクション』 〜動的な構造と使いやすさ〜を診断するポイントの最終回となります。
- 3.『インタラクション』 〜動的な構造と使いやすさ〜
- ユーザの自由な意思により、いつでも好きな方法でサイトを利用できるようにする柔軟性をもっているか?
- 3-21.フォームは項目数やグリッド順序が考慮され、入力によるストレスを軽減しているか?
必須項目に必要性が感じられない項目が多くあり、入力によりユーザに大きなストレスを与えていないか? - 3-22.フォームでは、一度入力した内容や回答できないような質問は設定しいないか?
プルダウンメニューを使用する際は全てのユーザが一つだけ該当するように配慮され、入力する内容がわかりように初期値を設けているか? - 3-23.システム側で対応できるフォーム入力指定をユーザに委ねずシステム対応してるか?
またエラーメッセージなどもカスタマイズしているか? - 3-24.ビギナーが慣れていない高度な機能を設定する場合は、それらを意図的に選択できるようにしているか?(絞込み検索など)
シンプルな機能の近くに、より高度な機能へのリンクが用意されており、ユーザが自分の意思で選択できるか? - 3-25.精細なマウスの操作が必要な機能の使用はせず、キーボード操作のみでリンクできるようにしているか?
マウスオーバーやリンク先の自動変化など精細なマウス操作を必要とする設定を排除して、キーボード操作のみでリンクができるか? - 3-26.エラーが発生した場合は、ビギナーにもわかり易い状況説明と、次にどうすれば良いのか適切に誘導する設定があるのか?
原因、対処法、分らないときの問合せ先などが状況に応じて的確に、表示されるよう設定されているか?
- 3-21.フォームは項目数やグリッド順序が考慮され、入力によるストレスを軽減しているか?
以上、今回は6項目を紹介しました。
これで、5回にわたっての『インタラクション』についてのチェック項目は終わりとなります。
次回からは、『アクセシビリティ』〜さまざまな環境への対応〜 と題して3回にわたりご紹介をしていく予定です。
是非、ご覧になり、ウェブサイト診断にお役立てして頂ければと思います。
自己サイト診断(9)
(A.C.ISSUE !! vol.22 2009年7月8日配信)
前回に引きつづき『インタラクション』 〜動的な構造と使いやすさ〜を診断するポイントの4回目をご紹介いたします。
- 3.『インタラクション』 〜動的な構造と使いやすさ〜
- ユーザの自由な意思により、いつでも好きな方法でサイトを利用できるようにする柔軟性をもっているか?
- 3-16.ユーザが一度に把握できるメニュー数にまとめられているか?
メニューがまとまりなく多くの項目数で並んでおり、ユーザにとって関連情報が把握しにくくはないか? - 3-17.HTML以外にリンクする場合は、リンク先について事前に分るように配慮されているか?
該当するリンクに予告がないため、大容量のダウンロードを開始してしまうなどユーザにとって大きなすとれすを感じさせていないか? - 3-18.同じデザインのものは、同様の反応を示すようになっているか?
テキストリンクやボタン画像など、同じデザインのものは同じアクションが起きるよう一貫性があるのか?またクリックできる箇所とできない箇所はないか? - 3-19.ポップアップウィンドウやリダイレクトなどの設定時は予告しているか?
自動ポップアップやリダイレクトが起こり、自分の所在ページやリンクの意味が把握できない状態ではないか? - 3-20.リンクラベルには、そのリンク先が予測できるように、それ自体に、意味を持つ記載を使用しているか?(「ここをクリックは駄目!」)
相対的な方向性を示すのではなく、サイトの構造を表現したメニューを用いているか?
- 3-16.ユーザが一度に把握できるメニュー数にまとめられているか?
以上5つが、ここまでの診断項目となります。
ユーザにとって、使いやすいサイトであるのか?どうか?
これがとても重要であると思います。
使いやすいサイトであれば、ユーザも再度、訪問してくれるであろうし、また、情報の発信もスムーズにでき、目的に合ったウェブサイトになるのではと考えます。
何か、お困りなことなどございましたら是非、弊社エー・シー・プラネットへご連絡ください。
必ずや問題解決のお役にたてると思います。
自己サイト診断(8)
(A.C.ISSUE !! vol.19 2009年5月27日配信)
前回に引きつづき『インタラクション』 〜動的な構造と使いやすさ〜を診断するポイントの3回目をご紹介いたします。
- 3.『インタラクション』 〜動的な構造と使いやすさ〜
- ユーザの自由な意思により、いつでも好きな方法でサイトを利用できるようにする柔軟性をもっているか?
- 3-11.現在の状況において無意味なリンクを配置していないか?
グローバルナビゲーション内においても現在地へのリンクは項目だけ残し外しているか? - 3-12.隣接するリンクは誤操作をしないように間が空いているか?
リンクする画像やテキストリンクが並ぶ場合、適切な行間がなくても間に仕切り記号をいれるなど配慮されているか? - 3-13.リンクにはテキストによる補足説明を常に併用しているか?
リンクのラベル自体がリンク先の内容を要約したものになっており、更にその下には補足の説明文が併記されているか? - 3-14.メニューとコンテンツは区別できるようにデザインされているか?
ページ内でメニューがコンテンツと明確に区別されており、ラベルの文字も見やすく、項目の区別もはっきりしているか? - 3-15.メニューが複数用意されている場合、ユーザの目的によりどれを使用すべきか明確になっているか?
メニューの役割が明確になっており、ユーザが目的によってどのメニューを利用すればよいかが判断できるか?
- 3-11.現在の状況において無意味なリンクを配置していないか?
今回はここまでです。
この『インタラクション』を診断する項目は多く、まだ半分です。
一度に全部の診断は大変だと思いますので、できるところからチェックしてみてはどうでしょうか?
少しでもお役に立てれば幸いに思います。
自己サイト診断(7)
(A.C.ISSUE !! vol.16 2009年4月1日配信)
前回に引きつづき『インタラクション』 〜動的な構造と使いやすさ〜を診断するポイントをご紹介いたします。
- 3.『インタラクション』 〜動的な構造と使いやすさ〜
- ユーザの自由な意思により、いつでも好きな方法でサイトを利用できるようにする柔軟性をもっているか?
この診断ポイントは- 3-06.テキストリンクは「未訪問」「訪問済」の区別がつくようにデザインされているか?
テキストリンクに独自の配色を使用しているが、サイト内で統一され下線も表示されてるか?もしくはそれに代わるような配慮はされているか? - 3-07.トップページへ戻るためのリンクはどのページからもわかりやすくデザインされているか?
全てのページ左上にサイトIDと一体化したリンクが用意されているか?「ホーム」などというラベルも見えているか? - 3-08.スプリング式のコントロール、Flashなどは重要なリンクには使用していないか?
マウスオーバー、プルダウンメニューなど特殊な機能を重要なリンクに使用せず、シンプルなデザインになっているか?またキーボードからのアクセスも可能になっているか? - 3-09.閲覧中の情報に関連のある情報を参照できる様、同ページ内にひとまとめにして掲示しているか?またはリンクの用意はあるか?
関連リンクの数が多すぎて全てを見ることが困難になっていないか? - 3-10.画像のみのものとリンクが設定されている画像は区別がつくようにデザインされているか?
ボタン状にデザインされているためクリックできることは分かるが、どういうアクションがおこるのかがわかりづらくはないか?
- 3-06.テキストリンクは「未訪問」「訪問済」の区別がつくようにデザインされているか?
今回のチェックポイントはここまでです。
前回分と合わせた10項目を、まずはチェックしてみてはいかがでしょうか?あと3回この『インタラクション』は続きます。
サイト診断は、現状を知るだけではなく、それを基に、より効率の上がるサイトにするためにも大いに役立つと思います。
弊社にて承っておりますので、是非ご相談ください。
自己サイト診断(6)
(A.C.ISSUE !! vol.13 2009年2月18日配信)
今回から5回にわたり『インタラクション』 〜動的な構造と使いやすさ〜 についての 診断項目を紹介したいと思います。
- 3.『インタラクション』 〜動的な構造と使いやすさ〜
- ユーザの自由な意思により、いつでも好きな方法でサイトを利用できるようにする柔軟性をもっているか?
- これを診断するポイントは
- 3-01.読み込み時間を短縮できるように配慮されているか?
ユーザのほしい情報が簡潔に表現されており、待ち時間によりストレスを受けることなく即座に表示されるか? - 3-02.ユーザの行動を意識してリンクの導線を設けているか?
一般的なユーザの行動を想定し、それに配慮した導線であり、必要性のない手順などが含まれていないか? - 3-03.どのような情報があるのかがわかり易く、またサイト内での現在地が把握しやすいようなナビゲーションが用意されているか?
シンプルなグローバルナビゲーションが用意され、ユーザにとって使いやすい配置になっているか? - 3-04.いつでも現在地の上層階に戻れるようにナビゲーションなどの配置がされているか?
すべてのページの同じ場所にパンくずナビが配置され、いつでも上位層に移動することができるか? - 3-05.現在地から同カテゴリ内のページを並列移動できるようナビゲーションなどの用意があるか?
グローバルナビゲーションとはっきり区別してローカルナビゲーションが設けられているか?
- 3-01.読み込み時間を短縮できるように配慮されているか?
今回はこの5つのチェック項目をあげてみました。
自サイトでチェックしてみて、一つでも当てはまらない箇所がございましたら是非、弊社にご相談ください。
お役に立てると思います。
次回も『インタラクション』の続きです。
ぜひご期待ください。
自己サイト診断(5)
(A.C.ISSUE !! vol.10 2008年12月17日配信)
今回は『インフォメーションアーキテクチャー』の最終回となります。
- 2.『インフォメーションアーキテクチャー』
- 静的な構造と視覚的要素としてユーザにとって情報をわかりやすく整理し、その結果がウェブサイトの構造に反映され、最適なリンクをたどり最短ルートでのアクセスが可能であるか?
- これを診断するポイントは
- 2-11.画像は極力軽く作られており、最適化されているか?
ユーザに負担が掛かるような大きな画像が無く、<IMG>要素タグに横サイズ(width)、縦サイズ(height)が入っているか? - 2-12.情報を蓄積して、過去のニュースやイベント情報を閲覧可能にしているか?
最新情報だけでなく過去に公開されたイベント情報、ニュースなども見ることができるように配慮されているか? - 2-13.ヘルプページを用意しているか?(FAQ、ヘルプなど)サイトの利用法だけでなく、サポート、コンタクト、サイトマップ、各種ポリシーなどへのリンクを含んだ総合的なヘルプセクションを設けているか?
- 2-14.サイト全体の構造を視覚化したサイトマップが用意されているか?
視覚的にサイト構造を把握できるサイトマップの用意があり、さらにリンクが設定され、ある程度の階層まで直接アクセスすることができるか? - 2-15.学部、学科紹介などでは、各項目のインデックスを用意し、検索しやすいように配慮されているか?
検索基準が複数あり、1つの検索方法では目的の情報を得ることができないユーザへのサポートとなっているか? - 2-16.わかり易い検索機能が全てのページからアクセスできるように配慮されているか?
全ページの上部にシンプルな検索機能を配置しているか?
- 2-11.画像は極力軽く作られており、最適化されているか?
以上、3回にわたり「インフォメーションアーキテクチャ」をチェックする16項目を紹介してきました。この項目が全て満たされていたら「インフォメーションアーキテクチャ」に関しては完璧なウェブサイトと判断できると思います。一度、自サイトをチェックしてみてはどうでしょうか?
次回は「インタラクション〜動的な構造と使いやすさ〜」についての診断項目を5回にわたり紹介したいと思います。
是非、ご期待ください。
自己サイト診断(4)
(A.C.ISSUE !! vol.7 2008年11月5日配信)
前回に引き続き『インフォメーションアーキテクチャー』の診断項目を書きたいと思います。
- 2.『インフォメーションアーキテクチャー』
- 静的な構造と視覚的要素としてユーザにとって情報をわかりやすく整理し、その結果がウェブサイトの構造に反映され、最適なリンクをたどり最短ルートでのアクセスが可能であるか?
これを診断するポイントは- 2-6.1つのコンテンツや機能に対して複数の名称を使用していないか?
リンクラベルやリンクテキストとリンク先のページタイトルが一致しているか? - 2-7.ウィンドウタイトルはページ内容を反映するように記述されているか?
ページ毎にページ内容を反映するタイトルがつけられており、その記述方法も全ページで統一されているか? - 2-8.重要な情報は、画面の上部に分かりやすくレイアウトされているか?
ページ上部にサイトID、主要カテゴリへのナビゲーション、ページタイトル、要約文、関連メニューなどが表示されているか? - 2-9.ウィンドウサイズは一般ユーザが使用しやすく設定されているか?
ページの制作サイズはブラウザの横幅800pxを超えていない。また、リキッドレイアウトで常にユーザのブラウザウィンドウを最大限に利用することができるか? - 2-10.ページ内で情報や機能はその関係を考慮し、視覚的にまとめられているか?
ページ内の情報をグループ化し、優先度を考慮して配置位置を決定しているか?
- 2-6.1つのコンテンツや機能に対して複数の名称を使用していないか?
今回はここまでのチェックとなります。
是非、これを元に自サイトの診断にチャレンジしてみてください。
次回は『インフォメーションアーキテクチャー』の最終回となります。
是非、ご期待ください。
自己サイト診断(3)
(A.C.ISSUE !! vol.4 2008年9月17日配信)
前回で『アイデンティティ』は完結しましたが、診断結果はいかがでしたか?
今回から『インフォメーションアーキテクチャー』を3回にわたり掲載したいと思います。
- 『インフォメーションアーキテクチャー』
- ユーザにとって情報をわかりやすく整理し、その結果がウェブサイトの構造に反映され、最適なリンクをたどり最短ルートでのアクセスが可能か? (静的な構造と視覚的要素)
これを診断するポイントは- 2-01.各カテゴリはわかりやすく分類されているか?
必要な情報が、どのメニューに含まれているか、ユーザがすぐに予測できる分類法を用いているか? - 2-02.サイト内の情報が分かりやすく、階層化されており、ツリー上に構成されているか?
1つのコンテンツを複数のカテゴリにおかず、目的のコンテンツが探しやすいか? - 2-03.1つのカテゴリの深さや1ページの情報バランスがとれているか?
情報の分類方法が整理されており、クリック数と項目選択時の効率が、低く抑えられているか? - 2-04.URLを参照してサイト構成が理解できるように名前付けに配慮がされているか?
URLを見ることにより、現在のページがサイト内のどこにいるのか、どこのカテゴリに含まれているのかが分かるか? - 2-05.サイト内の共通要素は、どのページでも同じ場所にレイアウトされているか?
ヘッダー、フッター、主要カテゴリへのナビゲーションなど、ページの共通要素がいつも同じ場所に配置されているか?
- 2-01.各カテゴリはわかりやすく分類されているか?
今回はここまでのチェックとなります。
是非、これを元に自サイトの診断にチャレンジしてみてください。 次回は『インフォメーションアーキテクチャー』の続きを掲載します。
是非、ご期待ください。
自己サイト診断(2)
(A.C.ISSUE !! vol.2 2008年8月20日配信)
前回のアイデンティティの診断結果はどうでしたか?
今回は前回からの続きで『アイデンティティ』の完結版です。
前回分とあわせた項目について、チェックを行えば、自社ウェブサイトについての『アイデンティティ』の診断はできると思います。
是非ともチャレンジしてみてください。
- 『アイデンティティ』
- はじめて訪れたユーザに対して、サイトの目的やサイト運営者の存在が明確かどうか?(表現法と運営者情報は明確か?)
これを診断するポイントは- 1-06.全てのページから運営者である学校名が確認できるか?
一番目立つ左上にロゴとサイト名(学校名)があり、デザインが統一されているか? - 1-07.運営者へのコンタクト方法が常にわかり易い場所に記載されているか?
すべてのページからアクセスでき、わかり易い場所に「お問い合わせ」「連絡先」などの内容が予測できるリンクがあるか? - 1-08.運営や情報の取扱いに必要な各ポリシーを明確に表示してあるか?
「プライバシー」「セキュリティ」といったポリシーがあるか? - 1-09.ウェブサイトのデザインは全体的に統一されているか?
ナビゲーションや情報の配置などが全て統一されたデザインか? - 1-10.他の学校名が混在していないか?
ユーザが混乱するような多くの学校名が混在していないか?
- 1-06.全てのページから運営者である学校名が確認できるか?
サイトID・サイトマップ・各種ポリシーなどユーザに対して「安心感」 「信頼感」を与えるアイデンティティはサイト内の常設メニューとして、全ページにわかりやすく設置し、全ページ同じデザインに統一することが大切です。
これで『アイデンティティ』については完結になります。
アイデンティティについては、これだけのチェックを行えばまず合格点です!
次回から『インフォーメーションアーキテクチャー』へと続きます。
是非、次回以降もご期待ください。
自己サイト診断(1)
(A.C.ISSUE !! vol.1(創刊号) 2008年8月5日配信)
現行のウェブサイトを診断することにより、そのサイトの弱点がわかり、その弱点を修正することで、より良いサイト、効率の上がるサイトとして、戦略的なサイト運営が可能となります。
また、サイトリニューアルの際にも大いに役立ちます。
「サイト診断」という言葉を聞くと、何を基準にして行えばいいのかがよくわからないと感じるウェブ担当者の方々が多いと思いますが、このコーナーでは、サイト診断を行う上で、「何を見るのか」「どこをチェックしているのか」のポイントとなる項目を、ピックアップして、数回にわたり、ご案内していきたいと思っています。
これを読んでいただければ、サイト診断は簡単にできると思います。
これを機会に是非、サイト診断にチャレンジしてみてください。
まず、ウェブサイトの『アイデンティティ』のチェックを2回にわたって掲載していきます。
- 『アイデンティティ』
- はじめて訪れたユーザに対して、サイトの目的やサイト運営者の存在が明確かどうか?(表現法と運営者情報は明確か?)
これを診断するポイントは- 1-01.トップページからサイト内の主要コンテンツが予測できるデザインになっているか?
運営者のロゴマーク、目的を示すタグラインはあるか? - 1-02.サイトと運営者との関係が、わかりやすく表現されているか?
運営者のブランド性がわかりやすい表現になっているか? - 1-03.運営者の詳細情報が明確に開示されているか?
学校案内など、校名、所在地、連絡先などの情報が常に開示されているか? - 1-04.トップページは、そのサイトの入り口とわかるように他のページとは異なるデザインになっているか?
運営者のロゴマーク、各コンテンツへのナビゲーションがあるか? - 1-05.トップページに、特に知らせたい重要な情報が目立つようにデザインされているか?
新着情報や学校のイベントなど動的内容が目立つデザインかどうか?
- 1-01.トップページからサイト内の主要コンテンツが予測できるデザインになっているか?
今回はここまでです。次回は、『アイデンティティ』の完結になります。
その後『インフォーメーションアーキテクチャー』(3回予定)へと続きます。
是非、次回以降もご期待ください。
