メディア芸術基礎 Ⅰ...
-
Upload
atsushi-tadokoro -
Category
Documents
-
view
780 -
download
5
Transcript of メディア芸術基礎 Ⅰ...
![Page 1: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/1.jpg)
メディア芸術基礎 Ⅰ第5回:サイトの設計、ソーシャルメディアを利用する2013年6月23日 (Aクラス)、7月1日 (Bクラス)多摩美術大学 情報デザイン学科 メディア芸術コース担当:田所淳
![Page 2: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/2.jpg)
今日の内容 - 前半‣ 様々なWebサービスの活用
‣ 動画を公開、Webページに貼り付ける‣ Youtube、Vimeo
‣ 音楽、音響作品‣ SoundCloud
‣ SNSの活用‣ 作成したWebページを、ソーシャルメディアに接続する‣ ソーシャルメディアとそのサービスへの接続方法について解説‣ Twitter、Facebook
![Page 3: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/3.jpg)
本日の内容 - 後半‣ 「オンラインポートフォリオ」サイトを設計する
‣ 情報の構造モデルを考える‣ ストラクチャを設計する‣ サイトマップを作成する‣ ページの構成要素を整理する‣ ページスケッチを作成する
![Page 4: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/4.jpg)
様々なWebサービスの活用
![Page 5: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/5.jpg)
様々なWebサービスの利用‣ オンラインポートフォリオ制作にあたって‣ 写真、動画、音声など様々なメディアを載せる必要
‣ 方法1: サーバーにデータをアップして、そのまま載せる‣ 方法2: 外部のWebサービスを活用 ←今日のテーマ‣ メジャーなサービスを中心に‣ とっても簡単!
![Page 6: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/6.jpg)
様々なWebサービスの利用‣ Webサービスの利用 1 - 写真、画像‣ Flickr http://www.flickr.com‣ 写真の共有を目的としたコミュニティサイト‣ Ludicorp社が開発(2004)‣ Yahoo! に買収 (2005)
![Page 7: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/7.jpg)
様々なWebサービスの利用‣ 最近(2013)リニューアルされ、デザイン刷新
![Page 8: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/8.jpg)
様々なWebサービスの利用‣ Flickrに写真をアップロードして、その写真をオンラインポートフォリオに活用
‣ Step1 : 写真をアップ‣ http://www.flickr.com/photos/upload/
![Page 9: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/9.jpg)
様々なWebサービスの利用‣ Step 2 : アップロードした写真を共有‣ アップロードした写真の右下のボタンを押す‣ Grab the HTML/BBCode を選択してHTMLを取得‣ 取得したHTMLを、オンラインポートフォリオにペースト
![Page 10: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/10.jpg)
様々なWebサービスの利用‣ Webサービスの利用 2 - 動画‣ 一番有名なサービスはYouTubeだが、ここでは別のものを‣ Vimeo https://vimeo.com/‣ ユーザー自身が作ったビデオしか投稿できない‣ 広告も出ないので、オンラインポートフォリオにお薦め
![Page 11: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/11.jpg)
様々なWebサービスの利用‣ Vimeo画面
![Page 12: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/12.jpg)
様々なWebサービスの利用‣ 共有方法‣ Step 1: 動画をアップロード‣ 画面右の「Upload」ボタンを押してアップロード画面へ‣ 動画を選択してアップロード
![Page 13: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/13.jpg)
様々なWebサービスの利用‣ 共有方法‣ Step 2: 動画をポートフォリオに貼り付ける‣ 投稿した動画右上の「Share」ボタン押す‣ Embed内のHTMLをコピーしてポートフォリオにペースト
![Page 14: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/14.jpg)
ソーシャルネットワーク(SNS)の活用
![Page 15: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/15.jpg)
SEOからSGOへ‣ SEO = Search Engine Optimization‣ 検索エンジン最適化‣ 検索エンジンの検索結果の上位、特に1ページ目に表示されることが最重要、という考え
‣ SGO = Social Graph Optimization‣ ソーシャルグラフ最適化‣ ソーシャルグラフ(後述)を活用して、口コミや友達の推薦などでページを周知していく方法
![Page 16: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/16.jpg)
SEOからSGOへ‣ SEOによる最適化のテクニック‣ 正しい最適化:‣ HTMLの最適化‣ キーワードに沿った内容の表示
‣ 不適切な最適化:検索エンジンスパム‣ 「よく検索されるであろうキーワード」を文章中にちりばめたり、意味も無く陳列
‣ 背景と全く同じ色で検索キーワードを「隠しテキスト」として記述する
‣ 検索エンジンで上位に表示されるページが本当に品質が良いページなのか、という疑問
![Page 17: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/17.jpg)
SEOからSGOへ‣ 「ソーシャルグラフ」への注目‣ ソーシャルグラフ:Web上での人間の相関関係や、そのつながり、結びつき
![Page 18: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/18.jpg)
SEOからSGOへ‣ これからは、ソーシャルグラフの中で、多くの人が推薦(Recommend)したり気に入った(Like)ページに価値がある
‣ 様々なサービスと積極的に連携すべき‣ Facebook, Twitter, Linkedin, mixi, はてな ...etc.‣ 今回は、Facebook、Twitterとの連携を紹介
‣ 参考:Brad Fitzpatrick, Thoughts on the Social Graph
![Page 19: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/19.jpg)
Twitterを活用する‣ Twitter (http://twitter.com/)‣ 個々のユーザーが「ツイート」 (tweet) と称される短文を投稿し、閲覧できるコミュニケーション・サービス
‣ 2006年7月にObvious社(現Twitter社)が開始
![Page 20: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/20.jpg)
Twitterを活用する‣ 「Tweet Button」を設置する
‣ Twitter / ツイートボタンページにアクセス‣ ボタンの種類を選択‣ フォローするのにおすすめのユーザーを選択(オプション)‣ ボタンをプレビューにて確認後、コードを取得‣ 設定により様々なフォーマットで設置される
![Page 21: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/21.jpg)
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>
![Page 22: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/22.jpg)
Facebookを活用する‣ Facebook‣ Mark Zuckerbergが2004年に開始‣ 全世界で7億5000万人のユーザ
![Page 23: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/23.jpg)
Facebookを活用する‣ Facebookにアカウントがない方は、この機会にユーザ登録してみましょう
![Page 24: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/24.jpg)
「いいね (Like)」ボタンを設置する‣ Facebookにログインした状態で、以下のURLにアクセス
‣ http://developers.facebook.com/docs/reference/plugins/like/
‣ ページに関する情報を入力して「Get Code」ボタンを押す
‣ 取得したHTMLを、自分のサイトにペーストする
![Page 25: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/25.jpg)
「いいね (Like)」ボタンを設置する‣ 「いいね (Like)」ボタンは、設定によって様々なフォーマットで表示される
![Page 26: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/26.jpg)
Open Graph Protocolへの対応‣ Open Graph Protocol (OGP)とは‣ 「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法
‣ 最近さまざまな SNSサイトで使われるようになった‣ Facebook, mixi, Gree など
![Page 27: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/27.jpg)
Open Graph Protocolへの対応‣ head要素内に、meta要素としてページの情報を記入
‣ og:type - 何のページであるかを記述(必須)‣ og:title - 記述しているページ名前(必須)‣ og:image - が記述しているページの画像(必須)‣ og:url - ウェブページの正式な URL(必須)‣ og:description - ウェブページの説明‣ og:site_name - 所属するサイト名‣ og:email, og:phone_number - 連絡先
![Page 28: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/28.jpg)
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" />
![Page 29: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/29.jpg)
Open Graph Protocolへの対応‣ OGPについての詳細は、以下を参照してください‣ http://developers.facebook.com/docs/opengraph/‣ http://ogp.me/
![Page 30: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/30.jpg)
まとめ‣ Webというメディアの変遷‣ より「リアル」なコミュニケーションへ‣ Webページの情報が「人」「社会」と繋がっていく時代
![Page 31: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/31.jpg)
Webサイトの設計
![Page 32: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/32.jpg)
Webサイトの設計‣ 自己紹介のページ‣ 1ページだけで構成されていた
‣ これから作成するサイト‣ 複数のページから構成されるWebサイトになる‣ 最初に構造やナビゲーションのルール、ファイルの配置方法などを計画しておかないと破綻することも
![Page 33: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/33.jpg)
Webサイトの設計‣ Webサイトのデザインの2つの側面
‣ コンテンツを適切に組織化して文脈を与えていく‣ → 情報デザイン
‣ 具体的に利用者の目に見える形で表現する‣ → 視覚デザイン
![Page 34: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/34.jpg)
構造モデル‣ Webサイト → 多数のコンテンツの集合体‣ 情報をデザインしていく必要性‣ コンテンツを構造化して、関係を整理するための設計が必要‣ 構造のモデルがしっかりと定義されていると理解され易い
![Page 35: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/35.jpg)
構造モデル‣ クレメント・モックの7つの構造モデル‣ 情報構造によってその7つに分類‣ 情報のタイプによってどのような構造が適しているのか違う
![Page 36: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/36.jpg)
モデル1:リニア型‣ 順番に進んでいく‣ 例:書物、スライドショー
![Page 37: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/37.jpg)
モデル2:階層型‣ 多岐にわたる情報を扱いやす形で分類・整理することが可能‣ 世の中のおおくの情報は、階層モデルで組織化されている‣ 例:図書館、組織図
![Page 38: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/38.jpg)
モデル3:放射状型‣ 関連する情報が次々とリンクしていく‣ 自由で意外性のある情報の表現‣ 全体像は把握しづらい‣ ゲーム、Wikipedia
![Page 39: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/39.jpg)
モデル4:並列型‣ ひとつの(リニアな)コンテンツの流れに並行して、別の情報が提示される
‣ 例:字幕、動画プレゼンテーションとテキスト、マルチスクリーンの動画
![Page 40: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/40.jpg)
モデル5:マトリクス型‣ 縦横2方向のリニアな情報を組合せたもの‣ 表形式‣ 例:雑誌のバックナンバー
![Page 41: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/41.jpg)
モデル6:重ねあわせ、レイヤー構造‣ ある情報に別の情報を重ねあわせる‣ 例:地図と統計情報
![Page 42: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/42.jpg)
モデル8:空間の拡大‣ ある部分をクリックすると、さらに詳細な情報が表示される‣ 例:ヘルプシステム、地図
![Page 43: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/43.jpg)
ストラクチャの設計‣ オンラインポートフォリオの構造を設計する‣ 利用者にとって使いやすいストラクチャ‣ 最初に全体像が把握できる‣ 上位レベルに階層の概要を、徐々に詳細な内容へ
‣ 階層の広さと深さ‣ メニュー構造を設計するヒント‣ 3クリックの原則:目的のコンテンツに到達するまでのリンクを3つ以内にする
‣ 7項目原則:目次の選択項目を 7 ± 2 に収める
![Page 44: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/44.jpg)
ストラクチャの設計‣ オンラインポートフォリオのストラクチャ設計例
トップページ
授業課題作品
自主制作作品
プロフィール
イメージ・リテラシー
サウンド&アルゴリズム
インタラクション
クラフト
メカニズム&ウェブ
マテリアル
![Page 45: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/45.jpg)
ストラクチャの設計‣ ページの役割ごとに内容を分類する
トップページ
授業課題作品
自主制作作品
プロフィール
イメージ・リテラシー
サウンド&アルゴリズム
インタラクション
クラフト
メカニズム&ウェブ
マテリアル
トップページ
プロフィール
ギャラリー目次
ギャラリーページ
ページ分類
![Page 46: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/46.jpg)
ページの基本構成とリソースの整理‣ それぞれのページの基本的な構成と、必要となる要素を整理していく
‣ トップページ‣ キービジュアル (作品の写真)‣ 更新履歴 (What’s new)‣ プロフィールへのリンク‣ 授業課題作品へのリンク‣ 自主制作作品へのリンク
‣ プロフィールページ‣ 写真‣ 経歴文章‣ 外部リンク (自分のBlog、利用しているWebサービス
![Page 47: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/47.jpg)
ページスケッチ(ワイヤーフレーム)の作成‣ 各ページの基本要素が決ったところで、ページのおおまかなレイアウトをスケッチしていく
‣ 「プロトタイピング」「ページモックアップ」「ワイヤーフレーム」など様々な呼びかた
‣ 参考サイト:I ♥ wireframes (http://wireframes.tumblr.com/)
![Page 48: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/48.jpg)
ページスケッチ(ワイヤーフレーム)の作成‣ 参考:Cacoo (http://cacoo.com)‣ ブラウザ上でワイヤーフレームやダイアグラムを生成できるWebサービス
![Page 49: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/49.jpg)
ページスケッチ(ワイヤーフレーム)の作成‣ 参考:Pencil‣ Firefoxのブラウザ上でワイヤーフレームを生成できるプラグイン
![Page 50: メディア芸術基礎 Ⅰ 第5回:サイトの設計、ソーシャルメディアを利用する](https://reader033.fdocuments.net/reader033/viewer/2022052907/55938bd01a28ab066b8b475f/html5/thumbnails/50.jpg)
実習:実際に作ってみる!‣ 自身のWebページのプランニングをする
‣ 作成するもの‣ サイトの構成図‣ 各ページのスケッチワイヤーフレーム‣ ページ数は、5~10ページ程度で