2011年情報デザイン演習３ ~Information Design3~

1/17

2012-01-17T18:07:00.000+09:00

今回で最終発表になります。
最終発表も中間の時と同様にゲストの方々に着て頂きプレゼンを評価して頂きます。
発表時間はひとり４分で背景などコンセプトの発表からデザイン案までをプレゼンします。
最初に図書館サイトの人からプレゼンを行いました。
中間からの改善案を受けてペルソナなどコンセプトの根幹にもう一度掘り下げてプレゼン資料の作り方も大きく改善されています。

図書館を選んだ人たちは多かった問題点として

　情報の多さ、情報の見つけ難さ　
　サイト内の統一感
　操作方法が難し
　サイトのスクロールが長い

など同じ部分に問題点を感じている様子があった。
プレゼンの前半でコンセプトやペルソナの説明など背景を入れる様になったので今までのプレゼンより伝わりやすい内容になっていた。しかし、限られた時間で省いてしまい全体的に早足になってしまいあやふやになってしまっている場合もある。

アドバイスとして

　ペルソナが本当に正しいか？ペルソナに説得力のある根拠があると良い。
　どういった流れで利用するのか？実際の使用シーンを取り入れる。
　ペルソナ一人専用の内容にならない様に様々なユーザーへの配慮を取り入れる。

などがあげられ、プレゼンのスキルとして、「言いたいメッセージを大きく見せる、ビジュアルなどを使い伝わりやすさに気をつける。」などがあります。

MTIでは図書館と違い、何を行っている企業なのか分からないので企業のサービス把握に重点をおく場合が多かった。
そこからペルソナとして投資家向けや、就活生、など企業の把握が素早く行える事をサイトの目的にしている。
　認知度の高いサービスを目立つ所にもってくる。
　サイトの各コンテンツをまとめたり、ナビゲーションの場所などに気を配る。
　1ページに情報が多くなりすぎない。
など、情報の量とサイト内で迷わない事を重要視するデザイン案が多い。
アドバイスとして多く上げられる内容は
　押せる所とコンテンツの違いが分かると良い
　プレゼンの文字が小さいと読めない。
　サイトの英語表示は見た目が整っても読めないと意味が無いので注意。
　問題点＝仮説　にならない様に。なぜその問題点になるのかデータを。
　ペルソナのシナリオの根拠があるとよい
などデザイン的なアドバイスや、プレゼンの内容などアドバイスを受けました。
また、大切な部分で
「情報が多いから整理をする。という方向性で進める場合が多いですが、減らすばかりでなく情報をシッカリ見せると言う事にも注意しましょう」
教諭ゲスト
原田
自分の好きな事にはこだわりをみせますよね？自分の手がけるコンテンツを好きになってデザインができましたか？自分が好きになってデザインをして行きましょう。
遠藤
人前に立つ時のレベル。プレゼンの文字はキーワードにまとめるなど、人に伝えるという事を大切にしていきましょう。
MTI
高橋
どういったものをユーザーに伝えたいのか？根幹がぶれてしまった人は最終提案もすこしぶれてしまったかな？真になる部分をしっかり持つ事で人にも伝えられると感じます。
出島
問題点やペルソナなどが最後まで一貫性が保ててない場合もありましたが、どういったプロセスで調査を行うなど勉強できていると感じます。今後より説得力を得られる様に一つ一つの根拠などプレゼンにも行かせる様に頑張って頂きたい。
三井
サイトの分析をする時、このサイトは何のためにあるのかを真剣に考えて頂きたい。そこからその後の改善策を考える時にも一貫したものになるはず。表面的なものにならないように。誰に取って役に立つのかを気をつけて。
佐藤
物事を考える時に「本当にそうなのか？」を常にもつように。アイデアが本当に最高なのか？１０個の質問に明確な答えが出来る様に。
プレゼンの仕方、良い物を良いアピールの仕方で初めてなりたつ。プレゼンの練習にも気をつけましょう。
平田
課題としてペルソナの立て方やデザインへの関連性の部分が弱いかなと感じました。その視点を選んだ事への根拠を明確に示す事が出来れば今後より伸びて行くと思います。
松崎
ユーザーエクスペリエンスの手法が実際のwebの現場でまだ行き届いている訳ではないので、学校でこういった手法を学べる事は大きいと思います。
調査フェイズで自分の当たり前だと思っている事を壊せるかと言う事に注目してみると良いと思います。
楽天の脇坂
前提の条件からどう積み上げて行くのか？プレゼンのなかのストーリーの組み立て方に気をつける。プレゼンの練習をして違和感の無い様に改善する。また、そこからデザインのブラッシュアップにもつながるでしょう。
安藤
コンテンツをただの単位としかみていないのでは？コンテンツの内容をしっかり見て、奥にある隠れた魅力を引き出すという事も大切です。
山崎
webのデザインとプレゼンのデザイン。両方ともしっかりとできていたのか？プレゼンのデザインが今後より大切になっていく。webの実装が出来なかった時にもプレゼンではしっかりビジュアルが見せられる様にするなど、プレゼンの練習もしていきましょう。
加えてプレゼンは立ってオーディエンスを向いて。

1/10

2012-01-10T17:53:00.000+09:00

新年一回目の授業です。
次週に授業の最終発表会を行います。

次回授業までに準備する事

1/17 13:00までにプレゼンデータを授業支援システムへ提出
データを2MB以内
(重い場合は画像を縮小してデータを2MBにおさめる)
プレゼンデータ
1.pdf（説明）
2.実装化したwebサイト

プレゼンでは以下を考慮する。
１.千葉市図書館のweb担当者またはMTIのweb担当者からの課題に対してリニューアルを提案する形で説明する。
2.提案するデザインが、どのように問題を解決して、どのように湯ぐれているのかを論理的に理解できる様に説明する。
3.説明は一人４分以内で下記のような流れを参考に
問題把握→コンセプト→ワイヤーフレーム→評価→採取提案→実装

それぞれ、自分のデザインをDreamWaverを使って実装化する作業を進めて行きます。
画像のリンクにするのか、テキストは打つのか、細かい部分にも注意を払い完成を目指します。

最後にサーバーへおアップロードを確認しました。
注意点として今回はアップロードした後に検索にかからないように
//
を入れる様にしましょう。

12/13

2011-12-20T14:52:00.000+09:00

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

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

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

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

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

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

11/29

2011-12-13T14:31:00.001+09:00

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

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

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

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

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

10/25 6回目

2011-12-13T14:28:00.000+09:00

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

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

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

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

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

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

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

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

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

「いい書体と出会う」

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

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

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

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

10/18 5回目

2011-10-25T11:36:00.000+09:00

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

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

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

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

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

10/11　４回目

2011-10-25T11:18:00.000+09:00

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

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

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

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

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

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

10/4 ３回目

2011-10-04T23:51:00.002+09:00

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

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

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

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

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

9/27 2回目

2011-09-29T17:23:00.009+09:00

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

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

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

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

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

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

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

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

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

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

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

2011年 情報デザイン演習３ ~Information Design3~