Tamabi media130624

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

今日の内容 - 前半‣ 様々なWebサービスの活用

‣ 動画を公開、Webページに貼り付ける‣ Youtube、Vimeo

‣ 音楽、音響作品‣ SoundCloud

‣ SNSの活用‣ 作成したWebページを、ソーシャルメディアに接続する‣ ソーシャルメディアとそのサービスへの接続方法について解説‣ Twitter、Facebook

本日の内容 - 後半‣ 「オンラインポートフォリオ」サイトを設計する

‣ 情報の構造モデルを考える‣ ストラクチャを設計する‣ サイトマップを作成する‣ ページの構成要素を整理する‣ ページスケッチを作成する

様々なWebサービスの活用

様々なWebサービスの利用‣ オンラインポートフォリオ制作にあたって‣ 写真、動画、音声など様々なメディアを載せる必要

‣ 方法1: サーバーにデータをアップして、そのまま載せる‣ 方法2: 外部のWebサービスを活用 ←今日のテーマ‣ メジャーなサービスを中心に‣ とっても簡単!

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

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

様々なWebサービスの利用‣ Flickrに写真をアップロードして、その写真をオンラインポートフォリオに活用

‣ Step1 : 写真をアップ‣ http://www.flickr.com/photos/upload/

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

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

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

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

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

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

SEOからSGOへ‣ SEO = Search Engine Optimization‣ 検索エンジン最適化‣ 検索エンジンの検索結果の上位、特に1ページ目に表示されることが最重要、という考え

‣ SGO = Social Graph Optimization‣ ソーシャルグラフ最適化‣ ソーシャルグラフ(後述)を活用して、口コミや友達の推薦などでページを周知していく方法

SEOからSGOへ‣ SEOによる最適化のテクニック‣ 正しい最適化：‣ HTMLの最適化‣ キーワードに沿った内容の表示

‣ 不適切な最適化：検索エンジンスパム‣ 「よく検索されるであろうキーワード」を文章中にちりばめたり、意味も無く陳列

‣ 背景と全く同じ色で検索キーワードを「隠しテキスト」として記述する

‣ 検索エンジンで上位に表示されるページが本当に品質が良いページなのか、という疑問

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

SEOからSGOへ‣ これからは、ソーシャルグラフの中で、多くの人が推薦(Recommend)したり気に入った(Like)ページに価値がある

‣ 様々なサービスと積極的に連携すべき‣ Facebook, Twitter, Linkedin, mixi, はてな ...etc.‣ 今回は、Facebook、Twitterとの連携を紹介

‣ 参考：Brad Fitzpatrick, Thoughts on the Social Graph

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

‣ 2006年7月にObvious社（現Twitter社）が開始

Twitterを活用する‣ 「Tweet Button」を設置する

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

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>

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

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

「いいね (Like)」ボタンを設置する‣ Facebookにログインした状態で、以下のURLにアクセス

‣ http://developers.facebook.com/docs/reference/plugins/like/

‣ ページに関する情報を入力して「Get Code」ボタンを押す

‣ 取得したHTMLを、自分のサイトにペーストする

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

Open Graph Protocolへの対応‣ Open Graph Protocol (OGP)とは‣ 「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法

‣ 最近さまざまな SNSサイトで使われるようになった‣ Facebook, mixi, Gree など

Open Graph Protocolへの対応‣ head要素内に、meta要素としてページの情報を記入

‣ og:type - 何のページであるかを記述（必須）‣ og:title - 記述しているページ名前（必須）‣ og:image - が記述しているページの画像（必須）‣ og:url - ウェブページの正式な URL（必須）‣ og:description - ウェブページの説明‣ og:site_name - 所属するサイト名‣ og:email, og:phone_number - 連絡先

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="[email protected]" /> <meta property="og:type" content="article" />

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

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

Webサイトの設計

Webサイトの設計‣ 自己紹介のページ‣ 1ページだけで構成されていた

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

Webサイトの設計‣ Webサイトのデザインの2つの側面

‣ コンテンツを適切に組織化して文脈を与えていく‣ → 情報デザイン

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

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

構造モデル‣ クレメント・モックの7つの構造モデル‣ 情報構造によってその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/)

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

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

実習：実際に作ってみる！‣ 自身のオンラインポートフォリオのプランニングをする

‣ 作成するもの‣ サイトの構成図‣ 各ページのスケッチワイヤーフレーム‣ ページ数は、5～10ページ程度で

実習：実際に作ってみる！‣ 参考サイト: Behance ProSite‣ 多くのデザイナー・アーティストのポートフォリオ収録‣ http://www.behance.net/prosite/overview