越智楓/情報デザイン演習IIA をテンプレートにして作成

開始行:
#setbgcolor(#f8f4e6) *はじめのすていじ Webとガイドブック（PDF）による舞台に関する情報提供 #image(image2.png) #slider(center,100%,h4,1000,1500,firststage1.png,firststa... -越智　楓 -'''Keywords：舞台''' -[[サイト『すていじ伝言板』>https://preview.studio.site/l... -[[ガイドブック『舞台入門』（49KB）>https://drive.google.... ~ -%%プロトタイプ評価シート%%　皆様コメントありがとうござい... ~ ***おすすめ情報 -[[日本2.5次元ミュージカル協会>https://www.j25musical.jp/... -[[博多座HP>https://www.hakataza.co.jp/]] ~ **概要 ***これは何？ 舞台とは何か、初めて舞台の世界へ入るためのガイドブック。 どのような舞台があるのか、 気になる舞台を見つけるためのWebサイト。 ~ ***背景と目的 舞台の魅力を知るためには実際に観劇することである。 最近ではアニメや漫画作品が舞台化されることが多い（2.5次元... しかし舞台へ足を運ぶ人は少ない印象がある。 少しでも舞台を見に行くことへのハードルを下げるため、 舞台への認知度を上げるため、舞台入門ガイドブックと舞台紹... ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト（メイン） -PDF（A4、15page） ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -[[STUDIO>https://studio.design/ja/]] -Adobe illustrator ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX... 2023.04.10 - 2023.07.10 ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... -[[スケジュールノート>https://ksumail-my.sharepoint.com/:... ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... WEB %%1. 作成目的を明確にする%% %%2. 目標・手段を決める%% %%3. コンテンツを書き出す%% %%4. 全体のページの構成を決める（サイトマップ）%% %%5. 各ページのレイアウトの構成を決める（ワイヤーフレーム... %%6. デザインを考える%% %%7. 作成作業%% 8. 公開（最終確認）＞今ここ ~ PDF %%1. 作成目的を明確にする%% %%2. 目標・手段を決める%% %%3. コンテンツを書き出す%% %%4. 全体のページの構成を決める%% %%5. 各ページのレイアウトの構成を決める %%6. デザインを考える%% %%7. 作成作業%% 8. 公開（最終確認）＞今ここ ~ ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2023.06.26 ***今週の作業内容 -プロジェクト名を「First Stage」から「はじめてすていじ」... ＞WEBとPDFの名前が日本語のため日本語に合わせる ~ WEB #image(card-15.png,50%) -%%舞台カード作り%% ＞アイコンに4つ色を使っているため背景は白でシンプルに見や... -%%舞台一覧ページ完了次第4つの見所ごとにページ作成%% -%%4つの見どころのボタンデザイン%% -%%「演技」を「役者」、「パフォーマンス」を「動き」に変更%% ＞文字の長さを合わせるため、意味をより具体的にするため -%%レスポンシブ%% -最終確認（リンクが合っているか、色や形が変なところがない... ~ PDF #image(firststage1.png, 40%) -%%PDF表紙イメージ修正%% ＞背景と手前の幕の奥行きが分かるように変更 前後の逆転がないように -%%配置決め%% -%%イラスト作成%% -%%文配置%% ~ ~ **2023.06.19 ***今週の作業内容 ~ WEB -%%各舞台の説明文作り%% ~ ~ **2023.06.12 ***今週の作業内容 ~ WEB #image(icon3.png,50%) -%%アイコン修正%% ＞円の塗り、形は抜きのデザインに変更 ~ PDF #image(illustration2.png,50%) -%%キャラクター枠線なし%% ＞背景色によっては肌色が微妙かも ~ ~ **2023.06.05 ***今週の作業内容 ~ WEB |49|2|49|c |#image(icon.jpg)| |#image(icon2.jpg)| -%%アイコン作り%%（わかりやすいよう円線あり） ＞歌はより連想しやすいマイクの形のものに変更 -%%「ハイライト」から「見どころ」へ変更%% ＞日本語に合わせる ~ PDF -%%文を置く%% ~ ~ **2023.05.29 ***今週の作業内容 ~ WEB -ホームページのハイライト部分 --4つの言葉を総称するワードは「ハイライト」で良いのか ＞「見どころ」とする --クッリクできるように見えるデザイン -各舞台の説明部分＞一文の説明を載せる -ハッシュタグでキーワードを表示＞クリックするきっかけを作る -フッターはどうするのか＞ページの終わりが分かるようにつける ~ PDF #image(illustration.png,50%) -%%各キャラクターの顔作り（修正）%%＞枠線が微妙＞修正 -会話部分の表現方法（LINEのようにするのか、「」にするのか） ＞「」で表示して人物ごとに左右に分けて分かりやすくする ~ ~ **2023.05.22 ***今週の作業内容 WEB -%%文の内容を考える%% -ホームページのハイライト部分＞どう表示させるのか？ -舞台ごとの説明＞何を載せるのか？ ~ ~ **2023.05.15 ***指摘された問題点 WED -カテゴリー分けを押すと並べ替えができるとより良くなる -ちょっとしたタグがあった方がタグごとでまとめて見られて良... -簡単な説明はあったほうがいい --箇条書きで書けば読むというよりも見る形になる --5W1Hの情報を入れる（演出、出演者など） PDF -表紙イメージのイラストが舞台の幕だと捉えづらい （前後が逆転してしまうかも） ~ ***好評価を得た点 -題材が面白い -初心者目線で作っている -いろんな年代の人が見やすい形になっている -表紙のデザインが親しみのある感じ（PDF） -黒板のデザインの方がイメージしやすい（WEB） ~ ***その他 -プロトタイプから気になった -舞台裏の話も知りたい WEB -舞台の説明についてどのように掲載するのが良いか --キーワードとともに詳細もあると良いかも --面白いポイントの説明があると嬉しい --動画だけよりキーワードがある方がわかりやすい --一文程度の紹介が欲しい --文よりも単語の方がわかりやすい --短い人文だったら読む人が増える --一目でわかるキーワードが良い --見てもらう人のターゲットを舞台に興味がない人にするので... 単語の方が良いと思った PDF -会話形式の形を要検討 --登場人物二人の会話を左右に分ける（LINEのように） ~ ~ **2023.05.08 #image(pdfimage.png, 40%) PDF表紙イメージ ~ #image(wireframe.png) ワイヤーフレームイメージ ~ #image(sitemap2.png, 70%) サイトマップ修正 ~ ~ **2023.05.01 ***今回制作したプロトタイプ #image(sitemap.png) サイトマップイメージ ~ #image(flatplan.png) 台割イメージ ~ ***プロトタイプ制作の方法 -Excel上にサイトマップを記載＞[[sitemap>https://ksumail-m... -Excel上に台割を記載＞[[flatplan>https://ksumail-my.share... ~ ~ **2023.04.24 アイデアの量産 ＞ 絞り込み ~ ~ ***WEBの公開方法 -自分の授業サイトにリンクを載せる ~ ***WEBの内容（素材ネタ） -[[越智楓/Stage>越智楓/Stage]] -[[越智楓/Stage2>越智楓/Stage2]] ~ ***WEBのネーミング -%%「From Stage」%% -「すていじ伝言板」 ~ ***WEBの構成 -Excel上にサイトマップを記載＞[[sitemap>https://ksumail-m... ~ ***WEBの制作環境と方法 -[[STUDIO>https://studio.design/ja/]] -Adobe illustrator ~ ~ ***PDFの公開方法 -自分の授業サイトに載せる ~ ***PDFの形式（分量とサイズ） -基本文字サイズ　15p -A4 ~ ***PDFの内容（素材ネタ） -[[ぼくは、はたらかない はたらきアリなんだ>https://ehon.a... 文字の大きさ -[[絵本の文字の大きさは何ポイントがいいのか?>https://ameb... -[[本、冊子の文字サイズは8～10ptが基本>https://www.book-h... ~ ***PDFのネーミング -「〜子ぶたのブーシーと学ぶ〜舞台入門」 ~ ***PDFの構成 -Excel上に台割を記載＞[[flatplan>https://ksumail-my.share... ~ ***PDFの制作環境と方法 -Adobe illustrator ~ ~ **2023.04.17 ***現状調査｜テーマ内容の先行事例 -[[ローチケ演劇部presents はじめてのミュージカル～診断～>... -[[観劇初心者のための『舞台鑑賞のQ＆A』>http://entre-news... -[[舞台・ミュージカル観劇の持ち物！3つの必需品と7つの便利... -[[はじめての観劇 〜大衆演劇初心者の方へ〜>https://e-kang... ~ ***現状調査｜表現形式の先行事例 -[[日本2.5次元ミュージカル協会>https://www.j25musical.jp/... -[[『学校では教えてくれない大切なこと』シリーズ特設ページ... ~ ***現状調査｜時間軸（対象の歴史的知見） -[[【エンタメール】日本の演劇史>https://www.homemate-rese... -[[日本から世界へ。「2.5次元ミュージカル」のルーツをたど... -[[初心者向け2.5次元舞台解説>https://www.animatetimes.com... -[[2.5次元ミュージカルとは>https://www.j25musical.jp/user... -[[演劇を制作するにはどのくらいの期間がかかるの？>https:/... -[[演劇を支える「制作」という仕事>https://artalert-sappor... -[[演劇作品ができるまで｜東宝株式会社 新卒採用2024>https:... -[[舞台完成までの稽古期間はどれくらい？>https://web-ten.h... ~ ***現状調査｜空間軸（対象の地理的知見） -[[全国の劇場一覧>https://www.navitime.co.jp/category/010... -[[舞台の裏方ではどんな人が動いている？ 仕事の種類とは？>... -[[演劇の現状>https://www.kantei.go.jp/jp/singi/titeki2/t... -[[演劇・ミュージカル｜チケットぴあ［チケット情報・販売・... ~ ***現状調査｜技術 -[[STUDIO>https://studio.design/ja/]] -[[Wix>https://ja.wix.com/]] -[[WordPress>https://ja.wordpress.org/]] ~ ***解決すべき課題 -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次元ミュージカル協会>https://www.j25musical.jp/... -[[ローチケ演劇部presents はじめてのミュージカル～診断～>... -[[文化に関する世論調査>https://survey.gov-online.go.jp/h... ~ ~

終了行:
#setbgcolor(#f8f4e6) *はじめのすていじ Webとガイドブック（PDF）による舞台に関する情報提供 #image(image2.png) #slider(center,100%,h4,1000,1500,firststage1.png,firststa... -越智　楓 -'''Keywords：舞台''' -[[サイト『すていじ伝言板』>https://preview.studio.site/l... -[[ガイドブック『舞台入門』（49KB）>https://drive.google.... ~ -%%プロトタイプ評価シート%%　皆様コメントありがとうござい... ~ ***おすすめ情報 -[[日本2.5次元ミュージカル協会>https://www.j25musical.jp/... -[[博多座HP>https://www.hakataza.co.jp/]] ~ **概要 ***これは何？ 舞台とは何か、初めて舞台の世界へ入るためのガイドブック。 どのような舞台があるのか、 気になる舞台を見つけるためのWebサイト。 ~ ***背景と目的 舞台の魅力を知るためには実際に観劇することである。 最近ではアニメや漫画作品が舞台化されることが多い（2.5次元... しかし舞台へ足を運ぶ人は少ない印象がある。 少しでも舞台を見に行くことへのハードルを下げるため、 舞台への認知度を上げるため、舞台入門ガイドブックと舞台紹... ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト（メイン） -PDF（A4、15page） ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -[[STUDIO>https://studio.design/ja/]] -Adobe illustrator ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX... 2023.04.10 - 2023.07.10 ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... -[[スケジュールノート>https://ksumail-my.sharepoint.com/:... ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... WEB %%1. 作成目的を明確にする%% %%2. 目標・手段を決める%% %%3. コンテンツを書き出す%% %%4. 全体のページの構成を決める（サイトマップ）%% %%5. 各ページのレイアウトの構成を決める（ワイヤーフレーム... %%6. デザインを考える%% %%7. 作成作業%% 8. 公開（最終確認）＞今ここ ~ PDF %%1. 作成目的を明確にする%% %%2. 目標・手段を決める%% %%3. コンテンツを書き出す%% %%4. 全体のページの構成を決める%% %%5. 各ページのレイアウトの構成を決める %%6. デザインを考える%% %%7. 作成作業%% 8. 公開（最終確認）＞今ここ ~ ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2023.06.26 ***今週の作業内容 -プロジェクト名を「First Stage」から「はじめてすていじ」... ＞WEBとPDFの名前が日本語のため日本語に合わせる ~ WEB #image(card-15.png,50%) -%%舞台カード作り%% ＞アイコンに4つ色を使っているため背景は白でシンプルに見や... -%%舞台一覧ページ完了次第4つの見所ごとにページ作成%% -%%4つの見どころのボタンデザイン%% -%%「演技」を「役者」、「パフォーマンス」を「動き」に変更%% ＞文字の長さを合わせるため、意味をより具体的にするため -%%レスポンシブ%% -最終確認（リンクが合っているか、色や形が変なところがない... ~ PDF #image(firststage1.png, 40%) -%%PDF表紙イメージ修正%% ＞背景と手前の幕の奥行きが分かるように変更 前後の逆転がないように -%%配置決め%% -%%イラスト作成%% -%%文配置%% ~ ~ **2023.06.19 ***今週の作業内容 ~ WEB -%%各舞台の説明文作り%% ~ ~ **2023.06.12 ***今週の作業内容 ~ WEB #image(icon3.png,50%) -%%アイコン修正%% ＞円の塗り、形は抜きのデザインに変更 ~ PDF #image(illustration2.png,50%) -%%キャラクター枠線なし%% ＞背景色によっては肌色が微妙かも ~ ~ **2023.06.05 ***今週の作業内容 ~ WEB |49|2|49|c |#image(icon.jpg)| |#image(icon2.jpg)| -%%アイコン作り%%（わかりやすいよう円線あり） ＞歌はより連想しやすいマイクの形のものに変更 -%%「ハイライト」から「見どころ」へ変更%% ＞日本語に合わせる ~ PDF -%%文を置く%% ~ ~ **2023.05.29 ***今週の作業内容 ~ WEB -ホームページのハイライト部分 --4つの言葉を総称するワードは「ハイライト」で良いのか ＞「見どころ」とする --クッリクできるように見えるデザイン -各舞台の説明部分＞一文の説明を載せる -ハッシュタグでキーワードを表示＞クリックするきっかけを作る -フッターはどうするのか＞ページの終わりが分かるようにつける ~ PDF #image(illustration.png,50%) -%%各キャラクターの顔作り（修正）%%＞枠線が微妙＞修正 -会話部分の表現方法（LINEのようにするのか、「」にするのか） ＞「」で表示して人物ごとに左右に分けて分かりやすくする ~ ~ **2023.05.22 ***今週の作業内容 WEB -%%文の内容を考える%% -ホームページのハイライト部分＞どう表示させるのか？ -舞台ごとの説明＞何を載せるのか？ ~ ~ **2023.05.15 ***指摘された問題点 WED -カテゴリー分けを押すと並べ替えができるとより良くなる -ちょっとしたタグがあった方がタグごとでまとめて見られて良... -簡単な説明はあったほうがいい --箇条書きで書けば読むというよりも見る形になる --5W1Hの情報を入れる（演出、出演者など） PDF -表紙イメージのイラストが舞台の幕だと捉えづらい （前後が逆転してしまうかも） ~ ***好評価を得た点 -題材が面白い -初心者目線で作っている -いろんな年代の人が見やすい形になっている -表紙のデザインが親しみのある感じ（PDF） -黒板のデザインの方がイメージしやすい（WEB） ~ ***その他 -プロトタイプから気になった -舞台裏の話も知りたい WEB -舞台の説明についてどのように掲載するのが良いか --キーワードとともに詳細もあると良いかも --面白いポイントの説明があると嬉しい --動画だけよりキーワードがある方がわかりやすい --一文程度の紹介が欲しい --文よりも単語の方がわかりやすい --短い人文だったら読む人が増える --一目でわかるキーワードが良い --見てもらう人のターゲットを舞台に興味がない人にするので... 単語の方が良いと思った PDF -会話形式の形を要検討 --登場人物二人の会話を左右に分ける（LINEのように） ~ ~ **2023.05.08 #image(pdfimage.png, 40%) PDF表紙イメージ ~ #image(wireframe.png) ワイヤーフレームイメージ ~ #image(sitemap2.png, 70%) サイトマップ修正 ~ ~ **2023.05.01 ***今回制作したプロトタイプ #image(sitemap.png) サイトマップイメージ ~ #image(flatplan.png) 台割イメージ ~ ***プロトタイプ制作の方法 -Excel上にサイトマップを記載＞[[sitemap>https://ksumail-m... -Excel上に台割を記載＞[[flatplan>https://ksumail-my.share... ~ ~ **2023.04.24 アイデアの量産 ＞ 絞り込み ~ ~ ***WEBの公開方法 -自分の授業サイトにリンクを載せる ~ ***WEBの内容（素材ネタ） -[[越智楓/Stage>越智楓/Stage]] -[[越智楓/Stage2>越智楓/Stage2]] ~ ***WEBのネーミング -%%「From Stage」%% -「すていじ伝言板」 ~ ***WEBの構成 -Excel上にサイトマップを記載＞[[sitemap>https://ksumail-m... ~ ***WEBの制作環境と方法 -[[STUDIO>https://studio.design/ja/]] -Adobe illustrator ~ ~ ***PDFの公開方法 -自分の授業サイトに載せる ~ ***PDFの形式（分量とサイズ） -基本文字サイズ　15p -A4 ~ ***PDFの内容（素材ネタ） -[[ぼくは、はたらかない はたらきアリなんだ>https://ehon.a... 文字の大きさ -[[絵本の文字の大きさは何ポイントがいいのか?>https://ameb... -[[本、冊子の文字サイズは8～10ptが基本>https://www.book-h... ~ ***PDFのネーミング -「〜子ぶたのブーシーと学ぶ〜舞台入門」 ~ ***PDFの構成 -Excel上に台割を記載＞[[flatplan>https://ksumail-my.share... ~ ***PDFの制作環境と方法 -Adobe illustrator ~ ~ **2023.04.17 ***現状調査｜テーマ内容の先行事例 -[[ローチケ演劇部presents はじめてのミュージカル～診断～>... -[[観劇初心者のための『舞台鑑賞のQ＆A』>http://entre-news... -[[舞台・ミュージカル観劇の持ち物！3つの必需品と7つの便利... -[[はじめての観劇 〜大衆演劇初心者の方へ〜>https://e-kang... ~ ***現状調査｜表現形式の先行事例 -[[日本2.5次元ミュージカル協会>https://www.j25musical.jp/... -[[『学校では教えてくれない大切なこと』シリーズ特設ページ... ~ ***現状調査｜時間軸（対象の歴史的知見） -[[【エンタメール】日本の演劇史>https://www.homemate-rese... -[[日本から世界へ。「2.5次元ミュージカル」のルーツをたど... -[[初心者向け2.5次元舞台解説>https://www.animatetimes.com... -[[2.5次元ミュージカルとは>https://www.j25musical.jp/user... -[[演劇を制作するにはどのくらいの期間がかかるの？>https:/... -[[演劇を支える「制作」という仕事>https://artalert-sappor... -[[演劇作品ができるまで｜東宝株式会社 新卒採用2024>https:... -[[舞台完成までの稽古期間はどれくらい？>https://web-ten.h... ~ ***現状調査｜空間軸（対象の地理的知見） -[[全国の劇場一覧>https://www.navitime.co.jp/category/010... -[[舞台の裏方ではどんな人が動いている？ 仕事の種類とは？>... -[[演劇の現状>https://www.kantei.go.jp/jp/singi/titeki2/t... -[[演劇・ミュージカル｜チケットぴあ［チケット情報・販売・... ~ ***現状調査｜技術 -[[STUDIO>https://studio.design/ja/]] -[[Wix>https://ja.wix.com/]] -[[WordPress>https://ja.wordpress.org/]] ~ ***解決すべき課題 -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次元ミュージカル協会>https://www.j25musical.jp/... -[[ローチケ演劇部presents はじめてのミュージカル～診断～>... -[[文化に関する世論調査>https://survey.gov-online.go.jp/h... ~ ~

ページ名: