越智楓/情報デザイン演習IIA

はじめのすていじ

Webとガイドブック（PDF）による舞台に関する情報提供

• 越智　楓
• Keywords：舞台
• サイト『すていじ伝言板』
• ガイドブック『舞台入門』（49KB）
  
  

• プロトタイプ評価シート　皆様コメントありがとうございました。
  
  

おすすめ情報

• 日本2.5次元ミュージカル協会
• 博多座HP
  
  

概要

これは何？

舞台とは何か、初めて舞台の世界へ入るためのガイドブック。
どのような舞台があるのか、
気になる舞台を見つけるためのWebサイト。

背景と目的

舞台の魅力を知るためには実際に観劇することである。
最近ではアニメや漫画作品が舞台化されることが多い（2.5次元舞台という）。
しかし舞台へ足を運ぶ人は少ない印象がある。
少しでも舞台を見に行くことへのハードルを下げるため、
舞台への認知度を上げるため、舞台入門ガイドブックと舞台紹介サイトを作る。

成果物の仕様

• Webサイト（メイン）
• PDF（A4、15page）
  
  

制作ツール

• STUDIO
• Adobe illustrator
  
  

プロジェクトの期間

2023.04.10 - 2023.07.10

プロジェクト管理

スケジュール

• スケジュールノート
  
  

ToDo

WEB
1. 作成目的を明確にする
2. 目標・手段を決める
3. コンテンツを書き出す
4. 全体のページの構成を決める（サイトマップ）
5. 各ページのレイアウトの構成を決める（ワイヤーフレーム）
6. デザインを考える
7. 作成作業
8. 公開（最終確認）＞今ここ

PDF
1. 作成目的を明確にする
2. 目標・手段を決める
3. コンテンツを書き出す
4. 全体のページの構成を決める
%%5. 各ページのレイアウトの構成を決める
6. デザインを考える
7. 作成作業
8. 公開（最終確認）＞今ここ

2023.06.26

今週の作業内容

• プロジェクト名を「First Stage」から「はじめてすていじ」に変更
  ＞WEBとPDFの名前が日本語のため日本語に合わせる
  
  

WEB

• 舞台カード作り
  ＞アイコンに4つ色を使っているため背景は白でシンプルに見やすく
• 舞台一覧ページ完了次第4つの見所ごとにページ作成
• 4つの見どころのボタンデザイン
• 「演技」を「役者」、「パフォーマンス」を「動き」に変更
  ＞文字の長さを合わせるため、意味をより具体的にするため
• レスポンシブ
• 最終確認（リンクが合っているか、色や形が変なところがないか）
  
  

PDF

• PDF表紙イメージ修正
  ＞背景と手前の幕の奥行きが分かるように変更
  前後の逆転がないように
• 配置決め
• イラスト作成
• 文配置

2023.06.19

今週の作業内容

WEB

• 各舞台の説明文作り

2023.06.12

今週の作業内容

WEB

• アイコン修正
  ＞円の塗り、形は抜きのデザインに変更

PDF

• キャラクター枠線なし
  ＞背景色によっては肌色が微妙かも

2023.06.05

今週の作業内容

WEB

• アイコン作り（わかりやすいよう円線あり）
  ＞歌はより連想しやすいマイクの形のものに変更
• 「ハイライト」から「見どころ」へ変更
  ＞日本語に合わせる
  
  

PDF

• 文を置く

2023.05.29

今週の作業内容

WEB

• ホームページのハイライト部分
  • 4つの言葉を総称するワードは「ハイライト」で良いのか
    ＞「見どころ」とする
  • クッリクできるように見えるデザイン
• 各舞台の説明部分＞一文の説明を載せる
• ハッシュタグでキーワードを表示＞クリックするきっかけを作る
• フッターはどうするのか＞ページの終わりが分かるようにつける
  
  

PDF

• 各キャラクターの顔作り（修正）＞枠線が微妙＞修正
• 会話部分の表現方法（LINEのようにするのか、「」にするのか）
  ＞「」で表示して人物ごとに左右に分けて分かりやすくする
  
  
  
  

2023.05.22

今週の作業内容

WEB

• 文の内容を考える
• ホームページのハイライト部分＞どう表示させるのか？
• 舞台ごとの説明＞何を載せるのか？

2023.05.15

指摘された問題点

WED

• カテゴリー分けを押すと並べ替えができるとより良くなる
• ちょっとしたタグがあった方がタグごとでまとめて見られて良いかも
• 簡単な説明はあったほうがいい
  • 箇条書きで書けば読むというよりも見る形になる
  • 5W1Hの情報を入れる（演出、出演者など）

PDF

• 表紙イメージのイラストが舞台の幕だと捉えづらい
  （前後が逆転してしまうかも）
  
  

好評価を得た点

• 題材が面白い
• 初心者目線で作っている
• いろんな年代の人が見やすい形になっている
• 表紙のデザインが親しみのある感じ（PDF）
• 黒板のデザインの方がイメージしやすい（WEB）
  
  

その他

• プロトタイプから気になった
• 舞台裏の話も知りたい

WEB

• 舞台の説明についてどのように掲載するのが良いか
  • キーワードとともに詳細もあると良いかも
  • 面白いポイントの説明があると嬉しい
  • 動画だけよりキーワードがある方がわかりやすい
  • 一文程度の紹介が欲しい
  • 文よりも単語の方がわかりやすい
  • 短い人文だったら読む人が増える
  • 一目でわかるキーワードが良い
  • 見てもらう人のターゲットを舞台に興味がない人にするのであれば
    単語の方が良いと思った

PDF

• 会話形式の形を要検討
  • 登場人物二人の会話を左右に分ける（LINEのように）

2023.05.08

PDF表紙イメージ

ワイヤーフレームイメージ

サイトマップ修正

2023.05.01

今回制作したプロトタイプ

サイトマップイメージ

台割イメージ

プロトタイプ制作の方法

• Excel上にサイトマップを記載＞sitemap
• Excel上に台割を記載＞flatplan
  
  
  
  

2023.04.24

アイデアの量産 ＞ 絞り込み

WEBの公開方法

• 自分の授業サイトにリンクを載せる
  
  

WEBの内容（素材ネタ）

• 越智楓/Stage
• 越智楓/Stage2?
  
  

WEBのネーミング

• 「From Stage」
• 「すていじ伝言板」
  
  

WEBの構成

• Excel上にサイトマップを記載＞sitemap
  
  

WEBの制作環境と方法

• STUDIO
• Adobe illustrator
  
  
  
  

PDFの公開方法

• 自分の授業サイトに載せる
  
  

PDFの形式（分量とサイズ）

• 基本文字サイズ　15p
• A4
  
  

PDFの内容（素材ネタ）

• ぼくは、はたらかない はたらきアリなんだ
  文字の大きさ
• 絵本の文字の大きさは何ポイントがいいのか?
• 本、冊子の文字サイズは8～10ptが基本
  
  

PDFのネーミング

• 「〜子ぶたのブーシーと学ぶ〜舞台入門」
  
  

PDFの構成

• Excel上に台割を記載＞flatplan
  
  

PDFの制作環境と方法

• Adobe illustrator
  
  
  
  

2023.04.17

現状調査｜テーマ内容の先行事例

• ローチケ演劇部presents はじめてのミュージカル～診断～
• 観劇初心者のための『舞台鑑賞のQ＆A』
• 舞台・ミュージカル観劇の持ち物！3つの必需品と7つの便利品
• はじめての観劇 〜大衆演劇初心者の方へ〜
  
  

現状調査｜表現形式の先行事例

• 日本2.5次元ミュージカル協会
• 『学校では教えてくれない大切なこと』シリーズ特設ページ
  
  

現状調査｜時間軸（対象の歴史的知見）

• 【エンタメール】日本の演劇史
• 日本から世界へ。「2.5次元ミュージカル」のルーツをたどる
• 初心者向け2.5次元舞台解説
• 2.5次元ミュージカルとは
• 演劇を制作するにはどのくらいの期間がかかるの？
• 演劇を支える「制作」という仕事
• 演劇作品ができるまで｜東宝株式会社 新卒採用2024
• 舞台完成までの稽古期間はどれくらい？
  
  

現状調査｜空間軸（対象の地理的知見）

• 全国の劇場一覧
• 舞台の裏方ではどんな人が動いている？ 仕事の種類とは？
• 演劇の現状
• 演劇・ミュージカル｜チケットぴあ［チケット情報・販売・購入・予約］
  
  

現状調査｜技術

• STUDIO
• Wix
• WordPress
  
  

解決すべき課題

• PDFにする内容を決める
  • いくつのトピックにまとめるのか
  • 何ページ分にまとめるのか
• Webサイト作成サイトの動作確認
• Webサイトに掲載する内容を決める
  • どのような構成にするのか
  • どの舞台を取り上げるのか

2023.04.10

プロジェクトのテーマ候補（10件以上）

• バスケットボール同好会ホームページ　W
• 景色と感情の繋がり　M, P, S
• 舞台
  • 見てきた舞台を自分なりに分析する　W, P
• 旅行
  • パンフレットを作る　P
  • 自分の軌跡（ひとつの旅行プラン）をまとめる　M, P
  • CM　M, S
• 着物について　P
• 和特集　W, P
• 神社　W, P
• 思いを言葉に（好きな言葉を見つける）　M, S
• 空日記　S
• まわりのかわいいを見つける　P, S
  

MEMO

• MV作成（動画作成）→M
• WEB制作→W
• 自分の頭の中を視覚化（PDF）→P
• 写真→S
  
  

参考リンク

• 日本2.5次元ミュージカル協会
• ローチケ演劇部presents はじめてのミュージカル～診断～
• 文化に関する世論調査