目指せ、Webデザイナー!

今回は、「メッセージ性」とは関係ない………

ユーザビリティとアクセシビリティ

[ リスト | 詳細 ]

大体、タイトルの通りです。
「ユーザに優しく」この一言に尽きます。
ユーザビリティは、「どれだけわかりやすいか?」「使い勝手が良いか?」です。
アクセシビリティは、お年寄りの人や、目の不自由等のハンディがある人もアクセスできるようにする、ということです。
記事検索
検索

全2ページ

[1] [2]

[ 次のページ ]

ワールドワイドなサイトに!?

テキストより引用〜
サイトの訪問者が日本人だけとは限りません。外国の人がサイトを訪れても大丈夫なように、準備をしておきたいものです。

まず、サイトの内容を全て外国語にするのはとても大変です。そのことは、皆まで言わずともわかるはずです。
ただ、ちょっとした内容と連絡先ぐらいなら簡単に作れますし、ユーザにとっても親切です。
そして、外国語は何も英語だけではありません。中国語やハングルなどでのアクセスが考えられる場合、それらも用意しておきましょう。
文字化けが心配なら、画像化しておくと良いでしょう。


自動翻訳対応に

最近は、Webの翻訳サイトや翻訳ソフトウェアの精度が上がっています。
韓国などの翻訳サイト経由で日本語サイトを訪れる方も多いそうです。

このようなサービスに対応するためには、HTMLとCSSで構造をきっちりと分ける必要があります。
W3Cが策定している、「標準仕様」に準拠していれば、まず大丈夫でしょう。


最低限の情報や慣用句は英語でも表記する

ここは、テキストの丸写しです。実際にはもっと掲載されているけれど、本当に最低限のものだけを書いておきます。

Please use Internet Explorer vesion 5.0 or higher to view this Web page.
(このWebサイトはインターネットエクスプローラーのバージョン5.0以上でご覧ください。)

We are sorry, this page is in Japanese only.
(申し訳ありませんが、このサイトは日本語のみのサービスとなっております。)


リンクが無い?

「このページはリンクフリーです」と書いてあるサイトがあります。
この「リンクフリー」と言うのは和製英語です。
英語で"Link-Free"というと、「リンクが無い」という意味になってしまいます。正しくは「許可は不要です」としましょう。

リンクフリーの英訳↓
Feel free to link to this page


「ネイティブチェック」は当てになるのか?

例えば、英語のサイトを作った場合。
知り合いにアメリカ人等の友人がいる場合「その人にチェックしてもらおう」と思うかもしれません。

しかし、我々が日本人だからと言って、必ずしも日本語の文章の校正などが出来るでしょうか?
その言語が使えれば、その言語の校正も出来る。そういうわけではないのです。

大まかな文章のチェック。ユーザテスト。その程度にしておいたほうが無難です。


見えない記号

英文の文字コードは1バイトです。もちろん、日本語などの2バイトには対応していません。

もし、英文のテキストをアップしても、全角の英数字やスペースが入っていると、文字化けしてしまいます。
外国語のWebサイトを作るときには、かならずHEADの中にMETAタグを入れて、文字コードや言語コードを指定しましょう。

もちろん、指定したもブラウザでしっかりと確認しましょう。

使いやすさをテストする?

テキストより引用〜
デザインしたWebサイトは、公開前にユーザビリティやアクセシビリティが確保できているかどうかをチェックしましょう。

アクセシビリティの検証は、専用のソフトウェアなどで出来ます。
しかし、ユーザビリティはチェックする人の主観が入ってしまうので、ガイドラインを決め手から行いましょう。


自分達でチェックするには?

「何クリックで目的のページまでいけるか」など、チェックする必要のある項目をチェックシートとしてあげておきます。
そして、製作者自らがチェックシートに基づいて検証していきます。

チェックシートの中身は、サイトの内容や対象としているターゲットによって変わるはずです。
チェックをする前に、優先順位を決めて起きましょう。

確かに、客観的に見ることは難しいのですが、練習をしましょう。
仮想人格を作るのです。「こういう人物なら、まずはここをクリックするだろうな」等。
ちょっと間抜けなように見えますが、こうするだけでも少しは変わるはずです。


協力者と一緒に

「ターゲットに近いかな?」と思うような人。「こいつは違うだろ」と思うような人。
そういった人たちに、作成したサイトを見てもらいます。

作った側は、彼らに何のアドバイスも与えてはいけません。
そうして彼らが訪問中にとった行動を記録します。ビデオなどで記録しても構いません。
そうしたら、先ほどとった記録を分析します。

訪問が終わったら、「サイトの内容は理解できたか」「わかりにくいところは無かったか」ということも、聞き取り調査しましょう。

こういったチェック方法を「ユーザテスト」と言います。
製作者の意図していない行動をとることが多いので、しっかりと分析しましょう。


外部の専門家に依頼をする

ユーザビリティ検証を専門に行っている業者があるそうです。
大きなプロジェクトなどでは、外部の専門家に依頼したほうが、細かなところまでみてもらえるでしょう。

専門家にチェックしてもらうことを「ヒューリスティック評価」といいます。


運営しながら修正を

最初から「完璧」な物を作ることはとても難しいです。
そして、Webサイトは「作れば終わり」と言うものでもありません。

サイトの使い勝手は良いか、実際にユーザに聞いてみるのも良いでしょう。
彼らの意見に、常に耳を傾けておきましょう。

ただし、ユーザはあくまでも「素人」です。必ずしも正しいとは限りません。
製作者側の考えも大切にしましょう。


アクセシビリティの検証

どんなチェックをするにも文法が正しいことが前提条件です。最低でも文法チェックをしておきましょう。
アクセシビリティは、以下のようなソフトで検証できると紹介しています。

JChecker
アートマン21(シェアウェア)
http://www.artman21.net/product/jchecker/index.html

aDesigner日本語版
日本IBM(無償ダウンロード提供)
http://www.reserch.ibm.com/trl/projects/acc_tech/adesigner.htm

Fujitsu Accessibility Assistance
富士通(無償ダウンロード提供)
http://design.fujitsu.com/jp/universal/assistance/

Webヘルパー
総務省 独立行政法人 情報通信研究機構(無償ダウンロード提供)
http://www2.nict.go.jp/ts/v862/105/accesibility/index.html

ただし、どれもWindows2000、XP又は、Mac OS X対応ソフトです。

ユーザビリティからアクセシビリティへ

テキストより引用〜
ハンディのある人や高齢者のアクセスをも保障しようと言う考えが「アクセシビリティ」です。

テキストでは、総務省によって作成された「みんなが使えるホームページの作り方」から、Webアクセシビリティ12のポイントを紹介しています。


HTMLやCSSは正しい文法で記述する

・正式なDOCTYPE宣言をつけて、自分の使うHTMLのバージョンを定義する
・FONTタグなどの、非推奨になっているタグや属性を使わない
・サイトの公開前に、必ず文法チェックをする

良く考えてみると、どれも当たり前ですね?


タグは見栄えのためではなく、構造や役割を示すために使う

・例え画像であろうと、見出しにはHタグで明確にする
・強調したいところは、EMやSTRONGタグをつけて、CSSで表示の指定をする
・ブロックレベルのタグと、インラインレベルのタグを使い分け、文章の構造単位をまとめる

ここは、ちょっとした盲点ですね? Bタグは、「太字」にはするけれども強調はしないのです。知っていましたか?


視力にハンデのある人のために

・画像はALTタグで、画像が見られなくても内容をわかるようにする
・イメージマップのリンク先には、それぞれALTタグが必要

イメージマップは使ったことがないので、イマイチ良くわかりません………


どこへ行くの?

・「ここをクリック」というリンクはNG
・勝手に新しいウィンドウを開かない
・リンクがいくつも並んでいる場合は、線や記号などで明確に区切る

「ここをクリック」と言うものは、バナー広告を初めとした、胡散臭いものばかりですね?


テキストについて

・検索や読み上げに対応するため、単語の途中に空白や改行を入れない
・機種依存の文字を使用しない
・文字の点滅や、スクロール移動での表示は行わないようにする

半角カタカナなんて、使っている人はいない、ですよね?


テーブルを使用するときの注意

・読み上げの順番に注意する
・THタグとTDタグを使い分け、構造を明確にする
・セルを分類化して、表のヘッダとデータの範囲を関連付けておく

でも、「表」としてしか使わないので、そこまで難しいものではないでしょう?


入力フォームの注意点

・入力項目・選択項目には、適切な位置に、適切なラベルをつける
・LABELタグで、項目とラベルを内部的に関連付ける
・それぞれの項目にはTABキーで順番に移動できるようにする

適切なラベル。常識的に考えて、当たり前ですね?


フレームの注意点

・各フレームの役割をFRAMEタグに明示する
・フレームに未対応を考慮して、専用の内容を用意する
・フレームの幅や高さは、出来るだけ固定しない

でも、フレームはもう使わないし……… 非推奨のタグです。


スクリプトとマルチメディア

・未対応の環境でもわかるようにする
・スクリプトが動作しなくても利用できるようにする
・マウスクリックなどのイベントハンドはキーボードでも利用できるようにする

全ての人に使えるようにするには、全ての環境で見られる必要があります。
対応していなくても、内容がわかるような作り方をしましょう。


スタイルシートを活用しよう

・CSS無しでも意味がわかるようする
・大きさは出来るだけ相対地で行う
・文字装飾のタグを使用しない

一度CSSを使うと、その便利さがわかります。
CSS無しでもわかるように、というのはHタグなどを使って文書の構成をする、ということです。


色について

・色が再現されない環境でもわかるようにする
・文字色と背景色のコントラストは十分にとる
・CSSをつかって設定をする

あと、Webセーフカラーを使うとなお良いです。


その他の注意事項

・ナビゲーション部分に「本文へのスキップ」などの読み飛ばしようリンクを
・METAタグでの自動ページ移動は行わない
・テキストだけの別ページは最終手段
・必ず音声リーダーやチェックソフトで検証を

音声リーダーは使ったことがないので、実感がわきません………


ポイント

・環境の違いに対応できる
→何も画面サイズやOSだけではない

音声リーダーにも対応できるようにする。そしてキーボードだけでもアクセスできる。これがポイントです。


感想

………ほとんどわかりません。
音声リーダーって? どう配置すれば、そういう人たちにも理解しやすくなるのでしょうか? う〜ん………

今回はほとんど写したものです。そういったことを、今まで考えたことがありませんでした………

開く トラックバック(1)

デザインとユーザビリティの両立、そしてよくある問題点

テキストより引用〜
「優れたデザイン」と言う言葉の意味には、見た目の美しさだけではなく「使い勝手の良さ」も含まれているのです。

ユーザビリティ。つまり、使い勝手。こればかり重視してしまうと、「つまらなくなってしまう」と思っていませんか?
結論から言って、それは間違いです。

デザインとは、「実用性あってのもの」なのです。実用性のないものを、デザインとは呼びません。
「アート」とは違うのです。

アートなら、「理解させる」ことが出来なくても、何かしら訴えかけられれば良いのです。
しかし、デザインにそれは当てはまりません。
デザインは、「理解させやすくする」ものでなくてはならないのです。

画像の多様

Webサイトを構成しているものはなんでしょう? そう、HTMLですね(最近ではXHTMLやXMLなんてものもありますが…)?
HTMLとは、何の略かわかりますか? Hyper Text Markup Language つまり、「超文書組上言語」というわけです。
基本は「文書」なのです。画像を入れるのは結構です。ただし、(わかりきっているように)入れすぎるとデータが重くなります。

テキストを画像化するのはオススメできません。ユーザにとって不親切です。

コントロールの強制

前回散々言ったことです。「ユーザを縛らない」。
勝手にウィンドウサイズを変えたりするサイトを、好きになれますか?


説明の不足

Webページに必要なナビゲーションやリンク。「スペースの都合で」とおざなりにしていませんか?
クリックしてみないと、どこに行くのかわからない。「これって………ボタン?」と思わせるようなデザイン。
すっきり見せるのは良いのですが、適度な説明は入れましょう。


Flash

最新のFlashにはユーザビリティやアクセシビリティを確保する機能があるそうです。
「きちんとした作り方」をすれば、Flashを使おうが問題ありません。

………しかし! 全てがそういったサイトですか?
「デザイン重視」とやらで、実用性を置いてけぼりになっていませんか?


感想

説明不足が痛いです。「スペースの都合上」と言うことで、メニューが全部英語です。
日本語は、フォントを小さくするとつぶれてしまう……… だけど、大きくすると見た目が………
………だめですねぇ………

実用性が無いと、デザインとは………

ユーザの自由を束縛しない

テキストより引用〜
Webでは凝ったページデザインをしようと考えすぎると、ユーザに操作の自由を制限させてしまうことがあります。

(見た目の)デザインだけのサイト。 JavaScript やFlashで、見え方を強制したりするサイトがあります。
 JavaScript だと、勝手にウィンドウサイズを変える。Flashだと、途中でページを変えられない。こんな感じですか?

貴方は、こういったサイトを見てどう思いますか?
プラスの印象を持ちますか? 「わーい、ウィンドウサイズを変えてくれた!」「やった、全部見ないとページが変わらない!」


テキストについて

「だって、使いたいフォントがあるから」 そういって、テキストを全部画像にしてしまったことはありませんか?
まだ、ロゴ程度なら可愛いものです。
それに、今回の内容とは関係ないですが、画像化してまで「使いたい」というフォントは読みにくかったりしませんか?

どんなフォントだろうが、そのままなら検索もコピーも出来ます。
ユーザにとって、非常に便利で使いやすいです。
もし、「コピーさせたくない」「コピーさせると困る」というものなら、PDFにしたほうが良いでしょう。
セキュリティを設定すれば、画像よりも効果的です。


印刷に関して

ユーザが、必ずしもモニタで見るとは限りません。
商品のカタログなどでは、印刷して店にもっていくかもしれません。

そのときに、必ず「カラーで印刷」されると思いますか?
会社などでは、むしろモノクロのほうが多いです。
そのことも、きちんと考えて作りましょう。


画像や JavaScript の必要性

ユーザによっては、画像の表示をしないようにしているかもしれません。
 JavaScript なんて、普通の人はオフにしていることが多いのでは(これをオフにするだけで、格段に安全性が向上しますからね)?

まず、冷静に考えて見ましょう。
名前を入力してそれを表示したり、文字を動かしたり、(閲覧者に無断で)ウィンドウサイズを変えたり…必要ですか?

 JavaScript は、CGIとブラウザのやり取りに使う。そういったところで使うぐらいなのではないでしょうか?
本当に見栄えを追及するなら、Flashのほうが良いし………


Flashだけ?

これも、人によっては無効に設定しているかもしれません。
まずないとは思いますが、プラグインを入れていない人もいます。決して100%ではないのですから。

もし、全てFlashで構成されたページだと、上記のユーザはどうすればよいのでしょう?
確かにタダでプラグインは手に入ります。しかし、そこまでして「見たい」と思えるサイトですか?

Flashは、確かに良いと思います。視覚的に訴えて、効果的だとは思います。
しかし、それだけで良いのでしょうか?

そのページを見るたびに(どうでもいいような)Flashのムービーを見なくてはいけない。
メニューを選ぶたびに、無駄なエフェクトがかかる。
サイトを開くたびに、(悪趣味な)BGM、サウンドが鳴る。
しかも、スキップも出来なければ、止めることもできない。

そういったサイトを見るたびにこう思うでしょう。
「なんて傲慢なサイトだ」

Flashのムービーも、毎回変わるのなら面白いかもしれません。
しかし、例え毎回変わったとしても、いつも「見たい」と思っているとは限りません。

何も、デザインはFlashだけではないのです。
良く「Webデザイナーを目指しています。Flashの勉強中です」なんて書いてあるサイトがあります。
そういった人は、はっきり言って視点がずれています。

Flashはあくまでも手段の一つに過ぎません。しかも、HTMLの名の通り、基本は「文書」です。
「Flashじゃなきゃダメだ。そうすれば効果は上がる」 Flashを使うのは、そういうときだけで十分です。
Flashの前に、ユーザビリティ等から勉強しましょう。


ポップアップウィンドウ

勝手にウィンドウを開く。貴方はどう思いますか?
私には「迷惑」以外の何者でもありません。中身が、広告であろうと更新履歴であろうとです。
中身の問題ではないのです。「勝手にウィンドウを開く」ことが迷惑なのです。

ポップアップウィンドウは、はっきりいって時代遅れです。
Windows XPのService Pack 2以降に入っているInternet Exprlorerでは、 JavaScript によるポップアップ(自動オープン)ウィンドウに警告を発するようになりました。
今の時代、ポップアップウィンドウに良い印象を持っている人はいないのではないでしょうか?


ブックマークは?

フレーム、Flash。これらを使用したサイトでは、目的のところでブックマークを出来るでしょうか?
「ブックマークやリンクはトップページにお願いします」
どんなに丁寧に書いたところで、「ムッ」とさせます。「私に必要な情報はここなのに………」

ユーザの印象を良くしたい、使い勝手を良くしたい、検索性を高めたい、SEOによるアクセス率を高めたい。
もし貴方が、どれか1つでも思っているのなら、全てのページに固定リンクを持たせましょう。


ポイント

ユーザはわがままです。貴方のサイトでダメなら「別のサイトで良いや。腐るほどあるし」と別のところに行かれるだけです。
デザインは、ユーザに押しつけないようにしましょう。もし貴方が「このサイトを、もう一度見てもらいたい」と思っているのなら。
悪い印象は、簡単には拭い去れません。少しでも、良い印象を持ってもらえるように努力しましょう。

そのためには、Flash以前に「ユーザに優しいデザイン」の勉強をすることをおすすめします。


まとめ

ユーザに良い印象を持たせることは、簡単です(少なくとも理屈の上では)。悪い印象を与えなければ良いのです。当たり前です。
ユーザの考え方(少なくとも自分)は「見させてもらっていますぅ」ではなく「見てやってるんだ、バカヤロウ」です。命令されてまで見る義理はありません。

ユーザに押し付けない。 JavaScript にしろ、Flashにしろ、ブックマークにしろ…ユーザは命令されることを嫌います。
どうしても使いたい、命令したいなら、ユーザに選択させれば良いのです。

全2ページ

[1] [2]

[ 次のページ ]


.
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

過去の記事一覧

標準グループ

登録されていません

たー
たー
男性 / A型
人気度
Yahoo!ブログヘルプ - ブログ人気度について

Yahoo!からのお知らせ

よしもとブログランキング

もっと見る

[PR]お得情報

数量限定!イオンおまとめ企画
「無料お試しクーポン」か
「値引きクーポン」が必ず当たる!
CMで話題のふるさと納税サイトさとふる
毎日お礼品ランキング更新中!
2019年のふるさと納税は≪12/31まで≫

その他のキャンペーン


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事