#author("2024-01-09T23:07:18+09:00","default:member","member") #author("2024-01-09T23:09:37+09:00","default:member","member") [[情報デザイン演習IIIB]] *課題2 経路案内 #image(youtube.jpg) -''大浦脩介'' ~ **概要 ***背景 -九州産業大学は敷地が広い、建物が多い、建物の特徴がないといった理由から目的地へのルートなどがわかりにくい。 ~ ***目的 -九芸卒展を見に来た人が目的地にたどり着く。 ~ ***対象 -九芸卒展を見るために九州産業大学に初めて訪れた人。 ~ ***コンセプト -情報が伝わることを第一に早送りやテロップなどを使い、わかりやすくノイズの少ない動画にして伝える。 ~ ***成果物の仕様 -[[YouTube>https://youtu.be/_vnWA7s9wbY]] --1920*1080px --30秒 [[Instagram>https://www.instagram.com/reel/C13nBR1rpYD/?utm_source=ig_web_copy_link]] --1080*1920px --30秒 ~ -[[OneDrive>https://drive.google.com/drive/folders/1KYkTGfCgeVayRZobX8Lopaiuaox6wTh4?usp=share_link]] ***制作期間 -2023.11.16 -2023.12.21 ~ ***メンバー -チーム名：HFT -[[林耕平>林耕平/情報デザイン演習ⅢB]] -[[増田里奈>増田里奈/情報デザイン演習ⅢB]] -[[角田雄一>角田雄一/情報デザイン演習ⅢB]] -大浦脩介 - ~ ***まとめ -経路案内の動画の制作でコンセプトとしていた経路案内の中の情報を伝えることや早送りなどはできたと思う。しかし、動画でゆっくりするところでスピードが早いと感じたのでそこの部分はもう少しスローにした方がいいと感じた。 ~ ~ **調査 ***現状調査 -[[試作撮影>https://drive.google.com/drive/folders/1-94nreejdmG9J07us8xibmqiyyD_DV6Q?usp=drive_link]] --試作の撮影では目印になるものを写していなっかり、写している部分も秒数が少なく使うのがむずかしい動画なので、次の撮影では、目印になるものをあらかじめ決めて目印の部分を長めに写すことをしようと思います。 ~ ***先行事例 -[[福山駅から「ふくやま草戸千軒ミュージアム」までの経路案内>https://youtu.be/Mx-mYJC4jAQ?si=3ijViCPiCNiyhFz0]] --この動画はミュージアムに行く道までの経路がわかりやすい。 ~ ***技法・技術情報 -[[時間伸縮とタイムリマップ>https://helpx.adobe.com/jp/after-effects/using/time-stretching-time-remapping.html]] --時間の伸縮などの仕組みや方法の説明を参考にした。 ~ ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.12.14 ***動画のアップロード [[YouTube>https://youtu.be/_vnWA7s9wbY]] --1920*1080px --30秒 [[Instagram>https://www.instagram.com/reel/C13nBR1rpYD/?utm_source=ig_web_copy_link]] --1080*1920px --30秒 ***編集 -[[OneDriveへのリンク>https://drive.google.com/drive/folders/1KYkTGfCgeVayRZobX8Lopaiuaox6wTh4?usp=sharing]] -- ***メインビジュアル・サムネイルの制作 -[[OneDriveへのリンク>https://drive.google.com/drive/folders/1KYkTGfCgeVayRZobX8Lopaiuaox6wTh4?usp=sharing]] ~ **2023.12.07 ***撮影 -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as025_st_kyusan-u_ac_jp/EpvYsASlJ8NKgB42cki3bE8B-81fX6-LXDPY8ikBxGTmLA?e=Nd0t3e]] ***動画の構成 -オープニング（タイトル） --駅の名前がある部分 //動画の趣旨 -スタート --駅の名前の部分から進行方向へ //経路案内の開始 -移動時 --目につくような場所で動画の速度を落とす -分岐 -- -エレベーター --エレベーター内の動画はカットして５階に飛ぶ感じにする。 --文字で５階であることを示す。 -ゴール -- ~ ~ **2023.11.30 ***プロトタイプ制作 -[[OneDriveへのリンク>https://drive.google.com/drive/folders/1Ao7Bi_hr9nujLHxZz4ewVZgtq0J_MVF9?usp=sharing]] --プロトタイプの制作、縦と横 **2023.11.16 ***試作：撮影テスト -[[試作撮影>https://drive.google.com/drive/folders/1-94nreejdmG9J07us8xibmqiyyD_DV6Q?usp=drive_link]] ***先行事例 -[[福山駅から「ふくやま草戸千軒ミュージアム」までの経路案内>https://youtu.be/Mx-mYJC4jAQ?si=3ijViCPiCNiyhFz0]] --この動画はミュージアムに行く道までの経路がわかりやすい。 ~ ~ ~ ~ ***課題1 アルテリア VI計画 //&color(red){基本的な考え方、枠組み、視点など}; #image(rogo7.png) -''大浦脩介'' **概要 ***背景 -アルテリアは学食の中で多くの人が利用している。営業時間の案内などがわかりやすくて、アレルギー表なども必要な人に便利な学食だと思った。 しかし、人が多くてゆっくりと落ち着いた雰囲気がしていないと感じたのでアルテリアVI計画をしようと思った。 ***目的 -アルテリアがロゴを見るだけで安らぎの空間と思えるようなものを作る。 ***コンセプト -アルテリアを親しみやすい感じにする。 -柔らかい雰囲気のイメージにする。 ***成果物の仕様 //&color(red){成果物の形式・サイズ・時間尺等}; -モーションロゴ #youtube(M3_Au7uwNcc) -シンボルマーク・ロゴタイプ #image(rogo7.png) -[[VIマニュアル>https://drive.google.com/file/d/1GKH2WjqdP_xM6prR0yRqAy-9YvRsw9Pm/view?usp=sharing]] ~ ***制作期間 //&color(red){制作期間｜2023.09.21 - 2023.11.16}; -2023.09.21 - 2023.11.16 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; -使う色を一色にしてデザインもシンプルにして、柔らかいイメージをもってもらえるようにすることができたと思う。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -現代におけるVI計画の活用事例 --[[VIとは？>https://circl.co.jp/jp/views/branding/what-is-vi/]] ---VIの意味や定義についてまとめてあり、スターバックスやユニクロの具体例をもとに解説されている。 --[[CIとVIの意味や目的>https://chibico.co.jp/blog/brand-strategy/ci-vi-025/]] ---CIとVIのことについて意味、目的 ---CIとVIのことについてより深く知ることができた。 -学食の現在の様子について --アルテリア ---営業時間の案内などがわかりやすい。 ---内装の感じがいい感じだった。 ---昼時は混雑する。 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[モーションロゴ>https://sevendex.com/post/846/]] --様々な企業のモーションロゴの意味など細かく書いてあってモーヨンロゴに意味を持たせることがわかった。 ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[CIとVIの意味と目的>https://circl.co.jp/jp/views/branding/what-is-vi/]] -[[モーションロゴの制作方法>https://creativecloud.adobe.com/ja/learn/after-effects/web/jp-for-designers-4]] --モーションロゴの制作の仕方の例などが記載されていて参考にしようと思った。 ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.10.26 ***モーションロゴ制作 -[[YouTube>https://youtu.be/M3_Au7uwNcc]] -アルテリアが柔らかい感じになるようぬ心がけて制作した。 ~ ~ **2023.10.19 ***VIマニュアル -[[VIマニュアル>https://drive.google.com/file/d/1GKH2WjqdP_xM6prR0yRqAy-9YvRsw9Pm/view?usp=sharing]] ~ - ***合成写真：使用イメージ -[[画像ファイルへのリンク>https://drive.google.com/file/d/1oJD9a0sSuJPQgEInmTWv9iOZ5r9vrJHe/view?usp=share_link]] -レンガの壁に自然になるようにした。 ~ ***モーションロゴ 試作 -[[YouTube>https://youtu.be/M3_Au7uwNcc]] ~ ~ **2023.10.12 ***モーションロゴのアイデア -字コンテ --起：ロゴが出てくる --承：バラバラで表示 --転：ロゴになるために動く --結：ロゴの完成 ~ Google Drive ***Illustratorを用いた作図（試作） -[[Google Drive>https://drive.google.com/drive/folders/1Y__X7TaLdcMb4-_8njTsBNth0Rb0arIk?usp=sharing]] ~ ~ **2023.10.05 ***背景・目的・コンセプトの設定 -背景 --人が多くてゆっくりと落ち着いた雰囲気がしていない -目的 --アルテリアがロゴを見るだけで安らぎの空間と思えるようにする。 -コンセプト --落ち着いた雰囲気のあるような感じのもの -- -[[アイデアスケッチ>https://drive.google.com/drive/folders/1nxz9cUEE6gFfzHpYhjnRilAj8nTcb-3l?usp=sharing]] ~ //***アイデアスケッチ（10案） //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ ~ **2023.09.28 ***調査②モーションロゴの制作方法 --[[モーションロゴの制作方法>https://creativecloud.adobe.com/ja/learn/after-effects/web/jp-for-designers-4]] ---モーションロゴの制作について細かく説明があるサイト -[[ロゴの制作について>https://creativecloud.adobe.com/ja/learn/illustrator/web/original-type-font]] --[[ロゴの制作について>https://creativecloud.adobe.com/ja/learn/illustrator/web/original-type-font-2]] ~ ~ **2023.09.21 ***調査①現代におけるVI計画の活用事例 -[[VIとは？>https://circl.co.jp/jp/views/branding/what-is-vi/]] --VIの意味や定義についてまとめてあり、スターバックスやユニクロの具体例をもとに解説されているサイト -[[CIとVIの意味や目的>https://chibico.co.jp/blog/brand-strategy/ci-vi-025/]] ***調査⑤学食の現在の様子について（良い点・改善点） -アルテリア --良い点 営業時間の案内などがわかりやすい 内装の感じがいい感じだった。 アレルギー表なども必要な人もいるのでいいと思った。 --改善点 昼時は混雑する。 - __[[アルテリア>https://drive.google.com/drive/folders/1jQ6X16un6U3ggd96v27pQMoUiantjblo?usp=drive_link]]__ //https://drive.google.com/drive/folders/1jQ6X16un6U3ggd96v27pQMoUiantjblo?usp=drive_link //https://syuusukeoura.github.io/javascript_color/ とりあえず写真をメインビジュアルに入れる 作図３つ ~ ~ ~