12/13

今日はまず最初に2回目の中間報告発表を行いました。
MTIと図書館に分かれてそれぞれ発表を行います。

　発表：３分
　公表：２分
　計　：５分
で発表を行いました。
（写真）

今までのアドバイスを元に、
ペルソナにあったサイト構造を明確にイメージし、ワイヤーフレームの改善を行い、
そこから実際のデザイン案までの発表を行いました。

1回目の発表で多かったペルソナのシナリオとサイトのデザイン案とのマッチングが弱いとの指摘が多く、
今回はワイヤーフレームからしっかりサイト構造を見直す事をした人が多かった。

そこから今回の多かった問題点としては
デザイン案に進んだときの"配色"の問題が多かった。
明度や彩度の違いなどキャラクターの違う要素が多く含まれていて統一感がなくなっているモノが多くあった。
また、枠でかこったり、線で区切ったりといったレイアウトデザインをしている物も多くあった。
それら線や囲いはデザインの要素としてノイズになりやすいので、配色や余白で分ける方法をアドバイスとして受ける人が多い様子であった。
ホワイトスペースを残す事を恐れず何を見せたいのか、目的を明確に意識する事をなどが多いアドバイスであった。

後半は実装に向けて
DreamWaverを使ってHTMLとCSSでサイト構築のやり方を確認した。
（図）

11/29

本日の演習のゴール
A)　ストーリーボーディングの材料を作る
ストーリーボーディング（評価を行う）
第３者にストーリーボードの評価をしてもらう。
改善点を書き込む

B)　オズの魔法使いの材料を作る
オズの魔法使い（評価を行う）
第３者に発話思考法で操作してもらう。
改善案を書き込む


来週までに
１：評価2人以上
２：改善点のまとめ
３：ワイヤーフレームの改善

まずは手描きでしっかりとレイアウトのデザイン案を作る。
前回のプレゼンでのアドバイスを受けてサービスの方向性やデザインの見直しを行い、
ユーザーに対して魅力的なサイトのテーマを決定して行く。

ワイヤーフレームの見直すを行い、シナリオにあったサイトの構造を目指す。

10/25 6回目

今回の内容はタイポグラフィと色彩計画についてです。


まずはタイポグラフィについてです。


「文字＝キャラクター」です。


和文書体であれば、明朝体、ゴシック体、行書体や隷書体や勘亭流などの毛筆書体、ディスプレイ書体、欧文書体であればセリフ体、サンセリフ体、スクリプト体、ブラックレター、ディスプレイ書体など様々な書体があります。


また、欧文書体のように文字ごとに幅が異なるプロポーショナルフォントと和文書体のようにどの文字も幅が一定なノンプロポーショナルフォントに分類できます。


どの書体もそのものならではの特徴（キャラクター）があり、使用者は目的や内容、与えたいイメージにふさわしい書体を選ぶことが重要となります。


我々日本人は和文書体と欧文書体を一緒に使う場面も多いでしょう。その際にはできるだけ印象が似ている書体を組み合わせて使うと違和感がなく、読み手の頭にもスムーズに入っていくでしょう。例えば、「小塚ゴシック-Frutiger」のような組み合わせです。ちなみに、和文と欧文を組み合わせて使うことを和欧混植といいます。


「和文-和文」、「欧文-欧文」の組み合わせにおいてはフォントファミリーを揃えるというのも大切です。紙面上、画面上にいくつもの書体が使われると全体の統一感が損なわれてしまいます。とは言え、全て同じ書体を使うとメリハリがなく、どこが重要な情報なのかなどが分かりにくいこともあります。文字のサイズを変える他、太さを変える、字幅を変えるなど工夫しましょう。HelveticaやUniversはファミリーが豊富で様々な太さや字幅のものが揃っています。


文字はデフォルトのまま組めばいいものではありません。字間を調節するカーニングや行間を調節するスペーシングは欠かせません。
メッセージを読んでもらうために費やす労力は必要なのです。


「いい書体と出会う」

これは運も多少影響するでしょうが自らが行動を起こすことでお気に入りの書体を見つけられる確率は確実に高まります。OSに標準搭載された書体の中にも素晴らしい書体はたくさんあります。それ以外の書体の中にお気に入りがあるかもしれません。よく見る雑誌や街中の広告などにも様々な書体が使われています。普段から書体を意識することで自分のお気に入りの書体を見つけてみましょう。



続いてロゴについてです。
ロゴは個人や企業の顔、看板です。それにふさわしいものにしなければなりません。
ロゴ作成の際は上記のような文字選びや文字組みを応用します。
書体を決める際には持っているすべての書体で組んでみるといいでしょう。意外な発見があるかもしれません。
ロゴ作成によく使われるテクニックのようなものもいろいろあります。詳しくはリンクを参照してください。


最後に色彩についてです。
３×３のマスの塗り分けをしました。
縦と横の関係を考慮して配色します。
各々のサイトの配色を考える際に参考となるはずです。



授業で使っていたサイトのリンクを貼っておくので参照してください。
http://www.gege-channel.com/mdc/index.html

10/18 5回目

今回も今までに引き続き前半では個人作業の続きを行い、
「サイト構造をつくる」
「ナビゲーションの提案をつくる」
の二つの完成を目指します。

宿題として、デザインの方針決定、コンテンツリストの作成、サイトストラクチャーの作成を行って大まかなサイト構造まで提案します

続いて、後半ではDWを使った「サイト管理」
の方法を学びました。

本来HTMLやCSSを自分で書いて作った場合に、リンク先のファイルをフォルダ移動させてしまうと一つ一つ書き直さなければなりません。しかし、DWを使えば自動でリンクの修復を行って切れるなど効率よくサイトの管理ができます。

また、豊富に用意されたテンプレートを使う事で素早くプロトタイプを作り事ができ、
そこから本制作へ繋げられるので作業を素早く進められます。

10/11 ４回目

今回は前回から引き続き、ペルソナやシナリオをつくり込んでいきます。
そこからユーザーフローの提案をしデザインコンセプトの方針を決めていきます。

後半では最終制作のためにWebサイトのことを勉強します。

今回を含めて３回分の予定で
１．XHTML + CSS　でダミーサイトの制作
２．DWでサイト管理の方法
３．Flash挿入
を勉強します。

１回目の今回はDWをつかって
「いろいろなリンクのつけ方」
を練習しました。

１．　文字リンク
２．　画像リンク
３．　アンカーポイント

加えてCSSでのテンプレートの使い方や微調整の方法の解説を行いました。

10/4 ３回目

今回は宿題で実施してきた、ユーザビリティテストの結果から、プロトコル分析を行います。プロトコル分析を行うと、Webページの具体的なインタフェースや情報アーキテクチャの問題点が見えてきます。

今回の演習では、調査の報告書をまとめる際に、各タスクの問題点をわかりやすく表現できる、NEMについても学び、タスクの手順がはっきりしている場合は、NEMを算出することにしました。

分析のちゃんとしたまとめと方向性の提示は、レポート課題として次回までの宿題です。

後半は、現時点までの分析でわかった問題点と改善の方向性について、簡単に各自発表しました。
それぞれ発表された内容のポイントを、課題サイトごとにまとめました。
●図書館サイトを選んだ人が設定したペルソナは、
　　１：場所も含めて初めて図書館を使いたいユーザー
　　２：図書館は使っているがWebサービスを初めて使いたいユーザー
と大きく分けました
問題点として多かった物は、
　・トップページでのコンテンツの多さ
　・左右のメニューバーに分かれている視認性の悪さ
　・図書館地図のみにくさ（小さい）
　・検索機能ページの複雑見た目
　・似た用語による操作の混乱
などが上げられ、多くの人が同じ着目をしている要素が多く見られました。
●企業公式サイトを選んだ人のペルソナは
　１：就活をしている学生
　２：投資を考えてる投資家
と大きく分けられました。
どちらも会社の概要、そして詳細を知りたいと思ってサイトを見たいユーザーを設定している場合が多かったです。
そうした観点での問題点として
　・情報がグループ分けされておらず目的のコンテンツが分かり難い
　・目立つべき項目が埋もれてしまっていて探すのが難しい（下にあったり）
　・アイコンやタブが分かり難く見落とす
など情報は書かれているがそれを読ませる工夫が必要だと感じている人が多い傾向がありました。

余談
PC室の空調が壊れておりエアコンを動かすと暖房になってしまうという困った状態に、
窓を開けての授業となりました。スクリーンや空調など一括管理がされている部屋なのに
窓やブラインド類は全て手動というアナログな一面に初めて気がつきました。

9/27 2回目

この演習は、情報デザイン論３と連動して行う演習です。
情報デザイン演習３の目的は、実務的なWebサイトのリ・デザイン作業を通して、情報デザインのアプローチや知識を総合的に身につけることです。

まず最初に、２種類の実在する課題サイト（企業公式サイト／図書館サイト）から、各自対象サイトを選択します。
基本は個人作業ですが、グループで助け合ってもOKということにしています。

第１週目は、Webサイトデザインのプロセスの概要を学んだ後、各自が選んだ対象サイトをよく調べ、以下の３つのドキュメントを作成しました。

　　・サイトの目的の明確化
　　・サイトマップ
　　・コンテンツリスト

その上で、想定ではありますがターゲットユーザー分析を行います。このターゲットユーザー分析を通して、このサイトのキャストを整理していきます。
キャストを整理できたら、その中での想定のウェイトを考え、作成すべきペルソナを選びます。

ペルソナは、ユーザー調査を実施し、想定された属性の人からインタビューを複数人以上実施し、得られた事実からKJ法で作成します。

今回は２週目で、既存サイトの問題点を探るために、ユーザビリティテストを実施します。そのための、実施計画とパイロットテストを行います。
実施計画の立案では、タスクの設計が重要です。作成したペルソナやターゲットユーザー分析を基に、ユーザーのゴールを想定したタスクを作成します。

ユーザビリティテストは、発話思考法によって実施し、「プロトコル分析」を行います。
発話思考法は、実験協力者（被験者）に、Webサイトを操作しているときに考えていることを、その都度声にだしてもらって操作してもらう方法です。こうすると、その人が考えていること、認知していることを、外部からでも推測することができます。

プロトコル分析をするためには、映像で記録しておくことが有効です。各自が持っているデジカメの動画機能をつかって録画します。

分析には、動画によるプロトコル分析を支援する、「動画眼」を使って発話を書き起こします。

次回までに、各自が２名以上のユーザーに立案したユーザビリティテストの実施計画に基づいてテストを実施し、プロトコルを書き起こしてくることが宿題です。
がんばってください。