コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
ジェスチャーUIの課題と対策
タブレットやスマートフォンで積極的に導入されているマルチタッチテクノロジー。デジタルなオブジェクトに触れているような感覚が味わえるタッチインターフェイスは、抽象的なマウス操作に比べて直感的だと言われています。スクリーンに触れるだけの動作は直感的で簡単そうですが、これにジェスチャーが加わることで突然ややこしくなる場合があります。感覚的・直感的というよりかは、操作を覚えなくてはならない負荷がかかる可能性もあります。 未来のインターフェイスを語る上でよく出て来るのが映画『マイノリティ・リポート』。この映画に登場するマルチタッチ UI の技術は一般化されつつあるといっても過言ではありませんが、大きく腕を振りかざし、長時間立ち続けなければならないのであれば、すぐに疲れてしまいそうです。トム・クルーズ並みの強靭な身体でないと使えない・・・なんてことになると困りますね。 例えば Mac OSX とその上
インテルのソーシャルメディアガイドライン
インテルは比較的早い時期からブログを始めており、更新頻度も高くコメントも受け付けています (日本語版はこちら)。ブログというツールは気軽に導入出来たとしても、顧客と企業を繋げるひとつの窓口として運営していくのは大変なことです。インテルほどの大きな企業がどのようにソーシャルメディアと付き合っているのでしょうか。インテルでは Intel Social Media Guidelines というガイドラインを設けています。ブログだけでなく Wiki や SNS にも通じるこのガイドライン。当然インテル向けに書かれている内容ですが、応用出来そうな内容です。 ブログを長くしている方にとっては『当たり前』な内容かもしれませんが、社内やチームの共有ツールとしてこうしたガイドラインはあったほうが良いでしょう。 透明であること ブログを書く際は本名を書き、何の仕事をしているのか明示すること 慎重に情報を公開
メタファーが作り出す期待値と使いやすさの関係
Webをはじめとしたテクノロジーを利用したものには、馴染みのない機能や象徴的で捉え難いアイデアがあります。それらをスクリーンショットで見せたり、分かりやすい解説があったとしても伝わらない場合が多いです。そこで、他にある似たようなものと関連付けさせて理解しやすくします。これを私たちは「メタファー」と呼びます。 メタファーはパソコンの中にたくさん見ることが出来ます。アイコンデザインがその代表格です。絵としてフォルダを表現することで、頭の中で「幾つかの書類をまとめることが出来る」という本物のフォルダと関連付けがしやすくなり、操作を促すことが出来ます。フロッピーディスクアイコン (保存)のようにメタファーからシンボルへと進化した例外もありますが、機能やインタラクションを説明せずに利用者に伝えることが出来るメタファーは、アプリケーションデザインやWebデザインでよく使われます。 メタファーが作り出す
1991年の資料から学ぶ情報デザインチェックリスト
Web デザインをきっかけに知ることになった方も多いと思いますが、IA (Information Architecture) の歴史は長く 30,40 年ほど遡ることが出来ます。IA と明確に書かれていない書籍でも IA に関わる資料が昔からたくさんあるわけですが、当時はどのようなことが書かれていたのでしょうか。今と変わらないもの、そして今とは違う事柄はあるのでしょうか。Volkside の「17 guidelines for better information architecture…from 1991」という記事で Kent L. Norman が執筆した「The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface」という書籍が紹介されています。 1991
UXの測定項目を考えてみた
日本でも UX デザイナーと名乗る方が増えてきましたが、去年あたりから Web では一種のバズワード的な存在になっている UX (User Experience)。『バズワード』と書きましたが、重要と感じている方が多くいるからこそ注目されているわけですし、流行から次のステージに進んでいるのも事実です。デザイナーと呼ばれている方はもちろん、Web サイトを構築する様々な職種の方が UX に反応しているのをみると、ひとつの共通言語 (認識) として重要なポジションになる可能性を秘めています。 ユーザーテスト、ペルソナ設定、アジャイル開発など、水準の高い UX を実現するための様々なアプローチが存在しますし、今でも模索が続けられています。作り出すほうだけでなく、作った後、つまりサイトの測定方法はどうでしょうか。UX を意識して作ったまでは良いですが、それをどう評価すれば良いのでしょうか。ページビ
読まなくなった私たちと「読む」の今後
今、書籍を読む人たちはどれくらいいるのでしょうか。学生の頃はたくさん読んでいましたが、今は減ってきています。そもそも書籍を読むということが時にストレスがたまることも少なくありません。はやく要点に辿り着いて欲しいと感じる事もあれば、検索が出来ないのでとても不便と感じることもあります。 お菓子コンテンツが愛される 少ないメッセージやちょっとしたリンクであれば Twitter で十分役割が果たせるので、このサイトでは情報を盛り込んだ読み応えのある文章にするよう心がけています。Web には他にもたくさんの長文と呼ばれる記事はありますが、本のボリュームで考えると数ページの話です。それですら私たちは「あとで読む」とタグ付けをしてブックマークの奥底に放置します。むしろ、長文は読者受けされにくく、ザッピングに最適化されたリストや Tips が多いのが現状です。 このサイトでも長文かリスト形式の Tips
複雑をシンプルにしても駄目な場合
「シンプルがベスト」という言葉はデザイナーでなくてもよく使う言葉です。しかし、すべてをシンプルにしてしまえば良いというわけではありません。シンプルの反意語で「複雑」という言葉があります。しかし、英語の「Simple」の反意語には「Complicate」と「Complex」という２つの言葉があります。いずれの単語も日本語にしてしまうと「複雑」になってしまいますが、使い方が違います。そして、「Complicate」をシンプルにするのと、「Complex」をシンプルにするのは意味が異なります。 「Complicate」は込み入ったものや困難という意味がありますが、「Complex」は幾つかの部品からなる複合体、入り組んだという意味が含まれています。共に複雑に構成されている可能性がありますが、必要なもので作られた複合体（Complex）だとしたら、シンプルにするのは難しいです。つまり、「Compl
ゲームにもあるProgressive Enhancement
Progressive Enhancementは、Web サイト制作の取り組み方にも影響する重要なトピック。Web 特有の考え方だと思われるかもしれませんが、ゲームの世界では随分前から Progressive Enhancement をゲーム開発の一部として取り組まれています。 上の画像は「Crysis」というファーストパーソン・シューティングゲームのものです。同じゲームですが、少しだけ違う見た目を提供しています。ユーザーが影やテキスチャの質を自由に調整することが出来るので、環境により違う見た目になっています。素晴らしいグラフィックが特徴の Crysis ですが、こうしたハイスペックのゲームを古いパソコンで遊ぶとフレームレートが激減し、肝心のゲームが遊べなくなってしまいます。もちろん、開発側は最高の環境で遊んで欲しいことを願っていますが、それをユーザーに強制することは出来ません。そこで古い
決して使いやすいとはいえないタッチUI
iPhoneの登場以来、国内外問わず多くのスマートフォンがタッチスクリーンを採用しはじめています。これからのユーザーインターフェイスはタッチスクリーンだと感じている方もいるかもしれませんが、利用者はどのように感じているのでしょうか。Canalysという調査会社がヨーロッパのモバイルユーザーにタッチスクリーンに関する反応をまとめています。 Survey reveals extent of shift in mobile UI preferences この調査によると、次のモバイル機器の購入の際、指で操作するタッチスクリーンにしたいと考えている方は 38% にのぼり、スタイラス式（16%）の購入を考えている方を大きく上回ります。このようにタッチスクリーンの注目度は高いですが、既にタッチスクリーンの携帯電話を利用している方の反応は少し違います。Canalys の調査によると、47％の利用者が次の
見た目と使いやすさの素敵な関係
Web は、受動的に「観覧する」というより、能動的に「利用する」という特色が強いです。それゆえ、高いユーザビリティが求められますし、試行錯誤を続けている方もいると思います。ユーザビリティを洗練させることで、より人に使ってもらえる (売り上げに貢献する) Web サイトになると考えがちです。極端な例だと Google がそうで、見た目はともかく使いやすいさ、使い心地を徹底的に追及しています。では、使いやすければ好感度も高く満足されるサイトなのかといえば、実はどうでもないようです。 Wichita State University にある Software Usability Research Laboratory で、サイトの見た目とユーザービリティの関連性について調査を行っており、その結果が Web サイトに公開されています。 Visual Appeal vs. Usability: Wh
Pixelmator 1.5 : could
ソフトウェア Pixelmator 1.5 以前からお勧めソフトとしてセミナーなどで紹介していた Pixelmator。仕事に使えるというよりかは、Photoshop Element の代りになるくらいの位置づけでしたが、先日リリースされた 1.5 でその考えを改めなければならないと思いました。 以前からお勧めソフトとしてセミナーなどで紹介していた Pixelmator。仕事に使えるというよりかは、Photoshop Element の代りになるくらいの位置づけでしたが、先日リリースされた 1.5 でその考えを改めなければならないと思いました。 Webサイト制作をしている方にとって今バージョンで最も大きなニュースは「Web用に書き出す」と「スライス」機能が追加された点にあります。以前から JPG や GIF への書き出しは可能でしたが、画質設定をリアルタイムで見ながら確認出来るようになりま
好ましいという感情と使いやすさの関係
もう2年以上前の話になりますが京都で講演をしたとき、利用者に響くWebサイトにおける構成要素を幾つか紹介しました（スライドはこちら）。機能性や有用性のようなユーザビリティに関わる要素だけでなく、有意義や満足度といった感情に関わる要素も紹介しました。利用者へよい体験を提供したいと考えているのであれば、こうした感情的な要素は外せません。利用者にとって有益なコンテンツを提供しているかどうか判断する上でも感情的な部分はひとつの測定要素といえるでしょう。人間のもつ特性や要因を把握し、利用者に良いと思ってもらうようにデザインすることを「Desirability」と呼ぶことがあります。 あまり聞かない言葉ですが、Useful, Usable and Desirable: Usability as a Core Development Competenceという Desirability に関する記事をマ
Progressive Enhancementに関する調査結果
もう１ヶ月前になってしまいましたが、ついに結果を発表出来るようになりました。有効回答数は 134 とサンプルとしては良い数になりました。ひとつの調査結果として捉えるには十分な数ですが、私のサイトと Twitter で告知したということもあり、若干偏っている可能性があるのでご了承ください。前回のTwitter経由でいただいた回答も一緒にご覧になるとおもしろいかと思います。 回答に参加していただいた皆様、本当にありがとうございました。 回答された方の役職はコーダーとデザイナーが半数を占めるものの、様々な役職の方が均等にいるという印象があります。今回は複数回答をアリにしましたし、特にこれといった定義付けもしなかったので、立ち位置を自分なりに考えてもらった結果が反映されています。ブロガーと名乗る方も 9% いらっしゃるので自分のサイトで何か情報発信をしつつウェブサイトの仕事に携わっている方が少なく
Ask Twitter: ウェブサイトの見た目は同じにしなければならないか？
やっと明日に結果レポートを出せる状態になったので、まずは Twitter 経由でいただいたウェブサイトの見た目や Progressive Enhancement に関する意見をまとめて紹介します。アンケートだけでなく、こうして意見まで送っていただき感謝しています。140文字内でこれだけの情報を詰め込めるのかと関心してしまう意見も多数です。 Progressive Enhancement を簡単に説明すると「ブラウザに応じて最適だと考えられるインタラクションと見た目を提供する」になるかと思います。ただ、この説明文だけ読むとブラウザによって異なるデザイン／レイアウトを作らなければならないという印象を与えかねません。実際はそうではなく、新しいブラウザで見ると text-shadow を利用して可読性を少し上げているといった小さなことでも Progressive Enhancement に該当しま
PowerPoint を使ったプロトタイピング
プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Ex
企業がTwitterをするべきではない10の理由＋
海外では Twitter をカスタマーサービスや利用者とのコミュニケーションツールとして利用しているところが増えてきています。自動車メーカーではFord、GM、Honda。スポーツだとChicago Bulls、San Diego Chargers。他にもComcast、Travel Channel、DirecTV、Best Buy、Starbucks、Burger Kingなどなど。参加する企業の数は増え続けています。 Twitterは気軽に参加出来るサービスですが、コミュニケーションとしてではなく、単なる宣伝ツールとして使うとかえってマイナス効果になりかねません。企業によっては Twitter を使う体勢になっていない場合もあります。Top 10 Reasons Your Company Should Not Tweetという記事で、その企業が Twitter をするべきではない10の
Datamoshingによるミックス映像
Kanye Westは、毎回おもしろいミュージックビデオをリリースしていますが、「Welcome To Heartbreak」のビデオはテクノロジーの側面からみて非常におもしろい作品です。様々なシーンがひとつになった独特な映像は「Datamoshing」と呼ばれる技法。色や動きの情報の扱い方はコーデックによって異なり、データを編集することで、ミュージックビデオのようなエフェクトが作れるそうです。例えば Hex Editorのようなソフトを使って生データを開き、指定のコードを『壊す』ことでエフェクトが作れます。 Datamoshingは、David O’ReillyとTakashi Murataによって開拓された表現方法。Takashi Miura の作品は こちらのページで見ることが出来ます。 ミュージックビデオとして Datamoshing を採用したのは Kanye West より C
Firebug用リファレンスツール「Firescope」
サイト構築の際、欠かせないツールのひとつといえば Firebug。JavaScript を使ったウェブアプリケーションのデバッグだけでなく、サイトデザインをしている方にとっても便利なツール。テストの際、レイアウトが崩れていたとしても Firebug で調べればだいたいのことは解決します。この Firebug のコンパニオンツールが Firescope です。 Firescope は、Firebug 内で CSS/HTML のタグの意味や使い方をチェック出来るツール。インストール後、Firebug のパネルに新たに「Reference」というタブが追加されます。HTMLビューや「調査」の際に選択したタグと下階層にあるタグの意味が Reference に表示されます。最新のブラウザだけですが、その場でサポート状況も見れるのは便利です。もっと詳しく知りたい方は提供元の Sitepoint のペー
UIデザインガイドラインのまとめ : could
UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
