すていじ
Webとガイドブック(PDF)による舞台に関する情報提供
プロトタイプ評価シート 皆様コメントありがとうございました。
おすすめ情報
概要
これは何?
舞台とは何か、初めて舞台の世界へ入るためのガイドブック。
どのような舞台があるのか、
気になる舞台を見つけるためのWebサイト。
背景と目的
舞台の魅力を知るためには実際に観劇することである。
最近ではアニメや漫画作品が舞台化されることが多い(2.5次元舞台という)。
しかし舞台へ足を運ぶ人は少ない印象がある。
少しでも舞台を見に行くことへのハードルを下げるため、
舞台への認知度を上げるため、舞台入門ガイドブックと舞台紹介サイトを作る。
成果物の仕様
制作ツール
プロジェクトの期間
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
今週の作業内容
- プロジェクト名を「すていじ」に変更
>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
今回制作したプロトタイプ
サイトマップイメージ
台割イメージ
プロトタイプ制作の方法
2023.04.24
アイデアの量産 > 絞り込み
WEBの公開方法
WEBの内容(素材ネタ)
WEBのネーミング
WEBの構成
WEBの制作環境と方法
PDFの公開方法
PDFの形式(分量とサイズ)
PDFの内容(素材ネタ)
PDFのネーミング
PDFの構成
PDFの制作環境と方法
2023.04.17
現状調査|テーマ内容の先行事例
現状調査|表現形式の先行事例
現状調査|時間軸(対象の歴史的知見)
現状調査|空間軸(対象の地理的知見)
現状調査|技術
解決すべき課題
- PDFにする内容を決める
- いくつのトピックにまとめるのか
- 何ページ分にまとめるのか
- Webサイト作成サイトの動作確認
- Webサイトに掲載する内容を決める
- どのような構成にするのか
- どの舞台を取り上げるのか
2023.04.10
プロジェクトのテーマ候補(10件以上)
- バスケットボール同好会ホームページ W
- 景色と感情の繋がり M, P, S
- 舞台
- 旅行
- パンフレットを作る P
- 自分の軌跡(ひとつの旅行プラン)をまとめる M, P
- CM M, S
- 着物について P
- 和特集 W, P
- 神社 W, P
- 思いを言葉に(好きな言葉を見つける) M, S
- 空日記 S
- まわりのかわいいを見つける P, S
MEMO
- MV作成(動画作成)→M
- WEB制作→W
- 自分の頭の中を視覚化(PDF)→P
- 写真→S
参考リンク