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

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

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

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

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

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

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

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

イメージ画像



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

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

「Googleは27日、日本の携帯絵文字をユニコードとして共通符号化する動きを支援する目的で、オープンソースプロジェクト「emoji4unicode」を公開した」

上記のニュースを聞いて、初めてモバイルサイトの案件をした時の事を思い出しました。
３キャリアに絵文字を対応するために、絵文字変換表みたいなものを用意して検証した記憶があります。

絵文字はもともと携帯電話各社が独自に作成したもののようで、機種依存文字という認識が当たり前でした。
（同一ネットワーク内での利用を前提とした規定）

しかしこのニュースによると、Googleは絵文字の全てをユニコード文字として共通符号化しようと提案しているというのです。
更に、検索エンジンで絵文字を探せば結果が返ってくるようにしたいと目標を掲げているとのこと。
そんなGoogleは情報提供のために「emoji4unicode」というオープンソースプロジェクトを開始したそうなので、詳細が気になる人は翻訳してみるといいかもです。

Google が AdWords 利用者向けにキーワードツールを公開したそうです。
「Search-Based Keyword Tool」というツールで、インターフェースは英語ですが、日本語のキーワードにも対応しています。

サイトに関連するキーワードとサイトのURLを打ち込むと、それに関連するキーワードやフレーズの中で、現在まだAdWrodsで広告を出していないものをリストアップしてくれるそうです。

（AdWrords アカウントと連動していてログインしていない状態でも使えますが、その場合表示されるキーワードの数が制限されるということ）

サイトのURLを入力すると、そのサイト内のキーワードを抽出し、月間検索数、アドワーズ広告の競合度合い、推奨入札価格などが表示されます。

キーワードの選定の際のアドバイスツールとして活用できそうです。
ちょっと的外れなキーワードも見受けられますが、今まで見逃していたキーワードが発見できるようになるかもしれません。

以前の案件の際に、SEO業者の方が言っていた内容を記事で見かけたのでメモしておきます。

ドメインを以降する際は、情報を引き継ぐために「301リダイレクト」を行うといいという内容。
GoogleもYahoo!も、ドメイン移行の場合には「301リダイレクト」を推奨しています。

また、下記のようにindex.htmlがある場合とない場合では、インデックスに問題が生じたりページランクが変わってくる場合があるそうです。
例）
http://www.spec5zigen.com/
http://www.spec5zigen.com/index.html

その場合どのように対処できるかというと、index.htmlの有無を301リダイレクトによる同一化するといいそうです。
index.htmlの有無を検索エンジンに同一ページとして認識させる事ができるということです。

Google Laboからベータ版として公開された、Google Audio Indexing。
音声認識技術を使い、動画コンテンツ内の音声を検索できるということです。
既にこういった技術は、動画検索に特化した企業や放送業界では研究され続けているそうですが、今度の動向に目を見張るものがあります。
Googleがサービス化を実現した事で感じた事は、どのようにSEO対策を考えていけばいいかということ。
動画コンテンツによるSEO対策をコマメに探してみたいと思うので、情報がキャッチ出来次第ここに共有したいと思います。

動画コンテンツは視聴者に対する訴求力が強いので、重要性が増す事は間違いなさそうです。

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

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

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

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

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

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

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

Googleが創立10周年記念企画として、面白い事をしています。
2001年1月当時のGoogle検索ページと、当時の検索結果のキャッシュを公開しているということです。
13億2692万のインデックスから検索できるらしく、7年前の検索結果が体験できます。
（2001年当時のロゴは「Google!」となっており、「!」マーク付きだったんですね。）

試しに色々と検索してみましたのですが、やはり気になるのは「スペック五次元」の検索結果。
2001年の当時は、「有限会社スペック・オースリー」から「株式会社スペック五次元」に名前が変わった年だったんですね。



ちなみに、最近出来た「赤坂サカス」で検索してみると、やはり検索結果には出てきませんでした。

検索エンジンの進化を体感しつつ、これからの検索エンジンの動向にも目を見張っていきたいなと思います。

他にも記念事業があるようですので、興味のある方は是非。
画期的アイデアに1,000万ドル

9月16日に「Yahoo!検索 インフォセンター」というものが公開されました。
知りたい情報を探す際に、米国Yahoo!にしか記載されていなくて困った事が数回ありましたが、
（その時は、翻訳機能を駆使したり誰かがblogで解説されているものを参照してました）
YSTに関する情報がしっかりと網羅されているようです。

YSTの情報だけにとどまらず、基礎的な事（metaタグに関する事etc）もカバーされているようで、
その情報は随時更新されるとのこと。

また、つい最近検索アルゴリズムもバージョンアップされたそうなので、
Yahoo!での検索がどう変動しているか、ログ収集しているサイトをちょっと確かめてみることにします。

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

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

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

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

サーバーリクエストに関して整理してみました。
ユーザビリティよりはSEOとして活用できそうです。

＊100番台→継続的な情報がある
ex)　100／continue／継続

＊200番台→リクエストの成功
ex)　200／OK／リクエスト成功

＊300番台→リダイレクトの必要がある
ex)　301／Moved Permanently／要求されたりソースは新しいURLに移動。

＊400番台→クライアントがエラーを起こした
ex)　404／Not Found／指定されたURLが見つからない。

＊500番台→サーバーが自分のエラーを検知した
ex)　503／Service Unavailable／過負荷やメンテナンスのためサーバーは一時的にリクエストを実行できない。

通常のエラーページはサーバーリクエスト404となっています。
これを、301転送をする事でサイト内リンクが増加され、サーバーリクエストを200に変更する事でサイト内リンクを読み込むようです。
（クローラーがエラーページの認識を行う）

また、404ページのデザインについて色々調べていたところ、参考になる面白いサイトを見つけました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 前回の続き

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

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

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

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

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

 

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

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

ユーザビリティについて知識を深めるにあたって、まずユーザビリティの定義を明確に理解したいと思いました。
国際規格として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.
特定の利用状況の中で、ある製品を、特定のユーザーが特定のゴールを達成するために用いる際の、有効性、効率性、満足度の度合い。

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

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

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