1/17

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

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

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

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

アドバイスとして

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

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



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

1/10

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

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

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

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


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

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

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でのテンプレートの使い方や微調整の方法の解説を行いました。