#author("2024-01-10T00:41:55+09:00;2023-12-21T08:57:28+09:00","default:member","member") #author("2024-01-11T17:54:04+09:00;2023-12-21T08:57:28+09:00","default:member","member") [[情報デザイン演習IIIB]] //ここから*************************************** *課題2 経路案内 #image(meinV.jpg) -''Ayaka Sakai'' ~ **概要 ***背景 -九州産業大学内をあまり知らない人には場所や入り口がわかりにくい -北門近くの入り口からだとエレベーターの場所が分かりにくい ~ ***目的 -展示会場まで迷わずにいくことができるようにする -ソーシャルデザイン学科の卒業制作展だとわかるようにする ~ ***コンセプト -ソーシャルデザイン学科のシンボルマークに使用している色を使い、シンプルに ~ ***成果物の仕様 -[[YouTube>https://youtu.be/vkK__ulEyJU]] --1920*1080px --30秒 #YouTube(vkK__ulEyJU) -[[Instagram>https://www.instagram.com/reel/C14nVdVt3IG/?utm_source=ig_web_copy_link]] --1080*1920px --30秒 ~ -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as016_st_kyusan-u_ac_jp/EhbarhfuHAlJtWF9FOvIgmQBHRxc7ZUotSHQHY8y4qa05Q?e=0MTQWm]] ~ ***制作期間 -2023.11.16 -2023.12. -2023.11.16 -2023.12.21 ~ ***メンバー -チーム名：SK -坂井彩華 -[[興梠 媛愛>興梠媛愛/情報デザイン演習ⅢB]] //メンバーのサイトリンク ~ ***まとめ -5つのステップと書くことでわかりやすくなったと思う -最後に文字が多く見づらいかもしれないと思った -縦動画は画面を小さくすることで、なるべく映す必要があるものが見切れないようにできたと思う ~ ~ **調査 ***現状調査 -[[googleドライブへのリンク>https://drive.google.com/drive/folders/1c4HJd89mp5dCfF3PXO4TkOsNHYKx8Kxj?usp=sharing]] --北門から近い入り口からだとエレベーターの場所が分かりずらい ~ ***先行事例 -[[道案内動画 東京メトロ改札～会社エントランスまで>https://www.youtube.com/watch?v=Aznm_LBGULs]] --案内板や目的の場所をを線で囲み、矢印で進む道を案内 --平面的 ~ ***技法・技術情報 -[[シェイプアニメーション入門2 円のアニメーションの作り方>https://www.youtube.com/watch?v=huhXRuD1Ys0]] --円を書いたような動きのやり方 ~ ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.12.14 ***動画のアップロード -[[YouTube>https://youtu.be/vkK__ulEyJU]] --1920*1080px --30秒 -[[Instagram>https://www.instagram.com/reel/C14nVdVt3IG/?utm_source=ig_web_copy_link]] --1080*1920px --30秒 ***編集 -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as016_st_kyusan-u_ac_jp/EsnuYHOlbr9Cj8ibXppH-UIBJLfvD4QtkZknk2T8t-VUUw?e=FwK2fy]] --なるべくシンプルに、分岐などで目立たせたい部分は丸や四角で囲み目立つようにした --タイムリマップで移動部分などの必要ない部分は早回しをすることで動画を短く見やすくした ***メインビジュアル・サムネイルの制作 -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as016_st_kyusan-u_ac_jp/EuPV2Xh2FEBPn6doxXMBtAcBuv55UlKJ2jIu9-2cHRLSUA?e=PPxmdA]] --見てすぐどんな動画なのかわかるようにした --5STEPと書くことで簡単にたどり着けることがわかるようにした ~ ~ **2023.12.07 ***撮影 -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as016_st_kyusan-u_ac_jp/EhqKEUj-qsREtxr_gl4DxjMBkCDvuQ9EOOpTGaSscuWL-g?e=mscLtl]] --曲がる回数を最小限に、曲がるときもゆっくり曲がるようにした ~ ***動画構成 -オープニング（タイトル） --後ろで経路の動画を早回ししながらタイトルを記載 -スタート --九産大前駅の階段下の駅名をうつす -移動時 --早回しでとる -分岐 --文字を出しながら、動画はゆっくりながす --動画を静止して文字を出す --矢印で方向を示す -エレベーター --扉が閉まった後すぐに５階 -ゴール --教室の場所・日付等を記載 -その他 --縦は上に卒制展の文字を常に表示 ~ ~ **2023.11.30 ***プロトタイプ制作 -[[OneDriveへのリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k22as016_st_kyusan-u_ac_jp/EkERIZVyeQxOpgXKEXGInWwBLFwLtu7BTVsPRiWtJ3UFkA?e=iYXJFG]] --ソーシャルのシンボルマークに使われている色に近い色を使用 ---文字を使われている色にすると見ずらかったため、背景に --文字をおくる速度が速く読みづらい --目印のモノにズームしたほうがいい？ ~ ~ **2023.11.16 ***試作：撮影テスト -[[動画素材>https://drive.google.com/drive/folders/1c4HJd89mp5dCfF3PXO4TkOsNHYKx8Kxj?usp=sharing]] --北門から近い入り口からだとエレベーターの場所が分かりずらい //撮影した時の様子等を書き込む ~ ***先行事例 -[[道案内動画 東京メトロ改札～会社エントランスまで>https://www.youtube.com/watch?v=Aznm_LBGULs]] --案内板や目的の場所をを線で囲み、矢印で進む道を案内 --平面的 -[[【神戸薬科大学】阪急岡本駅から大学までのアクセス動画（大学までの街並み）>https://www.youtube.com/watch?v=kkbJjFW8uhQ]] --案内の文字等が立体的（プロジェクションマッピングのよう） --目的地までの距離を表示 --目的地までの道のりにあるお店の名前も紹介 ~ ***背景・目的・コンセプト -背景 --入口が分かりずらい --案内板が小さく、見つけづらい --エレベーター側の入り口が外部の人にとっては分かりずらい --北門近くの入り口からだとエレベーターの場所が分かりにくい -目的 --なるべく曲がる回数を減らし、わかりやすくする --ソーシャルデザイン学科の卒業制作展だとわかるようにする --エレベーターだけでなく、階段の場所もわかるようにする -コンセプト --ソーシャルデザイン学科のシンボルマークに使用している色を使い、シンプルに --目印のモノに注目し、動画と実際の景色をリンクさせる ~ ~ ~ ~ //ここまで*************************************** *課題1 クオーレ VI計画 #image(Cuore_VI.jpg) -''Ayaka Sakai'' ~ **概要 ***背景 //&color(red){計画の背景}; -落ち着いた雰囲気で、老舗の喫茶店のよう -手書きのメニューで温かみを感じられる -メニューのサンプルが置かれているため、メニューの想像がつきやすい -入口のロゴタイプと店の雰囲気があっていない（ファミリーレストランのように感じる） ~ ***目的 //&color(red){計画の目的}; -一目でクオーレとわかる -店内にシンボルマーク・ロゴタイプがないため、店内に掲示しても違和感がないもの ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -手書きで温かみを感じさせる -昔ながらのレトロな喫茶店→シンプルな色使い（くすみカラー） -筆記体でメニューの出てくるスピードの疾走感 -丸みのある文字で優しさ ~ ***成果物の仕様 //&color(red){成果物の形式・サイズ・時間尺等}; -モーションロゴ #YouTube(F2vn3b2KhV4) -シンボルマーク・ロゴタイプ #image(Cuore_rogo1.png) #image(Cuore_rogo2.png) -[[VIマニュアル>https://drive.google.com/file/d/140So5toAvJJ1w9az9kObs_RpzBACiYK2/view?usp=sharing]] ~ ***制作期間 //&color(red){制作期間｜20XX.XX.XX - 20XX.XX.XX }; -2023.09.21 - 2023.11.16 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; -シンボルマークがCuoreの文字で構成されていることで一目でクオーレだとわかるものができたと思う -筆記体で手書き感とスピード感を同時に表現できた -見ただけでは食事ができる場所ということが分かりずらいように感じたため、フォークなどの食器を取り入れた方が良かったのではないかと感じた ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -調査：現代におけるVI計画の活用事例 --[[chics-成功事例から学ぶ！ビジュアルアイデンティティに必要な要素と作成の流れ->https://chics.top/news/1626/#1]] ---VI事例（三井住友銀行、スターバックス、コカ・コーラ、QB HOUSE、Apple） ---VIの意味、作成の要素・手順 ~ --[[VI(ビジュアル・アイデンティティ)とは何か？>https://chibico.co.jp/blog/branding-design/vi-visual-identity-017/]] ---VIの意味・目的（ブランドの認知度向上・差別化・一貫性・イメージ強化、一貫性による消費者の信頼向上） ---VI事例（Apple、コカ・コーラ、Airbnb、FedEx） ~ -調査：学食の現在の様子について [[クオーレ>https://drive.google.com/drive/folders/1SLQ18URzTZm0gnwvUReIMXsySyNAFk0K?usp=share_link]] --良い点 ---他の学食にはない食品サンプルが置かれていた ---全体的に赤煉瓦と手書きのメニューで喫茶店のような雰囲気 ---パスタの注文は後から受け取る形式だったが、完成までのスピードがスムーズだった ~ --改善点 ---入口が一つしかなく、狭いため外まで列が続いていた ---中にのみ食事のサンプルが置かれていたが、外の入り口横に戸棚があるため、そこにも置いたほうがメニューがよくわかる気がする ---店内にシンボルマーク・ロゴタイプがない ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -WEB・文献調査 --[[サイゼリア>https://www.saizeriya.co.jp]] --[[サンマルクカフェ>https://www.saint-marc-hd.com/saintmarccafe/]] -現地調査：類似する飲食店の事例 [[osteria d' Italia OLIVE（オステリア・ド・イタリア オリーブ）>https://www.olive-pasta.co.jp/]] --[[__店舗の写真（googleドライブ）__>https://drive.google.com/drive/folders/1Ln6FH-LjTjUnPtOYX7eBelidf7hniCcO?usp=sharing]] ~ ---外の入り口付近にメニューとその日のパスタランチのサンプルが置かれていた ---テーブル席側には大きな窓があり、太陽光によって暖かい雰囲気が感じられた ---メニューはカウンターの上に手書きで書いてあるもののと、テーブルに外と同じメニュー表が置かれていた ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[ロゴマークのアニメーションを作成する方法>https://creativecloud.adobe.com/ja/learn/after-effects/web/jp-for-designers-4]] -[[【AE】簡単なロゴアニメーションの作り方>https://note.com/hanasakuno/n/n6db3652f138a]] -[[【aftereffects】初心者でも30分で作れる手書き風アニメ>https://fabeee.co.jp/column/employee-blog/%E3%80%90aftereffects%E3%80%91%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%8230%E5%88%86%E3%81%A7%E4%BD%9C%E3%82%8C%E3%82%8B%E6%89%8B%E6%9B%B8%E3%81%8D%E9%A2%A8%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC/]] -[[【After Effects】ラインアニメーションの作り方4つ！>https://fufuvislab.com/after-effects-line-animation/]] ''動画'' -[[ロゴアニメーション制作事例の紹介｜UPGRADE>https://www.youtube.com/watch?v=TmO1AfIPstY]] -[[1分解説！やってみたいができる】ロゴアニメーションを作ろう | After Effects － アドビ公式>https://www.youtube.com/watch?v=p378lCfqJC0]] ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.10.26 ***モーションロゴ制作 -[[YouTubeへのリンク>https://youtu.be/F2vn3b2KhV4]] --シンボルマークが現れ、ハートを描きながら色が変化してロゴタイプが現れる ~ ~ **2023.10.19 ***VIマニュアル -[[googleドライブリンク>https://drive.google.com/file/d/140So5toAvJJ1w9az9kObs_RpzBACiYK2/view?usp=sharing]] --ロゴコンセプト --基本デザイン要素 --シンボルマーク・ロゴタイプ組み合わせ --推奨書体 --使用禁止例 ~ --それぞれのカテゴリーごとにページをまたがって配置しないよう気をつけた ~ ***店舗の写真とロゴの合成 -[[googleドライブリンク>https://drive.google.com/drive/folders/1oNeo3EvoVHnp4l-8MV-ybowEh3UrUO1R?usp=share_link]] --図書館の反対側の入口のドアに合成 --元のロゴタイプに白い背景があったため、そのまま活用 ~ ***モーションロゴ試作 -[[YouTubeへのリンク>https://youtu.be/DQv8Uhf1GXY]] --シンボルマークが表示され、色が変わり、ロゴタイプが出てくる動きを確認 ~ ***Illustratorを用いた作図（まとめ） -[[googleドライブリンク>https://drive.google.com/file/d/12N1ASfuNF2M-3924q5lbkjka9lt0N1Ht/view?usp=sharing]] --A案 ---レコードとお皿でレトロ、フォークとスプーンでレストランをイメージ ---レコードのパッケージを背景に置き、食事の時に置くマットを表現 --B案 ---Cuoreの文字でハートを表現 ---ロゴタイプは筆記体でスピード感を演出 --C案 ---お皿と文字でシンプルに、お皿の白の部分はクオーレのCをイメージ ---ハートで思いやり・温かみがあることを表現 ~ --全体を通してくすみカラーを使うことでレトロ感・落ち着いた雰囲気を演出 ~ ~ **2023.10.12 ***モーションロゴのアイデア -絵コンテ（ストーリーボード） --[[googleドライブリンク>https://drive.google.com/drive/folders/1TbYOK85lVEoWyDEWXMHhINsJR-gCGIaq?usp=share_link]] -字コンテ --起：始まり・状況（Cuoreの文字が一文字ずつ出てくる） --承：続き（ハートの形になる） --転：変化・クライマックス（ハートを書くように線が移動し文字の色が変わる） --結：結果・オチ（ロゴタイプが出てくる） ~ ***Illustratorを用いた作図（試作） -[[googleドライブリンク>https://drive.google.com/file/d/1Jb82bhZihd7b6YQjEs2H8mjJUwijS-fg/view?usp=share_link]] --案１ レコードとお皿でレトロ、フォークとスプーンでレストランをイメージ --案２ Cuoreの文字でハートを表現 --案３ お皿と文字でシンプルに、お皿の白の部分はクオーレのCをイメージ ~ ~ **2023.10.05 ***背景・目的・コンセプトの洗い出し -背景 --たくさんの学生が利用している --落ち着いた雰囲気で、老舗の喫茶店のよう --手書きのメニューで温かみを感じられる --メニューのサンプルが置かれているため、メニューの想像がつきやすい --メニューの出てくるスピードが早い ~ -目的 --入口のロゴタイプと店の雰囲気があっていない（ファミリーレストランのように感じる）ため、雰囲気に合ったロゴタイプが必要 --入口の場所が分かりずらいので、一目で食事ができる場所だとわかるもの --店内にシンボルマーク・ロゴタイプがないため、店内に掲示しても違和感がないもの。又は雰囲気を向上させるもの ~ -コンセプト --手書きで温かみを感じさせる --レトロ --おしゃれ（筆記体） --シンプルな色使い（くすみカラー） --疾走感 -- ~ ~ ***アイデアスケッチ（10案） -[[__googleドライブリンク__>https://drive.google.com/drive/folders/1Ni2LrU08Y8byCc5jGNvkaVQ_VpFNrn1X?usp=sharing]] --レトロなものは昭和の商品パッケージを参考に文字を太めで丸みを持たせた --イタリアンレストランであるためフォークやパスタを使用し、イメージがつきやすいものに --ロゴマークはハートになるようひらがな・カタカナ・英字でそれぞれ配置 ~ //***Illustratorを用いた作図（試作） ~ ~ **2023.09.28 ***調査④（現地）：先行事例の調査（類似する飲食店の事例） -[[osteria d' Italia OLIVE（オステリア・ド・イタリア オリーブ）>https://www.olive-pasta.co.jp/]] --[[__店舗の写真（googleドライブ）__>https://drive.google.com/drive/folders/1Ln6FH-LjTjUnPtOYX7eBelidf7hniCcO?usp=sharing]] --''特徴'' ---外の入り口付近にメニューとその日のパスタランチのサンプルが置かれていた ---近くの柱にロゴタイプがあった ---店内はレンガのパーテーションによってテーブル席とカウンター席が仕切られていた ---テーブル席側には大きな窓があり、太陽光によって暖かい雰囲気が感じられた ---メニューはカウンターの上に手書きで書いてあるもののとテーブルに外と同じメニュー表が置かれていた ---呼び出しボタンなどはないため、直接店員さんを呼ぶ方式 ~ -クオーレについて --[[レストラン「クオーレ」 図書館１階に本日オープン！(2009.04.01)>https://www.kyusan-u.ac.jp/news/49d2b15eb2e37/]] -- ~ ~ **2023.09.21 ***調査①：現代におけるVI計画の活用事例 -[[chics-成功事例から学ぶ！ビジュアルアイデンティティに必要な要素と作成の流れ->https://chics.top/news/1626/#1]] --VI事例（三井住友銀行、スターバックス、コカ・コーラ、QB HOUSE、Apple） --VIの意味、作成の要素・手順 -[[VI(ビジュアル・アイデンティティ)とは何か？>https://chibico.co.jp/blog/branding-design/vi-visual-identity-017/]] --VIの意味・目的（ブランドの認知度向上・差別化・一貫性・イメージ強化、一貫性による消費者の信頼向上） --VI事例（Apple、コカ・コーラ、Airbnb、FedEx） ~ *** 調査②：モーションロゴの制作方法 -[[ロゴマークのアニメーションを作成する方法>https://creativecloud.adobe.com/ja/learn/after-effects/web/jp-for-designers-4]] -[[【AE】簡単なロゴアニメーションの作り方>https://note.com/hanasakuno/n/n6db3652f138a]] -[[【aftereffects】初心者でも30分で作れる手書き風アニメ>https://fabeee.co.jp/column/employee-blog/%E3%80%90aftereffects%E3%80%91%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%8230%E5%88%86%E3%81%A7%E4%BD%9C%E3%82%8C%E3%82%8B%E6%89%8B%E6%9B%B8%E3%81%8D%E9%A2%A8%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC/]] -[[【After Effects】ラインアニメーションの作り方4つ！>https://fufuvislab.com/after-effects-line-animation/]] 動画 -[[ロゴアニメーション制作事例の紹介｜UPGRADE>https://www.youtube.com/watch?v=TmO1AfIPstY]] -[[1分解説！やってみたいができる】ロゴアニメーションを作ろう | After Effects － アドビ公式>https://www.youtube.com/watch?v=p378lCfqJC0]] ~ ***調査③：先行事例の調査（類似する飲食店の事例） -[[サイゼリア>https://www.saizeriya.co.jp]] -[[サンマルクカフェ>https://www.saint-marc-hd.com/saintmarccafe/]] -[[スターバックス>https://www.starbucks.co.jp]] ~ ***調査⑤：学食の現在の様子について（良い点・改善点の洗い出し） -[[__学食の写真（googleドライブ）__>https://drive.google.com/drive/folders/1Fy68DyEORaD_T_ySAXHQm49L2764LeQ9?usp=sharing]] ~ -クオーレ --良い点 ---他の学食にはない食品サンプルが置かれていた ---全体的に赤煉瓦と手書きのメニューで喫茶店のような雰囲気 ---パスタの注文は後から受け取る形式だったが、完成までのスピードがスムーズだった --改善点 ---入口が一つしかなく、狭いため外まで列が続いていた ---中にのみ食事のサンプルが置かれていたが、外の入り口横に戸棚があるため、そこにも置いたほうがメニューがよくわかる気がする ---お持ち帰りメニューが紙に書いて掲示してあったが、普通のメニューと同じように書いた方がいい。曲がって見えづらいメニューがあった ~ -オアシス --良い点 ---入口の外に券売機があるため、中で注文を待つ人がいない（店内で混雑しにくい） --改善点 ---外からだとレストランがどこにあるのか分かりずらい ---通常の店内とレストランとではテーブルや椅子の素材が違うため、雰囲気が変わる ~ -クラブハウス --良い点 ---全体的に緑が多く、自然で落ち着く ---テイクアウト用のカウンターが別で入口付近にある --改善点 ---外装の雰囲気とメニューの雰囲気が異なるため、困惑する ---店内に入らないとメニューがわからない ~ -アルテリア --良い点 ---食事の受け取り場所がメニューごとに分けられている ---席がたくさんあり、1人用の席もある --改善点 ---店内が広いため、どの席が空いているのか分かりずらい ---シンボルマークが見つけずらい ---入口付近の店内に券売機があるため、混雑しやすい ~ ~ ~