WCAN 2007 winter レポート

画像 : WCAN 2007 winter

ただ今きてますWCAN 2007 winter。今回はライブレポートではなく、メモを取っておいて後日それをまとめて公開という形にしました。

今回はspringやsummerのように、名古屋国際会議場でやってます。

[SESSION-1] 今日からあなたもインタラクションデザイナー
長谷川恭久　さん　(C O U L D)

今回は以下の4項目についてお話されました。

5次元要素
インタラクションの質
ツール
そもそもデザインとは

今回は「5次元要素」についてと、他で気になったことをいくつか書いていこうと思います。

5次元要素

インタラクションデザインには以下の5つの次元の要素があるとおっしゃいました。そして、Webに大きく関わる2、4、5についてお話されました。

言葉
視覚要素
空間/物質
時間
行動

2D : 視覚要素

まずデザインで一番「見えてくる」部分である視覚要素について。

ラベルがなくても理解できる要素
すでにあるメタファー^[1]を利用する
想像しやすいイメージ

デザインがかっこいいアイコンでも、それが一体何を示していて何をユーザに躍起させようとしているのかが分かるアイコンやボタンのデザインを心がけることが重要ですね。

4D : 時間

時間という次元において、サイトを閲覧するペースやテンポをデザインすることがインタラクションデザインの1つであると分かりました。

スムーズなテンポを作るためには
- タスク終了までのプロセスを見せる
- 次何をするのか、あとどれくらいあるのかがわからない恐怖を取り除く
- 同じ時間でも短くみせる表現をする(プログレスバーなど)
サイトによって時間の過ごし方が異なる
利用者とどのような関係をもちたいかを考える

WCAN mini Markup vol.4のレポートでもフォームについて話しましたが、ユーザがフォームを入力し終えるために、あとどのくらいの作業が必要なのか表示すること、ユーザがそのサイトに求めるインタラクションを考えたデザインが必要だとおっしゃいました。
「横断歩道にある、"あとどのくらいで青になるかわかるアレ"って心が安らぐよね」という例には納得。

あとは気になった点をピックアップして書きたいと思います。

インタラクションデザインの測定要素

どのようなインタラクションデザインが優れているか。

簡単に学習でき、覚えることが出来るかどうか
効率的に利用できるかどうか
エラー頻度を押さえるか、回避方法があるかどうか
利用者に満足感を与えることが出来るかどうか

簡単か、効率的か、また、エラーに対する見せ方を測定すること。エラー処理に対しては、人間と実際に対話している時に置き換えると結構失礼なことをしているサイトがあるよ、とのことでした。確かに制作者のためのエラー表示じゃなにも意味がないですよね。^[2]

ボタンのデザイン

Webサイトのナビゲーションのデザインを現実のボタンと比べると、ずれているサイトが多いそうです。

現実

触る
押し込む
離すと戻ってくる

よくあるWebサイトのナビゲーション

マウスhoverするとhover用の画像に変化
(ここがないことが多い)
マウス外すと元の画像に戻る

これを解決する1つのお手軽な方法としては:active疑似要素を指定する方法があります。確かにナビゲーションでアンカーに:hover疑似要素を指定する場合は多いですが、:active疑似要素を指定しているサイトは少ないんじゃないかなぁと思います(僕も含めて)。最近の例だとアップルのグローバルナビゲーションはそれを実践していますね。

そもそもデザインとは

有意義な対話のための見た目を考える
すべてに意味を持たせる
作業は分担でもプロセスは共有する

今回のお話から、単なるWebサイトの見た目だけでなく、サイトの目的とユーザとの関係にもデザインを加えるべきだ、ということを感じました。

最後に、インタラクションデザインとは、Webサイトと利用者の関係をつなぐデザインであるとおっしゃっていました。

[SESSION-1] ウェブデザインの質を向上させるグラフィック作りのコツ
矢野りん　さん　(ものづくりにっぽん)

見た目だけのデザインの話をしましょう

ヤスヒサさんが見た目のデザインだけでない話をされたのに対して、矢野さんは「見た目だけのデザインの話をしましょう」という入りでお話を進められました。主な内容はこんな感じ。

日本語のレイアウトに関するTips
画面レイアウトに関するTips
配色のコツ

次は文字スタイルのリッチ化だ

いろんなリッチ化が流行っている昨今ですが、改めて「文字スタイル」のリッチ化を考えよう、ということで、実際にスクリーンに映し出されたイラレの画面と、詳細な配付資料を見ながら文字レイアウトをについてひたすら掘り下げてお話されました。

全体を通して気になったポイントを挙げると、

OpenTypeではイラレでカーニングを「オプティカル」するとキュッと文字間がしまる
日本語を20pt、半角英数を22pt
文字の左に縦にボーダーを引くと、左に文字が綺麗にそろってるようにみえる
画像とキャプションのスペースは、昔は1ミリ、今は3ミリ
欧文書体はTPO(その文字の歴史や国柄)もわきまえて使う

実際にモノを見せてもらいながらのセッションだったので、なかなか言葉に表せないのが残念です;-<

「微妙な素人臭さはこういう細かい違いが生みだす」という矢野さんの言葉に同意です。僕も人のこといえたものじゃないけれど、普段目にする文字だからこそ、細かいこだわりが"プロっぽくてリッチ"な印象を作り出す要因になってくるということですね。
また、文字の由来を知ることもいいよね、ということでこのあたりに由来が載っていて便利だと教わりました。

[懇親会] 2007年のWeb業界を振り返る

去年のWCAN 200612でヤスヒサさんがやられた題目を今年は懇親会にくっつけて名古屋国際会議場の地下?のレストランで70名程度が参加し、立食会形式で行いました。なにより協賛が集まったおかげで参加費3000円でこの形式はうれしい！ひったすら食べてました。

セミナーの時Post itが配られ、ここに2007年に気になったサイトやサービスを書いて集めました。それらを紹介しながら、豪華賞品が当たるビンゴ大会などがありました。

3次会で来年のWebを考える

あっという間に終わって(と言ってもまだ20時)、3次会は金山駅に移動し20名で。ヤスヒサさんに「来年Webにくるものってなに?」と聴かれ、うーんと悩んで「ブラウザの混乱が起こる」と予想。

Firefox 3、IE8、iPhoneのタッチインターフェイスを採用したSafari(Webkit)、Nintendo DSやWii搭載のOpera、携帯ブラウザ、とさらに多種に広まりそうなので、なんか混乱しないかなぁと。
混乱ではないけど、「訴えてやる!」って話題はありましたね。

さて、1年後にはどうなっているのでしょう。去年の今頃、誰もニコ動が流行るなんて言ってなかったし、正直予想ができません。

公開され次第追加していきます。

WCAN 2007 winter レポート