ユーザーエクスペリエンス・デザイナーとリサーチャー

eface lab.コラム（学校法人阿佐ケ谷学園）より抜粋

2006年後半あたりから、名刺の肩書きに変化が出てきました。特に「Webデザイナー」と記していた人たちは、エンジニア系とデザイン系に分かれ、デザイン系ではUIやインタラクションデザインなどに分岐しています。

私たちは、かつての「Webデザイナー」職から高度化した「情報構築」の仕事を切り離し、その仕事に携わる人たちを（米国の事例にあわせて）「Front-End Architect（フロントエンド・アーキテクト）」と呼び、カリキュラムを作成しています。

現在、急増している肩書きは「ユーザーエクスペリエンス・デザイナー」で、大きな企業でも目にするようになってきました。元はWebデザイン全般をおこなっていた人ばかりで、ビジュアルセンスと技術スキル（HTMLやCSSのコーディングなど）を共存させつつ、コンテキスチュアル・インクワイアリーなどの分野で新たなスキルを磨いています。

テクノロジーに依存する業界では、肩書きも流行のように変化していきますが、段階的に詳細化され、より専門的な仕事として発展している様子がわかります。

今日は、Googleの人材募集の情報をご紹介しておきます。

ユーザー エクスペリエンス リサーチャー - 東京

必要な経験 / スキル:

• ヒューマン コンピューター インタラクション、コンピュータ サイエンス、認知心理学、もしくは関連する分野の学位
• ユーザー リサーチの手法に関する学位もしくは実務経験
• ラボでのユーザービリティ スタディ、フィールド スタディ、ユーザビリティ調査 （ヒューリスティック、ウォークスルーでの認知）
• 卓越した分析能力、テスト ユーザーの動作に対する注意力
• 口頭、記述における高度なコミュニケーション能力 （簡潔かつ有効に調査結果を伝えられること）
• スケジュールの変更や、異なったタイプのプロダクトに順応して、必要に応じて新しいユーザー リサーチの手法を開発することができる柔軟性
• エンジニア、プロダクト マネージャー、UI デザイナーを含むクロスファンクショナル チームでチームワークを行える協調性
• リサーチ方法や統計の経験
• 英語で業務がこなせるレベルの英語力

あると望ましい経験 / スキル:

• 文脈調査（コンテキスチュアル インクワイアリー）、紙のプロトタイピング、カード ソーティング、ペルソナなどの早期のユーザー リサーチ手法
• 実験や調査のデザイン、分析
• アクセシビリティとユニバーサル デザイン
• ウェブサーバー ログ データの分析
• ウェブデザイン/HTML
• プログラミング/スクリプティング
• アイトラッキング
• モバイル機器向けアプリケーションのテスト

ユーザーエクスペリエンス デザイナー - 東京

必要な経験 / スキル：

• ユーザーリサーチの手法に関する学位もしくは実務経験
• 卓越したビジュアルデザインセンス
• HTML、CSS のスキル
• 素早くプロトタイピングを行うための JavaScript に関する知識
• ウェブ上でのインタフェースデザインの経験
• 英語で業務がこなせるレベルの英語力
• チームの一員としてコミュニケーションでき、リーダーシップがあること

参考：「Google で一緒に働いてみませんか？」

メイクアップと画像処理の連携

この分野は、フィルムのオプチカル技術からノウハウが引き継がれており、意外に歴史があります。私は、1980年代中頃に広告用ビジュアルのオプチカル合成を学びました。

Model Evolution With Makeup And Photoshop（左）
http://jp.youtube.com/watch?v=pcFlxSlOKNI

Movie Poster Photoshop Editing（右）
http://jp.youtube.com/watch?v=sZiaf2NGtwA

私も昨年、同様のテクニックで画像処理をやってみました（※このような画像処理は仕事ではなく、あくまで個人的な趣味です／老後の楽しみのひとつ）。
若い頃に学んだオプチカルのノウハウがPhotoshopでも役立っています。

参考：
過去の大量のブックマークから、（個人技などを中心に）吟味しつつ再生リストに登録して共有しています。

• YouTube - common style.
  ［再生リスト：アーティスト・テクニック］

個人のリスト「YoujiSakai's Playlists」

Rubyの普及と技術者育成

NaCl 特別企画「Ruby、Ruby on Rails講師養成講座」

まちづくり三鷹は、三鷹ICT事業者協会、NaCl（ネットワーク応用通信研究所）と連携して、2008年春に「オープンソース人材育成事業組合」（有限責任事業組合）を設立。
Rubyの開発者である、まつもとゆきひろ氏が所属するNaClの協力を得て、10月下旬から来年1月まで「ルビー講師養成講座」を開催する。この事業は、総務省の情報通信人材研修事業の助成金約400万円を活用して実施される。
三鷹地域にはおよそ100社のSOHOが集まっており、渋谷などと並ぶ都市有数のIT企業拠点となっている。
（日本経済新聞 9/21）

参考：
小飼弾のアルファギークに逢いたい
Ruby on Rails作者 David Heinemeier Hansson（前編）　
RubyでRailsを書いたわけ

DHH：いろんなPerlソースを見ていると，頭が爆発しそうでした。なぜかというと，どのコードを見てもスタイルが それぞれ違って，正しいのはどれかがわからない。それぞれおもしろいんだけど，自己主張が激しすぎると感じました。一方で，Rubyで書いたものはどれ も，同じことをする場合はだいたい似たように見える。この「統一感」がすごく重要でした。

達人プログラマー Dave Thomas（前編）　
RubyにはMatzの受けた教育，宗教とかすべてが反映されている

弾：Railsの弱点は？
Dave：それは簡単です。あまりにWebアプリケーションというものを簡単に見せてしまったことでしょう。Railsのビデオを見ると，本当に誰でもWebアプリケーションを作れるんだっていう気になります。それで動くものはできるんですけども，きちっと動かし続けられるようなものを作るというのは別問題ということを忘れちゃうわけです。だから，Railsの人気が出てから，不安定なサービスというのがいっぱい出てますけども，それが理由だと思います。

事例「Eric Meyer’s CSS SCULPTOR」

制作会社向け意見交換会 - 9/30

テーマ：
「TV-Webとセッティングゼロ・スタートの設計思想（１）」

今回は、デジタルテレビ上でプレビューする構造化ドキュメント（HTMLなど）の扱いやワークフロー、自動化の事例についてお話しする予定です。

デジタルテレビに関してはディズニーの事例が最もわかりやすいのですが、その前に現状把握の意味でパソコンベースのWebを取り上げます。自動化についてはリクエストの多かったCSSデザインツール（Eric Meyer氏の冠がついた）「Eric Meyer’s CSS SCULPTOR」を検証しましたので、報告会にて発表いたします。

デモの内容：
Adobe Dreamweaver CS3 上でCSS SCULPTORを起動させ、3カラムのエラスティックレイアウト（スクリーンレイアウトおよびプリントレイアウト）生成までのプロセスを紹介しながら、ポイントを解説します。

Adobe Dreamweaver CS3での展開方法について解説します。

ブラウザ・プレビューについての解説をします。

common style. のサイトをCSS SCULPTORを使って構築するデモをおこないます（今回はパソコンベースの解説です、ご了承ください）。
技術者やデザイナーの作業をどのように形式知化し、データベースおよび自動化ツールに落とし込むか等、重要なポイントのみ簡潔にまとめます。

尚、ビデオ資料などはYouTubeなどで公開し、幅広く共有したいと思っていますが、許諾が難しい場合は参照リンクにとどめます。

参考：

Eric Meyer’s CSS SCULPTOR

Let Eric Meyer, renowned CSS master, help you create the custom Web standards compliant, CSS-based layout you want and flatten the CSS learning curve. Start by choosing from any of the 30 included layouts—and then modify the design to the max: change the page width and position or number of columns. Specify margins and padding for any page element along with type properties for paragraphs, headings and link states. Bring in background colors, background images (repeating or not) or any style of border. Eric Meyer’s CSS Sculptor generates styles sheets for both screen and print in one operation. You can even save your modified layouts as new presets to be easily re-created or modified further. Bring the master’s touch to your designs with Eric Meyer’s CSS Sculptor.

コラムの連載

新しいコラム、連載開始しました。Web標準ではなく、Web標準「的」‥という表現にしているとおり、さまざまな解釈を取り入れた内容になっています。
実は、第一回の原稿は2ヵ月以上も前に書いたのですが‥私のスケジュールミスで怒濤の書籍執筆ラッシュに入ってしまい、かなり公開が遅くなってしまいました。

• 集中レクチャー「”Web標準的”サイト、完成への道」

gihyo.jpで連載しているコラムも滞っておりますが、そろそろ‥

• 「読むウェブ 〜本とインタラクション」

その他、ペンネームで書いているコラムは（領域がまったく異なるので）個人サイトにて、リンクを掲載しておきます。

書籍の進捗、やっと‥作業量がピーク時の半分以下となり、原稿書きのスピードは加速中。FG本とFS本はそろそろ終了、X&C本は追い込み、続くDW本も序盤から飛ばしています。一段落したら韓国で肉体労働が待っていますので、（イスに浅く座ってつま先に体重をかける等）足腰を鍛えながらデスクワークしています。

感動の創出 - プロジェクトメモ［01］

eface lab.で進めている暗黙知プロジェクトのメモ
（当プロジェクトは2008年より活動を開始する予定です）

YouTubeなどの動画共有サービスの登場によって、世界中の形式知に触れることが可能になりました。染め織物業界における知識コーディネーター（悉皆業）のような人たちも登場していたり、世界各国の「知」で勝負する現場の様子をみることができます。市販のビデオやDVDでは絶対に出てこない映像なので新たな発見も多いですね。

現在、身体知を中心としたソースをYouTubeで共有しています（再生リストへの登録は、数日前からのんびり進めています）。

• YouTube - common style（再生リストの「アーティスト・テクニック」を参照）

YouTubeで共有できないソースはオリジナルのブックマークに登録中。このブログでも紹介していきましょう。
今日は描画に関する表現技法。素晴らしいアニメーション作品です。

Tragic Story with Happy Ending
A film by Regina Pessoa

• オフィシャルサイト
• 表現技法の解説（右側の写真「Techniques (in french)」をクリックすると動画が再生されます）

Best of Swiss Web 2007

Kongresshaus 16. Mai 2007 - Die besten Schweizer Web Auftritte wurden ausgezeichnet und actionTV war dabei.
actionTV : Best of Swiss Web 2007

Best of Swiss Web 2007

‚Best of Swiss Web’ ist der wichtigste Schweizer Award für Internet- und Mobile-Projekte. Seit 2001 fördert die ‚Best of Swiss Web Association’ - zusammengesetzt aus dem Branchenverband simsa (swiss interactive media & software association), der Fachzeitschrift Netzwoche und rund 90 Jury-Mitgliedern - mit diesem Preis die Schweizer E-Business-, Internet- und Mobile-Branche.

Silverlight系リッチWebのアクセシビリティ

SilverlightとFlashによるリッチWebのテスト（レポート用メモ）
リッチWebとOSのアクセシビリティツールがどのように連携すればよいのか検証。Windows Vistaのアクセシビリティツールと併用してみる。

私がアクセシビリティの学習を始めたのは1997年の「Active Accessibility」リリース時ですが、OSのアクセシビリティツールについての取り組みは1992年頃から。
尚、ウェブ・アクセシビリティに関してはW3Cの資料を参照。

参考記事：
「アクセシビリティへの取り組みの歴史」

ちなみに、高齢者向けのパソコン教室では「拡大鏡」などのアクセシビリティツールの使い方を最初におこないます。Webサイトの閲覧補助においてもOSのアクセシビリティツールを使っています。
このような学習環境では、Webサイト内のアクセシビリティ機能（文字拡大など）はテキスト情報しかサポートしていないため使用されません。

参考記事：
「Windows Vistaのアクセシビリティ機能」

検証サイトは以下の2つ

• Silverlight & Live Search「tafiti」
• REMIX07 TOKYO

勉強会メモ「イリュージョン・ビジネス」

10月 - 勉強会のテーマ
「ユーザー教育プログラム」

• 「Club Penguin」徹底研究
• チュートリアルの文法「参考：Club Penguin Guide」
• バーチャルワールドに慣れてもらうためのユーザー教育

講義「バーチャルワールドの世界観をつくる」

• カスタマイズ可能な20のアバターを使用します
• キャラクターサンプル（※Flash Playerで再生）
• 「非日常性」と「物語性」で構築する
• マインドシェア（心の占有率）の考え方
• マネタイズの発想は「テーマパーク型ショッピングモール」との提携から
• 資料：世界のショッピングモール

昨年3月に出版した書籍「 自由にカスタマイズできるFlashグッズ30」（ソシム）のキャラクターデータを使用しています。

THE NEW CONTEXT CONFERENCE 2007

WikipediaのJimmy Wales氏らインターネット社会の論客が、Webの未来を語る「THE NEW CONTEXT CONFERENCE 2007・ニューコンテクストカンファレンス2007（コンカン2007）」

多摩美の講義配信

多摩美術大学の「tamabi.tv」
佐藤可士和さんのグラフィックデザイン学科特別講義「アートディレクターの新領域」、講義（1）～（3）がとても参考になります。iTunesでダウンロードして視聴しましたが、サイトの方では配信予定になっていますね‥（なぜ？
横尾忠則さんの芸術学科：21世紀文化論 「こんなふうに僕は絵をかいてきた」もお奨めです。

新しいブログについて

common style.のリニューアルサイト（および個人サイト）は来年になってしまいそうなので、とりあえずこちらのブログで更新していきます。今まで公開していたWEB MAKING BOOK BLOGは、書籍の執筆メモを記していく目的で立ち上げたブログですが、ここは若干‥本業に関連した内容も含む予定です。
本業に関しての記事は、クローズドネットでしかアップしていませんので、初の試みになるかもしれません。基本的には新しいサイトへの繋ぎとして、ゆるくやっていきたいと思います。

• ケータイ日記（更新中、あと10年続きます）
• 日刊徒然音声雑記（更新中）
• WEB MAKING BOOK BLOG（停止）
• common style（停止／リニューアル中）
• YouTube Playlists 個人（登録中）
• YouTube Channels グループ（登録中）

その他、8つのブログは（放置気味ですが‥）不定期更新です。
YouTubeでは、講義などのテーマに関連した映像を共有しています。ブックマークしてある1,000ちかくの有益な映像を空き時間を利用しながら登録中（最近始めましたので、まだ少量）。
尚、勉強会の資料映像などはYouTube Channel グループの方にアップロードしていく予定です。

ブログを変更しました

しばらくは、このブログで更新を続けていきます。

旧ブログ（2004年5月5月～2007年9月18日）

• WEB MAKING BOOKS BLOG

一部のリンクは切れていますが、ブログはそのまま残ります。