1. メディア芸術基礎 Ⅰ
第5回：サイトの設計、ソーシャルメ
ディアを利用する
2013年6月23日 (Aクラス)、7月1日 (Bクラス)
多摩美術大学 情報デザイン学科 メディア芸術コース
担当：田所淳

2. 今日の内容 - 前半
‣ 様々なWebサービスの活用
‣ 動画を公開、Webページに貼り付ける
‣ Youtube、Vimeo
‣ 音楽、音響作品
‣ SoundCloud
‣ SNSの活用
‣ 作成したWebページを、ソーシャルメディアに接続する
‣ ソーシャルメディアとそのサービスへの接続方法について解説
‣ Twitter、Facebook

3. 本日の内容 - 後半
‣ 「オンラインポートフォリオ」サイトを設計する
‣ 情報の構造モデルを考える
‣ ストラクチャを設計する
‣ サイトマップを作成する
‣ ページの構成要素を整理する
‣ ページスケッチを作成する

4. 様々なWebサービスの活用

5. 様々なWebサービスの利用
‣ オンラインポートフォリオ制作にあたって
‣ 写真、動画、音声など様々なメディアを載せる必要
‣ 方法1: サーバーにデータをアップして、そのまま載せる
‣ 方法2: 外部のWebサービスを活用 ←今日のテーマ
‣ メジャーなサービスを中心に
‣ とっても簡単!

6. 様々なWebサービスの利用
‣ Webサービスの利用 1 - 写真、画像
‣ Flickr http://www.flickr.com
‣ 写真の共有を目的としたコミュニティサイト
‣ Ludicorp社が開発(2004)
‣ Yahoo! に買収 (2005)

7. 様々なWebサービスの利用
‣ 最近(2013)リニューアルされ、デザイン刷新

8. 様々なWebサービスの利用
‣ Flickrに写真をアップロードして、その写真をオンラインポー
トフォリオに活用
‣ Step1 : 写真をアップ
‣ http://www.flickr.com/photos/upload/

9. 様々なWebサービスの利用
‣ Step 2 : アップロードした写真を共有
‣ アップロードした写真の右下のボタンを押す
‣ Grab the HTML/BBCode を選択してHTMLを取得
‣ 取得したHTMLを、オンラインポートフォリオにペースト

10. 様々なWebサービスの利用
‣ Webサービスの利用 2 - 動画
‣ 一番有名なサービスはYouTubeだが、ここでは別のものを
‣ Vimeo https://vimeo.com/
‣ ユーザー自身が作ったビデオしか投稿できない
‣ 広告も出ないので、オンラインポートフォリオにお薦め

11. 様々なWebサービスの利用
‣ Vimeo画面

12. 様々なWebサービスの利用
‣ 共有方法
‣ Step 1: 動画をアップロード
‣ 画面右の「Upload」ボタンを押してアップロード画面へ
‣ 動画を選択してアップロード

13. 様々なWebサービスの利用
‣ 共有方法
‣ Step 2: 動画をポートフォリオに貼り付ける
‣ 投稿した動画右上の「Share」ボタン押す
‣ Embed内のHTMLをコピーしてポートフォリオにペースト

14. ソーシャルネットワーク(SNS)の活用

15. SEOからSGOへ
‣ SEO = Search Engine Optimization
‣ 検索エンジン最適化
‣ 検索エンジンの検索結果の上位、特に1ページ目に表示され
ることが最重要、という考え
‣ SGO = Social Graph Optimization
‣ ソーシャルグラフ最適化
‣ ソーシャルグラフ(後述)を活用して、口コミや友達の推薦な
どでページを周知していく方法

16. SEOからSGOへ
‣ SEOによる最適化のテクニック
‣ 正しい最適化：
‣ HTMLの最適化
‣ キーワードに沿った内容の表示
‣ 不適切な最適化：検索エンジンスパム
‣ 「よく検索されるであろうキーワード」を文章中にちりば
めたり、意味も無く陳列
‣ 背景と全く同じ色で検索キーワードを「隠しテキスト」と
して記述する
‣ 検索エンジンで上位に表示されるページが本当に品質が良い
ページなのか、という疑問

17. SEOからSGOへ
‣ 「ソーシャルグラフ」への注目
‣ ソーシャルグラフ：Web上での人間の相関関係や、そのつな
がり、結びつき

18. SEOからSGOへ
‣ これからは、ソーシャルグラフの中で、多くの人が推薦
(Recommend)したり気に入った(Like)ページに価値がある
‣ 様々なサービスと積極的に連携すべき
‣ Facebook, Twitter, Linkedin, mixi, はてな ...etc.
‣ 今回は、Facebook、Twitterとの連携を紹介
‣ 参考：Brad Fitzpatrick, Thoughts on the Social Graph

19. Twitterを活用する
‣ Twitter (http://twitter.com/)
‣ 個々のユーザーが「ツイート」 (tweet) と称される短文を投
稿し、閲覧できるコミュニケーション・サービス
‣ 2006年7月にObvious社（現Twitter社）が開始

20. Twitterを活用する
‣ 「Tweet Button」を設置する
‣ Twitter / ツイートボタンページにアクセス
‣ ボタンの種類を選択
‣ フォローするのにおすすめのユーザーを選択(オプション)
‣ ボタンをプレビューにて確認後、コードを取得
‣ 設定により様々なフォーマットで設置される

21. Twitterを活用する
‣ 例：http://yoppa.org/に設定したTwitter button
<a href="http://twitter.com/share" class="twitter-share-
button" data-url="http://yoppa.org/" data-count="vertical"
data-via="tadokoro">Tweet</a><script type="text/
javascript" src="http://platform.twitter.com/
widgets.js"></script>

22. Facebookを活用する
‣ Facebook
‣ Mark Zuckerbergが2004年に開始
‣ 全世界で7億5000万人のユーザ

23. Facebookを活用する
‣ Facebookにアカウントがない方は、この機会にユーザ登録
してみましょう

24. 「いいね (Like)」ボタンを設置する
‣ Facebookにログインした状態で、
以下のURLにアクセス
‣ http://developers.facebook.com/docs/
reference/plugins/like/
‣ ページに関する情報を入力して「Get
Code」ボタンを押す
‣ 取得したHTMLを、自分のサイトに
ペーストする

25. 「いいね (Like)」ボタンを設置する
‣ 「いいね (Like)」ボタンは、設定によって様々なフォーマッ
トで表示される

26. Open Graph Protocolへの対応
‣ Open Graph Protocol (OGP)とは
‣ 「このウェブページは何のことを書いているか」という情報
を、プログラムから読める形で HTML に付加する記述方法
‣ 最近さまざまな SNSサイトで使われるようになった
‣ Facebook, mixi, Gree など

27. Open Graph Protocolへの対応
‣ head要素内に、meta要素としてページの情報を記入
‣ og:type - 何のページであるかを記述（必須）
‣ og:title - 記述しているページ名前（必須）
‣ og:image - が記述しているページの画像（必須）
‣ og:url - ウェブページの正式な URL（必須）
‣ og:description - ウェブページの説明
‣ og:site_name - 所属するサイト名
‣ og:email, og:phone_number - 連絡先

28. Open Graph Protocolへの対応
‣ 例：http://yoppa.org/ に記入されている、OGPデータ
‣ このページを「いいね」すると以下のようになる
<meta property="fb:admins" content="1847752599" />
<meta property="og:image" content="http://yoppa.org/wp-
content/uploads/2011/06/yoppa.jpg" />
<meta property="og:site_name" content="yoppa org" />
<meta property="og:email" content="tadokoro@gmail.com" />
<meta property="og:type" content="article" />

29. Open Graph Protocolへの対応
‣ OGPについての詳細は、以下を参照してください
‣ http://developers.facebook.com/docs/opengraph/
‣ http://ogp.me/

30. まとめ
‣ Webというメディアの変遷
‣ より「リアル」なコミュニケーションへ
‣ Webページの情報が「人」「社会」と繋がっていく時代

31. Webサイトの設計

32. Webサイトの設計
‣ 自己紹介のページ
‣ 1ページだけで構成されていた
‣ これから作成するサイト
‣ 複数のページから構成されるWebサイトになる
‣ 最初に構造やナビゲーションのルール、ファイルの配置方
法などを計画しておかないと破綻することも

33. Webサイトの設計
‣ Webサイトのデザインの2つの側面
‣ コンテンツを適切に組織化して文脈を与えていく
‣ → 情報デザイン
‣ 具体的に利用者の目に見える形で表現する
‣ → 視覚デザイン

34. 構造モデル
‣ Webサイト → 多数のコンテンツの集合体
‣ 情報をデザインしていく必要性
‣ コンテンツを構造化して、関係を整理するための設計が必要
‣ 構造のモデルがしっかりと定義されていると理解され易い

35. 構造モデル
‣ クレメント・モックの7つの構造モデル
‣ 情報構造によってその7つに分類
‣ 情報のタイプによってどのような構造が適しているのか違う

36. モデル1：リニア型
‣ 順番に進んでいく
‣ 例：書物、スライドショー

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

38. モデル3：放射状型
‣ 関連する情報が次々とリンクしていく
‣ 自由で意外性のある情報の表現
‣ 全体像は把握しづらい
‣ ゲーム、Wikipedia

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

40. モデル5：マトリクス型
‣ 縦横2方向のリニアな情報を組合せたもの
‣ 表形式
‣ 例：雑誌のバックナンバー

41. モデル6：重ねあわせ、レイヤー構造
‣ ある情報に別の情報を重ねあわせる
‣ 例：地図と統計情報

42. モデル8：空間の拡大
‣ ある部分をクリックすると、さらに詳細な情報が表示される
‣ 例：ヘルプシステム、地図

43. ストラクチャの設計
‣ オンラインポートフォリオの構造を設計する
‣ 利用者にとって使いやすいストラクチャ
‣ 最初に全体像が把握できる
‣ 上位レベルに階層の概要を、徐々に詳細な内容へ
‣ 階層の広さと深さ
‣ メニュー構造を設計するヒント
‣ 3クリックの原則：目的のコンテンツに到達するまでのリン
クを3つ以内にする
‣ 7項目原則：目次の選択項目を 7 2 に収める

44. ストラクチャの設計
‣ オンラインポートフォリオのストラクチャ設計例
トップページ
授業課題作品
自主制作作品
プロフィール
イメージ・
リテラシー
サウンド&
アルゴリズム
インタラクショ
ン
クラフト
メカニズム&
ウェブ
マテリアル

45. ストラクチャの設計
‣ ページの役割ごとに内容を分類する
トップページ
授業課題作品
自主制作作品
プロフィール
イメージ・
リテラシー
サウンド&
アルゴリズム
インタラクショ
ン
クラフト
メカニズム&
ウェブ
マテリアル
トップページ
プロフィール
ギャラリー目次
ギャラリーページ
ページ分類

46. ページの基本構成とリソースの整理
‣ それぞれのページの基本的な構成と、必要となる要素を整理し
ていく
‣ トップページ
‣ キービジュアル (作品の写真)
‣ 更新履歴 (What s new)
‣ プロフィールへのリンク
‣ 授業課題作品へのリンク
‣ 自主制作作品へのリンク
‣ プロフィールページ
‣ 写真
‣ 経歴文章
‣ 外部リンク (自分のBlog、利用しているWebサービス

47. ページスケッチ(ワイヤーフレーム)の作成
‣ 各ページの基本要素が決ったところで、ページのおおまかなレ
イアウトをスケッチしていく
‣ 「プロトタイピング」「ページモックアップ」「ワイヤーフ
レーム」など様々な呼びかた
‣ 参考サイト：I ♥ wireframes (http://
wireframes.tumblr.com/)

48. ページスケッチ(ワイヤーフレーム)の作成
‣ 参考：Cacoo (http://cacoo.com)
‣ ブラウザ上でワイヤーフレームやダイアグラムを生成できる
Webサービス

49. ページスケッチ(ワイヤーフレーム)の作成
‣ 参考：Pencil
‣ Firefoxのブラウザ上でワイヤーフレームを生成できるプラ
グイン

50. 実習：実際に作ってみる！
‣ 自身のWebページのプランニングをする
‣ 作成するもの
‣ サイトの構成図
‣ 各ページのスケッチワイヤーフレーム
‣ ページ数は、5∼10ページ程度で