SlideShare a Scribd company logo
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会
第4回 3章 - 動き回る:ナビゲーション、標識、探索経路
西川伸一 (@shinichiN)
https://www.facebook.com/groups/di2e.study/
デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザイン
http://amzn.to/LfZuHZ
@shinichiN
colog.jpの開発運営・ウェブディレクター・WordPressラブ
勉強会詳細は Facebook グループで ↓
https://www.facebook.com/groups/di2e.study/
今日の発表について
3章に書いてあること
ナビゲーション
ユーザに「現在地・目的地・移動方法」
をいかに知らせるか
目次
1.序論
2.いつでも居場所と目的地が分かる
2.1.標識 signpost
2.2.経路探索 wayfinding
3.ナビゲーションのコスト
4.ナビゲーションのモデル
5.ウェブサイト向けのデザインルール
6.パターンの解説
目次:パターンの解説
1.明快な入り口 Clear Entry Points
2.メニューページ Menu Page
3.ピラミッド Pyramid
4.モーダルなパネル Modal Panel
5.ディープリンクできるステータス Deep-kinked State
6.避難口 Escap Hatch
7.分厚いメニュー Fat Menus
8.サイトマップフッター Sitemap Footer
9.ログインツール Sign-in Tools
10.シーケンス表示 Sequence Map
11.パンくず Breadcrumbs
12.注釈つきスクロールバー Annotated Scrollbar
13.アニメーションによる転換 Animated Transition
序論
• サイト内/アプリ内を行き来すること
は、腹立ちの種、無駄、実がない
• 理想は「どこへも行かずに済む状態」
• インターフェース上で大部分のツール
が「手の届くところにあれば便利」
• つまり、少なければ少ないほど良し
いつでも居場所と目的地が分かる
• 以下のような要素があるサイトやアプ
リをデザインしている場合、どうすれ
ばよい?
• セクション、サブセクション
• ツール
• いくつものページ、ウィンドウ
• ウィザード
標識 Signpost
ユーザが
自分居場所、周囲に何があるか
を認識するのに役立つ機能
標識 Signpost の例
• ページのタイトル
• ロゴなどのブランディング要素
• タブ
• 選択中項目の強調表示
• グローバルまたはローカルナビゲー
ション
• シーケンス表示
• パンくず
• 注釈付きスクロールバー
経路探索 Wayfinding
ユーザが
目標に向かうための経路を見つけていく行為
認知科学、環境設計、ウェブサイトデザイン
の専門家が研究を重ねている重要なテーマ
• よいサイン
• 環境的な手がかり
• マップ
経路探索 Wayfinding で考えるべきこと
• 明快で曖昧さがない
• あるべき場所にある
• おもなユースケースを自分で ってみ
るといい
• 最初のページでは”行動への呼びかけ”
経路探索 Wayfinding : よいサイン
• レストランのトイレは店の奥のほう
• ダイアログボックスを閉じる×ボタンは右上
• ウェブサイトのロゴは左上
経路探索 Wayfinding : 環境的な手がかり
文化的なもの
その文化(OSなど)になじみがない人もいることに注意する
• 一回り大きな座標系
• 全体を頭の中にイメージできる
• 意識しなくてもいいなら、
それはそれでよいナビゲーション
経路探索 Wayfinding : マップ
ナビゲーションのコスト
• 認知上のコスト。 ここは何?次はどこ?
• 形状、レイアウト、内容、出口、目的の達成方
法を探し始める
• 別のことに気を取られて目的を忘れたり
• ラベルを読み、アイコンを解釈し、よく分から
ないリンクを理解のために無闇にクリック
• 全ページで。塵も積もれば。
移動距離は常に短く
• 何段階もサブページやダイアログを経由させない
• 80%のユースケースは1ページ内で行わせられるか?1回だけOKな
らどうか?考えよう。
• 無理なら?
• 要素を縮小/省略、ラベルを短縮、アイコン化
• 邪魔にならない場所に移動
• モジュール別タブ/アコーディオンでデフォルト非表示
• パレートの法則で要らないのはしまってみる
移動のたびにコストがかかる
→ 移動を減らす
ナビゲーションのモデル
• ハブとスポーク
• 完全接続型
• マルチレベル型
• ステップ進行形
• ピラミッド
• パンとズーム
• フラットナビゲーション
• モーダルなパネル
• 明快な入り口
• ブックマーク
• 避難口
ナビゲーションのモデル:ハブとスポーク
• モバイルでよく使われる
• ハブ画面に全部ある
• 多くの場合ホーム画面
• ハブからスポーク(各ページ)へ
• 用事を済ませたらハブに戻る
ナビゲーションのモデル:完全接続型
• 全ページが相互にリンクされている
• シンプルなグローバルナビゲーショ
ン / 階層の深いナビゲーションに
よって、完全に接続する
• どのページからどのページヘも1回
のジャンプ
ナビゲーションのモデル:マルチレベル型
• 主なページは互いに完全接続
• 下位のページはグループ内で接続
• サブレベルのサイドバーメニューな
どがある
• ドロップダウンやFat Menus、サイ
トマップ付きフッターのパターンに
より、完全接続型に切り替えられる
し、その方がより望ましい
ナビゲーションのモデル:ステップ進行型
• スライドショー
• プロセスフロー
• 戻る/進むのリンクが目を引く形
ナビゲーションのモデル:ピラミッド
• ステップ進行型の変形
• 一連の項目をハブページで一覧し
て、どこにでもいける
• 戻る/進むリンクを ってとなりの
項目にいける
ナビゲーションのモデル:パンとズーム
• たったひとつの広いスペースが適し
ている場合 = 多数の小さなスペース
に分けないほうがいい場合
• 地図、大きな画像、インフォメー
ショングラフィックス、量の多いテ
キスト文書、音声や動画などの時間
メディア
• 集中させる
ナビゲーションのモデル:フラットナビゲーション
• Photoshopなどのカンバスとパレット型
• Excelのような複雑なアプリケーション
• メニューやツールバー、パレットを通じて利用できる多くのツー
ルや機能が用意される
ナビゲーションのモデル:モーダルなパネル
• 表示されたメッセージの了解や入力
の完了、クリックしてパネルを閉じ
る
• オーバーレイで表示される
ナビゲーションのモデル:明快な入り口
• 初めての訪問者やめったにアクセス
しないユーザ向けのページ
• まず、何をすれば良いのかを示す
• 複雑なサイトやアプリの出発点を示
して、負担を和らげる
ナビゲーションのモデル:ブックマーク
• 自分で選んだ場所まで、いつでもい
ける
ナビゲーションのモデル:避難口
• 行き詰まった時、エラーになった、
理解できない時に逃げられる
• 見覚えのある場所に戻るための分か
りやすいラベルの付いたリンク
ナビゲーションのモデル:注意点
1.組み合わせて使われる
2.ユーザの選択肢を意図せず規定してしまうこと
がある
2.1.スライドショーの時には「戻る/進む」リン
クと避難口だけでいい
2.2.グロナビがあると離脱が起きることがある
3.表現形態はあとから決める。情報アーキテク
チャとナビゲーションのモデルが決まってから
ビジュアルのデザインに入る
ウェブサイト向けのデザインルール
• グロナビは上か左側
• ログイン済みユーザ向けのユーティリティナビ
ゲーション(アカウント設定、ログアウトな
ど)は右上部
• 関連ナビゲーションはコンテンツ自体の近く
慣習があるので無視しない
パターンの解説
• 明快な入り口
• メニューページ
• ピラミッド
• モーダルなパネル
• ディープリンクできる
ステータス
• 避難口
ナビゲーションのモデル
レイアウトから独立してる
• 分厚いメニュー
• サイトマップ付きフッター
• ログインツール
←を一般的なレイアウトと組み合わせると
得られるパターン
• シーケンス表示
• パンくず
• 注釈付きスクロールバー
標識として役に立つ
• アニメーション
による転換
視覚的トリック
明快な入り口
Clear Entry Points
主要な要素へのリンクを数カ所だけ
明快な「行動」のきっかけ
- たくさんの機能があるアプリ
- 初心者にはメニューが多すぎる
メニューページ
Menu Page
サイトが持っている(全ての)コンテンツへの
リンクをページいっぱいに。
- 検索ボックスがあるといい
- コンテンツ自体はなくていい
ピラミッド
Pyramid
Flickrなどの画像管理ツール
モーダルなパネル
Modal Panel
ユーザの入力が必須。
それ無しには進めない場面で。
SlideShareのログイン画面。
アップロードしようとすると出る。
ディープリンクできる
ステータス
Deep-linked State
パーマリンクに「状態」を加えたリンク
GoogleBooksがURLに持たせているState情報
・本の表示位置
・表示モード(見開きか、1ページか)
・ツールバー表示の有無
・書籍内検索の結果
避難口
Escape Hatch
見慣れた場所に戻るためのリンク
グロナビなどの他の選択肢がない時に用意する
ログイン/会員登録を求められているが、
トップに戻りたい。。→ロゴをクリック
←これ
分厚いメニュー
Fat Menus
グロナビ等からドロップダウンやフライアウトメニュー。
各セクションへのリンクを全部見せる。
Starbucks
Kayacを見てみよう http://www.kayac.com
サイトマップ付きフッター
Sitemap Footer
グロナビを補完。
全ページに。
かものはしプロジェクト
サイトマップ付きフッター
Sitemap Footer
グロナビを補完。
全ページに。
Flickr
rei.com
ログインツール
Sign-in Tools
ログインユーザ向けに。
ユーザ自身に関する設定やログアウト
WordPress
iTunes
シーケンス表示
Sequence Map
手続き中に、今どの段階にいるのかを表示
←イマココ
縦表示の場合もある
パンくず
Breadcrumbs
階層の表示。
カテゴリなどの親分類の表示。
注釈つきスクロールバー
Annotated Scrollbar
縦に長い1ページ内のコンテンツで、
現在地を表示
GoogleChromeの検索結果の存在位置を
表示してくれているところ
注釈つきスクロールバー
Annotated Scrollbar
自分がどう移動したのか
アニメーションで明示する
まとめ
1.無駄。コストについて理解する
2.モデルを知る。
3.組み合わせる

More Related Content

What's hot

Cbt simple introduction
Cbt simple introductionCbt simple introduction
Cbt simple introduction
Tumbur Silalahi
 
Dewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan ppt
Dewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan pptDewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan ppt
Dewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan ppt
DewiSetyaNingrum6
 
Agresi ppt
Agresi pptAgresi ppt
Agresi ppt
Triyani Suranto
 
Bk 3 pohon karir
Bk 3 pohon karirBk 3 pohon karir
Bk 3 pohon karir
FitriWahyuni52
 
Kepemimpinan (Leadership)
Kepemimpinan (Leadership)Kepemimpinan (Leadership)
Kepemimpinan (Leadership)
Ayah Abeeb
 
PPT (Motivasi Belajar)
PPT (Motivasi Belajar)PPT (Motivasi Belajar)

What's hot (8)

Cbt simple introduction
Cbt simple introductionCbt simple introduction
Cbt simple introduction
 
Dewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan ppt
Dewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan pptDewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan ppt
Dewi setya n (1961054) pengaruh gaya kepemimpinan terhadap kinerja karyawan ppt
 
Agresi ppt
Agresi pptAgresi ppt
Agresi ppt
 
Prasangka Sosial
Prasangka SosialPrasangka Sosial
Prasangka Sosial
 
VERBATIM PADA KONSELING
VERBATIM PADA KONSELINGVERBATIM PADA KONSELING
VERBATIM PADA KONSELING
 
Bk 3 pohon karir
Bk 3 pohon karirBk 3 pohon karir
Bk 3 pohon karir
 
Kepemimpinan (Leadership)
Kepemimpinan (Leadership)Kepemimpinan (Leadership)
Kepemimpinan (Leadership)
 
PPT (Motivasi Belajar)
PPT (Motivasi Belajar)PPT (Motivasi Belajar)
PPT (Motivasi Belajar)
 

Viewers also liked

CodaでClipを使ってWordPress開発を早くするススメ。
 CodaでClipを使ってWordPress開発を早くするススメ。 CodaでClipを使ってWordPress開発を早くするススメ。
CodaでClipを使ってWordPress開発を早くするススメ。
Shinichi Nishikawa
 
WordCamp Tokyo 2012 Concept
WordCamp Tokyo 2012 ConceptWordCamp Tokyo 2012 Concept
WordCamp Tokyo 2012 Concept
Shinichi Nishikawa
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
 
子育てとブログを考える「ころぐ講演」
子育てとブログを考える「ころぐ講演」子育てとブログを考える「ころぐ講演」
子育てとブログを考える「ころぐ講演」
Shinichi Nishikawa
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
 
WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...
WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...
WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...
Shinichi Nishikawa
 
PHP classの教室
PHP classの教室PHP classの教室
PHP classの教室
Yusuke Ando
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
Taylor Lovett
 
8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会
Yusuke Ando
 
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズお客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
Cherry Pie Web
 
Child Theme
Child ThemeChild Theme
Child Theme
Shinichi Nishikawa
 
An easy guide to Plugin Development
An easy guide to Plugin DevelopmentAn easy guide to Plugin Development
An easy guide to Plugin Development
Shinichi Nishikawa
 
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasanWordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
 
マルチパブリッシング プラットフォームとしてのWordPress
マルチパブリッシング プラットフォームとしてのWordPressマルチパブリッシング プラットフォームとしてのWordPress
マルチパブリッシング プラットフォームとしてのWordPress
文樹 高橋
 

Viewers also liked (15)

CodaでClipを使ってWordPress開発を早くするススメ。
 CodaでClipを使ってWordPress開発を早くするススメ。 CodaでClipを使ってWordPress開発を早くするススメ。
CodaでClipを使ってWordPress開発を早くするススメ。
 
WordCamp Tokyo 2012 Concept
WordCamp Tokyo 2012 ConceptWordCamp Tokyo 2012 Concept
WordCamp Tokyo 2012 Concept
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
子育てとブログを考える「ころぐ講演」
子育てとブログを考える「ころぐ講演」子育てとブログを考える「ころぐ講演」
子育てとブログを考える「ころぐ講演」
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...
WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...
WordCamp Seoul: WordPress Based web services in Japan / WordCamp 서울 : 일본에서 워드...
 
PHP classの教室
PHP classの教室PHP classの教室
PHP classの教室
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
 
8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会
 
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズお客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
 
Child Theme
Child ThemeChild Theme
Child Theme
 
An easy guide to Plugin Development
An easy guide to Plugin DevelopmentAn easy guide to Plugin Development
An easy guide to Plugin Development
 
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasanWordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
 
マルチパブリッシング プラットフォームとしてのWordPress
マルチパブリッシング プラットフォームとしてのWordPressマルチパブリッシング プラットフォームとしてのWordPress
マルチパブリッシング プラットフォームとしてのWordPress
 

More from Shinichi Nishikawa

WordPress Community in Japan
WordPress Community in JapanWordPress Community in Japan
WordPress Community in Japan
Shinichi Nishikawa
 
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライドGPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Shinichi Nishikawa
 
Learning from theme review requirements
Learning from theme review requirementsLearning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
 
Wordpress Community in Japan
Wordpress Community in JapanWordpress Community in Japan
Wordpress Community in Japan
Shinichi Nishikawa
 
WordPress community and events in Japan. presented at #wp10 meet up in Bangko...
WordPress community and events in Japan. presented at #wp10 meet up in Bangko...WordPress community and events in Japan. presented at #wp10 meet up in Bangko...
WordPress community and events in Japan. presented at #wp10 meet up in Bangko...
Shinichi Nishikawa
 
2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪
Shinichi Nishikawa
 
アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323
アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323
アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323
Shinichi Nishikawa
 
電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係
電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係
電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係
Shinichi Nishikawa
 
WordCampTokyo2012 開催のお知らせとスタッフ募集
WordCampTokyo2012 開催のお知らせとスタッフ募集WordCampTokyo2012 開催のお知らせとスタッフ募集
WordCampTokyo2012 開催のお知らせとスタッフ募集
Shinichi Nishikawa
 
WordPressマルチサイト機能を使ってブログポータルを作ってみよう!
WordPressマルチサイト機能を使ってブログポータルを作ってみよう!WordPressマルチサイト機能を使ってブログポータルを作ってみよう!
WordPressマルチサイト機能を使ってブログポータルを作ってみよう!
Shinichi Nishikawa
 
WordPressの管理画面を徹底カスタマイズ!
WordPressの管理画面を徹底カスタマイズ!WordPressの管理画面を徹底カスタマイズ!
WordPressの管理画面を徹底カスタマイズ!
Shinichi Nishikawa
 

More from Shinichi Nishikawa (11)

WordPress Community in Japan
WordPress Community in JapanWordPress Community in Japan
WordPress Community in Japan
 
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライドGPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
 
Learning from theme review requirements
Learning from theme review requirementsLearning from theme review requirements
Learning from theme review requirements
 
Wordpress Community in Japan
Wordpress Community in JapanWordpress Community in Japan
Wordpress Community in Japan
 
WordPress community and events in Japan. presented at #wp10 meet up in Bangko...
WordPress community and events in Japan. presented at #wp10 meet up in Bangko...WordPress community and events in Japan. presented at #wp10 meet up in Bangko...
WordPress community and events in Japan. presented at #wp10 meet up in Bangko...
 
2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪
 
アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323
アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323
アプリケーションプラットフォームとしてのWordPressの序論。ころぐとBookPressを事例に!WordBench福岡の資料!20130323
 
電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係
電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係
電子出版プラットフォーム『BookPress』にみるAWSと電子出版の素敵な関係
 
WordCampTokyo2012 開催のお知らせとスタッフ募集
WordCampTokyo2012 開催のお知らせとスタッフ募集WordCampTokyo2012 開催のお知らせとスタッフ募集
WordCampTokyo2012 開催のお知らせとスタッフ募集
 
WordPressマルチサイト機能を使ってブログポータルを作ってみよう!
WordPressマルチサイト機能を使ってブログポータルを作ってみよう!WordPressマルチサイト機能を使ってブログポータルを作ってみよう!
WordPressマルチサイト機能を使ってブログポータルを作ってみよう!
 
WordPressの管理画面を徹底カスタマイズ!
WordPressの管理画面を徹底カスタマイズ!WordPressの管理画面を徹底カスタマイズ!
WordPressの管理画面を徹底カスタマイズ!
 

第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会