以前、こんなWEBUI設計ツールが欲しいなぁ～と考えてメモしていたものがあったので、丁度タイミング的にも良いので公開してみます。

誰か作ってください！

・webアプリ

・画面ごとに記述できる

・Visio,Excelみたいな作成方法

・パーツを選んで置くことで追加される

・パーツの配置場所と大きさはマウスで自由に決められる

・webページのパーツを網羅している

・パーツに様々な情報を付加できる

    ・属性

        ・ラベル名

    ・アクション

        ・リンク先

        ・ダイアログ

    ・選択肢項目

        ・選択肢の項目・並び順

        ・選択肢のデフォルト

    ・list項目

        ・並び順

        ・件数

・画面の表示の設計をすると、半分くらい入出力仕様もできる

・言語を切り替えられる（日本語、英語、ベトナム語など）

・パーツごとに説明用ブロックを付加できる

    ・パーツとブロック間に矢印をつけるかどうか選べる

    ・説明用ブロック表示/非表示

    ・パーツにonmouseすると説明が記述されたブロックがフォーカスされる

・パーツごとに入力項目が違う

・フリー入力エリアがある

・自動でXXXXできる

    ・自動でサイトマップができる

    ・プレビューモードで画面遷移くらいは試せる

    ・html出力ができる

・印刷時にページの枠が決まっておらず、書いてある部分がページとなる(Judeのような感じ)

    ・エクセルは印刷範囲で似たようなことができるので良い

    ・visioは用紙サイズで画面の範囲が決まってしまう

    ・ただし、プレビューモードやhtml出力を考えると、領域は決まっていた方が望ましいかもしれない

    ・htmlの画面領域と「htmlの画面領域を編集し、付加情報をつけるビュー」の画面サイズの問題

・アクションチェーン

    ・button,linkなどにはアクションを付加できる

    ・アクションは１つだけでなく、連続できる必要がある（ダイアログを表示→「はい」ならXXXへ遷移など）

    ・undoができる

    ・バージョン管理ができる

        ・バージョン管理システムとの連動？

    ・用語管理

        ・用語登録しておくと、一箇所修正するだけでその用語が使われている場所が全て書き換わる

「フランチャイズオーナーになりたい」でも触れましたが、情報をしっかりとメンテナンスするということは、大切だけどとても難しいことです。

先日の「地方自治体Webサイトのユーザビリティ評価（引越し部門）2007 結果報告会」で受賞されていた地方自治体さんでも、リンク切れが問題になったりとか、情報の整合性を課題に挙げている方もいらっしゃいました。

そのように考えていくと、公演で篠原さんが管理画面のユーザビリティについて触れていたのも分かります。「どうせ管理者が使うページだし」ということで、お客様自身も「使えればよい」というような考え方をする場合が多いですが、管理画面のユーザビリティを向上させることが、結果的に、フロント画面のユーザビリティの向上にもつながるといえます。

また、自分が日常的に悩んでいる情報の整合性の問題といえば、仕様書の整合性があります。機能的には変わっていないのに、言葉が変わった為にいくつものドキュメントを修正しなければいけないなんてこともよくあります。

もし、仕様書作成ツールが高機能で、情報の整合性を自動的にとってくれれば、いくつもの場所を修正するなんていうことに無駄に時間を消費せずに、仕様書の持つ潜在的な（システム化されたときの）ユーザビリティの向上のために時間を割けるかもしれません。

more…

と考えているAさんが、食事中にこのような風景を見たら、どうするでしょうか？

早速電話してみましょう。

ではどこに電話しますか？

?

写真では分かりづらいですが、上の白いのが紙ナプキンで、下の緑色のがトレーに載せるシートです。

紙ナプキンとトレーシートの両方に「フランチャイズオーナー募集」というようなことが書かれているのですが、よく見てみると電話番号と担当部署が異なっています。

では改めて、どちらに電話しますか？

答えとしては、「どちらに電話しても問題ない」かもしれませんし、「どちらかは使われていない」かもしれません。真偽の程は分かりませんが、いずれにしても少し迷うのは間違いないと思います。

more…

昨日、2008/04/17に、HCD-Netで地方自治体Webサイトのユーザビリティ評価（引越し部門）2007の結果報告会が開催されたので参加してきました。

当機構では、昨年に引き続き「地方自治体Webサイトのユーザビリティ評価（引越部門）2007」と題しまして、 人口13万以上の地方自治体（市区レベル）305の皆様のサイトから6つのユーザビリティの優秀なサイトを選定いたしました。

by HCD-Net イベント・講演のお知らせ

実際参加してみると、予想していた以上に参加者が多く賑わっていました。

また、結果報告の後に「WebサイトにおけるCMSの現状と今後～コンテンツマネジメントとユーザビリティ～」ということで、海外から戻ってきたばかりのソシオメディアの篠原さんの講演を聴く事ができました。

Webでは、CMSという言葉が先走ってしまっていて、「コンテンツマネジメントとは？」という本質を考える機会がなかなか無いので、頭の中を整理するためにもとても為になりました。（コンテンツマネジメントについては、DESIGN IT! 2007でも取り上げられていて、すごく参加したかったのですが出来なかったので･･･。）

ということで、結果と簡単な説明です。

more…

ノルウェーにあるユーザービリティの専門会社「NETLOFE RESEARCH」が、「Bad Usability Calendar」を配布しているとのことで、早速ダウンロードしてみました。

ちなみに右はWorld Usability Day 2007カレンダーです。

Bad Usability Calendarは色々な言語のバージョンがあるのですが、その中の日本語版については、ブログ「could」の長谷川恭久さんが翻訳してくださったとのこと。

Bad Usability Calendarの中身自体はカレンダーとして考えると「こんなのやる訳ないよ」というような感じのものもいくつかあるのですが、これがカレンダーじゃなかったらと考えると、良かれと思ってやってしまっているかもしれません・・・。良い例だけでなく、悪い例を頭に刻んでおくというのも効果的だなぁと思いました。

more…

ウェブサイトの中では、日付を入力させるシチュエーションって結構多いと思います。

1つの日付の入力であれば、カレンダータイプのデートピッカーが沢山公開されていて、それを利用すれば、わかりやすい入力方法を提供することが可能です。

ですが、日付の範囲を入力させたい場合はどうすればよいでしょう？

開始日と終了日にそれぞれカレンダーを付けるよりは、このsliding date-pickerを利用したほうが、利用者に分かりやすく、手間が少ないため、ユーザビリティが高くなると思います。

範囲指定の場合には使ってみてください。

more…

画面全体を使って何かの作業を行うようなアプリケーションの場合、常に表示されるメニューを用意しておくと、その分使える領域が小さくなってしまい、不便なことがあります。

そうでなくても、例えば、メイン領域に項目が多い表を表示したい場合などには、メニュー部分が無ければもっと広く使えるのに･･･思うことが無いでしょうか？

そのような場合に、このSexy Sliding Javascript side bar menuを使うと、メニューを表示したり非表示にしたりエフェクト付きで切り替えることができます。

表示・非表示を切り替えるだけであれば、他の方法でもいくらでもできますが、このスクリプトの良い点は、隠れたり、表示されたりという動きがきちんと表現されているところと、ラベル部分がツマミのようになっていて、「引っ張り出せる」ことをアフォードしている点です。

more…

Photo SliderはJQueryベースで動く画像表示スクリプトです。

「詳細ページに一覧も載せておく」でも書きましたが、詳細画面に一覧があると便利なことが多いです。画像の場合には、詳細+サムネイルということになりますが、その際の一つの選択肢になると思います。

サムネイル部分が動くことによって、視覚的に楽しむこともできます。

ただし、サムネイル数があまりにも多くなってくると、使いづらいような気がするので、サムネイル数が数個の場合には使ってみても良いのではないでしょうか？

more…

私が所属している会社でも昨日入社式がありました。

私が入社したのが丁度2年前だったのですが、この2年間は本当にあっという間でした。2年間働いて見て感じたことを書こうと思います。

ベンチャーというと、何かと「スピードが速い」というイメージがあるのではないかと思います。

• プロジェクトのスピードが速い
• 個人の成長のスピードが速い
• 会社の成長のスピードが速い

また、小さい組織だからこそ「色々なことができる」ということも良く言われます。

そこで自分について振り返ってみると、確かにスピードは速かったし、色々なことにチャレンジさせてもらいました。成長についても、入社前に自分が考えていた以上にできているのではないかと思っています。

そのような中で感じたのが、

 

「速く成長できるからといって、他の人が経験するであろう失敗をスルーできるわけではない」

「速く成長できる分、人より多く失敗しなければいけない」

「失敗したらその分成長すればよい」

 

ということです。

more…

よくある遷移として、一覧→詳細という遷移のパターンがあります。これは複数のデータの中から一つを選んで詳しく見る場合には一般的な遷移だと思います。

このとき、特に何も考えないとコンテンツの構造としては、以下のような形になります。

この形式の場合、一覧ページで見たい情報を選択し、同ウインドウで遷移し、閲覧が終わったら一覧ページに戻って、別の情報を選択するという動作を繰り返す必要があります。または、別ウインドウで開くとすると、詳細ページを見終わった後に、そのページを閉じるということを行う必要が出てきます。

more…