LogoMark.png

安藤貴仁/情報デザイン演習ⅢB の変更点


#author("2024-12-19T10:55:48+09:00","default:member","member")
#author("2024-12-19T10:59:21+09:00","default:member","member")
*安藤貴仁&scale(70){ | 情報デザイン演習ⅢB};
[[情報デザイン演習IIIB]]
~
~
~
*課題2 経路案内

~
#image(経路案内ヘッダー.gif)
~
~

**概要
***背景
-展示会場までの行き方がわかりづらい
~
 
***目的
-一度見たら行き方が分かる動画を作る
-なるべく短い動画にする
~
 
***コンセプト
-演出をあまり入れないシンプルな動画
-色はなるべく寒色を使い、目に優しい色使いを
~
 
***成果物の仕様
-YouTube(横型動画)
#YouTube(UxabOW92rJE?Tt7xx_L16Nvpwsfb)
-Instagram or YouTube(縦型動画)
--[[リンクはこちら>https://youtu.be/istjkIENlk4/]]
~
 
***制作期間
-2024.11.07 - 2024.12.18
~
 
***まとめ
-動画撮影も編集も初めてで、序盤こそあたふたしましたが、後半はモザイク処理や細かい調整ができるようになり創作意欲に駆られました。
~
-シンプルでわかりやすい動画を作ることを念頭に置き制作しました。そのため過度な演出や色使いを控え、なるべく短い動画にしました。
~
-反省点として前置きや終わりをもっと作った方がYouTubeによくある動画に近づけたと思います。
~
~
 
**調査
 
***現状調査:撮影テスト
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:v:/g/personal/iwata_mail_kyusan-u_ac_jp/EQIMOfOzKf9EmhO5qZW-kvUB84L15xwhcFYtdkMW_y2jyw?e=N5P4Sv&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D]]
~
***先行事例の調査
-横動画
--[[【地下鉄】赤羽橋駅から東京タワーまでの行き方 | 動画で道案内>https://www.youtube.com/watch?v=-yMd9nF48AM]]
--[[【経路案内】JR名古屋駅桜通口改札から医学生道場名古屋校舎までの行き方です(地下のユニモールを使う方法、地下鉄東山線を使う方も) | 医学生の勉強を全力で応援する/医学生道場>https://www.youtube.com/watch?v=Zj1xGVyY9Ug]]

--[[【2022年4月】JR博多駅からキャナルシティ博多まで歩いてみた【4K】 | KITAKYUSHU WALKER>https://www.youtube.com/watch?v=EdRD5GYJ4qE&t=71s]]
-縦動画
--[[福岡市営地下鉄七隈線延伸/天神南駅から博多駅まで延伸/2023年3月 | ちかっぱ第6学区>https://www.youtube.com/shorts/R1I1qMaZEw4]]
--[[#経路案内 #書道教室 #暁書法学院 #梅田 | 暁書法学院>https://www.youtube.com/shorts/D9VZ6BGI1y0]]
 
~
 
***技術・技法の調査:テロップ(映像表現における文字情報について)
-[[【有料級】今すぐ使える超万能なテロップアニメーション10選!>https://www.youtube.com/watch?v=RXQlBEzcjb4]]
-[[【Ae】簡単に1UPできる『4つ』の大技!【作り方】MV1UP講座(大技編)>https://www.youtube.com/watch?v=HDlKC_y7sKY]]
~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**#13:2024.12.12

***編集
-After Effectsでの編集
-ブラッシュアップ
~
~

**#12:2024.12.5

***編集
-After Effectsでの編集
-ブラッシュアップ
~
~ 

**#11:2024.11.28

***撮影・編集
-横向き撮影
-縦向き撮影
-After Effectsでの編集
~
~

**#10:2024.11.21

***撮影
-横向き撮影
-縦向き撮影
~
~

**#09:2024.11.14
***構成
+スタート(改札前)
+北門入り口
+17号館入り口
+エレベーター
+ゴール(会場)
~
***ストーリーボード:テロップ
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/iwata_mail_kyusan-u_ac_jp/Ecxoj_3MGA5HkYlcwc4r_sUBGkVOgY_KQH1BPyiz3ij1yA?e=ti5GcY]]
~
***技術・技法の調査:テロップ(映像表現における文字情報について)
-◯◯WEBのリンク◯◯
-◯◯WEBのリンク◯◯
~
***概要欄の整理
-背景
--
--
-目的
--
--
-コンセプト
--
--
~
~

**#08:2024.11.07
 
***現状調査:撮影テスト
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:v:/g/personal/iwata_mail_kyusan-u_ac_jp/EQIMOfOzKf9EmhO5qZW-kvUB84L15xwhcFYtdkMW_y2jyw?e=N5P4Sv&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D]]
~
***先行事例の調査
-横動画
--[[【地下鉄】赤羽橋駅から東京タワーまでの行き方 | 動画で道案内>https://www.youtube.com/watch?v=-yMd9nF48AM]]
--[[【経路案内】JR名古屋駅桜通口改札から医学生道場名古屋校舎までの行き方です(地下のユニモールを使う方法、地下鉄東山線を使う方も) | 医学生の勉強を全力で応援する/医学生道場>https://www.youtube.com/watch?v=Zj1xGVyY9Ug]]

--[[【2022年4月】JR博多駅からキャナルシティ博多まで歩いてみた【4K】 | KITAKYUSHU WALKER>https://www.youtube.com/watch?v=EdRD5GYJ4qE&t=71s]]
-縦動画
--[[福岡市営地下鉄七隈線延伸/天神南駅から博多駅まで延伸/2023年3月 | ちかっぱ第6学区>https://www.youtube.com/shorts/R1I1qMaZEw4]]
--[[#経路案内 #書道教室 #暁書法学院 #梅田 | 暁書法学院>https://www.youtube.com/shorts/D9VZ6BGI1y0]]
 
~
~
~
~
 
*課題1 VI計画
~
#image(使用例23AS005安藤貴仁.jpg)
~
~
**概要
***背景
-レンガ
-クオーレの食器プレートに描かれている葉っぱ
~

***目的
-本を用いることで図書館と同じ場所にあるとわかる
-葉っぱが伸びるぐらい長く続いて欲しい
~

***コンセプト
-図書館の下にあるから本を用いる
-葉っぱが伸び、彩りが出てくる
~

***成果物の仕様
-シンボルマーク / ロゴタイプ
~
#image(試作23AS005安藤貴仁.jpg)
~
-モーションロゴ
#YouTube(nBVW8VRPc8k)
~

-VIマニュアル
--[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/iwata_mail_kyusan-u_ac_jp/Ed7Q55FsoiBBo60NOoRMfMgB-OHXazWFxtwYcA-xEV0_5Q?e=3SS9ez]]
~
~

***制作期間
-2024.09.19 - 2024.11.07
~

***まとめ
-モノクロで制作を重ねた結果、色をつけづらくなってしまった
-他学生の作品は色とりどりで見栄えが良いものが多く、モノトーンの自分の作品が寂しく感じた
-最初の段階でどのような色を使うか、どう動かすかを想定して作るべきだった
~
~

**調査

***現状調査:学食の現在の様子
-記録写真(外観 / 内観)
--[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:i:/g/personal/iwata_mail_kyusan-u_ac_jp/Ea1c4sxYpftGublrbDV7zB8BI1-ZB-UspAxjL8GSouBVPQ?e=fsSuex]]

-店舗の概要
【イタリアンレストラン クオーレ】
--図書館1階
~

-良い点
--旬の食材を生かした本格イタリアンが楽しめる
--落ち着いた雰囲気でゆっくりと食事ができる
~

-改善点
--商品名しか書かれておらずどんな商品が来るかわからない(一部商品のみ)
--注文するときに商品名がわかりづらい
~
~

***先行事例
-VIに関する基本情報
--[[ビジュアルアイデンティティ(VI)とは?:事例を交えて解説>https://www.missiondrivenbrand.jp/entry/kaitai_branddesign#google_vignette]]
--[[VI(ビジュアル・アイデンティティ)とは?意味や事例を解説>https://www.toppan-colorer.co.jp/column/4375]]
~

-類似する飲食店の事例調査
--[[福岡工業大学学食>https://www.fit.ac.jp/shisetsu/seikatsu/dining]]
--[[近畿大学福岡キャンパス学食>https://www.kindai.ac.jp/news-pr/news-release/2023/11/040752.html]]
--[[【プロが教える】売上が伸びる 飲食店の店舗デザイン>https://largo.studio/media/restaurant-design-tips/]]
--◯◯参考になる一般の飲食店◯◯
~

***技法・技術情報
-モーションロゴの制作方法
--[[企業ロゴアニメーション(モーションロゴ)とは?>https://key-movie.forfreelance.co.jp/blog/video-production/logo-animation/]]
--[[ロゴアニメーションの作成の流れ>https://note.com/tsuda2525/n/n54fcc6904d03]]
--[[ロゴアニメーションを作ろう>https://creativecloud.adobe.com/ja/learn/after-effects/web/jp-1min-feature-logo-animation]]
--[[海外のロゴアニメーションチュートリアル>https://www.youtube.com/watch?v=S-XQgYXZRr0]]
#youtube(S-XQgYXZRr0)
~

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**#07:2024.10.31
***使用例
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:i:/g/personal/iwata_mail_kyusan-u_ac_jp/Ea1c4sxYpftGublrbDV7zB8BI1-ZB-UspAxjL8GSouBVPQ?e=TnMrus]]
~
~

**#06:2024.10.24
***モーションロゴ
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:v:/g/personal/iwata_mail_kyusan-u_ac_jp/EV-zkYy8ZUBNjNsw31LBIMQBsGhzNCFEI8Ejc7UawD8K_w?e=DySbXQ&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D]]
~
~

**#05:2024.10.17
***VIマニュアル
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/iwata_mail_kyusan-u_ac_jp/Ed7Q55FsoiBBo60NOoRMfMgB-OHXazWFxtwYcA-xEV0_5Q?e=3SS9ez]]
~
~

**#04:2024.10.10
***字コンテ
-起:始まり・状況(円が描かれる)
-承:続き(葉が伸び始める)
-転:変化・クライマックス(スプーンとフォークが出てくる)
-結:結果・オチ(葉が引いてクオーレの文字が出てくる)
~
***ストーリーボード
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/iwata_mail_kyusan-u_ac_jp/EQOXhcKIOe1HpUlUQ5el7JIBFbiOLqh4rzYGnHlhQcNcQw?e=E6TXYh]]
~
~

**#03:2024.10.03
***試作(3案)
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/iwata_mail_kyusan-u_ac_jp/EjFlPwT6oC1Mm62DK1OOzbUB9J00y3_rYpbP8eq4ZwJEzQ?e=XdPOiH]]
~

***先行事例の調査:VIマニュアル
-[[3D都市モデル>https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_doc_0008_ver01.pdf]]

-[[Hamamatu City Visual Identity Manual「浜松市VImanual」>https://www.city.hamamatsu.shizuoka.jp/documents/111319/vi_manual.pdf]]
~

***概要欄の整理
-背景
--レンガ
--クオーレの食器プレートに描かれている葉っぱ

-目的
--本を用いることで図書館と同じ場所にあるとわかる
--葉っぱが伸びるぐらい長く続いて欲しい
~

-コンセプト
--図書館の下にあるから本を用いる
--葉っぱが伸び、彩りが出てくる
~

-成果物(制作物)
--シンボルマーク / ロゴタイプ
--モーションロゴ
--+α
~
~

**#02:2024.09.26
***研究対象
-イタリアンレストラン クオーレ

***アイデアスケッチ
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EgP7K-Mj9cVIs_Atr3j0xBwBbNeH-JS-cQFAFCYl5M53Rg?e=XD2A3k]]
~

***現状調査:記録写真
-[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/iwata_mail_kyusan-u_ac_jp/ErkYaK6Sg49FglIK6_HfpFQB3KkbyW57kM4J8J9lXxqEAw?e=rf2ngs]]
~

**#01:2024.09.19
***VIに関する基本情報
-[[ビジュアルアイデンティティ(VI)とは?:事例を交えて解説>https://www.missiondrivenbrand.jp/entry/kaitai_branddesign#google_vignette]]

-[[VI(ビジュアル・アイデンティティ)とは?意味や事例を解説>https://www.toppan-colorer.co.jp/column/4375]]
~

***モーションロゴの制作方法
-[[ロゴアニメーションを作ろう>https://creativecloud.adobe.com/ja/learn/after-effects/web/jp-1min-feature-logo-animation]]

-[[海外のロゴアニメーションチュートリアル>https://www.youtube.com/watch?v=S-XQgYXZRr0]]
#youtube(S-XQgYXZRr0)
~

***先行事例の調査:WEB・文献調査
-[[福岡工業大学学食>https://www.fit.ac.jp/shisetsu/seikatsu/dining]]
-[[近畿大学福岡キャンパス学食>https://www.kindai.ac.jp/news-pr/news-release/2023/11/040752.html]]
-[[【プロが教える】売上が伸びる 飲食店の店舗デザイン>https://largo.studio/media/restaurant-design-tips/]]
~

***現状調査:学食の現在の様子
-店舗の概要
【イタリアンレストラン クオーレ】
--図書館1階
~

-良い点
--旬の食材を生かした本格イタリアンが楽しめる
--落ち着いた雰囲気でゆっくりと食事ができる
~

-改善点
--商品名しか書かれておらずどんな商品が来るかわからない(一部商品のみ)
--注文するときに商品名がわかりづらい
~
~























#settextcolor(#000000)