メディア芸術演習Ｉ第7回サイトの設計多摩美術大学情報デザイン学科アートコース2009年6月2日担当：田所 淳

本日の内容

• 自分のポートフォリオサイトのサイトを設計する• このポートフォリオサイトが、最終提出物になります！• 情報の構造モデルを考える• ストラクチャを設計する• サイトマップを作成する• ページの構成要素を整理する• ページスケッチを作成する• メンテナンスを考慮した設計• ファイル配置• 共有するリソースの配置

Webサイトの設計

• 自己紹介のページ• 1ページだけで構成されていた

• これから作成するオンラインポートフォリオ• 複数のページから構成されるWebサイトになる• 最初に構造やナビゲーションのルール、ファイルの配置方法などを計画しておかないと破綻することも

• Webサイトのデザインの2つの側面• コンテンツを適切に組織化して文脈を与えていく• → 情報デザイン

• 具体的に利用者の目に見える形で表現する• → 視覚デザイン

Webサイトの設計

• 自己紹介のページ• 1ページだけで構成されていた

• これから作成するオンラインポートフォリオ• 複数のページから構成されるWebサイトになる• 最初に構造やナビゲーションのルール、ファイルの配置方法などを計画しておかないと破綻することも

• Webサイトのデザインの2つの側面• コンテンツを適切に組織化して文脈を与えていく• → 情報デザイン

• 具体的に利用者の目に見える形で表現する• → 視覚デザイン

構造モデル

• Webサイト → 多数のコンテンツの集合体• コンテンツを構造化して、関係を整理するための設計が必要• 情報デザイン

• 構造のモデルがしっかりと定義されていると、利用者に理解され易い

• クレメント・モックの7つの構造モデル• 情報構造のとらえかた• 情報のタイプによってどのような構造が適しているのか違う

モデル1：リニア型

• 順番に進んでいく• 例：書物、スライドショー

モデル2：階層型

• 多岐にわたる情報を扱いやす形で分類・整理することが可能• 世の中のおおくの情報は、階層モデルで組織化されている• 例：図書館、組織図

モデル3：放射状型

• 関連する情報が次々とリンクしていく• 自由で意外性のある情報の表現• 全体像は把握しづらい• ゲーム、Wikipedia

モデル4：並列型

• ひとつの(リニアな)コンテンツの流れに並行して、別の情報が提示される• 例：字幕、動画プレゼンテーションとテキスト、マルチスクリーンの動画

モデル5：マトリクス型

• 縦横2方向のリニアな情報を組合せたもの• 表形式• 例：雑誌のバックナンバー

モデル6：重ねあわせ、レイヤー構造

• ある情報に別の情報を重ねあわせる• 例：地図と統計情報

モデル8：空間の拡大

• ある部分をクリックすると、さらに詳細な情報が表示される• 例：ヘルプシステム、地図

ストラクチャの設計

• オンラインポートフォリオの構造を設計する• 利用者にとって使いやすいストラクチャ• 最初に全体像が把握できる• 上位レベルに階層の概要を、徐々に詳細な内容へ

• 階層の広さと深さ• メニュー構造を設計するヒント• 3クリックの原則：目的のコンテンツに到達するまでのリンクを3つ以内にする

• 7項目原則：目次の選択項目を 7 ± 2 に収める

ストラクチャの設計

• オンラインポートフォリオのストラクチャ設計例

トップページ

授業課題作品

自主制作作品

プロフィール

イメージ・リテラシー

サウンド&アルゴリズム

インタラクション

クラフト

メカニズム&ウェブ

マテリアル

ストラクチャの設計

• ページの役割ごとに内容を分類する

トップページ

授業課題作品

自主制作作品

プロフィール

イメージ・リテラシー

サウンド&アルゴリズム

インタラクション

クラフト

メカニズム&ウェブ

マテリアル

トップページ

プロフィール

ギャラリー目次

ギャラリーページ

ページ分類

ページの基本構成とリソースの整理

• それぞれのページの基本的な構成と、必要となる要素を整理していく

• 例：オンラインポートフォリオの場合

• トップページ• キービジュアル (作品の写真)• 更新履歴 (What’s new)• プロフィールへのリンク• 授業課題作品へのリンク• 自主制作作品へのリンク

• プロフィールページ• 写真• 経歴文章• 外部リンク (自分のBlog、利用しているWebサービスなど)• ....

ページスケッチ(ワイヤーフレーム)の作成

• 各ページの基本要素が決ったところで、ページのおおまかなレイアウトをスケッチしていく

• 「プロトタイピング」「ページモックアップ」「ワイヤーフレーム」など様々な呼びかた

• 参考サイト：I ♥ wireframes (http://wireframes.tumblr.com/)

ページスケッチ(ワイヤーフレーム)の作成

• 参考：Pencil• Firefoxのブラウザ上でワイヤーフレームを生成できるプラグイン

実習：実際に作ってみる！

• 自身のオンラインポートフォリオのWebページのプランニングをする• 作成するもの (来週提出してください)• サイトの構成図• 各ページのスケッチワイヤーフレーム• 手書、プリントアウトしたもの、いずれでもOK

• 注意：以下の要素は必ず入れてください• 1年次の実習科目のポートフォリオ• イメージ・リテラシー• サウンド&アルゴリズム、• インタラクション• クラフト• マテリアル• メカニズム&ウェブ

• 自分のプロフィールページ• 外部リンク• 自分の興味をもっている分野のページへのブックマーク