西山実伶/情報デザイン研究I をテンプレートにして作成

開始行:
*おともだち オリジナルホラー脱出ゲームを紹介するWebサイトの開発 #image(taitoru1.jpg) -''西山　実伶'' -'''Keywords：game, web design, html''' -http://miiir-nishiym.github.io/otomodachi/ //-__[[相互評価シート>https://www.example.com]]__ ← ここ... ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 1年生の時にチームで制作したゲームを紹介し、多くの人に興味... ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 １年生の頃にチームでオリジナルゲームを制作したが、それを... //--HTMLとCSSを使って一からサイトを作り上げたいと思った -目的 --ゲームの雰囲気が伝わるようなサイトに仕上げ、制作したゲ... --不気味さを演出できるようなwebサイトになるように、配色や... //--HTMLとCSSの扱いに慣れる ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -ゲームの雰囲気に合う配色や構成にする -閲覧者が読みやすいように簡潔にわかりやすい文章にする ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -[[webサイト>https://miiir-nishiym.github.io/otomodachi/]] -[[画像>https://drive.google.com/drive/folders/1c2GNVTOHn... -[[動画>https://youtu.be/8qxqlXGfT-I]] #youtube(8qxqlXGfT-I) -[[サイトマップ>https://drive.google.com/file/d/1DwwDbe7Z... #image(sitemap20230716.jpg) -[[ワイヤーフレーム（PC版・スマホ版）>https://drive.googl... |#image(20230716a.jpg,80%)|#image(20230716b.jpg,50%)| ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割... ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -ハードウェア --MacBook Air -サービス --Adobe Illustrator 2023 --Adobe Photoshop 2023 --ibisPaint X --Visual Studio Code ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX... 2023.04.11 - 2023.07.18 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載し... //細かい配色はまだ決まっていないが、全体的な雰囲気として... 今回はオリジナルゲームのwebサイトを制作するにあたって、ど... ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問... ゲーム自体は一通りプレイできるようにはなっているが、それ... ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹... -フリーゲームのサイト --[[殺戮の天使 ゲームマガジン>https://www.gamemaga.jp/sat... --[[魔女の家>https://majonoie.karou.jp]] --[[ib>https://kouri.kuchinawa.com/game_01.html]] -参考にしたいサイト --[[TWISTED WONDERLAND>https://twisted-wonderland.aniplex... ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... -HTML --[[ホームページをHTMLで作成する手順をゼロから解説>https:... --[[【はじめてのHTML】ホームページの作り方・公開までの手... ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... [[スケジュール表>https://docs.google.com/spreadsheets/d/1... ~ //***Webサイト制作のながれ //1.プロジェクトの企画　調査　コンセプトを確定(目標とゴー... //2.取材、撮影。 //3.Webサイト全体の構成作成(サイトマップ作成) //4.Webページの情報設計(ワイヤーフレーム) //5.デザイン作成(イラレでのビジュアル制作) //6.コーディング・システム開発 //7.テスト //8.リリース ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... -%%計画を立てる%% -%%先行事例を調査%% -%%サイトマップ制作%% -%%ワイヤーフレーム制作%% -%%HTML%% -%%文章を考える%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしな... //&color(red){例：10人以上の会議には出ない。苦手なことは... ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2023.07.11 ***進捗 -スマホ版のインフォメーション部分の配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ※下の画像には写っていませんが、インフォメーションの部分に... |#image(20230711a.jpg)|#image(20230711b.jpg)| ~ ~ **2023.07.04 ***進捗 -Youtubeをスマホ版とPC版でサイズが切り替わるように設定した -PC版のインフォメーション部分の配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ~ **2023.06.27 ***進捗 -画像の大きさの調整 -インフォメーション部分の配置を調整（なぜか反映されなかっ... -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ~ **2023.06.20 ***進捗 -PVを制作した -Youtubeを埋め込む -webの配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ #youtube(8qxqlXGfT-I) ~ |#image(20230620a.jpg,90%)|#image(20230620b.jpg,70%)| ~ ~ **2023.06.13 ***進捗 -ストーリー、キャラクターの画像を入れた -メインビジュアルの下部分にグラデーションを入れた -絵コンテ・字コンテを考えた -[[絵コンテ・字コンテ>https://drive.google.com/drive/fold... ~ ***やること -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする -フッターにメニューとロゴを入れる -bodyの画像サイズを調整する ~ #YouTube(Wv604Jy2sag) ~ #image(20230613.jpg,50%) ~ ~ **2023.06.06 ***進捗 -完成したメニュー画像を埋め込み、サイズを調整 -ホラーっぽい怪しさを醸し出すために背景をもう少し暗めに変更 -body部分の画像の大きさを調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -PC版の画像を作成 -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする ~ #image(20230606.jpg,50%) ~ ~ **2023.05.30 ***進捗 -webに埋め込む画像を作成中 -ストーリー部分の文章を考えた -フォントサイズの調整 -メニューのフォントサイズと色を変更 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -PC版の画像を作成 -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする ~ #image(20230530.jpg,50%) ~ ~ **2023.05.23 ***進捗 -スマホ版のメインビジュアルを作成 -メインビジュアルの画像の大きさを調整 -スマホで見た時のヘッダー画像（ラフ）を入れた -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -スマホ版のメニュー部分を縦に並べるように調整したい -スマホ版の画像を準備する -画像のサイズ調整 ~ |#image(20230523a.jpg,80%)|#image(20230523b.jpg,70%)| ~ ~ **2023.05.16 ***進捗 -右側に空いていたスペースをなくすことに成功した -ナビゲーションの文字の位置を中央揃えにした -各メニューに仮画像を入れ込んでみ配置してみた -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -メインビジュアルの画像サイズを次回までに調整したい ~ #image(20230516.jpg,50%) ~ ~ **2023.05.09 ***進捗 -背景の色を入れてみた -htmlのbody部分を編集 -試しに仮画像を入れてみた -github : https://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -色の構成や内容はまだ決まっていないため決めていきたい -右側に謎のスペースができたため、その原因を探った。次回ま... ~ #image(SD20230510.jpg,50%) ~ ~ **2023.05.02 ***進捗 #image(SD20230502.jpg) -htmlで画像を表示させた -ナビゲーションを追加した ~ ~ **2023.04.25 ***サイトマップ（4月25日時点） #image(sitemap20230425.jpg) ~ ***ワイヤーフレーム（4月25日時点） #image(wireframe20230425.jpg,50%) ~ ~ **2023.04.18 ***テーマのアイデア -つくったオリジナルゲームを多くの人に興味を持って遊んでも... -3DCGを使ったアニメーション -見た人がクスッと笑えるような面白合成写真集 ~ ***現状調査 -ゲーム自体は一通りプレイできるようにはなっているが、それ... ~ ***先行事例 -フリーゲームのサイト --[[殺戮の天使 ゲームマガジン>https://www.gamemaga.jp/sat... --[[魔女の家>https://majonoie.karou.jp]] --[[ib>https://kouri.kuchinawa.com/game_01.html]] //-[[原神>https://genshin.hoyoverse.com/ja]] //-[[Sky 星を紡ぐ子どもたち>https://www.thatskygame.com/j... -参考にしたいサイト --[[TWISTED WONDERLAND>https://twisted-wonderland.aniplex... ~ ***技法・技術情報 -HTML --[[ホームページをHTMLで作成する手順をゼロから解説>https:... --[[【はじめてのHTML】ホームページの作り方・公開までの手... ~ //***背景や動機 //-ゲームを作ろうラボの活動でオリジナルゲームを制作したた... ~ ***研究の流れメモ -参考【[[牧野友紀/情報デザイン研究I]]】 1.プロジェクトの企画　調査　コンセプトを確定(目標とゴール... 2.取材、撮影。 3.Webサイト全体の構成作成(サイトマップ作成) 4.Webページの情報設計(ワイヤーフレーム) 5.デザイン作成(イラレでのビジュアル制作) 6.コーディング・システム開発 7.テスト 8.リリース ~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ **2023.04.11 ***研究内容案 -オリジナルゲームのwebサイト制作 &color(red){←候補}; --HTMLで制作 -3DCGアニメーション --blenderを活用 ~ ***入れたいものメモ -キャラクター紹介 -大まかなストーリー紹介 -紹介動画 -制作スタッフ紹介 -ゲームのリンク ~ ***コンセプト -ぱっと見でどんなサイトか分かるようにしたい -作ったゲームの面白さを伝えたい ~ ~ //**20XX.XX.XX //***XXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ ~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ ~

終了行:
*おともだち オリジナルホラー脱出ゲームを紹介するWebサイトの開発 #image(taitoru1.jpg) -''西山　実伶'' -'''Keywords：game, web design, html''' -http://miiir-nishiym.github.io/otomodachi/ //-__[[相互評価シート>https://www.example.com]]__ ← ここ... ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 1年生の時にチームで制作したゲームを紹介し、多くの人に興味... ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 １年生の頃にチームでオリジナルゲームを制作したが、それを... //--HTMLとCSSを使って一からサイトを作り上げたいと思った -目的 --ゲームの雰囲気が伝わるようなサイトに仕上げ、制作したゲ... --不気味さを演出できるようなwebサイトになるように、配色や... //--HTMLとCSSの扱いに慣れる ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -ゲームの雰囲気に合う配色や構成にする -閲覧者が読みやすいように簡潔にわかりやすい文章にする ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -[[webサイト>https://miiir-nishiym.github.io/otomodachi/]] -[[画像>https://drive.google.com/drive/folders/1c2GNVTOHn... -[[動画>https://youtu.be/8qxqlXGfT-I]] #youtube(8qxqlXGfT-I) -[[サイトマップ>https://drive.google.com/file/d/1DwwDbe7Z... #image(sitemap20230716.jpg) -[[ワイヤーフレーム（PC版・スマホ版）>https://drive.googl... |#image(20230716a.jpg,80%)|#image(20230716b.jpg,50%)| ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割... ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -ハードウェア --MacBook Air -サービス --Adobe Illustrator 2023 --Adobe Photoshop 2023 --ibisPaint X --Visual Studio Code ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX... 2023.04.11 - 2023.07.18 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載し... //細かい配色はまだ決まっていないが、全体的な雰囲気として... 今回はオリジナルゲームのwebサイトを制作するにあたって、ど... ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問... ゲーム自体は一通りプレイできるようにはなっているが、それ... ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹... -フリーゲームのサイト --[[殺戮の天使 ゲームマガジン>https://www.gamemaga.jp/sat... --[[魔女の家>https://majonoie.karou.jp]] --[[ib>https://kouri.kuchinawa.com/game_01.html]] -参考にしたいサイト --[[TWISTED WONDERLAND>https://twisted-wonderland.aniplex... ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... -HTML --[[ホームページをHTMLで作成する手順をゼロから解説>https:... --[[【はじめてのHTML】ホームページの作り方・公開までの手... ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... [[スケジュール表>https://docs.google.com/spreadsheets/d/1... ~ //***Webサイト制作のながれ //1.プロジェクトの企画　調査　コンセプトを確定(目標とゴー... //2.取材、撮影。 //3.Webサイト全体の構成作成(サイトマップ作成) //4.Webページの情報設計(ワイヤーフレーム) //5.デザイン作成(イラレでのビジュアル制作) //6.コーディング・システム開発 //7.テスト //8.リリース ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... -%%計画を立てる%% -%%先行事例を調査%% -%%サイトマップ制作%% -%%ワイヤーフレーム制作%% -%%HTML%% -%%文章を考える%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしな... //&color(red){例：10人以上の会議には出ない。苦手なことは... ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2023.07.11 ***進捗 -スマホ版のインフォメーション部分の配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ※下の画像には写っていませんが、インフォメーションの部分に... |#image(20230711a.jpg)|#image(20230711b.jpg)| ~ ~ **2023.07.04 ***進捗 -Youtubeをスマホ版とPC版でサイズが切り替わるように設定した -PC版のインフォメーション部分の配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ~ **2023.06.27 ***進捗 -画像の大きさの調整 -インフォメーション部分の配置を調整（なぜか反映されなかっ... -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ~ **2023.06.20 ***進捗 -PVを制作した -Youtubeを埋め込む -webの配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ #youtube(8qxqlXGfT-I) ~ |#image(20230620a.jpg,90%)|#image(20230620b.jpg,70%)| ~ ~ **2023.06.13 ***進捗 -ストーリー、キャラクターの画像を入れた -メインビジュアルの下部分にグラデーションを入れた -絵コンテ・字コンテを考えた -[[絵コンテ・字コンテ>https://drive.google.com/drive/fold... ~ ***やること -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする -フッターにメニューとロゴを入れる -bodyの画像サイズを調整する ~ #YouTube(Wv604Jy2sag) ~ #image(20230613.jpg,50%) ~ ~ **2023.06.06 ***進捗 -完成したメニュー画像を埋め込み、サイズを調整 -ホラーっぽい怪しさを醸し出すために背景をもう少し暗めに変更 -body部分の画像の大きさを調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -PC版の画像を作成 -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする ~ #image(20230606.jpg,50%) ~ ~ **2023.05.30 ***進捗 -webに埋め込む画像を作成中 -ストーリー部分の文章を考えた -フォントサイズの調整 -メニューのフォントサイズと色を変更 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -PC版の画像を作成 -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする ~ #image(20230530.jpg,50%) ~ ~ **2023.05.23 ***進捗 -スマホ版のメインビジュアルを作成 -メインビジュアルの画像の大きさを調整 -スマホで見た時のヘッダー画像（ラフ）を入れた -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -スマホ版のメニュー部分を縦に並べるように調整したい -スマホ版の画像を準備する -画像のサイズ調整 ~ |#image(20230523a.jpg,80%)|#image(20230523b.jpg,70%)| ~ ~ **2023.05.16 ***進捗 -右側に空いていたスペースをなくすことに成功した -ナビゲーションの文字の位置を中央揃えにした -各メニューに仮画像を入れ込んでみ配置してみた -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -メインビジュアルの画像サイズを次回までに調整したい ~ #image(20230516.jpg,50%) ~ ~ **2023.05.09 ***進捗 -背景の色を入れてみた -htmlのbody部分を編集 -試しに仮画像を入れてみた -github : https://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -色の構成や内容はまだ決まっていないため決めていきたい -右側に謎のスペースができたため、その原因を探った。次回ま... ~ #image(SD20230510.jpg,50%) ~ ~ **2023.05.02 ***進捗 #image(SD20230502.jpg) -htmlで画像を表示させた -ナビゲーションを追加した ~ ~ **2023.04.25 ***サイトマップ（4月25日時点） #image(sitemap20230425.jpg) ~ ***ワイヤーフレーム（4月25日時点） #image(wireframe20230425.jpg,50%) ~ ~ **2023.04.18 ***テーマのアイデア -つくったオリジナルゲームを多くの人に興味を持って遊んでも... -3DCGを使ったアニメーション -見た人がクスッと笑えるような面白合成写真集 ~ ***現状調査 -ゲーム自体は一通りプレイできるようにはなっているが、それ... ~ ***先行事例 -フリーゲームのサイト --[[殺戮の天使 ゲームマガジン>https://www.gamemaga.jp/sat... --[[魔女の家>https://majonoie.karou.jp]] --[[ib>https://kouri.kuchinawa.com/game_01.html]] //-[[原神>https://genshin.hoyoverse.com/ja]] //-[[Sky 星を紡ぐ子どもたち>https://www.thatskygame.com/j... -参考にしたいサイト --[[TWISTED WONDERLAND>https://twisted-wonderland.aniplex... ~ ***技法・技術情報 -HTML --[[ホームページをHTMLで作成する手順をゼロから解説>https:... --[[【はじめてのHTML】ホームページの作り方・公開までの手... ~ //***背景や動機 //-ゲームを作ろうラボの活動でオリジナルゲームを制作したた... ~ ***研究の流れメモ -参考【[[牧野友紀/情報デザイン研究I]]】 1.プロジェクトの企画　調査　コンセプトを確定(目標とゴール... 2.取材、撮影。 3.Webサイト全体の構成作成(サイトマップ作成) 4.Webページの情報設計(ワイヤーフレーム) 5.デザイン作成(イラレでのビジュアル制作) 6.コーディング・システム開発 7.テスト 8.リリース ~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ **2023.04.11 ***研究内容案 -オリジナルゲームのwebサイト制作 &color(red){←候補}; --HTMLで制作 -3DCGアニメーション --blenderを活用 ~ ***入れたいものメモ -キャラクター紹介 -大まかなストーリー紹介 -紹介動画 -制作スタッフ紹介 -ゲームのリンク ~ ***コンセプト -ぱっと見でどんなサイトか分かるようにしたい -作ったゲームの面白さを伝えたい ~ ~ //**20XX.XX.XX //***XXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ ~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ ~

ページ名: