12 合評

【日時】　2010年1月13日（水）10:40〜12:00 →　16:00〜18:00
【場所】　I棟311　
【講評】　
　　　　　Semitransparent Design　田中良治氏
　　　　　GRAPH　北川一成氏
　　　　　岡澤理奈事務所　岡澤理奈氏
【発表者】発表順：
　１）課題提出済みで事情により欠席した学生のプレゼンテーション
　　　中村さん
　　　木下さん
　　--------　
　２）初回提出時の優秀者によるプレゼンテーション
　　　上間さん
　　　坪井さん
　　　高田さん
　　　三好さん
　　　割石さん
　　--------
　３）ブラッシュアップ優秀者のプレゼンテーション

　
※前回連絡時とは１）と２）を入れ替えて行うことにしました。
※３）は合評時間に余裕がなければ省略します。

提出物と合評について

時間・発表順等を変更しました。赤字部分確認してください。

■課題未提出者へ

下記をクリアした場合に限り、単位を認定します。
・12月25日（金）14:00までに課題のPDFをサーバに提出すること
・12月25日（金）14:30からの補講（at研究室）に出席すること

---

■課題提出済の欠席者へ

インフルエンザなど事情があって欠席した学生のプレゼンテーションは年明けの合評時（1月13日）に行います。提出物に対するコメントは各自へメールで送りますので、参考にしてブラッシュアップしてきてください。

---

■課題のブラッシュアップについて

12月11日・18日のプレゼンテーション時に指摘した点をブラッシュアップしてPDFでサーバに提出してください。最終的な成績はブラッシュアップ後に提出されたデータで判断します。

提出済みの課題と学生による評価をPDFにして24日（木）にダウンロードサーバに入れておきます。他の学生の作ったサイト企画書や評価を自分のサイトのまとめ方の参考にしてください。

【提出締切】1月12日（火）17:00

※合評時にプレゼンテーションを行う学生（上間さん・坪井さん・高田さん・三好さん・割石さん）はプリントアウトを提出してください。

１）必ずブラッシュアップしB1サイズにレイアウト
　　　↓
２）ヘッダ部分の標記は下記に統一（B1パネルに1箇所でOK）
　　成安造形大学　メディアデザイン領域　グラフィックデザインコース　Website Design
　　コンセプト制作：○チーム　メンバー全員の氏名
　　サイトデザイン制作：自分の名前
　　　↓
３）データを2枚並べてB1で大型プリンタ出力
　　　↓
４）5mm厚のハレパネに貼って 1月12日（火）18:00（研究室）までに提出
　　出力費用は授業で持ちますので、TAさんに申請してください。
　　ハレパネ代は各自負担してください。

※ブラッシュアップ提出時の優秀者には、後日プリントアウトをお願いする可能性があります。

---

■合評について

【日時】　2010年1月13日（水）10:40〜12:00 →　16:00〜18:00
【場所】　I棟311　
【講評】　
　　　　　Semitransparent Design　田中良治氏
　　　　　GRAPH　北川一成氏
　　　　　岡澤理奈事務所　岡澤理奈氏
【発表者】発表順：
　１）優秀者によるプレゼンテーション
　　　上間さん
　　　坪井さん
　　　高田さん
　　　三好さん
　　　割石さん
　　--------　
　２）課題提出済みで事情により欠席した学生のプレゼンテーション
　　--------
　３）ブラッシュアップ優秀者のプレゼンテーション

　
※１）と２）を入れ替えて行うことにします（木下さん・中村さんが先）2010.01.06
※３）は合評時間に余裕がなければ省略します。2010.01.06

11 プレゼンテーション-2

［企画書プレゼンテーション］

グループ単位で企画書のプレゼンテーションの続きを行います。

　↓

CグループとDグループ、及び先週の欠席者にプレゼンテーションしていただきました。

11 プレゼンテーション-1

［企画書プレゼンテーション］

グループ単位で企画書のプレゼンテーションを行います。
発表順はこちらで指定しますので、グループメンバー全員がスタンバイしてください。

個々のメンバーがそれぞれの企画書の各ページを見せながらグループ共通のサイトコンセプトと自分の作成したサイトデザインについて解説してください。持ち時間は1人5分です。時間厳守。

　↓

AグループとBグループのメンバーに発表していただきました。

10 Web標準について学ぶ─企画書制作作業と相談

1. 前半は、Web標準について話します
   
   
2. 後半は、先週の続き：グループ内で中間プレゼンテーションをしてください。同時に、カンプを作成してきた人に対しての個別相談を行っていきます。
   
   
3. 次回は企画書の提出日です。事前に内容を確認しておきたいので、必ず12:00までにPDFでサーバに提出すること。
   授業時間は最初からプレゼンテーションの時間とします。順序は、グループ単位でこちらで指定します。遅れないように来てください。
   
   
4. 各グループとも、「イメージボード」「ヒアリング・シート」の更新は自由です。
   
   
5. これまでの課題をまだ提出していない人は来週木曜日までに提出すること。

※ファイル名には「.」「/」「\」「*」「?」「"」「<」「>」「|」は使用しないこと。「.」は、「.pdf」「.psd」「.ai」などのように、制作アプリケーションを表す拡張子とセットでのみ使用します。ファイル名に入れてしまうとトラブルの原因になります。

---

■Web標準

Web標準とは、「Web上でのユーザビリティやアクセスビリティを向上させるために設定された国際標準的な規格」のことです。W3C（World Wide Web Consortium）を中心に、ISOやOASIS等の団体が標準化を進めています。

特にW3Cが策定した仕様書が、HTMLやCSSに関するWeb標準として広く認められています。これは、情報を（文章内容：コンテンツ）と（表現方法）に一旦分離し、それぞれ「HTMLやXHTML等でコンテンツを正しく構造化」し「CSSとDOMで視覚表現やインタラクションを統一的にコントロール」するものです。→サンプル （このサンプルは11月27日の日付でダウンロードサーバに入れてあります）

Web標準に基づいたサイトを作成すると下記のようなメリットがあるので、現在、ビジネス用のサイトではかなり重視されています。

1. メンテナンス性が向上する
   　複数の人が制作に関わる場合や、サイトのリニューアル時に効率的


2. アクセシビリティが向上する
   　誰にとっても利用しやすくなる


3. ファインダビリティ（見つけられやすさ）が向上する
   　SEO（検索エンジンへの最適化）対策に有利


4. ブラウザによる表示の違いが少なくなる

現在の時点では、HTML4.01かXHTML1.0または1.1の、[Strict]または[Transitional]の文書型を使い、CSS2と組み合わせるのが現実的だと言われており、HTML5が標準化されるのも近い状況です。将来Webデザイナーを目指す人は、仕様書のバージョンアップやブラウザの対応状況を見極めて対応していけるような知識も身につけていってください。サイトの企画・設計時には、どの程度までの適用が開発条件となるのか、予め担当者とすり合わせを行っておく必要があります。

＜参考＞

詳細は、W3C（World Wide Web Consortium）のサイトや専門書で確認しましょう。また、オペラのサイトにウェブスタンダードカリキュラムが紹介されており、HTML、CSS、JavaScript 開発を含むウェブ標準を利用したウェブデザインについて独習できるようになっています。

Web標準に関する参考書籍については、下記のページを参考にしてください。

1. Web標準に関する良書を教えてください。

---

【課題　企画書完成】

11月6日の授業で配布した2枚のサンプル（Webサイト企画-1.jpg、Webサイト企画-2.jpg）を参照して、2枚構成の企画パネルを完成させてPDFで提出すること。
●制作形式●

1. B2サイズの用紙を縦に使って制作する
   1枚目：コンセプトボード
   　　　（グループ共通のものを作成しても、各自が別々に作成してもどちらでもOK）
   2枚目：デザイン案ボード
   　　　（各自が作成すること）
   
   
2. 制作者名とグループ構成者名がわかるようにレイアウトフォーマットを作成する

●提出形式●

1. PDFでサーバに提出。
   ※PDFの形式はQ&Aで確認してください。
   


2. 提出フォルダは必ずグループ名と自分の名前を書いたフォルダに入れて提出
   
   サンプル：「A_田中一郎」フォルダ内に下記の2点を入れる
   　　　　　　　　・A_田中一郎_コンセプト.pdf
   　　　　　　　　・A_田中一郎_デザイン提案.pdf
   
   サンプル：「A_田中・中山・山田・田村」フォルダ内にコンセプトボード1点を入れる
   　　　　　　　　・A_A_田中・中山・山田・田村_コンセプト.pdf
   　　　　　　「A_田中一郎」フォルダ内に下記の1点を入れる
   　　　　　　　　・A_田中一郎_デザイン提案.pdf

●提出期限●

1. 12月11日（金）12:00　時間厳守


2. 発表人数の関係上、4時間目終了後、6時間目に改めて延長授業になる可能性があります。6時間目に授業予定を入れている人は予め申し出てください。

09 ユーザビリティやユニバーサルデザインについて学ぶ

1. 前回までの課題をまだ提出していない学生は、至急仕上げて提出すること。


2. 先週の課題としていた企画書のラフをグループ内でプレゼンテーションしてください。


3. 次回までの課題：相互プレゼンテーションの結果を受けて、引き続き企画書をバージョンアップしてくること。そろそろラフの次のステップへ。

---

●アクセシビリティ

「アクセシビリティが高い」とは、一言で言うと「広汎な人に利用可能である」ということです。

Webアクセシビリティは、インターネットでの情報流通が一般的になればなるほど起こりやすい情報格差をなくし、すべての人にが同じように情報を共有できるようにしたいという考え方を基盤にしています。
特に自治体や公共機関、幅広いユーザーを持つ企業のサイトをデザインする際には、高齢者やハンディを持つ人に対する配慮が大切です。様々なユーザーが多様な機器やブラウザでアクセスすることを前提にデザインする必要があります。

「Webアクセシビリティ」については、W3Cによって「WCAG」(Web Content Accessibility Guidelines)という指針が提唱されています。また、日本でも「JIS X 8341-3」（高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス− 第３部：ウェブコンテンツ）という指針が策定されており、年内にでも改訂される予定です。

1. 画像や音声などには代替テキストによる注釈（Alt記述）をつける
   

   <h1><img src="product.png" alt="製品案内" /></h1>
   

   
   


2. すべての要素をマウスだけでなくキーボードでも指定できるようにする


3. 情報内容と構造、および表現を分離できるようにする（HTMLで内容と構造、CSSやDOMで表現を担当する）→サンプル


4. 高齢者や色弱者にも読みやすい文字や色を使う（あるいは設定が柔軟に変更できるようにしておく）


5. ユーザーエージェントが適切に解釈できる状態（Machine Readable / Understandable）にする
   音声ブラウザやスクリーンリーダ、点字ピンディスプレイに対応する

など

次週説明する「Web標準」という考え方・規格・仕様に基づいてサイトを制作することが、アクセシビリティ確保の基本となります。

●ユニバーサルデザイン

「ユニバーサルデザイン」とは、「文化・言語・年齢・性別・ハンディキャップ如何を問わずに利用することができるように施設・製品・情報のデザインを行う」ことです。バリアフリー概念の発展形。

「アクセシビリティ」とコンセプトは同様です。「Webアクセシビリティの高いデザイン」とは、インターネットを利用した情報デザインの分野での「ユニバーサルデザイン」と捉えることができます。

ユニバーサルデザインの7原則

1. どんな人でも公平に使えること


2. 使う上で自由度が高いこと


3. 使い方が簡単で、すぐに分かること


4. 必要な情報がすぐに分かること


5. うっかりミスが危険につながらないこと


6. 身体への負担（弱い力でも使えること）


7. 接近や利用するための十分な大きさと空間を確保すること

●ユーザビリティ

「ユーザビリティが高い」とは、一言で言うと「使い勝手が良い」ことです。

ISO9241-11（国際標準化機構：ISO:International Organization For Standardization)では、ユーザビリティを以下のように定義してあります。
「Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.」（ある製品を、特定の利用者が、特定の目的を達成するために、特定の状況で利用する際に、有効かどうか、効率がよいかどうか、満足を得られるかどうかの度合い。）

まず基本的な点で対象ユーザーへのアクセシビリティを確保した上で、それぞれのユーザーの満足度をどこまで上げることができるかを検討することになります。

また、ユーザビリティということを最初に提起したヤコブ・ニールセンは、学習しやすさ (Learnability)、効率のよさ (Efficiency)、記憶しやすさ (Memorability)、エラー がないことや起こった場合の対応が的確であること(Errors)、満足度が高いこと (Satisfaction) などと定義しています。

ユーザビリティの高いWebサイトを作成するためには、下記のようなチェックリストを持っておくと良いでしょう。

1. ユーザーにとって情報の構造は適切だろうか？


2. ユーザーは目的ページへ効率よくたどり着けるだろうか？


3. ユーザーはナビゲーションの使用方法を直感的に理解できるだろうか？


4. ユーザーは現在の位置を適切に認識できるだろうか？戻りたい場所へ戻れるだろうか？


5. ユーザーが安心感・信頼感を持てるような一貫したデザインルールに則っているだろうか？


6. 各ページのレイアウトは、ユーザーに伝えたい内容の序列を適切に反映しているだろうか？


7. コンテンツの内容はユーザーを満足させるものだろうか？

●ファインダビリティ

「ファインダビリティが高い」とは、「情報を見つけやすい」ということです。

狭義では検索エンジンにとっての見つけやすさを表し、検索を行った時に上位に表示されるサイトがユーザーと接触する機会を多く持てることから、販促や認知度向上のためにSEO（Search Engine Optimization）対策（検索エンジン最適化）として商業サイトで重視されています。

しかし、ファインダビリティの本質はもっと深く、情報過多な時代にあって、あるコンテンツをそれを必要とするユーザーに（そのユーザーが情報の探し方について未熟であったとしても）適切に提示できるかどうかということにあります。
Amazonのリコメンド機能やアフィリエイト機能のようなものから、セマンティックウェブやソーシャルウェブの考え方なども含め、インターネット上の情報はサイト単位・ページ単位で閉じているわけではなく、個々のコンテンツがネットワークの中に個別にも存在しているということを理解すること、そしてそれを伝えることができるかということを考えることは、制作者に必要な観点です。

＜参考＞

詳細は、W3CのサイトやJISのサイト、専門書で確認しましょう。
また、自治体や企業で独自に指針やチェック事項を設定しているところもあります。サイトの企画・設計時には、こうした基準について、どの程度までの適用が開発条件となるのか、予め担当者とすり合わせを行っておく必要があります。

1. W3C Web Content Accessibility Guidelines 2.0


2. ハンディがあっても利用できるページづくり：Webアクセシビリティ


3. ユーザビリティとは？（U-site）


4. Webアクセシビリティ入門


5. ユニバーサルデザインについて話そう：パナソニックのユニバーサルデザイン


6. IBM Webアクセシビリティ


7. IBM Javaアクセシビリティ


8. Flash/PDFのアクセシビリティ


9. Ajaxのアクセシビリティ：W3CによるWAI-ARIA（Accessible Richi Internet Applicaton）仕様


10. いしかわWebデザインガイド：自治体のガイドライン


11. 「アンビエント・ファインダビリティ」ピーター・モービル：著


12. 「栞をみて来ましたか？ - (Japanese Translation)」

---

【課題　企画書全体のバージョンアップ】

企画が決まったら、まずは紙上でパーツを構成し、そこに配置したボタン類を頭の中で使ってみます。（これをクリックしたら…画面のこの部分がこうなって…その後でこんな事が起こる…こういう場合、多分ユーザーが次にするのはこういうことで…その為にはこれをこんな風にできるようなボタンやフィールドの配置がいるなぁ…。なんていう感じ。）この時、自分に使わせてみたり、設定したペルソナに使わせてみたりしながら、構造を詰めていきます。

画面デザインに関しては、そろそろIllustratorやPhotoshopを利用しはじめましょう。

●制作形式●

1. B2サイズの用紙を縦に使って制作する


2. 制作者名とグループ構成者名がわかるようにレイアウトフォーマットを作成する

08 サイトコンセプトについて再考する・ストーリーボードについて学ぶ

1. 最終提出物の形式について再度説明します。［2枚構成のパネル形式］とします。ダウンロードサーバに入れてあるサンプルを参照してください。


2. 前回までの課題をまだ提出していない学生は、至急仕上げて提出すること。


3. グループで作成したペルソナやシナリオを更新した場合には、PDF形式で授業開始までに提出してください。ファイル名は「ペルソナ_Xグループ.pdf」、再提出の場合は「ペルソナ_Xグループn回目.pdf」とすること。


4. 先週の課題としていた企画書のラフをグループ内でプレゼンテーションし合ってください。各グループを回ってコメントします。


5. 「成安・および、成安のグラフィックデザインクラスの特徴（良いところを中心に検討）」について、グループ内での討議を行なってください。討議にはグループ全員が参加すること：意見やアイデアをどんどん伝えるようにしてください。他の人が何をどのように説明しているのかを観察することが自分の参考になりますし、意見をなかなか伝えることができない人から思いを引き出す力もデザイナーの能力です。


6. 次回までの課題：相互プレゼンテーションの結果を受けて、引き続き企画内容をバージョンアップしてくること。詳細は下記。課題

---

08-1　ストーリーボードについて学ぶ

ユーザーにサイト内で様々なことに参加してもらう必要がある場合には、ストーリーボードを作成します。

• 何をトリガーにしてインタラクションに参加してもらうか（入口）、
• どんな手順で参加してもらうか（導入フロー）、
• ユーザーの操作に対応してフローを分岐させるのかどうか（展開フロー）
• そこでユーザーが受け取るものはどのような結果であるか（収束フロー）
  
• どの時点でタスク完了とすべきか、また、その伝え方（出口）

条件に応じて分岐を発生させながら、複雑なコミュニケーションをとらなくてはならないような場合、ペーパープロットタイプを作成して、対象としているユーザーが迷わずにタスクに集中できるまで、フローやルック&フィールや振る舞いを練り上げていってください。

---

【課題　企画書ボードのラフ案作成】提出期限：次週木曜17:00まで。
企画内容をボードにまとめていきます。

●1枚目（サイトコンセプト）

　・サイト利用者（ユーザー）
　　　サイト利用者のペルソナ
　　　サイトを利用する目的
　　　心地よいサイト利用の条件
　　　イメージコラージュ

　・サイト提供者（クライアント）
　　　サイト提供者のペルソナ
　　　サイトを提供する目的
　　　提供するコンテンツとプライオリティ
　　　アピールポイント
　　　
　・デザイナー
　　　デザインコンセプト

　・サイト構造図
　　　成安全体の公式HPからの遷移
　　　コンテンツの構成
　　　トップページとメインコンテンツページの関連性がわかるようにマーキング

●2枚目（サイトデザイン）

　・成安全体の公式HPからの遷移
　・トップページ
　・メインコンテンツページ

デザインのポイントがしっかり伝わるように、ボード自体もデザインしながらすすめてみてください。
次週は、途中段階で良いのでPDF保存したものをサーバに提出してください。

1. パネルサイズはB2です。必ず縦に使用してください。
2. PDFでの提出─ファイル名は「企画ボード_X_氏名.pdf」（Xはグループ名）とすること。

07 グループ発表

1. 各自が制作してきた「イメージボード」をグループ内で見せ合って、グループ内ベストを決めてください。（10分間で決定：1人1分プレゼン→投票or話し合い→決定）


2. サイト分析のまとめとして、グループ発表を行っていただきます。「ユーザーペルソ ナ」「ユーザーシナリオ」「ヒアリングシート」「イメージボード」を使って、誰の為にどんなWebサイトを作るのか、代表者が発表します。各グループの持ち時間は5分です。
   「ユーザーペルソナ」「ユーザーシナリオ」「ヒアリングシート」はこれまでのグループの成果物を使用します。「イメージボード」はグループ内ベストを使用してプレゼンテーションしてください。


3. 次回までの課題：今回のまとめをベースに、各自で企画書のラフをしてくること。詳細は下記。課題

---

07-1　サイトコンセプト、デザインアイデアの続き

ヒアリングシートに整理した内容を元に、発注者のシーズと利用者のニーズがマッチするよう、サイトコンセプトを検討していきます。
まずは、最も大切で優先度の高いコンテンツについて、どうやったらユーザに最もわかりやすく伝えることができるのか？どうやったら多くのユーザに楽しんでもらえるのか？現状で感じている問題がある場合、新しい解決アイデアはどんなことだろう？……サイト名やキャッチコピーなどを考えはじめてみると、そこからもヒントが生まれてくるかもしれません。

サイトコンセプトが決定したら、イメージマップやイメージボードを参考に、具体的なデザインアイデアのスケッチを始めます。トップページとメインページのラフスケッチを次週までの課題にします。

07-2　相互オリエンテーションの続き

前回の授業に引き続き、グループ内で相互オリエンテーションを行なってください。
オリエンテーションをする人は発注者の立場で、できるだけわかりやすく具体的に説明します。ビジュアルなイメージを伝えるために、課題として作成してきたイメージマップも使ってください。オリエンテーションを受ける人は受注者の立場にたって、サイトデザインをするために必要と思われる内容を充分にヒアリングしてください。その時の質疑応答も、ヒアリングシートに追記していきます。

07-3　企画書のカンプ作成に必要な素材を用意・提供する

（06-3の続き）トップページとメインコンテンツページのデザインカンプに必要な素材データを、用意します。
もし、必要であれば、いろいろな人に資料を請求してください。その場合、どのような素材がどのような形で必要か、わかりやすくメモして渡すようにしてください。現時点で存在しない素材については、請求できないものとします。モノはあるけれど写真がないというような場合には、デザイン担当者が撮影してデータを作成します。
プロフィールなどのテキストについても、どんな原稿がどの程度の分量必要なのかをわかりやすくメモして渡します。ただし、細部の内容は仮テキストorデザイン担当者が適当に用意してもOKです。

---

【課題　企画書のラフ案作成】11/19（木）17:00までに提出
企画書のラフ案を作成してください。PDFでのサーバ提出でも、手書きしたものの提出でもどちらでもOK。手書きラフの提出の場合は、研究室のドアに貼っておいてください。

• サイトコンセプト：サイトコンセプトを簡潔に示すキャッチコピーとその解説
• サイト構造マップ：サイトの全体構造を示す模式図
• デザイン案：トップページとメインコンテンツページのカンプ
  　基本的なナビゲーションとインタラクションの特徴を解説すること
  

次回の授業はラフスケッチを見ながら進めます。デザイン・アイデアを伝える事ができるレベルのスケッチを用意してきてください。19日の提出後のアイデア追加も歓迎。

06 制作前のコミュニケーションについて学ぶ

1. 「スタイリングイメージマップ」を見ながら、デザインテイストについて考察します。


2. グループで作成した「ユーザーペルソナ」「ユーザーシナリオ」を元に、「スタイリングイメージマップ」上のどの位置にプロットするのかを意識しながら、「イメージボード」（091106_サイト分析_7.ai）を作成します。用意してきた素材をグループで共有し、その後は各自で作業して完成させます。課題1


3. グループで「ヒアリングシート」（091106_サイト分析_まとめ.ai）を作成します。これはグループで完成させます。課題2
   
   
   
4. 次回はサイト分析のまとめとして、グループ発表を行っていただきます。「ユーザーペルソナ」「ユーザーシナリオ」「イメージボード」「ヒアリングシート」を使って、誰の為にどんなWebサイトを作るのか、代表者が発表します。各グループの持ち時間は5分です。「ユーザーペルソナ」「ユーザーシナリオ」「ヒアリングシート」はグループの成果物を使用します。「イメージボード」は、次週の最初の5分間で各自が作成してきたものを見せ合って、グループ内ベストを決め、それを使用してプレゼンテーションしてください。

---

06-1　オリエンテーションとヒアリング

2回目の授業で、Webサイトのデザインで最も必要なことは下記の2つであることをお話し、既存サイトを観察していただきました。

1. クライアントが伝えたい事を充分にくみ取ってよく理解すること
2. クライアントが伝えたい相手がどういうユーザーなのかをよく理解すること

今日は、実際に制作するWebサイトについてこれらのことを考えてみます。
プロジェクトの発生時点で、既に先方の担当者が開発意図・目的・予算・スケジュール等を記述した提案依頼書を用意している場合もありますが、「とりあえず作りたいんだけど…どうしたらいい？」という状態の場合も多くあります。
まずはクライアントからのオリエンテーションを受けます。そして、オリエンテーションでは不足していた情報をヒアリングによって聞き出して、それを書類にまとめていくのが最初のステップです。

具体的には、下記のような内容を調査・整理します。

1. 目的
2. コンテンツ・機能
3. 開発・更新・メンテナンス体制
4. ユーザーベネフィット
5. ユーザー／ペルソナ
6. ユーザー環境
7. 現状分析・競合比較
8. 予算・スケジュール・システム構成
9. その他：サイトの規模（ページ数など）、SEO対策、システム関連（フォーム・CMS：更新ツール・DB構築など）、ブランド規定（CI/VI規定やカラー/ロゴなど）、ドメイン、サーバ利用形態、対象ブラウザ/OS　等

自分が作成しようとするWebサイトについて、配布した「ヒアリングシート」（091106_サイト分析_まとめ.ai）を使って発注者の立場にたって記述していってください。（上記に挙げた調査項目のうち、いくつかは割愛してあります。）

グループ内で発注者と受注者にわかれて模擬オリエンテーションを行います。オリエンテーションをする人は発注者の立場で、できるだけわかりやすく具体的に説明します。ビジュアルなイメージを伝えるために、課題として用意してきた「イメージボード」用の素材も使ってください。オリエンテーションを受ける人は受注者の立場にたって、サイトデザインをするために必要と思われる内容を充分にヒアリングしてください。その時の質疑応答も、ヒアリングシートに追記していきます。

06-2　サイト・コンセプト、デザイン・アイデア

ヒアリングシートに整理した内容を元に、発注者のシーズと利用者の中心ターゲットのニーズがマッチするよう、サイト・コンセプトを検討していきます。サイト・コンセプトが決定したら、具体的なデザインアイデアのスケッチを始めます。

06-3　企画書のカンプ作成に必要な素材を用意する

トップページとメインコンテンツページのデザインカンプに必要な素材の準備を始めます。必要な人に必要な資料をお願いして入手しなくてはいけないかもしれません。その場合、どのような素材がどのような形で必要か、わかりやすくメモして渡すようにしてください。現時点で存在しない素材については、請求できないものとします。モノはあるけれど写真がないというような場合には、撮影させていただいてデータを作成します。
プロフィールなどのテキストについても、どんな原稿がどの程度の分量必要なのかをわかりやすくメモしてインタビューしても良いでしょう。ただし、細部の内容は仮テキストorデザイン担当者が適当に用意してもOKです。

■画面サイズ

画面サイズは、作成するWebサイトのユーザーが、どの程度の解像度のディスプレイを使用しているかを考慮して設定します。携帯用のサイトをデザインする場合とPC用のサイトをデザインする場合とでは当然異なります。800*600ピクセル以下の古い機種や画面の小さなモバイル端末を使用している人にも使いやすいようにデザインすることが必要な場合もありますので、最終的にはクライアントと相談して決めます。

一般的な環境については、1024*768ピクセルのモニター画面を対象に、そこからメニューやDockの表示に必要なサイズや、ブラウザのツールバー、サイドバー、スクロールバーなどに必要なサイズを引き算し、更に、ユーザーは通常ブラウザを画面いっぱいに大きく表示させて使用することは少ないといったことも考慮に入れ、横幅が無理なく表示できるように画面サイズを検討しましょう。

また、2段組レイアウトにするか3段組レイアウトにするかで、本文1行あたりの文字数が変わってきます。本文テキストを中心にしたサイトでは、ターゲットユーザーに最適な文字サイズと読みやすい文字数を考える必要もあります。

FlashやCSSを使って、ブラウザのサイズを変えた場合にでもそれに応じてコンテンツ部分のサイズが変わるスケーラブルなサイト（リキッドレイアウト）をデザインすることもできます。ただし、この場合でも、ターゲットユーザーの一般的な利用環境に対して最適な状態を意識した上でデザインすべきであることに変わりはありません。

---

【課題-1　サイト分析-7：イメージボード】11/12（木）17:00までに提出
用意してきた素材をグループで共有し、その後は各自で作業して完成させます。

1. PDFでの提出─ファイル名は「091112_サイト分析_7_X_各自氏名.pdf」（091112は提出日・Xはグループ名）とすること。
2. レイアウトは各自自由です。配布したフォーマットを使用してもしなくてもかまいません。

---

【課題-2　サイト分析-まとめ：ヒアリングシート】 11/12（木）17:00までに提出
授業内にグループで質疑応答した内容も含めてまとめグループ単位で完成させてください。
ペルソナやシナリオを修正する必要が出てきたら、それも含めて修正・再提出します。
アイデアも、使う/使わないにかかわらず、できる限り書き留めておきます。

1. 提出形式：PDF─ファイル名は「091112_サイト分析_まとめ_X.pdf」（091112は提出日・Xはグループ名）
2. レイアウトは各自自由です。配布したフォーマットを使用してもしなくてもかまいません。

　

05 ペルソナとシナリオについて学ぶ

1. これまでに提出していただいた「サイト分析-3　サイト構造の観察」「サイト分析-4　ナビゲーションの観察」「サイト分析-5　インタラクションの観察」について、提出済みのレポートをPDFにまとめてサーバにアップしてあります。他の人がどのような分析をしたのか、確認しておいてください。


2. ユーザ像を明確にするためのペルソナ法と、そのユーザがサイトに訪れた時の体験を記述するシナリオ法について概説します。


3. 次回までの課題：これから作るサイトでのユーザ像と、サイトで提供するユーザ体験について、グループでまとめていきます。「この人のために、こんなサイトにしたい！」という目的意識をはっきり持ってサイト制作を始めるための第一歩です。

※ 企画書のカンプページに掲載する作品などのデータや原稿の用意も並行して始めていきます。先輩達や後輩達、あるいは教授達の作品紹介ページをメインに構成したいというような場合は、データの収集や利用許可などの交渉が必要です。どんなサイトにしたいのかを明確にしていかないとサンプルページの作成さえままなりません。そろそろ、考えて行かなくては…。

---

05-1　ペルソナを作る

プロジェクトを企画していくプロセスでは、クライアントを含めた開発チーム全体が同じ地平・同じ目標を持って考察しているどうかがとても大切です。まだない形になっていないものを求める作業ですから、考察の領域や座標軸・ターゲットとなるエリアイメージをステップ毎に共有していくことが、結果的には後戻りの少ない効率的な開発につながります。

ペルソナ法は、ユーザ像を明確にするための手法のひとつです。
アンケートやグループインタビュー、フィールドワークやコンテキスチュアル・インクワイヤリーなどのリサーチをベースにして、一般的には下記のような項目について決めていきます。（項目は開発する製品やサービスによって異なります）

• 名前・性別・年齢
  • できれば顔写真やイラストを使って、具体的にひとりのユーザとして思い浮かべることができるようにする。
  • 【例】成安花子・女性・45才

• 状況・目的・ゴール
  • 道具を使ったりサイトを訪れたりすることによって、ユーザが実現したいことは何か？について、深いところまで考えてみる。「人はドリルを欲しいのではなく、穴を欲しいのである」（セオドア・レビット『マーケティング発想法』）…でも、人によっては、穴が勝手に空いてくれるのではなくて、自分で穴をあけて楽しむためのドリルが欲しい場合もある。
  • 【例】息子がグラフィックデザインを勉強したいと言い出して、受験する大学をリストアップしてきた。グラフィックデザインって、どういうことなのかしら？大丈夫なんだろうか？ちゃんと社会人になれるのかしら？我が家の家計で入学金や授業料を払えるかしら？まったくわからないので不安・・・息子に笑顔で「頑張って合格しなさい」と言えるように、とにかく安心したい。

• 役割
  • 本人が利用するのか、誰かに利用してもらうのか？
  • 【例】息子が「このサイトを読んでみてよ、僕のやりたいことがだいたいわかるから。」と、受験したい大学のグラフィックデザインクラスのWebサイトをブックマークしておいてくれた。

• 知識レベル・PCリテラシー・ネットリテラシー・類似サービスの経験値
  • 何がわかり、何がわかっていないのか？
  • どんな操作なら難なく出来るか、どんな操作なら戸惑ってしまうか？
  • 同じようなサービスにどの程度慣れているか？
  • 【例】お勤めしていた時からパソコンは使っていたから、基本的な操作には不自由しない。友達のブログやレシピのサイトなんかはよく見ているけど、息子がよく見ているいろいろ動いちゃうようなサイトはどうも苦手。

• 利用シーン・環境
  • どんな状況で道具やサービスを利用するか？
  • 【例】主に夫や息子がでかけている昼間に自宅で家族用のPCを使用。

• その他
  • 家族構成・年収・おこづかい額・健康度合い・性格・考え方の傾向・社会的地位・社会的信条・趣味・嗜好…

このようにして作り出したペルソナ＜成安花子さん＞は、開発すべきサイトのコンテンツやスタイリングや機能について検討する際に、チームのみんなが相談する相手です。
例えば、コンテンツのプライオリティについてスタッフ間でいろんな意見が出て悩んだら、「成安花子さんにとっては、このコンテンツの方がそのコンテンツよりも重要なんじゃないかな？なぜならこういう事情を持っている人だから。」と説明できるかどうか試してみます。

Webというメディアは、紙メディアに比べて印刷コストや流通コストのような物理的な制約が少ないので、ついデザインチーム内でも「この情報は きっと要るよね。」「この機能も多分けっこうたくさんの人が欲しがるよね」…と、情報提供したい側の思惑でコンテンツや機能がぱんぱんに膨らんでいきがち です。でも、てんこ盛りすぎてぐちゃぐちゃのサイトは、見ただけで面倒くさくなってしまって結局誰にも使ってもらえない・・。そういうことを防ぐためにも、＜成安花子さん＞の意見を聞くわけです。

05-2　ペルソナの行動をシナリオとして描いてみる

ペルソナが出来上がったら、＜成安花子さん＞がサイトとどういった関わり方をするのか、目的・ゴールを実現するまでのプロセスを物語として描いてみます。

【例】
息子が「このサイトを読んでみてよ、僕のやりたいことがだいたいわかるから。」と、受験したい大学のグラフィックデザインクラスのWebサイトをブックマークしておいてくれた。どれどれ、ちゃんと読んでみましょう。

なるほど、グラフィックデザインって、こういうことを勉強して、こんな技術を身につけることができるのね。面白そうじゃない。

就職もちゃんとできるみたいね。就職率は・・・と、このご時世だからこんなものなのかしら？他の大学はどうなんだろう？比べてみなくちゃ。

入学金や授業料はどこに書いてあるのかしら？・・・あ、あったわ。クラスのサイトじゃなくて、大学全体のサイトで表示されるのね。・・・なるほど、ちょっと高いけど、ぎりぎり大丈夫かな。あら、奨学金制度なんてあるのね、息子がこれとってくれたら安心ね。「頑張りなさい！」って言わなくっちゃ。

さて、さっきの続きへ戻って・・・と、へぇ・・学生の書き込みがたくさんあるわね、みんな真面目そうだし楽しそうじゃない。この雰囲気なら息子の性格にもぴったりかも。

なんだか安心したわ。他の大学はどうかしら？

05-3　クライアントのシーズを重ね合わせて、サイトコンセプトを見いだす

ユーザー（ペルソナ）がサイトに対して求める内容（要求仕様）と、クライアント（サイトを運営する組織）が提供したいと考えている情報の特徴と重なる部分にサイトコンセプトを見いだしていきます。

05-4　ペルソナの嗜好性をイメージ・ボードで把握する

スタイリング・デザインは、誰でもが意見を言いやすいので、「好き・嫌い」といった参加者の個人的な指向性に左右されやすい領域です。同業者や競合商品のイメージマップは、これから作成するサイトの業界の現状を地図として表現し、トレンドを読み取ったり、視覚的な方向性をクライアントや制作スタッフと共有するために作ります。
新商品のためのサイトを作成するような場合には、ターゲットユーザーのライフスタイルやその兆候を読み取る為に、ファッションや生活グッズなどを収集してイメージ・ボードを作成することもあります。

---

【課題-1　サイト分析-6】初回提出：11/5（木）17:00・2回目11/12（木）17:00
グループで協力して、ペルソナとシナリオを作成します。（作業は次週も続けます）

• サイトコンセプトを考えながら主要ペルソナを選択します。（高校生・受験生・受験生の保護者・在学生・在学生の保護者・他の大学のグラフィックデザインコース専攻の学生・卒業生・企業・地元の人・その他）


• サイトの特徴をしっかり出していくには、どのようなコンテンツを盛り込んで行けば良いか、コンテンツのプライオリティをどうするのか、メニューやサイトの構造はどのようにしておけばペルソナの要求するゴールへしっかり導いてあげることができるのか？などを同時に考えて別紙にメモしておいてください。このメモは、11/13に「サイト分析-まとめ」としてグループ発表の際に使います。

【課題-2　サイト分析-7の準備】
グループで協力して、ペルソナの世界観に対応したイメージボードを作成します。（実際のイメージボード作業は次週に行います）

• グループによる話し合いで決まった主要ペルソナが持っているもの・インテリア・趣味などを、雑誌の切り抜きや写真などをコラージュしてビジュアルとして伝えます。


• コラージュに利用する切り抜きなどを次週（11/6）までに各自jpgまたはPhotoshopデータとして用意してくること。