LP7に参加してきた - これからゆっくり考L

先週の土曜日、CSS Nite LP, Disk 7「IAスペシャル」（通称LP7）に参加してきました。
こういうイベントはいつもはりきって早めに到着するのですが、珍しく寝坊…。
優雅に第二セッション途中（最後の方？）から参加しました。

取り急ぎ、会場でとったメモをエントリーしておきます。
メモなのでおかしいところが多々あるはず。
意味不明なところも多々あります故、後でフォローアップの資料見直してちょいちょい訂正する予定です。

プロジェクトマネジメントから見たIAの大切さ（林千晶さん）

※途中（最後のほう）より参加

ベンチマーク

暗黙の前提を考慮。業界で使われている知識は徹底的に使いましょう。
先人の知恵を使う。「基本構造をベースに独自の要素を足しましょう！」
独自のサイト設計をしていて失敗しているところが多い。

ベストプラクティス

変える価値のあるところだけ変える。（リニューアルの時は要注意）
過去の資産をいかしつつ。

IAの欠点〜IAの本来の目的と役目(佐藤伸哉さん)

IAの欠点

IAは全体プロセスの1ステップでしかない。
1つのプロセスではない
IAの作業の後に必ず後工程がある。（IAだけで完結、完成しない）

なぜ結果がでないか

目的が理解されていないことが多い
- チーム全体（クライアントも含む）で理解されていることが少ない
- なんでサイトマップを作るの？
- なぜワイヤーフレームを作るの？
  - 「必要だから…」

目的を考える

既存サイトのサイトマップの制作（非常に重要なこと）

「サイトマップを作ること」が目的ではない
現状を頭で把握、理解する
全体のボリューム（ページ数）を把握する
問題になりそうな部分を理解する
今のコンテンツを説明できるようにする

ハイレベルサイトマップ、全体構造の設計

将来的な拡張を検討できるように
- キャンペーン、新商品の追加、などなど
先々の戦略立案
- この部分が一番お金が取れる！

サイトマップの制作

共通コンテンツの整理
余裕、リソースがないと大変
- 小規模サイトのページ制作管理に役立つ
CMSで色々なページをはきだす前の骨格が理解できる
プロジェクトメンバー以外でもサイト全体を確認しやすい

ワイヤーフレーム

視覚的に分かりやすい。
破綻、矛盾が理解しやすい
10ページぐらいの小規模サイトだったら、ワイヤーフレームに時間をかけるなら他の箇所に時間をかけたほうがいい。
共通要素の確認
- ページ数が増えてくると共通要素が分からなくなってくる。

まとめ

IAは1ステップでしかない
目的を理解
理由を知る説明する
作業の必要性を考える
不必要な作業はやらない！（お金と時間の無駄）

誰が担当すべきかを考える
次に誰が何をするか考える

誰かの頭の中に情報がはいっていれば、「サイトマップ」ないし「フレームワーク」という成果物を出す必要はないかと思う。

IAワークショップ〜LP0をテーマに〜(坂本貴史)

Flickrの中にi love（loveはハートマーク） Wireframeというコミュニティーがある

http://www.flickr.com/groups/ilovewireframes/

ワークショップ

グルーピングをしてみよう
最適なメインメニューを考えてみよう
ナビゲーションを考えてみよう
導線を考えてみよう

その場でペンでささっと書いて、近所の人とそれについて語ってみるという内容でした。

実装視点からのボトムアップIA（@kotarok先生）

iAにはIAという肩書きの人はいない

それぞれの職能の中でIA要素を自覚している
- IAの考え方はどの職種の人でも仕事に活かせる

情報設計をどうしているか

誰がやっているか
お客さんからの原稿をベースに作ってる？
解釈が違ったり意思統一ができなかったり？

ユーザが見るのはサイトではない

目的に近いところに直接ユーザーがきてしまう。

インターフェイスデザインとしてのフロントエンドデザイン

フロントエンドデザインの構成要素で一番大事なのは？
- HTMLこそが何よりも重要

ハイパーテキスト

ハイパーリンクによって相互参照可能な文章
今日のウェブの根幹を成す概念

HTML

ハイパーテキスト実装
組織内での情報共有を促進したいというニーズから生まれた
ウェブで普及し広く使われている
- HDMLなどもハイパーテキスト
テキストベースのマークアップ言語
ある程度詳細な文章モデルを持つ
- 文章モデルとは
  - Document Object Model
  - 現状のニーズにマッチしているのか
    - WEB TREND MAPの宣伝が入る

HTMLが重要なのは間違いない

文章モデルはかなりアカデミック寄り
当初想定していた現状のニーズをカバーできていない
- サイト独自の文書モデルを作ればいいじゃない

ワイヤーフレームについての先生の見解

コミュニケーションツール
- 制作前に意図を確認、共有するためのもの
- プロジェクトというスコープの中で、さまざまな姿に形を変えるべきもの。
- 相手や状況によって変わるもの。
- その相手が未来の自分の可能性もある。
- 結果だけ見せて「設計意図を汲め」というのはナンセンス。

今日のウェブがHTMLベースであるというのが現実
なんだかんだ汎用性があるしよくできている
HTML5はかなり現実のニーズを意識している

⇒今からでも遅くない！HTMLの文章モデルを知ろう！

見出しの扱いについて考えてみる

「大見出し」「中見出し」「小見出し」
- 階層レベルではなく、コンテキストにおける「情報の粒度」をあらわす
HTML的には「h1-h6」
- 文章が厳密な階層構造を持っている
  - 普段見ているページでそんなページはあまりないのでは・・・

HTMLの見出しはなぜ使いにくいか

「見出し」とひとくくりにしていいのか

現実的に使いやすい見出しの例

コンテンツのグルーピングのための見出し
コンテンツの理解を促す句読点的見出し
- など必用に応じて用意すればいい

明示的に行うことが重要

無意識にやっていることもある
- 他人と共有できない
- 解釈の相違や意思の統一ができていないという問題を解決できない

IAの個人的見解

だれでも仕事に活かせる
- 考え方として暗黙的に取り入れるだけでなくぜひ明示的に共有を

IAからWebサイトデザインへの突破口（長谷川恭久さん）

半プロトタイプ型

本物に近い形のワイヤーフレーム
- Blueprint
  - CSSフレームワーク
  - シンプルなルール
  - ドキュメントがしっかりしている
  - 実装には向いていない
  - なるべく実際に近い形で確認したいワイヤーフレームを確認したい場合には向いている

最近の検索利用者数は？

2億以上検索されている（一日）

人々は情報を探している
- 役に立つものを探している、エンターテイメントを探している
  - サイトやページを探しているわけではない。情報を探している。
人々はサービスを探している
- Yahooもサービス、楽天もサービス、企業サイトもサービス
人々は同じような思考、地域、共通点があるところに集まっている。
- そこでコミュニケーションをとっている。答えを捜し求めている。

どういったデザインコンセプトをもつべきか

障壁を取り除く
共有は必須コンセプト
- 固定リンクを用意するだけでもいい
- 共有はされるもの
- 自分のサイトのそとで何かされるということを意識
マイクロコンテンツ
利用者がコントロール

響くコンテンツ

人とコンテンツとの間の矢印がキーになってくる
- CONTEXT

CONTEXTってなにか

[辞書]文脈、背景、状況…
同じ情報でも捕らえ方は違ってくる

- 例）黄色い丸
  - メトロによく乗る人なら「銀座線」と分かるが。そうでない人にはわからない。
    - 捕らえ方がちがう

- 例）なう（Twitter）

コンテキストには色々ある

時間状況文化言語場所などなど
大きく変わってくる場合がある

答えを探すための目的地につれていくことがIAの仕事、コンテキスト

contextを精査する

コンテキストを意識したデザイン

体験の具現化
- よくできている例）jango：インターネットラジオ
  - キーワードで再生できる機能が真ん中にどーんと。
  - 検索しない人向けにクリックしただけで再生できるのも用意
  - 三角が再生
  - アクションを起こしてほしいもの（再生ボタン）に同じ色を使っている

体験をUIの中に入れている

パターン

利用者のコンテクストの理解
すでに共有されているものを再利用
- 例）再生ボタン

参考サイト）pattern Tap
- UIのパターンを紹介しているサイト
- 類似サイトがたくさんある

オープンスタンダード

人が使っているものを使う（パターンとちょっと似ているがちょっと技術より）
障壁をなくしてく1つの方法

- OpenID
  - ギークだけのものではなくなってきている
- iPhone
  - 色々なオープンスタンダードによって作られている

今後の課題

コントロールをゆだねるデザイン
- ×コントロールを失うデザイン
- 利用者がこうしたいといったことが実現できるデザイン
Webとリアル世界との関連性はより強いものに
- きちんとした情報を確保する、マークアップする
- それぞれのブラウザ、デバイスにあったコンテキストを提供することが重要
強いリーダーシップ
- ベストアンサー、ベストプラクティス

ディテールこそデザイン

IAといったものは納品物としては見えない。見えません。
⇒まさにディテール
そこがきちんとしていなければちゃんとしたサイトはできない

【課題】同僚や後輩へWebデザインに関するメッセージを伝えるとしたらそれはなんですか？

パネルディスカッション

[林さん]予防コストと修正コスト

修正コストのほうが大きくなることが多い
予防コストのほうが前向き。より儲かる作業。

懇親会

ビギナーズのときと同じ会場でした。
前回同様すごい人の密度でしたが、沢山の方と名刺交換させていただきました。
ありがとうございました！

どさくさにまぎれてTシャツとサイトイットをいただいちゃいました。
ありがとうございますありがとうございます。