今回もNPtech.jpをネタに、というかこのテーマでは最後のエントリーにしようと思ってるんですけど、タイトルどおりいろんなツールをうまく使って、クオリティを引き上げましょうという話です。もちろん、ケースバイケースによってほかのツールを使えばいいし、もしくは使わなくてもよいものもあります。

ではさっそくみていきましょう。

アクセシビリティ

Fujitsu ColorSelector

背景色と文字色の色をスポイトで抽出して見やすさを判断してくれる。デザインのカラーリングを決めるときの参考に。

aDesigner

IBM産のアクセシビリティチェックツール。とにかく必須。

WebInspector

WebサイトのWebコンテンツJISへの適合度を確認してくれる。

WebコンテンツJIS

日本規格協会が2004年に制定した高齢者や障害者がWebサイトを利用するときにWebアクセシビリティを向上させるために制定された規格。たまに読み直したりして、頭をブラッシュアップしたりするとか。

Web Content Accessibility Guidelines 1.0

W3Cが1999年に策定したWebアクセシビリティに必要な必要な14のガイドラインを策定。こちらもたまに読み直す程度かな。

ユーザビリティ

ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン

手前味噌で恐縮だけど、ざっくりとしたチェックには一番使う。

ディグダグテキストテスト（Web標準の日の益子さんのスライド、PDFの34ページあたり）

テキストを大きくしたりしてレイアウトの状態を見る。あまり流行っていないっぽいけど、個人的には好きな手法（特に文字サイズを大きくする可能性が高いシニア向けのサイトを作るからかな）

デバッグ用CSS「Diagnostic Styling」

はい、またもや自分のブログからですね。これ、常時Stylishに入れておくと便利なんです。

あとは、

• 画像を非表示にしてみる
• CSSを切ってみたりする
• Validate忘れずに
• Google Webmaster Central、Google Analytics、Yahooサイトエクスプローラーあたりは入れておくとのちのち便利だよね
• FeedBurnerは対象ユーザによってかな。

あたりかなと。

かなりざっくりとしたチェックポイントですが、やらないよりかはやったほうがマシ。一度ご自身のサイトを見直してみるよいきっかけになると思います。

さて、今回で第10回ということでちょうど締めにはよいタイミングなので、パーソナルブログの作り方も終えたいと思います。次回は年が代わったあたりくらいにまた何か書ければいいですねー。

さて、今回はパーソナルブログの作り方もお休みして、海外のちょっとしたデザインルールの惰訳です。元記事は、Shneiderman’s Eight Golden Rules of Interface Designより。

1. 一貫性を維持する。
2. アクティブユーザがショートカットを使えるようにする。
3. 意味あるフィードバックを用意する。
4. システム間のつなぎ目が分かるようにデザインする。システムはあるタスクの固まりが複数連結して構成されているものだ。ユーザはその固まりを1つ処理できたと分かることによって、満足や安心を得られるものだ。
5. 簡単にエラーを処理できる。
6. やり直しをできるようにする。
7. システム内部の動きが把握できるようにする。特にそのシステムに慣れた人はそのもの自体に責任を持っているし、その動きにどんな意味があるのかを知りたいものだ。
8. 人間の短期記憶に負担をかけない。

シンプルだけどよいガイドラインですね。特に、4はなるほどなーとちょっと考えさせられました。ちなみに、著者のBen Shneiderman氏はこんな人みたい。

あと、インクルーシブデザインワークショップ with Re:Creator’s Kansaiはまだまだ募集しています。

プロトタイピングの必要性

さて、前回のセス・ゴーディンの訳文から今回はNPtech.jpを題材としたパーソナルブログの作り方の話に戻ります。

今までのプロセスというのは大まかに言ってしまうと、

• クライアント、閲覧者の明確化
• それに合わせたコンテンツ、デザイン（要はuser experience）の整理

というのをやってきたわけです。それらの整理された情報をどのようにサイトとして反映させるのかということになります。整理しただけでは意味がないですよね。

その第一歩として取り上げるのがプロトタイピングです。日本語に訳さなくてもお分かりだとは思いますが、「試作品」ですね。

ここで、一度試作品とは何ぞやということをちょっと考えてみます。試作品はなぜ作るんでしょうか。その必要性を考えるためには、ご自身のこんな経験を思い出してもらうとよいかもしれません。

• クライアントがデザインを気に入ってくれない。
• ディレクションが甘くニーズを引き出せていなかったため、必要な機能が足りていない。
• デザイナー、ディレクター、クライアントがそれぞれ全く違うものをイメージしていた。

などなど。

こんなときにいきなりモックアップレベルのクオリティの高いものを作ってしまうと、その修正が難しくなってしまいます。そこで、まずは試作品を作り、というよりも試作を重ね、徐々に完成品に近づけていくというプロセスが重要になってきます。このあたりはHuman Centered Designなどを参考にするとよいと思います。

プロトタイピングの作成

プロトタイピングを作成する方法、ツールはいろいろとあります。いくつかピックアップしてみます。

• PowerPoint
• Visio
• イラレ、フォトショ
• Dreamweaver
• 手書き（ペーパープロトタイプ）
• Omni Graffle

などです。僕がおすすめというかよく使うのはPowerPointです。PowerPointを使ってどのようにプロトタイプを作成すればよいのかについてはパワーポイントでプロトタイピング（日本語訳） – TRANS [hatena]を参考にしてください。

実際のプロトタイピング

下記スクリーンショットが実際に僕がNPtech.jpを作っていた際に作ったプロトタイピングのデータです。なんとなく雰囲気はお分かりになってもらえるでしょうか。

正直、プロトタイピングだけを考えると作業工程が増えてしまうという点ではあまりプラスにはならないのですが、やはりこの段階をきっちりと踏まえておくことで完成度の高いパーソナルブログを作成することができます。