９月号のぶっちゃけでメインコラムを担当した営業の成田がWEBブラウザについての記事を書いておりましたが、ちゃんと読んでもらえたでしょうか？

※弊社発行のぶっちゃけ（正式名称：五次元通信 ぶっちゃけ。２）をご存知でない方は、営業の成田までご連絡ください。（無料）

まだ読んでない人の為に簡単に説明すると、ブラウザの種類やシェア・拡張機能の説明などを取り上げた記事となってました。

記事の中の社内アンケートでは、Fire foxを使ってる割合が１番多かったのですが、僕もその中の１人です。便利そうなアドオンを見つけては実装して楽しんでいますが、そんなFire foxのデフォルトの機能でとても便利なものをご紹介します。

ログインのIDとPWを忘れた！という瞬間に直面するのは日常茶飯事ですが、そんな時に役立つのがこの機能です。

まずはログインページで右クリックをし、ページ情報表示をクリックします。

セキュリティの中からパスワードを表示をクリックすると、保存されたパスワードが表示されます。

実はこれ、最近知りましたが知らなかったの自分だけ？

情報を保存してる場合は、逆に閲覧できてしまうのでくれぐれもご注意を！

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

携帯電話で、サイトを閲覧する際にはどんな検索をしていますか？

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

学校の裏サイトによるいじめや、有害サイトの悪影響を取り上げたニュースをよく耳にするようになりました。
そこで、どれくらいの小中学生が自分のPCを持っているのか調べたところ、約2割が自分専用のパソコンを所有しているというデータが出ているそうです。（キッズリサーチ調べ）

子どもの安全確保のため、自分が親だったらどうするかなと色々調べていたところ、小学生・中学生のために作られたサービスが意外と多い事に気付かされました。今まで知る機会がなかったのですが、yahoo!のポータルサイトも子ども向けが存在していたのです。



Yahoo!きっず／日本

Yahoo!きっず／韓国

Yahoo!きっず／アメリカ


あの有名なニュースサイトにもありました。
アサヒ・コムきっず


このような子ども向けサイトには、「使いやすさ」が凝縮されているように思いました。
大人になるにつれてムダな知識が増える分、「ものの伝え方」が本質から外れ複雑になってしまう面が多々あるように思います。
時にはこのように、視点を変えて物事を考えるのも必要だと感じさせられた月末でした。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

バイラルアドという言葉がよく聞かれ、自分自身も個人BlogでYoutubeの動画を貼りつけて紹介した事がありますが、最近はトレーラームービーと呼ばれる表現がよく話題になっています。


ワリオランドシェイク

誰もが見慣れているYoutubeというインターフェイス上で展開される事で、「通常こうだ！」という常識がいい意味で裏切られ、インパクトの強いものになっていると思います。

常識が覆される広告手法については、トヨタのbBが有名かもしれません。
常識を打破したトヨタ「bB」の販促手法
新型bBを「音楽プレーヤー」として宣伝→「トヨタ、ミュージックプレーヤー発売。」と訴求

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

僕の地元である山口県では今、「インターフェースの未来」をテーマにした展覧会が開催されています。
正月休みを利用して、宇部空港から車で行ってきました。今回は展覧会のレポートです。

「ミニマム インターフェース展」が開催されてている山口情報芸術センター（YCAM）では、「コミュニケーションデザインをインターフェースから考える」というテーマの元、8組のアーティストによる展示がしてあります。とても面白かったので、簡単にご紹介します。

■フライヤー　"on the Fly"
展示会場に置いてあるフライヤーが、各展示物のナビゲーションとして機能します。
16個の穴があいたフラーヤーを上からセンサーが感知し、フライヤーが置かれたと認識されます。
16個の穴が各インフォメーション機能となっており、穴を指で1つふさぐとテーブル上に詳細情報が表示されます。
更に展示物の方向に矢印が伸び、展示物の横に置いてある説明ボードがライトアップされるといった流れです。
フライヤーを裏返すと英語版になるのですが、
一旦持ち上げられてまたテーブルに置かれるといったアクションが数秒の間に行われた場合＝紙が裏返されたと判断する
といったロジックが組まれているようでした。
実際に使ってみると、単純に面白いという身体感覚と共に、直感的に情報を認識できるといった２つのメリットがあるように思いました。



■電子楽器　"reacTable"
Bjork（ビョーク）がワールドツアーで演奏された事がきっかけとなり注目を集めたとYCAMの担当者が言っていました。
説明するより見た方が早いと思うので、映像でご確認ください。





円卓上にオブジェを置く事で、音が発せられます。
オブジェが複数置かれると、個々の関連性により新たな音が作り出されます。
ボリュームやキーの高さ、テンポなどもすべて円卓上で操作する事ができ、自分で簡単に音楽が作れる楽しさや、複数人とで創出される音楽を楽しむ事ができます。

インターフェースは、もともと「境界」や「界面」を意味するそうです。
視覚・聴覚・触覚を駆使しながら情報と人が繋がる仕組みを、デジタルサイネージという形で実現してくれると思います。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

色の使い方によって、そのサイトが与える印象は大幅に変わると思います。
PC上で色を調べる際に、Digital Color Meterを使ったりしますが、雑誌の表紙などのアナログから色を拾い出すサイトを発見しました。

また、色によるレイアウト検索が可能なサイトでは、サムネイルをクリックすると拡大表示され、そのレイアウトで使われているカラーパレットが下に登場します。そのパレットのどれかひとつをクリックするとまたその色が使われたレイアウトのサイトがソートされます。

色味って凄く大事だし、扱いが難しいなと思う僕は、今後活用させて頂こうと思います。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

インターフェイスを考える上で、アイコンの存在ってかなり大きな役割を担っていると思います。複数ページに渡って展開されている情報が閲覧しやすいようにナビゲーションとしての機能を果たし、視覚効果が得られるからです。

普段使っているPCしかり、日常の生活シーンを思い浮かべても色々な場面で目にします。
ユーザビリティを考慮する上で、必要不可欠な存在のようです。

一口にアイコンと言っても様々ですが、ハイクォリティのアイコンセットが集約されたサイトがあります。「50 Most Beautiful Icon Sets Created in 2008」と題されたトピックスで魅力的なアイコンが参照できるのでチェックしてみてください。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

Web上で表現していたアプリケーションをデスクトップ上でも同様に表現できるウィジェットやAIRなど、僕の周りでは最近話題に出てくる事が多いです。

逆に、ブラウザのウィンドウをデスクトップのように利用して、ブラウザ内にウィンドウを表示する事も可能なようで、Mocha UIというものを使います。

イメージ画像



http://mochaui.com/demo/
Mocha UIは、MooToolsというajaxライブラリのCanvasタグのグラフィック機能を活用して開発されたUI。

拡大・最小化・閉じるボタンがあり、マウスのドラッグ操作での移動も可能です。
また、ページ内に複数のウインドウを生成する事ができます。
使い勝手も良さそうで、UIの１つとして面白いなと思いました。
使い道や汎用性などを考え、いつかの提案材料として頭の片隅に置いておきたいと思います。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

Amazonなどの EC サイトで、「この商品を買った人は、こちらの商品も買っています」と表示され、そのままクリックしてしまう経験がよくあります。
最初は情報を一方的に探していたのに、徐々に関連情報に「出くわす」といった具合に欲しい情報が導き出されます。

これは、レコメンデーションエンジン（推奨エンジン）と呼ぶそうで、ユーザーの購入履歴や閲覧情報から個人の趣味・趣向を分析し、関連した情報を推薦してくれます。

しかし、誰かにプレゼントする為に商品を購入した場合、その購買行動はレコメンドが行われてしまうので、本来自分が欲しい情報とはかけ離れた履歴が参照されてしまう事があります。

とある記事に、
購買行動には「自分自身がどのような商品を好んでいるのか」という属性に加えて、「今どのような商品が見たいのか」という方向性がある。前者は購買履歴から推し量ることが可能だが、後者は購買履歴からでは判断できない。
と書いてありました。
TPOが大切だそうです。

いかに的確なレコメンデーションを行うかというのが今後の課題のようですが、ＡＬＢＥＲＴという会社が「画像とイメージワードのマッチングエンジン」という新技術を2009年1月に発表する予定だそうで気になってます。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

最近引っ越しをしまして、神奈川県民となりました。
その際、物件を探していた際にお世話になったのが近所のピタットハウスです。

同社の記者発表で、「物件情報サイトがリニューアルされた」というニュースを発見したので、
気になり早速チェックしてみました。
pitat.com（ピタットコム）

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

例えば、PC上で電話番号を記入する際、自分ならどういう風に書くでしょうか。
「090-1234-5678」
「090(1234)5678」
「090 1234 5678」
「０９０ー１２３４ー５６７８」

と、可能性としては色々考えられます。
ということは、人によってさまざまな形式で記入するということです。
そのため、エントリーフォームではユーザーの認識（入力形式）を合わせる必要があります。

前提としてまず認識しなければいけないのは、ユーザーが間違えずにエントリーフォームを入力することなど期待してはダメ。
ユーザーは常に間違えるもので、その間違いをどうすれば減らすことができるのかを考えることが課題となりそうです。

以前にフォーム作成の際に参考にさせて頂いたサイト

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

ユーザビリティについて中原が記事を書いておりますが、これはWEBだけでなくデジタルサイネージの分野、特にタッチパネルコンテンツの考え方も同じだと思います。館内案内などの施設で考えると、対象がほとんどの人ですので、UDを意識してボタンとして認識しやすいデザインや、ボタンの配置場所も考えなくてはいけません。目的のページに分かりやすく誘導する事が重要ですので、WEBのようにグローバルメニューを上に置くと、子供や車椅子のユーザーが障りずらい事とか問題が出てきます。そういった場合はボタンを下に集中させるとか、上下に配置するなど使いやすい工夫が必要になってきます。また、デジタルサイネージですと画面大きいモニタや、縦型・横型などありますし、ミッドタウンにあるようなモニタを斜めに低く配置している例もありますので、その設置方法に合わした画面設計も必要になってきます。いくらが遷移しやすいように画面設計にしても、画面に触られなければ意味がないので、コンテンツに触れていない状態の時にどうやって人を誘導させるかも非常に重要な事です。この辺を今後考えていこうと思います。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

「ピクトグラムって素晴らしい！」と以前から思っていました。
マーク、アイコン、サイン、シンボル、絵文字などとも呼ばれると思いますが、それ自体が意味をなすという国境を越えた伝達手段として重宝されていると思うからです。
それらが使われる場所は、空港などの公共機関をはじめ、道路標識、電化製品、デジタルコンテンツの中にも多く見受けられます。

ピクトグラムは原則として「事前の学習や特別な知識がなくても理解できるもの」と定義されているようですが、これはWEBサイトの作成段階でも議論されるところかと思います。
例えば、目的とする商品やサービスをユーザーが探しやすいように分類・整理し、認識しやすいようにピクトグラムによってユーザビリティの向上を図る事は１つの形かなと思います。

WEBサイトのみならず、ピクトグラムの活用は無限大です。
ちなみに、先日行われた北京オリンピックのピクトグラムは甲骨文字だそうです。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

障害のあるユーザーに対して考えなくてはならないのが、操作のしやすさです。
マウス操作が困難な状況にある人（視力の関係でマウスポインタが見づらい人や、身体的な理由からマウスポインタを正確に制御できない人）のために、キーボード操作を配慮したUI（ユーザーインターフェイス）設計が必要となります。
（「JIS X8341-3：高齢者・障害者等配慮設計指針」に明確に記載されているようです）

その配慮としては、Tabキー/Enterキー/矢印キーを使って操作可能にすることが挙げられますが、よく感じるところで、フォーム入力などでその機能が発揮されると思います。自分自身もよくキーボード操作をするコンテンツの１つです。
テキストボックスやラジオボタンにアクセスキーを設定し、キーボードのみでアクセス可能なコンテンツにした方がいいのは当たり前ですが、これはSEO対策にも関連してくるようです。（検索エンジンに優良なサイトとして評価を得られるため）

また、「電話番号」や「郵便番号」など入力方法が複数考えられる場合は、入力例を明記する配慮も必要です。
自分自身がそうなのですが、入力が終わってからその入力例や制限に気づいてしまうという経験はよくあることです。
経験を生かした改善というのも視野にいれつつ、これからは以前にも増して色々な角度・視点からサイトを閲覧していきたいと思います。

キーボードユーザーインターフェイスのガイドライン（Microsoft）

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

携帯サイトは画面が小さいく、PC程操作性がありません。
「若年層はPCよりも携帯の使用頻度が高い」とは聞きますが、個人的には携帯での情報収集は面倒に感じます。
携帯サイトを閲覧する時、ページの移動をアクセスキーを駆使して行っていますが、これはユーザビリティの一環だと思います。

以前携帯サイトを作成した際、色々考えらされたのはこのアクセスキーの使い方です。
・この機能は、ユーザーの学習性が必要となるため、サイト内で一貫性を保つ必要がある。
・サイト全体で頻繁にアクセスを見込むコンテンツに割り当てる。

携帯サイトの場合、操作性がユーザーの利用に大きく影響されると思われます。
アクセスがしやすく操作性の高い設計を心がけるために、インフォメーションアーキテクチャと呼ばれる観点からも色々考えていきたいと思います。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

ユーザビリティを考慮したWEBサイトを作ったとしても、効果測定をしない事にはそれが正しいのかどうかさえ分かりません。 ユーザビリティとは、日本語で言うところの「使い勝手」や「使いやすさ」に該当しますが、HCI（ヒューマン・コンピュータ・インタラクション）という分野では、「人間がどれだけ容易にコンピュータと対話しながら操作できるか」と定義されているようです。

という事は、ユーザビリティの良し悪しを判断するには「評価」という形で問題点や改善の余地の抽出する必要がありますよね？

通常はいくつかの行程に分けて行われるようですが、その評価手法の１つとしてアイトラッキングというものがあります。 （※被験者を設け、ユーザーの目線（軌跡）をビジュアル化するもの）

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

ネタ自体は古いのですが、色々調べていた時に発見したのでご紹介します。
Google Labsにて公開されている、視覚障害者向け検索サービス「Google Accessible Search」というものです。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

 前回の続き

ユーザーにとっての一貫性を保持するためには、ユーザー環境に合わせてあげる事が必要なようです。というのは、windowsとmacの２種類のプラットフォームが存在する時、windowsが定めるガイドラインとappleが定めるガイドラインとで方針が異なるからです。

例えば以下のようなUIの違いがあります。
　・ブラウザの閉じるボタンがwindowsでは右上でmacでは左上。
　・アプリケーションのダイアログボックスの「はい」と「いいえ」については、windowsは「はい」が左でmacはその逆。

個人的にmacが好きという事もありますが、iPhoneやiPod touch が多くのユーザーに愛され使用されていると現状と将来性を考えると、appleが定めるヒューマンインターフェースガイドラインというものに準拠したユーザーインターフェイスを意識する必要を感じます。

 今回話題に挙げたガイドラインについては英語版しかweb上で発見できなかったので、翻訳機能を駆使するなどして更なる理解を深めていきたいと思ってます。ただせっかくの機会なので、webの世界にとどまらずプロダクトや構造物、システムなどのインターフェイスやユーザビリティの考え方もちょっとずつ調べていくつもりです。

何かあれば情報提供宜しくお願いします。

 

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

お問い合わせフォームなどに必ず出現する「確認ボタン」と「キャンセルボタン」。
多くのサイトがそうしているという理由で、いつも左に「キャンセル」右に「確認」という配置が頭にあり、個人的にも違和感なく操作ができていました。

ただ毎回疑問になっていたので色々調べていると、「ダイアログボックスをデザインするたびにその都度判断するよりも、各プラットフォームでの慣習に従う方が大切だ」とヤコブ・ニールセン博士の記事を発見しました。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

ユーザビリティについて知識を深めるにあたって、まずユーザビリティの定義を明確に理解したいと思いました。
国際規格としてISO9241−11に以下の通り定義されているようです。

Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
特定の利用状況の中で、ある製品を、特定のユーザーが特定のゴールを達成するために用いる際の、有効性、効率性、満足度の度合い。

上記の文章が表現しているのは、「万人受け」ではなく「ある特定の人の為の」という意味に言いかえる事ができると思います。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/

スペック五次元の各ディレクターは、それぞれテーマを掲げ、この「SPEC5ZIGEN Director's Blog」に情報を投下し共有する事となりました。

僕中原は、以前までSEOについて情報収集していたのですが、「サイト（コンテンツ）さえよければSEOをする必要がない」という仮説を勝手に立てて、サイトの価値を決めるユーザーインターフェイスから、まずは勉強したいと思ってます。

WEB・CG・デジタルサイネージコンテンツ・Papervision3D　制作会社
スペック五次元HP　　http://www.spec5zigen.com/

自社運営サイト　自動車モデリングデータ販売
CGデータバンク 　　http://www.cgdatabank.com/