Webサイト・デザイン 2006

多摩美術大学 情報デザイン学科 情報デザインコース3年次・前期
"Webサイト・デザイン"授業ブログ

4月28日 金曜日 アルゴリズムデザイン 篠原先生

2006年04月29日 | 授業の記録
この日の授業は、「情報デザインにユーザビリティを反映させるためには何が必要なのか」でした。

必要なことは4つ
 1.情報の組織化
 2.ラベリング
 3.ナビゲーション
 4.検索

今日はそのうちの1つ、「情報の組織化」についての授業でした。

■「情報の組織化」とは
 ・物事を理解したり、説明や管理をしやすくするための方法で、情報を整理・分類する作業
 ・「情報の組織化」は、情報の「組織構造」と「組織体系」から構成される

■「情報の組織体系」とは
 ・コンテンツ項目の中から共通特性を見出した上で、項目間の論理的なグループ化を定義する作業
  例:電話帳(あいうえお順、アルファベット順)
    スーパーマーケットの売り場(野菜売り場などの「トピック別」、自然食品などの「目的別」)

■ウェブサイト上の「情報の組織体系」
 A.正確な情報の組織体系
  ・50音順(アルファベット順)
  ・時間(時系列)
  ・位置(地理別)
 B.あいまいな情報の組織体系
  ・カテゴリー(トピック)
  ・タスク(行動)
  ・特定ユーザー
  ・メタファー(駆動)

(記・須永)   

4月26日 サイト設計 (森川 先生)

2006年04月26日 | 授業の記録
今日の授業は、
サイトマップ、ディレクトリ設計など、サイトの設計についてでした。
また、アウトラインプロセッサー:“OmniOutline”,“OmniGraffle”の使い方について、などもありました。

■サイトマップ
サイトマップには、以下の種類があるそうです。
 ・サイトマップ(論理的)
 ・ディレクトリマップ(物理的)
 ・コンテンツマップ(論理的)
 ・その他、リンク、遷移など

■「インフォメーションアーキテクチャ」について
・インフォメーションアーキテクチャとは
  →情報を分かりやすく伝えるための表現手段
    情報を伝えやすく分類する
    伝えやすいインターフェイスを設計する


■ディレクトリ設計

□分類
情報を分かりやすく伝えるためには、
たとえば、「会社概要」「会社案内」「沿革」などは一つにまとめる、など、
ディレクトリをどう分類するか、という事も非常に重要だということでした。

□階層構造
また、ディレクトリの階層構造は
同じ階層にはディレクトリは7つ前後、
階層をもぐる場合は4階層前後、
という階層の設計が一般的に良いとされているそうです。

その根拠は、成人が一度に覚えられるモノの数が
7つ前後であるということによるそうです。

(参考:マジカルナンバー7

□ディレクトリ名
ディレクトリにつける名称も、情報の一部で、
分かりやすく分類する際に重要なことだそうです。

また、googleがディレクトリ名も参照することから、
ディレクトリ名はできうる限り、英語であることが望ましいということでした。

□ラベリングとURI
さらに、ディレクトリは細分化し、適切なラベル(名称)をつけることで、
情報が伝わりやすいURIにすることができるということでした。

その際、URIは、長くなってしまいますが、
そのことに対するデメリットは、ほぼ無く、
あったとしても、せいぜい一瞬で覚えることができないくらいとのこと。

例:
http://www.tamabi.ac.jp/idd/design/web/morikawa/
とすることができれば、
→大学:たまび/学科:情デ/専攻:デザインコース/授業:web/講師:森川先生/
というふうに、分かりやすい。

(参考:cool uri


■アウトラインプロセッサー
最後に、情報の構造を考えるとき、
アウトラインプロセッサーが非常に有用であるとのことで、
OmniOutline、OmniGraffleの使い方のレクチャーがありました。

情報を構造化して考えるには非常に便利なソフトでした。

ちなみに、OmniはMac用しかないようで、
Winの場合は、VISIOで同様のことができるようですが
Standardの学生版でも1万円強のようです。


■これからすべきこと
まずは、今ある自分たちの企画をどう構造化すべきなのか、
どうしたら伝わりやすくできるのか、考えていかねばなりません。

分類分けした後、その分類に適したラベル(名称)は何なのか、
などということを、よく考えて、情報が伝わりやすい構造を
実現しなければならないでしょう。

(河原・記)

4月24日企画の青空プレゼンテーション(吉橋先生)

2006年04月25日 | 授業の記録
今日はA3のイラストボードにまとめた企画のプレゼン。
なんと教室を出て南門の東屋で青空プレゼンでした。
初めての外の授業だったけど、春の風が気持ち良くて
いつもより真剣に聞けました。

みんなのプレゼン内容は特にかぶってる企画も無くて
バラエティーに富んだ企業のアイディアが出てたと思います。

記憶に残ったのはホストクラブ「TAMA 美」
見てみたかったです。

独自のブランドを持つサイトは
ブランドイメージを隅々まで気をつけて世界観を統一すること。

私は実在する塾のサイトを提案したので、今日のプレゼンを経て
少し冒険する為にちょっと名前を変えて仮として作ろう、
あとプライバシーの関わる情報には十分注意して作ろう(重要)
と思いました。

来週までの課題は
自分のサイトのコンテンツの素材の取材。
文、絵、写真を集めて持ってくる。
頑張りましょう~

小櫛暁子




4/21 Flashについて NORIさん

2006年04月21日 | 授業の記録
今日は、NORIさんの授業でFlashについてやりました。

まずは先週の課題を集めて、何人かがプレゼンしました。
梶君のレポートのアイディアはすばらしかったと思います。

そして、Flashについての講義。
言葉のイメージから具体的なサイトの紹介をしていただきました。

・楽しい「おうちでアクアスタジアム」
http://www.i-love-epson.co.jp/aqua/
・アニメーション「花の翳」
http://digi-akira.net/hana/honpen_s.html
「YOUCHAN」
http://www.youchan.com/
・インタラクティブ「samorost」
http://www.samorost2.net/samorost1/
・インターフェース「fotologue」
http://fotologue.jp/
・映像「Youtube」
http://www.youtube.com/
・デザイン「nagafuji.jp」
http://nagafuji.jp/
・実験的「Minority Qube」
http://incubator.quasimondo.com/flash/minority_cube.php
・実用的「GIZMO」
http://gizmo.anthill.jp/

こんな感じのサイトが紹介されました。
(映像のサイト、一つ書ききれなかったので
わかる人がいたら補ってくださると嬉しいです。)

結局必要な技術力は
・アイディア
・デザイン
・アニメーション
・スクリプト
だということです。

この後、Flashの簡単なチュートリアルを教えていただき、課題が出されました。

NEXT WEEK 課題

アニメーション1本作る
サイズ 550px * 400px
フレームレート 自由
アクションスクリプト不可
授業が始まる前にスタ4の前のパソコンにコピーする。
作品のファイル名は半角英数字
swfファイルにて提出

以上です。長くなりましたすいません。    榎澤/記

4月21日第一回アルゴリズムデザイン

2006年04月21日 | 授業の記録
アルゴリズムデザインとは、コンピュータを動かすためのロジック(論理)を表現することである(この場合のロジックとはHTMLやJAVAなどの言語)。
プログラムのロジックを知っているだけでなく、デザイン(キレイに組み立てること)が重要になってくる。
webサイトを作るにあたり、まず利用客(情報の受信者)を知る必要がある。
・ユーザビリティ(使い勝手がよいか)
・アクセシビリティ(高齢者、身体障害者にも利用できるか)
授業ではwebサイトの背景を知り、その背景を表現していくことを学んでいく。


(記・辻村)


4月19日(水)設計のできる思考(森川)

2006年04月19日 | 授業の記録
授業の内容
『設計ができるようになる為の考え方。』

調査・分析   [企画戦略の裏付けの行程]
        ・さまざまなウェブサイトの傾向や分析、
         グルーピングなど。
  ▼

企画・戦略   [マーケティングを実現する為の施策]
        ・ブランディング提案、会社のリアルなイ
         メージその企業らしさの表現。
  ▼

  実装     [企画・戦略を実現する為の方法]
        ・HTML作成や情報アーキテクチャー実施、
         デザインなど。


■プランニングー企画

 ー 要求分析 ー     
・クライアントからの要求
・利用者の要求
・社会からの要求
・制作者の要求 

『クライアントの要求も大切ですが、
 利用者の要求をみたす事を常に優先し無ければならない
 ことをクライアントにも解ってもらう。』

 ー 企業らしさ ー   
・企業が持っているビジョン(企業らしさ)だけではなく、
 第三者から見た企業らしさを知る。
・できるだけ多くの調査や検証が必要。

『企業がイメージする「企業らしさ」だけでは、一方通行
 な表現になってしまう。』


■今後の制作の姿勢としては、
 自分の作品にダメ出しをする様な第三者的視点を常に持っ
 て取り組む必要がある。


(内田・記)

4月17日(月)ディスカッション(吉橋)

2006年04月17日 | 授業の記録
授業内容:エクササイズ「人の意見を聞く」
       ・5人で1グループとし、1人ずつ自分の企画のプレゼンをする。
       ・プレゼンの時間は1人5分。その後10分間意見交換をする。
       ・反論は無し、建設的なコメントをすること。

 
↑の方法で行うことで、意見が言い易くなり、ディスカッションが円滑に出来ました。

企画書のイメージスケッチは、もう少しイメージを相手に分かり易い
様に工夫する必要があるな~と思いました。
それから、サイトの目的がはっきりしているか?
自分の考えている企画に近いサイトなんかを参考にしつつ、もう一回考えて
みようと思います。


(安達・記)

ブログ担当表

2006年04月17日 | 連絡
ブログの順番は下記の通りです。
(アルゴリズムデザインの人で順番が違う場合は修正をお願いします。)

■Webサイト
安達
内田
榎澤
小櫛
河原
倉持
斉藤
佐藤
庄司
高橋
高村
長田
中本

松岡
山田(可)
山田(み)
山田(康)


■アルゴリズムデザイン
辻村
須永
小山
平野
梶本

4月10日(月)ガイダンス1(吉橋)

2006年04月11日 | 授業の記録
【授業の概要】

3年次「web サイト・デザイン」-ルールと構造をデザインする-
担当教員:NORI(伊藤のりゆき)・森川眞行・吉橋昭夫、授業サポート:久保好
               
1.課題の内容:
「架空の会社を想定し、その会社のweb サイトをデザインする。」
 ・web サイトの「目的」を明確にする。
 ・ページの内容(コンテンツ)を企画し、調査や素材収集を行う。
 ・サイトの情報構造を検討し、それらを適切な記述言語を用いて表現する。
 ・作成したweb サイトは学外に公開し、情報の更新を適切に行う。

2.課題を通じて学ぶこと
 ・コンテンツをデザインするための様々な手法。
 ・情報を「構造化」するための考え方と方法。
 ・さまざまな、情報表現の方法。
 ・記述言語による構造的なデザインの考え方とその実現方法。
 ・プレゼンテーションの手法と、文字やことばによる解説のしかた。
 ・コミュニケーションの取り方や、意見交換、議論のやりかた。  
など。
(吉橋・記)