制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション

10月18日、法政大学にて次世代 Web カンファレンスが開催されました。Web に関わる技術について徹底的に話し合うイベント。セッションすべてディスカッションで勉強会というより話を聞きに行くというニュアンスが近いかもしれません。8 月に UX をテーマに議論する会を開きましたが、今年はこうした『会話』を軸にしたイベントに興味を惹かれます。 今回は、「デザイニングWebアクセシビリティ」の著者である太田良典さん（@bakera）、RDFの専門家でありコントラバス演奏者である神崎正英さん（@_masaka）と Webアクセシビリティをテーマに 1 時間ほど話をしました。私は Web アクセシビティの専門家ではありませんが、株式会社インフォアクシアの 植木真さんとのポッドキャストがキッカケで呼んでいただきました。3 者異なる視点から、Web アクセシビリティの現在と未来について話し合いました。

コンテンツ コンテンツワークシートを公開しました デザインと同じくらいコンテンツには時間とコストがかかります。コンテンツの設計・開発を進めるためのチェックポイントや始め方をまとめた文書「コンテンツワークシート」を GitHub で公開しました。 課題が多いコンテンツ設計 昨年、マルチデバイスを見据えたコンテンツ設計というセミナー＆ワークショップを全国5カ所で開催しました。未知のデバイスも考慮し、特定の見た目に捕われないコンテンツ設計と管理をするための考え方や手法を紹介した講座。参加者から高い評価をいただきましたが、幾つか課題が見えてきました。 マルチデバイス以前にコンテンツが設計できる状態とは言い難い 制作ワークフローのどこからどのように始めるのか不透明 コンテンツ設計・開発には時間がかかるが理解されていない 受講者の中には、講座の内容は十分に理解できたものの、どのように活用すれば良いのか

人間像ではなく動機や文脈を明確に プロジェクトを本格始動する前にペルソナを設定することがあります。様々な背景の方がデザインプロセスに参加すると、何をもって『良い』と判断すれば良いのか分からなくなることがあります。ペルソナは、このプロジェクトにおいて適切な『良い』を判断する際に役立ちます。 ペルソナには「人/登場人物」という意味が含まれていることから、表層的な人間像（性別、年齢、出身地など）を描かなければいけないと考えがちです。しかし、それはペルソナを設定することにおいて、それほど重要ではないと思います。私はペルソナを1枚のシートにまとめることがありますが、見た目やライフスタイルといった属性は、詳細まで掘り下げていません。ほとんどの場合 2 〜 3 つくらいのリストにして省略しています。 代わりに「なぜ、人はプロダクトやサービスと触れ合うのか」という部分を、ペルソナを通して語るように心がけて

LINE, WhatsApp, Facebook Message のようなメッセージアプリの魅力のひとつに「情報の流れが制御できる」ところがあると思います。１対１の会話が中心なので、ノイズが少ないですし、情報を追いかけるのも容易です。Jelly のように、メッセージアプリのような表現がメッセージアプリ以外で見られるようになってきているのも、今の利用者に求めらている情報の形だからなのかもしれません。 今、UI デザインという観点で注目しているのは、この『メッセージ型 UI』で、どのような形状が人と情報とのやりとりに最適なのかをよく考えています。メッセージアプリだからといって、写真やテキストを送り合うチャットだけのために使うわけではありません。オススメのお店、地図、記事、レシピ、レビューなど様々なコンテンツが会話の中で共有されますが、それが最適な形で表示されているのかというと、そうではありませ

UXデザイナーと名乗る方にとって、体験という主観的かつ概念的な要素をいかにして測定し、価値を見出すのが課題のひとつです。それについては「UXの測定項目を考えてみた」という記事で候補になりそうな項目を幾つか挙げて解説しましたが、項目を考える上で常に UX (User Experience) とは何か？という質問に辿り着くのではないでしょうか。UX に興味がある方、又は仕事としている方はそれぞれ自分で UX を定義していると思いますが、明確なラインが引けないですし、すべて自分で出来るというものではないので説明が難しい言葉です。Webデザインより説明が難しいと感じることがあります。 「UX」とひとことで言い表すことが出来るわりには、包括する分野が非常にたくさんあります。UX を作り手、顧客、マーケットなど見る切り口によって違ってきますし、数多く存在するアプローチは分断しているのではなく、密接に入

「UXの測定要素」で最初にスピードを挙げたのは、Webの体験において近年重要なポジションになってきているからです。ブロードバンドだからこそスピードを要求されますし、モバイルだと欲求はさらに高まるでしょう。プログラムがより早く動作するように記述の工夫や構成の検討したり、CSS や HTML といったマークアップからでもパフォーマンスを上げることが出来ます。こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。 例えば、トップページのように様々な導線も含まれた情報量の多いページがあるとします。技術的な工夫を施し、表示速度が早いページにしたとしても、情報が入り組んでいて利用者が見つけ難い構成であれば「時間がかかる＝遅い」と感じるでしょう。「２つ以上の製品を比較したい」「製品の特徴を把握したい」という利用者に明確な目的がある場合はどうでしょうか

日本でも UX デザイナーと名乗る方が増えてきましたが、去年あたりから Web では一種のバズワード的な存在になっている UX (User Experience)。『バズワード』と書きましたが、重要と感じている方が多くいるからこそ注目されているわけですし、流行から次のステージに進んでいるのも事実です。デザイナーと呼ばれている方はもちろん、Web サイトを構築する様々な職種の方が UX に反応しているのをみると、ひとつの共通言語 (認識) として重要なポジションになる可能性を秘めています。 ユーザーテスト、ペルソナ設定、アジャイル開発など、水準の高い UX を実現するための様々なアプローチが存在しますし、今でも模索が続けられています。作り出すほうだけでなく、作った後、つまりサイトの測定方法はどうでしょうか。UX を意識して作ったまでは良いですが、それをどう評価すれば良いのでしょうか。ページビ

Google Waveは、Web上でのコラボレーションをより効率的に行うための新しいツールになる可能性があります。今までメールでやりとりでしてきたことを Google Wave で代替することで、情報のズレや漏れを防ぐことが出来るかもしれません。Google Wave 以前からも「メールは時代に合っていない。新しい形が必要だ」と言われていましたが、依然メールは仕事においてよく使うコミュニケーションツールですし、様々なデータが添付されてくることがあります。 新しいツールを使わない（使われない）理由として Web リテラシーを挙げる場合がありますが、これも一概にいえません。RSS や Gmail を使いこなしている Web に詳しい方でもファイルはメール添付で送ってくる方がいます。「Dropbox とか便利ですよ」とサービスを紹介してもメールで添付してくる方もいます。その方は Web を基軸に

Webデザインアイデア Webデザインについて何を勉強したいですか？ サステナビリティ, 行動やふるまい, アウトソーシング, 類型学, サービスデザインなど一見 Web デザインと直結していないように見えても重要になるであろう分野が幾つかあります。あなたならWebデザインについて何を勉強したいですか？ 終わりがないのが辛いと感じる場合もありますが、終わりがなく新しい技術やアイデアが紹介され、常にエキサイティングでいられるのも Web の魅力です。技術やノウハウの習得だけでなく、情報収集することは Web デザイナーとして必須の業務といえるでしょう。学びたい技術はたくさんありますが、少し先を見据えた勉強もしてみたいですよね。すぐに使えなくても、次のステップへの手がかりになることはたくさんあると思います。その興味が IA かもしれませんしアクセス解析かもしれません。どの分野でも自分なりに消化

Webデザインプレゼン 3.4.U!で情報とテクノロジーの変化について話しました 2009年10月8日、JWDA・CSS Nite・PCC の共同イベント 3.4.U! にて「コミュニケーションの変化からみる今後のWebデザイン」とう題名で講演をしました。毎回セミナーに行くと数人知っている方にお会いするのですが、今回はほとんどいなかったので少しだけアウェーな感じがしました。それも恐らくビジュアルデザインやマーケティングなど Web という共通項があるものの、違う立場で仕事をしている方が集まるセミナーだったからかもしれません。こうした場にあまり参加したことがなかったので、新鮮でもあり良い体験をさせていただきました。私の前に話をした un-T factory の中川さん、ニューロテクニカの細野さん共にプレゼンが上手だったという意味でも刺激になりました。 いろいろ技術が出て来ては消えています。人

なぜ 404 ページが表示されたのか、そして利用者が出来る次のアクションが何かがみえてきました。これからいよいよ大まかなレイアウトのスケッチに入るわけですが、もうひとつ考えておきたいことがあります。ページに表示させたい項目だけでなく、必要でないと考えられる要素も洗い出しておくと、スケッチが最初の段階からある程度洗練されたものになります。 通常のページでは必須項目でも目的が絞られてるページだとそうではない場合があります。「あっても良い」「もしかすると誰か必要になるから」くらいの要素は目的が絞られているページでは省いてしまっても良いと思います。要素を最小限に絞り込むことで、ページで伝えたい目的がより明確になるでしょう。サイト内のリンクからで 404 が表示される割合より、サイト外からのアクセスで 404 が多く表示されています。そこで、サイト内でいろいろ読みたいけど行き詰まった人というよりかは

Twitterのほうでひっそりと告知しましたが、404ページのデザインを変更してみました。なぜこんなところから始めたのかというと、サイト制作でいつも後回しになってしまう部分なので考えてみたかったですし、1ページ完結型なので早く形に出来るというのが理由です。いわゆるエラーページなわけですが、「見つかりませんでした」という結果表示ではなく何か補助出来ないかというのがテーマでした。 機械的なエラーの表示の仕方はケアが必要です。多くの利用者はエラーをみると、たとえシステムエラーでそうなったとしても、自分のせいにしてしまう場合があります。メッセージの出し方によっては「何か誤操作をしてしまったか」「そもそも何が起こったの？」「もしかして壊した？」といった感情を引き出してしまう可能性があります。利用者が悪くないのに、悪いと突き出してしまうような見せ方だけは避けなくてはいけません。 専門用語を使ったり、簡

どうやったら人がもっとサイトに訪れるのか？ これは Web サイトを構築・運営においてよく耳にする質問ではありますが、投げかけるべき質問なのかどうか疑問です。私が知っている方の多くは質の高い HTML マークアップが出来る方が多く、妙な SEO トリックを使うことなく検索エンジンの上位に作成したサイトを表示させることが出来るでしょう。しかし、Web サイトにたくさんの方が多く訪れたらそれで良いのでしょうか。1日に数百万の方がアクセスするようになったとしても、彼等がそこで何もしなかったら意味がありません。Web は世界中に広がる大きなネットワークですが、Web だからこそ量ではなく質がものをいいます。訪れる人たちを顔が見えない数字として捉えるのではなく、どのような人たちに来てもらいたいのか、何を提供出来るのか、何を利用者にしてもらいたいのかを問いかけなければいけません。 つまり「どうやったら

Macユーザーではありますが、10月発売が決定した Windows 7 は結構期待しています。Vista で見つかった問題をどのように解決したのかという点も気になりますが、パソコンを利用する方達にどのようなソリューションを提案しているのかも興味深い点です。既にスクリーンショットやスクリーンキャストがウェブ上で出回っていますが、期待値が上がる UI や機能が幾つかあります。 Windows 7 のデスクトップはどのようにデザインされたのでしょうか。今年3月に開催された MIX09で、マイクロソフト シニア UX デザイナー Stephan Hoefnagels 氏が「Designing the Windows 7 Desktop Experience」というプレゼンをしました。デスクトップの細部にフォーカスして徐々に問題解決し、目指すゴールに近づけるプロセスを分かりやすく説明しています。以下

前回の共創に必要な価値観という記事で、幾つかある共創のタイプ、そしてその特徴について紹介しました。市場に新たな価値を生み出す鍵といわれていますが、IDEOの Tim Brown も共創が今後の経済に必要だと考えている方のひとりです。Ideas Project のインタビューシリーズに彼が出演しているのですが、そこで様々な興味深いアイデアを提案しています。 よいサービスとは、消費者/利用者が何もしなくて済むものではなく、消費者が参加したくなるようなものを指すと Brown 氏は説明しています。 参加型の経済メカニズムを専門用語でいうと参与型経済 (Participatory Economy)と言います。労働者と消費者が共創するモデルで、資本主義経済とは異なりますし、すべてを中央化して平等に分け与える社会主義モデルとも異なります。80年代〜90年代にうまれた用語ではありますが、それ以前から参与

新しいビジネスが必要とされているのと同じように、教育においても21世紀という時代に合った形が必要とされています。教育は常に変化し続けていますし、必要とされていることと言っても様々な視点があります。IDEOの考える未来の教育の姿はどういったものなのでしょうか。「IDEO’s Ten Tips For Creating a 21st–Century Classroom Experience」で10の項目に別けて解説しています。以下に簡単に要約したものをリストアップしてあります。いかにも IDEO らしいリストといったところでしょうか。 押しではなく引く 生徒からたくさんの質問が生まれるような環境をつくる 関連性を持たせる 教えているコンセプトを直接体験し、話し合えるようにする ソフトスキルと呼ぶ時代ではない クリエイティビティやコラボレーションといった従来は『あると良いスキル』と呼ばれていたが

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリ

３年前に Doug Bowman が Google に参加したニュースを聞いたときは、意外な組み合わせだと感じると同時に今後どう Google が変化するのか楽しみになりました。彼がどのように Google に関わったかどうかは知りませんが、表に出る出ない関係なく様々なレイヤーにおいて影響を及ぼしたと思います。そして、先日 Goodbye Google というエントリーで Google を去ることになったと告げています。次どのような活動をされるのか楽しみではありますが、エントリー内には気になる部分も幾つかあります。 彼は文中で「エンジニアばかりの企業になると、問題をいかに処理 (engineering) するかが話の中心になる」と書いています。主観をすべて省いてデータから答えを探るアプローチ。Google はどの青が良いのかインハウスで決めず41種類の青を使って、利用者がどの青を好むのかデ

「シンプル」はデザイナーがよく使う言葉のひとつ。サイト構築をする際もシンプルにすることを考えることがあると思います。しかし、シンプルという言葉の使い方や捉え方は人によって異なる場合があります。要素や機能が絞られていていたり、色彩の使い方に対してシンプルと呼ぶことがありますが、それだけではありません。また、要素が多いからといって複雑ではなく、シンプルと考えられる場合もあります。シンプルとは視覚だけでは語られませんし、むしろ文脈や内面的なところから生まれてくる価値ではないでしょうか。 例えば mixi をはじめとした SNS には様々な機能や情報がひとつのページに盛り込まれています。見た目は大変複雑ではありますが、毎日使っている方にとっては苦になりませんし、自分がやりたいことを自由に出来れば、そのサイトは「シンプルである」と表現するでしょう。機能が絞られていて、簡単そうにみえる Twitter