原朋恵/情報デザイン演習ⅢB

情報デザイン演習IIIB

課題2 経路案内

• Tomoe Hara 2023
  
  

概要

背景

• 九産大の建物の入り口がわかりづらい（入り組んでいる）
  
  

目的

• 予習的に利用してもらう
• 迷わずに会場まで来てもらう
  
  

コンセプト

• 一度見て覚えられるほどわかりやすい
• 陽気な雰囲気で楽しく表現する
  
  

成果物の仕様

• YouTube
  • 1920*1080px
  • 60秒

＊音があります

• Instagram
  • 1080*1920px
  • 60秒

• OneDrive
  
  

制作期間

• 2023.11.16 - 12.21
  
  

メンバー

• チーム名：りゅうはら

• 松本龍太郎
• 原朋恵
  
  

まとめ

• BGMとナレーションによって、陽気な雰囲気で楽しく表現することができたと思う。
• 動画時間は、あと10秒ほど短くできたのではと思う。
  
  
  
  

調査

現状調査

• 大学構内
  • 建物が多いため、その配置や入り口がすぐに見つけづらい
    
    

先行事例

技法・技術情報

2023.12.14

動画のアップロード

• YouTube
  • 1920*1080px
  • 30秒

• Instagram
  • 1080*1920px
  • 30秒

編集

メインビジュアル・サムネイルの制作

2023.12.07

撮影

• OneDriveへのリンク
  • 編集に使用する一連の素材を撮影した
  • 始まりと終わりの余裕を意識した

動画の構成

• オープニング（タイトル）
  • 駅を向いた状態で始まり、タイトルと文字を表示（数秒間駅を映す）
• スタート
  • 学内に入っていく
• 移動時
  • 揺れを少なくする　早送りを想定し、まっすぐ歩く
• 分岐
  • 15号館の文字を映す場面を入れる
• エレベーター
  • フェードイン&フェードアウト　入るまで&出た後の2分割のイメージ
• ゴール
  • デジタルラボ503教室の番号を写す（数秒間）

• その他
  • ナビゲーション役としてキャラクターを使用する（画面下にポップアップ）
    
    
    
    

2023.11.30

プロトタイプ制作

• OneDriveへのリンク
  • 縦と横の2つのバージョンがある
  • 一時停止を利用して文字に注目してもらえる部分を作った
    
    
    
    

2023.11.16

試作：撮影テスト

• 縦と横の2バージョン
  • 大学北門から会場の前までを撮影した

先行事例

• Milapse Guide ミラプス・ガイド
  • ブレ補正技術、映像合成技術を活用し、10分の道のりを1分程度の分かりやすい動画で案内するサービス。

• 【彩の国さいたま芸術劇場】JR与野本町駅～彩の国さいたま芸術劇場までの道案内
  • 「JR与野本町駅」より「彩の国さいたま芸術劇場」までの道案内
  • 途中で一時停止を利用している

• 玉川大学　大学3号館　演劇スタジオへの行き方
  • 縦長のYouTube Shorts動画
  • BGMは明るくポップな雰囲気
    
    
    
    
    
    
    
    

課題1 アルテリア VI計画

• Tomoe Hara 2023
  
  

概要

背景

• 九州産業大学の学食の一つ「アルテリア」は座席数も多く広いため、日々学生などで賑わっている
• 芸術学部学生などの作品を展示しており、九産大をアピールするのにも効果的に活用できそうだ
• しかし、券売機のシステムやメニュー等の店内のビジュアル（庶民的な温かみ）と現在のシンボル・ロゴ（スタイリッシュでおしゃれ）の間の差を縮めたい
  
  

目的

• アルテリアをもっと魅力的にしたい
• 芸術学部学生などの作品も楽しめる場所としてのイメージを持ってもらいたい
• 店内の雰囲気に統一感を持たせたい
  
  

コンセプト

• 親しみやすく、力強さも感じるようなデザイン
• 学生など（九産大）の創造性を象徴的に表現したい
• 「アルテリア」の名前に込められたアート ＋ 食堂という性格を保てるようにしたい
  
  

成果物の仕様

• モーションロゴ

• シンボルマーク・ロゴタイプ

• 使用例

• VIマニュアル
  
  

制作期間

• 2023.09.21 - 2023.11.16
  
  

まとめ

• 目標として掲げていた「芸術 (学部)とのつながりをアピールする」ことは、シンボルマークに「アート」の要素、意味をこめることによって果たされたと考えている。
• 「アルテリアをより魅力的にする」目標については、前述の目的を果たしたことがその達成に大いに関わったと考えている。また、「より魅力的にする」ために、インテリアやメニューへの展開が必要だったのではとも考える。
  
  
  
  

調査

現状調査

現代におけるVI計画の活用事例

• メディアウェア株式会社
  • 企業自身コーポレートブランディング　VI計画とWebサイトリニューアル

学食の現在の様子

• 良い点
  • シンボルマーク・ロゴタイプのコンセプトが明確にされており（店舗内の立看板で紹介されている）、お盆にあしらわれる等でそれが活きている
    
    
• 課題点
  • ロゴや内装、作品展示によって店内の雰囲気作りがなされていると感じるが、店内の印象とそれらの印象とがミスマッチなのではないか
    
    

先行事例

現地調査：類似する飲食店の事例

• イオンモール香椎浜
  • フードコートと店舗のカフェスペース
    
    

技法・技術情報

モーションロゴの制作方法

• パスのトリミングと相性の良い縁取り図形を作ろう！【AfterEffects/チュートリアル】- YouTube動画
  • 「Putti Monkey Wrench」さんによる動画
• 【After Effects】シェイプパスモーフィングの変形の調整方法と反転の回避方法【アニメーション】- YouTube動画
  • 「TORAERA DOUGA」さんによる動画

2023.10.26

モーションロゴ制作

• モーションロゴ　完成
  • ロゴタイプが滑らかに昇り、より躍動的になっている
    
    

2023.10.19

VIマニュアル

• アルテリアVIマニュアル
  • ロゴマークの組み合わせ、色指定などを記載

合成写真：使用イメージ

• 合成写真
  • 壁面に大きくのったシンボルマークとロゴタイプ

モーションロゴ 試作

• アルテリア｜ARTERIA　モーションロゴ　プロトタイプ- YouTube動画
  • シンボルマークが出来上がった後に、ロゴタイプが登場します。
  • 「ART」を意識したシンボルが出来上がる様子は、学生の力の集合をイメージ
    
    
    
    

2023.10.12

字コンテ

1：中心に向かって小さくなるように、シンボルマークのパーツが集まる
2：シンボルマークが完成したら、下からロゴタイプが一文字ずつ昇ってくる
3：ロゴタイプ＆シンボルマークが完成
4：下から上に向かって白い画面が昇り、全体が白い画面になってロゴマークは隠れ、見えなくなる

絵コンテ

• 絵コンテ
  
  

Illustrartorを用いた作図（試作）

• ロゴタイプとシンボルマーク
  • アルテリアの名前に含まれた意味の一つ、「動脈」を連想させる赤色を使用
  • アルテリアと芸術 (学部)とのつながりを意識し、シンボルマークは「ART」の単語を軸にしてデザイン
  • 親しみやすさ、やわらかさ、温かさ、力強さを表現
    
    

2023.10.05

背景・目的・コンセプトの設定

背景

• 九州産業大学の学食の一つ「アルテリア」は座席数も多く広いため、日々学生などで賑わっている
• 芸術学部学生などの作品を展示しており、九産大をアピールするのにも効果的に活用できそうだ
• しかし、券売機のシステムやメニュー等の店内のビジュアル（庶民的な温かみ）と現在のシンボル・ロゴ（スタイリッシュでおしゃれ）がミスマッチだと感じる

目的

• アルテリアをもっと魅力的にしたい
• 芸術学部学生などの作品も楽しめる場所としてのイメージを持ってもらいたい
• 店内の雰囲気に統一感を持たせたい

コンセプト

• 親しみやすく、躍動的でもあるようなデザイン
• 学生など（九産大）の創造性を象徴的に表現したい
  
  

アイデアスケッチ

• ロゴタイプとシンボルマーク
  • 学食が持つ、やわらかさや温かさ、親しみやすさを主にイメージ
  • 芸術の力強さを含んだ表現
    
    

Illustrartorを用いた作図（試作）

• ロゴタイプとシンボルマーク
  • アルテリアの名前に含まれた意味の一つ、「動脈」を連想させる赤色を使用
  • アルテリアと芸術 (学部)とのつながりを意識し、シンボルマークは「ART」の単語を軸にしてデザイン
  • 親しみやすさ、やわらかさ、温かさ、力強さを表現
    
    
    
    

2023.09.28

先行事例の調査（現地調査：類似する飲食店の事例）

• イオンモール香椎浜
  • フードコートと店舗のカフェスペース
    
    

アイデアスケッチ

• ロゴタイプとシンボルマーク
  • 学食が持つ、やわらかさや温かさ、親しみやすさを主にイメージ
  • 芸術の力強さ、情熱を含んだ表現
    
    

現在の様子（学食の良い点・課題点）

アルテリア｜ARTERIA

• 学食の中で最も座席数が多い（616席：大学サイト参照）
• 芸術学部との繋がりが深い
  • 学生作品が展示してある
  • 現在のシンボルマーク・ロゴタイプは学生チームによるもの
    
    
• 良い点
  • シンボルマーク・ロゴタイプのコンセプトが明確にされており（店舗内の立看板で紹介されている）、お盆にあしらわれる等でそれが活きている
  • 座席数が多いため、空いている時はゆっくり静かな食事ができる（他の学食と比べてそれがしやすい印象）
  
  
• 課題点
  • 券売機が一カ所にまとまっていない
    • 受取口付近にあるものが存在し、受け取りで混み合っている時は利用しづらい
  • 注文の仕方が分かりづらい時がある
    • 利用しづらさのある券売機の存在↑
    • 麺料理の大盛りを注文する際どの券を購入すべきかわからず、「この券がそうかな」と推測するしかなかった
  • メニューのデザインが内装の雰囲気と合っていない
    • 期間限定のものがよく登場するなど、メニューが多く更に入れ替わりもあるため、メニューデザインにコストがかかる？
    • ロゴや内装、作品展示によって店内の雰囲気作りがなされていると感じるが、店内の印象とそれらの印象とがミスマッチなのではないか
      
      
      
      

2023.09.21

事前準備・調査

現地調査

• 学食の写真
  
  

VI計画の活用事例

• メディアウェア株式会社
  • 企業自身コーポレートブランディング　VI計画とWebサイトリニューアル
    
    

モーションロゴの制作方法

• パスのトリミングと相性の良い縁取り図形を作ろう！【AfterEffects/チュートリアル】- YouTube動画
  • 「Putti Monkey Wrench」さんによる動画
• 【After Effects】シェイプパスモーフィングの変形の調整方法と反転の回避方法【アニメーション】- YouTube動画
  • 「TORAERA DOUGA」さんによる動画
    
    

先行事例（類似の飲食店）

• イオンモール香椎浜
  • フードコートと店舗のカフェスペース