#author("2024-12-19T09:02:53+09:00","default:member","member") #author("2024-12-19T09:04:26+09:00","default:member","member") *三浦 遥&scale(70){ ｜ 情報デザイン演習ⅢB}; [[情報デザイン演習IIIB]] ~ ~ ~ *課題2 経路案内 ~ #image(header.jpg) ~ ~ **概要 ***背景 -17号館のエレベーターの場所が分かりにくい。 -構内が広すぎて行くのに不安が残る。 ~ ***目的 -横動画 事前に予習してから来てもらう -縦動画 動画を見ながら会場に来てもらう ~ ***コンセプト -見やすく分かりやすい -あまりカットせず途中で分からなくなったなどは無いような構成にする、でもさっと見れる構成 -あまりカットせず途中で分からなくなったなどは無いような構成にする、でもさっと見れる構成にする ~ ***成果物の仕様 -YouTube（横型動画）※音が出ます #YouTube(/hCwKTJ_vrrE) -Instagram or YouTube（縦型動画） --[[リンクはこちら>https://youtube.com/shorts/ev0PAM_ffnM?feature=share]] ~ ***制作期間 -2024.11.07 - 2024.12.18 ~ ***まとめ -案内を言葉でわかりやすく説明することが難しく、テロップが多めになってしまったので、もう少し整理すればよかった。 -動画を見返すと倍速が早すぎるところもあった。短く見やすい動画を目指したが画面酔いをもう少し考えればよかった。 -あまりテロップに動きをつけなかったり、配色も控えめにしたことでシンプルで分かりやすい動画になったと思う。また一番気をつけてほしい、車通りが多く危険なことを重点に置いて動画を作れたのでよかった。 ~ **調査 ***現状調査：撮影テスト -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:v:/g/personal/k22as607_st_kyusan-u_ac_jp/Efv5Ve9Ux39Iu1pAhWYjjYgBdNFNGLvzfdTfyi5O8uIx9g?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=pvAacQ]] ~ ***先行事例の調査 -横型動画 --[[福山駅から「ふくやま草戸千軒ミュージアム」までの経路案内>https://youtu.be/Mx-mYJC4jAQ?si=pq9JkWFXbM1An9Ud]] --[[大崎駅〜freee本社が入っているビルまでの道案内>https://www.youtube.com/watch?v=FhMnlFrm004]] -縦型動画 --[[名鉄名古屋駅から金時計 行き方 修学旅行>https://youtube.com/shorts/1wlSWlMZyJo?si=tJeT5CvTNHBudOeW]] --[[【道案内】麹町駅から本社への経路をご紹介！【日本交通(株)】>https://youtube.com/shorts/b7Q6CCvKzDk?si=g-S76v6yCpHTH7fL]] ~ ***技術・技法の調査：テロップ（映像表現における文字情報について） -[[【AfterEffects】テキストアニメーション全紹介>https://www.youtube.com/watch?v=elIOSGdNoN0]] -[[【After Effects練習】テキストアニメーション基礎>https://www.youtube.com/watch?v=sUI2c1mInN8]] ~ ~ #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 ***構成 +スタート（改札前） +踏切や車に注意書きをする +北門入り口 +カラフルなオブジェを目印にする +エレベーター +ゴール（会場） ~ ***ストーリーボード：テロップ -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/k22as607_st_kyusan-u_ac_jp/EZT5vLnQH-dAoVub8w8a1YkBUxom5MpcjWUYY8SCcJDH_w?e=dA7ErB]] ~ ***技術・技法の調査：テロップ（映像表現における文字情報について） -[[【AfterEffects】テキストアニメーション全紹介>https://www.youtube.com/watch?v=elIOSGdNoN0]] -[[【After Effects練習】テキストアニメーション基礎>https://www.youtube.com/watch?v=sUI2c1mInN8]] ~ ***概要欄の整理 **概要 ***背景 -17号館のエレベーターの場所が分かりにくい。 -構内が広すぎて行くのに不安が残る。 ~ ***目的 -横動画 事前に予習してから来てもらう -縦動画 動画を見ながら会場に来てもらう ~ ***コンセプト -見やすく分かりやすい -あまりカットせず途中で分からなくなったなどは内容な構成にする ~ **#08：2024.11.07 ***現状調査：撮影テスト -OneDriveへのリンク ~ ***先行事例の調査 -横型動画 --[[福山駅から「ふくやま草戸千軒ミュージアム」までの経路案内>https://youtu.be/Mx-mYJC4jAQ?si=pq9JkWFXbM1An9Ud]] --[[大崎駅〜freee本社が入っているビルまでの道案内>https://www.youtube.com/watch?v=FhMnlFrm004]] -縦型動画 --[[名鉄名古屋駅から金時計 行き方 修学旅行>https://youtube.com/shorts/1wlSWlMZyJo?si=tJeT5CvTNHBudOeW]] --[[【道案内】麹町駅から本社への経路をご紹介！【日本交通(株)】>https://youtube.com/shorts/b7Q6CCvKzDk?si=g-S76v6yCpHTH7fL]] ~ ~ ~ ~ *課題1 VI計画 ~ #image(mainvisual24.jpg) ~ ~ **概要 ***背景 -レトロ感のある落ち着いた雰囲気のお店だが、お店のロゴがないところからイメージを付けにくい。またイタリアンレストランとわかりにくい点がある。 ~ ***目的 -イタリアンレストランと分かりやすく、ロゴを見ただけでこのお店だとイメージを結びつけられるようにしたい。 ~ ***コンセプト --色やモチーフからイタリア感を出す。 --赤レンガを使用しているのでレンガを入れる。 ~ ***成果物の仕様 -シンボルマーク / ロゴタイプ #image(cuore2024.png) -モーションロゴ #YouTube(kaozZwbnOCk) -VIマニュアル --[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/k22as607_st_kyusan-u_ac_jp/EQUScxRGP9JEowbxczdqNoUBCU7xoxXBlM1-hhM4arbMHA?e=fwvUCg/]] ~ ***制作期間 -2024.09.19 - 2024.11.07 ~ ***まとめ -イタリアの伝統色を使用することでイタリアンレストランであると一目でわかるようにできた。 -CUOREの文字ををそれぞれカトラリーやお皿に見立てたり、レンガのモチーフを使用して、少しハートに見えるように配置したりなど、遊び心があるようなロゴを作ることができた。 -線の細さなどをラフの段階から決めておらず、実際に作ってみると線画細すぎたり、モノクロでは表現できないようなロゴになってしまうことがあったため、時間がかかってしまった。ラフの段階から線の細さや色使いなどある程度を決めておくと良いと感じた。 ~ ~ **調査 ***現状調査 -記録写真（外観 / 内観） --[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as607_st_kyusan-u_ac_jp/EufTk7hzUBJDk_0Bmj3eCjoBQUaDlyGWdCV-19ncntxvTA?e=S4630O]] -店舗の概要 --落ち着いた雰囲気 --お洒落でレトロ感のある店内 --手書きのメニューで温かい印象 -良い点 --メニューが多く、接客や雰囲気から行きやすく過ごしやすい --お洒落で綺麗な店内 -改善点 --写真が古く、色味や魅力が伝わらない --入口が暗く、開いているのか分かりにくい --パスタの量が分かりにくい(普通サイズでも多かった印象) ~ ***先行事例 -VIに関する基本情報 --[[PR TIMES CI・VI・BIとは？>https://prtimes.jp/magazine/ci-vi-bi/]] --[[VI(ビジュアル・アイデンティティ)とは何か？>https://chibico.co.jp/blog/branding-design/vi-visual-identity-017/]] -類似する飲食店の事例調査 --[[藝大食堂>http://geidaishokudo.com]] --[[ロハスカフェARIAKE武蔵野大学>https://lohascafe-ariake.net]] --[[篠栗珈琲焙煎所>https://www.ssgrroastery.com]] --[[Cafe liberté（リベルテ)>https://arne.media/gourmet/421393/]] ~ ***技法・技術情報 -モーションロゴの制作方法 --[[AEP配布】After Effects は怖くない！ ロゴを動かしてみよう【初心者向け】>https://vook.vc/n/2663]] --[[ロゴアニメーションの作成の流れを伝えちゃいます - noteロゴ>https://note.com/tsuda2525/n/n54fcc6904d03]] ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **#06：2024.10.24 ***モーションロゴ -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:v:/g/personal/k22as607_st_kyusan-u_ac_jp/EYoqzI83ytVNiUQqtsp7ZFwBAFlkBGEhFiCSgGK_nsBWnQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=IYdr57/]] ~ ~ **#05：2024.10.17 ***VIマニュアル -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/k22as607_st_kyusan-u_ac_jp/EQUScxRGP9JEowbxczdqNoUBCU7xoxXBlM1-hhM4arbMHA?e=fwvUCg/]] ~ ~ **#04：2024.10.10 ***字コンテ -起：お皿の上にCとカトラリーがある -承：Eに変わる -転：お皿とカトラリーが重なる -結：広がると同時にロゴになる ~ ***ストーリーボード -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/k22as607_st_kyusan-u_ac_jp/EcH7CI_dVSpOiYTvlqVleOYBYJM7Gb2pVXS_oqrz_Fm9hA?e=lbEs8c]] ~ ~ **#03：2024.10.03 ***試作（3案） -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:b:/g/personal/k22as607_st_kyusan-u_ac_jp/EVbvshI4khVGnfkmLiuM9UgBdPwVjVsmUp-kY8IJA0pR_A?e=rnn2qs]] ***先行事例の調査：VIマニュアル -[[ロゴマニュアル開発の裏側>https://www.taki.co.jp/blog/civi_abe_20210324/]] -[[VI マニュアル／ロゴガイドライン>https://misemasu-iwaki.jp/iwaki_megumi/03iwakinomegumi_regulation_vol2.pdf]] -[[ビジュアルアイデンティティ(VI)マニュアル>https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_doc_0008_ver01.pdf]] ***概要欄の整理 -背景 --レトロ感のある落ち着いた雰囲気のお店だが、お店のロゴがないところからイメージを付けにくい。またイタリアンレストランとわかりにくい点がある。 -目的 --イタリアンレストランと分かりやすく、ロゴを見ただけでこのお店だとイメージを結びつけられるようにしたい。 -コンセプト --色やモチーフからイタリア感を出す。 --赤レンガを使用しているのでレンガを入れる。 -成果物（制作物） --シンボルマーク / ロゴタイプ --モーションロゴ --+α ~ ~ **#02：2024.09.26 ***研究対象 -イタリアンレストラン クオーレ ***アイデアスケッチ -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as607_st_kyusan-u_ac_jp/EiUYaPzaMUZKo-e6DZc4uUkB02iNaN8JYIndOE6ijW5saA?e=7qxWK1/]] ***現状調査：記録写真 -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as607_st_kyusan-u_ac_jp/EufTk7hzUBJDk_0Bmj3eCjoBQUaDlyGWdCV-19ncntxvTA?e=Tz4CR6]] ~ **#01：2024.09.19 ***VIに関する基本情報 -[[【完全解説】CI・VIの意味・違い・目的・活用方法とは！？>https://f-creation.co.jp/team_strategy/about_ci_vi/]] -[[VI(ビジュアル・アイデンティティ)とは何か？>https://chibico.co.jp/blog/branding-design/vi-visual-identity-017/]] ~ ***モーションロゴの制作方法 -[[AEP配布】After Effects は怖くない！ ロゴを動かしてみよう【初心者向け】>https://vook.vc/n/2663]] -[[ロゴアニメーションの作成の流れを伝えちゃいます - noteロゴ>https://note.com/tsuda2525/n/n54fcc6904d03]] ~ ***先行事例の調査：WEB・文献調査 -[[藝大食堂>http://geidaishokudo.com]] -[[ロハスカフェARIAKE武蔵野大学>https://lohascafe-ariake.net]] -[[篠栗珈琲焙煎所>https://www.ssgrroastery.com]] -[[Cafe liberté（リベルテ)>https://arne.media/gourmet/421393/]] ~ ***現状調査：学食の現在の様子 イタリアンレストラン クオーレ -店舗の概要 --落ち着いた雰囲気 --お洒落でレトロ感のある店内 --手書きのメニューで温かい印象 -良い点 --メニューが多く、接客や雰囲気から行きやすく過ごしやすい --お洒落で綺麗な店内 -改善点 --写真が古く、色味や魅力が伝わらない --入口が暗く、開いているのか分かりにくい --パスタの量が分かりにくい(普通サイズでも多かった印象) ~ ~