棈松智也/情報デザイン演習ⅢB

情報デザイン演習IIIB

課題2 経路案内

• 棈松智也
  
  

概要

背景

• 建物が多いため、どの建物なのか迷いやすい
  
  

目的

• 一度見れば迷うことのない道案内
  
  

コンセプト

• 視覚的に分かりやすくするため、矢印によって方向を表す
  
  

成果物の仕様

• YouTube
  • 1920*1080px
  • 30秒

• Instagram
  • 1080*1920px
  • 30秒

• OneDrive
  
  

制作期間

• 2023.11.16 - 2023.12.21
  
  

メンバー

• チーム名：ともやそうせーじ

• 棈松智也
• 大石颯
• 堤晴司
  
  

まとめ

• コンセプトに沿って、視覚的に分かりやすい案内ができた。
• 映像のブレが大きかったので、ジンバルをもっと効果的に使用したかった。
  
  

調査

現状調査

• OneDrive
  • 駅から門が見えないため、駅を出てどちらにいけばいいかわからない
  • 建物の数が多い
    
    

先行事例

• 【経路案内】大崎駅〜freee本社が入っているビルまでの道案内(行き方)動画
  • 字幕を動かして飽きさせない
  • 倍速と等速の使い方
    
    

技法・技術情報

• 【AviUtl】映像学区みたいな動くテロップの作り方｜How to MAKE "LOWER THIRDS" in AviUtl
• 【Ae】ロゴを地面に配置し、テキストをパスに沿って出現させる｜3Dカメラトラッカー
  
  
  
  

2023.12.21

動画アップロード

• YouTube
  • 1920*1080px
  • 30秒
• Instagram
  • 1080*1920px
  • 30秒

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

• OneDrive

2023.12.14

撮影

• OneDrive
• タイムリマップかけて書き出し→フッテージとして読み込み→3Dカメラトラック

動画の構成

• オープニング（タイトル）
  • 九芸卒展2024の概要を表示
• スタート
  • 駅の階段を降りたところからスタート
• 移動時
  • 適宜矢印で方向を指示
• 分岐
  • 分岐方向を矢印で表示
• エレベーター
  • 上ることを強調
• ゴール
  • 教室名を囲う＋矢印表示
    
    

2023.11.30

• アクションセーフ
• 「分かりやすく」ではなく「どのように分かりやすくするか」

プロトタイプ制作

• OneDrive
  
  

2023.11.16

試作：撮影テスト

• OneDrive

先行事例

• 【経路案内】大崎駅〜freee本社が入っているビルまでの道案内(行き方)動画
  
  
  
  
  
  
  
  

課題1 クオーレVI計画

• 棈松智也
  
  

概要

背景

• 現在、クオーレにはロゴが設定されていない
• お店の入り口が目立たず、初めて訪れた際に場所が分かりにくいという問題もある。
  
  

目的

• クオーレのあたたかみのあるイメージを持ってもらうこと
• 学生や地域の方に、お店や場所を知ってもらうこと
  
  

コンセプト

• あたたかみのあるイメージを作るため、丸を基調とする
• クオーレにある観葉植物やレンガ調の壁をモチーフとしたデザインを組み合わせる
• 筆記体を使用することで、手書きのようなあたたかみや優しさを表す
  
  

成果物の仕様

• モーションロゴ

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

• VI マニュアル
  
  

制作期間

• 2023.09.21 - 2023.11.16
  
  

まとめ

• クオーレのイメージを象徴するようなシンボルマークが制作できた
  
  

調査

現状調査

• 現代におけるVI計画の活用事例
  • デジタル庁
    • 省庁としてふさわしいクリーンな印象のあるロゴタイプ
  • 東京藝術大学
    • シンボルマークや学長の書という伝統を感じる要素を、シンプルな構成にすることで、現代でも古さを感じさせないデザイン
  • Google
    • ブランド全体で、シンプルな印象や色を統一
    • 以前よりデータサイズを小さくして、インターネット環境の悪い場所でも読み込みやすくするという機能性

• 学食の現在の様子について
  • クオーレ
    • レンガや木目調で落ち着いた雰囲気
    • メニューが手書き
    • ロゴやシンボルマークがない、もしくは見当たらない
    • 場所が分かりにくい
      
      

先行事例

• 類似する飲食店の現地調査
  • とまと畑
• WEB・文献による調査
  • 福岡の大学の学食
  • 九州大学学食
    • シンボルマークやロゴタイプが設定されている学食は少ない
    • お店の壁など中までレンガ調だったり、観葉植物が置いてあったりする点がクオーレならでは
      
      

技法・技術情報

• 線が出て出現するテキスト・ロゴアニメーションの作り方｜ダストマンTips
  
  
  
  

2023.11.09

モーションロゴ制作

• YouTube
  
  

2023.10.26

モーションロゴ試作

• YouTube

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

• とまと畑
  
  

2023.10.19

VIマニュアル作成

• OneDrive

写真との合成

• OneDrive
  
  

2023.10.12

モーションロゴのアイデア

• 絵コンテ（ストーリーボード）
  • OneDrive
• 字コンテ
  • 起：レンガが画面全体に広がる
  • 承：一部分をマスク
  • 転：左右の植物が下から生えてくる
  • 結：ロゴタイプの表示
    
    

Illustratorを用いた作図（試作）

• OneDrive
• 案1
  • レンガのみをモチーフにしたシンボルマーク
• 案2
  • レンガの組み合わさったイメージと、植物のイメージの組み合わせ
• 案3
  • レンガと植物が一体となったシンボルマーク
    
    

2023.10.05

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

• 背景
  • ロゴがない
  • 店名を書くとき手書きかつそのまま
  • 入り口が味気ない
  • 場所が分かりずらい
• 目的
  • 店内や入り口を彩ること
• コンセプト
  • お店の雰囲気が伝わるもの
    
    

アイデアスケッチ

• OneDrive
  • お店に置いてある観葉植物や、レンガをモチーフに

Illustratorによる試作

• OneDrive
  
  
• 概要欄の更新
• メインビジュアル（1100*400px）
  
  

2023.09.28

調査⑤（現地）｜学食の現在の様子について

• クオーレ追加調査
  
  

2023.09.21

調査①（文献・WEB）｜現代におけるVI計画の活用事例

• デジタル庁
  • 省庁としてふさわしいクリーンな印象のあるロゴタイプ
• 東京藝術大学
  • シンボルマークや学長の書という伝統を感じる要素を、シンプルな構成にすることで、現代でも古さを感じさせないデザイン
• Google
  • ブランド全体で、シンプルな印象や色を統一
  • 以前のロゴと比べ、データサイズを小さくすることで、
    インターネット環境の悪い場所でも読み込みやすく
    
    

調査②（文献・WEB）｜モーションロゴの制作方法

• 線が出て出現するテキスト・ロゴアニメーションの作り方｜ダストマンTips
  
  

調査③（文献・WEB）｜先行事例の調査（類似する飲食店の事例）

• 福岡の大学の学食
• 九州大学学食
  
  

調査⑤（現地）｜学食の現在の様子について

• アルテリア
  • 壁がガラス張りになっているため、開放感がある
  • 若干暗い
• オアシス
  • 入り口はレンガ調になっているが、内装は一般的
  • 中で、食券式とレストランの二つに分かれているが、分かりずらい
• クオーレ
  • レンガや木目調で落ち着いた雰囲気
  • メニューが手書き
  • ロゴやシンボルマークがない、もしくは見当たらない
  • 場所が分かりにくい
• クラブハウス
  • 改装され外観・内装共に綺麗
  • ステンドグラスや観葉植物が置いてあるなど、内装のインテリアも気遣われている
  • メニューは手作り感があるため、ややチグハグさを感じる