- 情報設計から基本レイアウトの作成までのプロセスを概説します。
- 次に、ナビゲーションデザインについてサンプルサイトを見ながら概説します。
- 自分が選択したサイトのナビゲーションデザイン分析・インタラクションデザイン分析を次週までの課題とします。
- また、来週はグループでコンセプトワークとペルソナ制作を行います。どんな人を主要ターゲットにどんな情報を提供するサイトを作りたいか、各自で考えてきてください。
04-1 ナビゲーションデザイン
Webサイトは画面の上に平面的に表示されるので、雑誌や書籍のように厚みを確認したりページをパラパラとめくって見ることができません。そのため、どこに何が書かれているかをおおまかに把握したり、今自分が見ているページとサイトの全体像との関係を直感的に認知することが難しくなります。
Webサイトに掲載された情報がユーザーに確実に届くようにするためには、情報をわかりやすく構造化し、その構造がユーザーに伝わるようにナビゲーションをデザインする必要があります。
サイトコンセプトを意識しながら
- 情報構造の整理
- サイト構造の設計
- ナビゲーションの設計
- 基本レイアウトパターンの設計
（配付資料：「UID05-1ストラクチャデザイン.pdf」参照）
1.情報構造の整理
ヒアリングした結果に基づいてコンテンツを分類し、プライオリティをつけた上で、それぞれの階層を整理していきます。
2.サイト構造の設計
情報カテゴリーの相互関係をユーザーの概念モデルとして捉え、サイト構造図を描いていきます。
（配付資料：「UID05-3ワイヤーフレーム1.pdf」参照）
3.ナビゲーションの設計
全ページに共通するグローバルナビゲーションとカテゴリー毎に運用するローカルナビゲーションを基本に、補足ナビゲーション、コンテキストナビゲーション、パンくずリストなどの仕様をワイヤーフレームで決めていきます。
（配付資料：「UID05-2ナビゲーションデザイン.pdf」参照）
実際のサイトを見ながら説明します。
http://www.mitsue.co.jp/
4.基本レイアウトパターンの設計
画面サイズを決め、トップページと、いくつかの代表的なサブページの基本レイアウトを作成し、コンテンツサンプル（文章や写真のフレーム）やナビゲーション要素を配置します。
（配付資料：「UID05-3ワイヤーフレーム2.pdf」参照）
画面サイズは、ターゲットユーザーが最も標準的に使用しているモニター解像度（現在は1024×768ピクセルを標準とすることが多いですが、大画面化の一方でモバイルタイプでは天地サイズが小さくなって来ている傾向もあります）を基準にして、そこからブラウザのフレームやヘッダ部、スクロールバーのサイズなどを差し引いて決定します。
携帯サイトの場合は、どの範囲の機種を対象にするのかも考えておかなくてはなりません。
04-2 インタラクションデザイン
インタラクションとは、人が行う操作とパソコンなどのシステムが返す反応のやりとりのことです。
PC用のWebサイトでは、人は、キーボードから文字を入力したり、マウスを動かしたりクリックしたりして操作を行います。携帯サイトでは、テンキーやカーソルキーで操作します。最近はタッチパネルからのフリック操作や、ジャイロ機能を使って振ったり傾けたりといった操作、音声での操作なども可能になってきています。
そして、PCや携帯は画面の変化や音、振動などでフィードバックを返します。
例えば、通常のWebページでは、システムはユーザの操作から下記のような状態の違いを読み取ることができ、それぞれに対して異なる反応を返すことができます。（ ）内は反応の例です。
- ユーザーがまだ見ていないページにリンクしているテキストがある
→ 文字色青+アンダーライン - ユーザーが既に見たページにリンクしているテキストがある
→ 文字色赤紫+アンダーライン - マウスカーソルが「リンク」のあるテキストかボタンの上にない
→ 特になにもしない - マウスカーソルが「リンク」のあるテキストかボタンの上にある
→ カーソルを指型に変える、文字色を変えるなど - ユーザーがリンクをクリックした瞬間
→ 文字や背景色を変えた後でリンク先へ移動するなど
このような学習効果やアフォーダンスを上手に利用すると、ネットに不慣れなユーザーにも「わかりやすいサイトだなあ」という印象を持ってもらいやすくなります。
（逆に、ネットに慣れた好奇心旺盛なユーザーをターゲットにした場合に限れば、ユーザーのそうした意識を裏切ることが新鮮で効果的な場合もあります。）
JavaScriptやFlashなどを使用したページでは、下記のような状態の違いを読み取ることができ（これ以外にも多くの状態を判別できます）、様々な反応を返すことができます。（ ）内は反応の例です。
- 画面上のカーソルの座標
→ グラフィックやテキストをカーソルに追従させる等 - ページが表示されてから経過した時間
→ 自動的なページめくり等 - ユーザーが使用しているディスプレイのサイズ
→ 新しく開くウインドウの位置とサイズを決める等
例）じわっと消えて見えなくなる、スクロールするようにページが切りかわる、操作の結果としてふさわしい音がする、マウス位置によってサムネイル画面の移動スピードが変わる・・・
ユーザーに予め何が起こるかを予測させた上で操作を行ってもらい、それがユーザーの予想通りに正しくシステムに伝わったことをシステムが何らかの形でフィードバックを返すことによって、ユーザーは安心してそのシステムを使うことができます。
また、その時のシステムの反応が美しかったり、機敏であったり、ユーモラスであったりすることによって、ユーザーは、より心地よく次のコンテンツへ導かれてシステムを使い続けることができます。
Web標準のコンテンツは、主として下記のような技術を使って実装します。
- 構造（ストラクチャーやストーリー・デザイン）
→ (X)HTML を使う - 表現（スタイリング・デザイン）
→ CSS を使う - 振る舞い（インタラクション・デザイン）
→ DOM や ECMAScript （JavaScriptやActionScript）を使う
====================================
【課題-1 サイト分析-4】 10/29（木）17:00までに提出
自分が選択したサイトについて、トップ画面と主要サブ画面についてナビゲーションデザインとインタラクションデザインを分析してください。
- トップページ・主要サブページ・注目ページの画面
代表的な画面のキャプチャを貼り付けてください。 - 授業で説明したサンプルを参考にナビゲーション用のボタン類をフレームで囲んで示し、種別や特長を書き込んでください。
レポートは配布用サーバに入れてあるIllustratorのテンプレート「091023_サイト分析-4.ai」を使用。レイアウトは各自で工夫してください。提出はPDFで行うこと。
≫作業環境・PDFでの提出方法
【課題-2 サイト分析-5】 10/29（木）17:00までに提出
Web上で様々なインタラクションを探して下記をレポートしてください。操作をしていて「心地よかった」「新鮮な感触だった」「スマートだと感じた」サイトで、それがどういったインタラクションによって導かれた印象なのかをキャプチャや言葉を使ってグラフィカルに伝える練習です。
- ユーザーの操作を促す要素はどれか
- ユーザーのどんな操作に対して画面や音声がどのように反応しているか：この部分を最も詳しく解説してください
- 操作した際のインタラクションについての感想
サイト選択は自由です。
レポートは配布用サーバに入れてあるIllustratorのテンプレート「091023_サイト分析-5.ai」を使用。レイアウトは各自で工夫してください。提出はPDFで行うこと。
≫作業環境・PDFでの提出方法
≪この課題の目的≫
- Webサイトを「インタラクション」という視点で観察する
- 自分のサイトの企画書でインタラクションデザインについて記述する際の予行練習
【課題-3】次週授業開始までに用意しておく
どんな人を主要ターゲットにどんな情報を提供するサイトを作りたいか、各自で考えてメモしてきてください。来週はグループでコンセプトワークとペルソナ制作を行います。
様々なサイトを観察してきたので、スタンダードなサイトについてはかなりイメージができてきたのではないかと思います。
「超スタンダードなサイトをがっちり計画するとしたら、どんなコンテンツを用意してどんな構造やスタイリングで表現していけばよいだろうか？」
「あまり一般的ではないけれど、こういうユーザーをターゲットにしてちょっと尖ったサイトを作りたいが、どうやって表現しようか？」
などを考えながら、自分が作りたいサイトについて、サイト構造のラフや画面デザインのサムネールスケッチなどを開始してください。
