越智楓/情報デザイン演習ⅢB

情報デザイン演習IIIB

課題2 経路案内

• Ochi Kaede
  
  

概要

背景

• 見えている建物が何号館か分かりづらい
• 看板の情報からどのくらいの距離感に目的地があるのか把握しにくい
  
  

目的

• 目的地までの景色や目印になるものが分かりやすい経路案内動画を作る
  
  

コンセプト

• 文字情報は必要最低限に
• ソーシャルデザイン学科の色（#FFA400）を使い、学科の雰囲気を伝える
• シャープなイメージ

成果物の仕様

• YouTube
  • 1920*1080px
  • 35秒
  • 音あり

• Instagram
  • 1080*1920px
  • 35秒
  • 音あり

• OneDrive
  
  

制作期間

• 2023.11.16 -2023.12.21
  
  

メンバー

• チーム名：韓国行きたい

• 平嶋明日花（リーダー）
• 越智楓

まとめ

• 動画の流れる速度を変えることで重要な点とそうでない点を区別することができた
• 線のモーションや色の違いを利用して視聴者の視線を誘導する方法を考えることができた
  • 光が点滅するようなモーション
  • 注目する部分を囲むような線のモーション
  
  
  
  

調査

現状調査

• Onedriveへのリンク
  • 11/16撮影
    
    

先行事例

• YouTubeへのリンク
  • R新大阪駅東出口から地下鉄御堂筋新大阪駅までの道案内動画
    
    

技法・技術情報

• Files
  • 芸術学部全学科カラー情報
• Webサイトへのリンク1
  • シェイプなどを動画の動きに追従させる方法
• Webサイトへのリンク2
  • AEでのぼかし、モザイクの方法
• Webサイトへのリンク3
  • 見やすいテロップの例
• YouTubeへのリンク1
  • ラインアニメーションの作り方
• YouTubeへのリンク2
  • シェイプに合わせてテキストを出すやり方

2023.12.21

講評

• 映像は最初と終わりをしっかり作った方がいい
  • どんな動画が始まるのか？
  • ただ「会場に着いた」だけではなく、最後に時間を作る（メッセージを置くなど）
• 白のフェードを入れることで時間が経過していることを表現

ブラッシュアップ

• Onedriveへのリンク
  • 日程部分（数字）の文字間を調節
  • 終わりがわかるよう「FIN」の文字追加

2023.12.14

動画のアップロード

• YouTube
  • 1920*1080px
  • 35秒
  • 音あり

• Instagram
  • 1080*1920px
  • 35秒
  • 音あり

編集

• OneDriveへのリンク
  • 横動画（YouTube）と縦動画（Instagram）

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

• OneDriveへのリンク
  • メインビジュアル　1100*400px
  • サムネイル　1920*1080px
    
    
    
    

2023.12.07

撮影

• OneDriveへのリンク
  • 12/14撮影

動画の構成

• オープニング（タイトル）
  • 九産大前駅の東側出口階段前（ぼかしを編集で入れる）
• スタート
  • 九産大前駅の東側出口階段前
• 移動時
  • ゆっくりカメラを動かす（編集後の酔い防止）
  • あまり左右に動かさない（編集後の酔い防止）
• 分岐
  • 曲がり角では一旦止まって曲がって進む
  • カメラの方向を変えるときは止まる
• エレベーター
  • 5階の表示を撮る
• ゴール
  • 503、504どちらも映して最後に全体を映す

編集について｜メモ

• Webサイトへのリンク2
  • AEでのぼかし、モザイクの方法
• Webサイトへのリンク3
  • 見やすいテロップの例
• YouTubeへのリンク1
  • ラインアニメーションの作り方
• YouTubeへのリンク2
  • シェイプに合わせてテキストを出すやり方

2023.11.30

プロトタイプ制作

• OneDriveへのリンク
  • 矢印固定.ver
  • 文字情報は左下
    
    

編集内容｜メモ

• 使用カラー
  • Files
  • 黒、白、#FFA400を使用
  • 明度、透明度を変更に視認しやすいように使う
• 矢印の動き（どちらが良いか？）
  • 動画の動きに合わせる
  • 固定位置
• 文字情報
• 目印となるものをどう動画内で示すか
• 柔らかい雰囲気の方が良いのでは？
  • シェイプの角を丸くする（丸角）
  • フォントはサンセリフ体、ゴシック体

• 動画に合わせて動かすものは先に（ワープスタビライズも）▶︎全体の編集

撮り方｜メモ

• エレベータの５階表示を映す
• あまりカメラを左右に振らない
• なるべく広く撮っていたほうがいいかも
• ポイント5つ
  • 北門
  • カラフルな棒
  • エレベーター
  • 5階表記
  • 階段前曲がり角

2023.11.16

試作：撮影テスト

• Onedriveへのリンク
  • 11/16撮影

先行事例

• YouTubeへのリンク1
  • JR新大阪駅東出口から地下鉄御堂筋新大阪駅までの道案内動画
• YouTubeへのリンク2
  • R新大阪駅東出口から地下鉄御堂筋新大阪駅までの道案内動画
• YouTubeへのリンク3
  • 東京メトロ改札から会社エントランスまでの道案内動画

技法・技術

• Webサイトへのリンク1
  • シェイプなどを動画の動きに追従させる方法
    https://ae-style.net/tutorials/t03.html

課題1 クオーレ VI計画

• Kaede Ochi
  
  

概要

背景

• 大学内の食堂の一つとしての認識が強く、内観の雰囲気が良くパスタなどのメニューも充実しているイタリアンレストランとしての印象が弱い
• 印象に残るシンボルマークがない
  
  

目的

• 印象に残るVIデザインを通して、クオーレのイタリアンレストランの印象を強める
  
  

コンセプト

• 食を通して心（クオーレ）を提供するレストラン
  
  

成果物の仕様

• モーションロゴ

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

• VIマニュアル

制作期間

• 2023.09.21 - 2023.11.16
  
  

まとめ

• コンセプト（言葉）をロゴマークという形にして表現することで、可視化して伝える方法を考えることができた
  
  
  
  

調査

現状調査

• 現代におけるVI計画の活用事例
  • 不二家、不二家洋菓子店（記事・2023）
    不二家、不二家洋菓子店がVIを刷新。「スマイルマーク」「店名ロゴ」「ファミリーマーク」の参考例3つあり。
  • プロント（記事・2021）
    プロントがVIを刷新、リブランディング。旧デザインと新デザインの参考例2つあり。
  • バーガーキング（記事・2021）
    バーガーキングがVIリニューアル。参考画像4つあり。
  • アイフル（記事・2022）
    アイフルグループがVIを刷新。旧デザインと新デザインの参考例例2つあり。

• 学食の現在の様子
  • 良い点
    赤煉瓦と赤みのある木材が基調とされた内観の雰囲気が良い。
  • 改善点
    入り口自動ドアにある「イタリアンレストラン・クオーレ」の文字が内観のおしゃれな雰囲気とマッチしていない。メニューが数箇所にあるため分かりにくい。
    
    

先行事例

• 文献・WEB
  • Pinterestのリンク
  • 主にイタリアンレストランのシンボルマークを調査
  • ナイフとフォークなどのカトラリーを使用しているものが多い
  • フォントは装飾が付いているものが多い
  • イタリア国旗の色を使用

• 現地
  • 福岡工業大学内学食（外設置の看板）
  • 杉養蜂園（外観）
  • 太宰府 茶和々（外観）
    
    

技法・技術情報

• モーションロゴを作成
• 【AEP配布】After Effects は怖くない！ ロゴを動かしてみよう
• 【1分解説！やってみたいができる】ロゴアニメーションを作ろう（動画）
• モーションロゴ風のキャラクターアニメーション（動画）

2023.11.16

ブラッシュアップ

• Cの先を直角に切った
• 赤をハート部分のみに使用することでよりハートが目につきやすくした
• 黒でより落ち着いたイメージへ

2023.10.26

モーションロゴのアイデア｜変更後、最終決定案

• 絵コンテ（ストーリーボード）
  • Onedriveリンク
• 字コンテ
  • 起：始まり・状況（手でハートを持っている）
  • 承：続き（ハートが料理、鍋の中に入る）
  • 転：変化・クライマックス（シンボルマークの形に変わる）
  • 結：結果・オチ（ロゴと集合）

モーションロゴ制作

• YouTubeへのリンク
  • シンボルマークのみでは食事処のイメージが付きにくいため、モーションには鍋を使用
  • ハートが鍋に入る様子からコンセプトである食を通して温かな心（クオーレ）を提供するレストランを表現

2023.10.19

VIマニュアル

• PDFファイルへのリンク
  • 基本デザイン要素
  • シンボルマークとロゴタイプの組み合わせ
  • 推奨書体
  • 使用禁止令
    
    

合成写真：使用イメージ

• 画像ファイルへのリンク
  • クオーレの自動ドア横の扉に合成
    
    

モーションロゴ 試作

• YouTubeへのリンク1
  • 視点が上から横へと変わるような手の形の変形
  • 意図するモーションでないため絵コンテからの練り直しが必要

2023.10.12

モーションロゴのアイデア｜変更前

• 絵コンテ（ストーリーボード）
  • Onedriveリンク
• 字コンテ
  • 起：始まり・状況（ハートを運んでくる）
  • 承：続き（視点が横からに変わる）
  • 転：変化・クライマックス（シンボルマークの形に変わる）
  • 結：結果・オチ（ロゴと集合）
• 参考動画
  • YouTubeへのリンク
    シェイプモーフィングアニメーション
  • YouTubeへのリンク2
    波の作り方

Illustratorを用いた作図（試作）

• Onedriveリンク
  • 案A
    クオーレのC、手、ハートを使用した案
  • 案B
    ハート型とC（クオーレ）I（イタリアン）R（レストラン）の頭文字を使用した案
  • 案C
    お皿、カトラリー、ハートを使用した案

メモ

• ハンドサイン例
  指の間が描かれていないシンプルなもの
• Web用と印刷用のデータを作らなければならない
• CMYKのA4

2023.10.05

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

• 背景
  • 大学内の食堂の一つとしての認識が強く、内観の雰囲気が良くパスタなどのメニューも充実しているイタリアンレストランとしての印象が弱い
  • 印象に残るシンボルマークがない
• 目的
  • 印象に残るVIデザインを通して、クオーレのイタリアンレストランの印象を強める
• コンセプト
  • 温かみのある場所
  • 食を通して温かな心（クオーレ）を提供するレストラン
    
    

アイデアスケッチ（10案）

• アイデアスケッチリンク
  
  

2023.09.28

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

調査地　

• 福岡工業大学内学食（外設置の看板）
• 杉養蜂園（外観）
• 太宰府 茶和々（外観）

特徴

• イメージカラーとなるものをシンボルマーク、ロゴタイプに使用
• ２色（多くて３色）構成
• 円形のシンボルマーク
• 外観と同じ雰囲気のシンボルマークとなっている

2023.09.21

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

• 不二家、不二家洋菓子店（記事・2023）
  不二家、不二家洋菓子店がVIを刷新。「スマイルマーク」「店名ロゴ」「ファミリーマーク」の参考例3つあり。

• プロント（記事・2021）
  プロントがVIを刷新、リブランディング。旧デザインと新デザインの参考例2つあり。

• バーガーキング（記事・2021）
  バーガーキングがVIリニューアル。参考画像4つあり。

• アイフル（記事・2022）
  アイフルグループがVIを刷新。旧デザインと新デザインの参考例例2つあり。

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

• モーションロゴを作成
• 【AEP配布】After Effects は怖くない！ ロゴを動かしてみよう
• 【1分解説！やってみたいができる】ロゴアニメーションを作ろう（動画）
• モーションロゴ風のキャラクターアニメーション（動画）
  
  

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

• スターバックス
• マツダ
• コカ・コーラ
• Apple
• オリンピック
• マクドナルド
• Pinterestのリンク
  • イタリアンレストランのシンボルマークを調査
  • ナイフとフォークなどのカトラリーを使用しているものが多い
  • イタリア国旗の色を使用
  • フォントは装飾が付いているものが多い
    
    

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

次週まで

調査⑤（現地）｜学食の現在の様子について（良い点・改善点の洗い出し）

アルテリア　📷

• 入り口は二つ
  （15号館向かいの自動ドア、中央会館エレベーター付近入り口）
• 中央会館エレベーター付近入り口にはシンボルマークとロゴタイプがある
• 入り口付近には営業時間、メニューなどが書かれている紙が貼ってある
• 外にもテーブル席あり
• 中央付近にカウンター席、向かいのカウンターに座っている人の顔が見えないような仕切りがあるため全体は見渡せない
• 15号館近くの入り口には「ARTERIA」と鉄？で作られた文字像がある
  • ロゴタイプとは違うフォントの形であり統一性がないかも
• 掲示物（メニュー）は特に統一したデザインなどはなし
  • 使用しているフォントが違う
• 入り口付近と食堂の中央の壁にシンボルマークあり
  • 意識して見ないと分からなかった
• 中央にカウンター席、テーブル席が並んでいた
  • 席数は一番多い

クラブハウス　📷

• すでにシンボルマークあり
• 内観はカフェのような感じ（木材のテーブル、椅子が目立った）
• メニューは入り口入ってすぐにあり、アルテリアと比べると少し装飾が付いているメニュー表になっていた
• 洋風な外観だったがメニュー表のメニュー名は和風な感じのフォントを使用
  • 外観と同様、洋を感じさせるフォントを使用した方が雰囲気に合うかも
• 赤煉瓦と緑（植物）が印象に残る外観
  • 印象に残る外観（おしゃれ）
• シンボルマークは入り口前の看板と自動ドアにある
  • 目に入りやすい位置にある

オアシス　📷

• 入り口横の扉を挟んで横にメニュー掲示板と券売機があり
• 現金、キャッシュレスで支払い可能
• 入り口入ってすぐ左にレストランメニューご注文の方の通路、席がある
• 広いメインの席にはプラスチック製の椅子とテーブル
• レストランメニュー注文用付近の席は茶色い椅子、木のテーブルがあり少し落ち着いた雰囲気
• 入り口の文字以外にシンボルとなるようなものはなかった
• 入り口横の壁中央に金色で「Cafeteria OASIS」と文字あり
  • 少し見にくい（反射で背景の赤煉瓦が写り込み同化してしまっている）
• メニュー表は特に特徴的なデザインはなし
  • 大きさの異なる写真が混じっていて見にくいかも

クオーレ　📷

• 特にシンボルマークなどはなし
• 入り口横にメニュー棚あり
• 黒板、もしくはブラックボードに文字でメニュー表示あり（手書き）
  • メニューが複数の場所にあり分かりにくい
• 入り口自動ドアに「イタリアンレストラン・クオーレ」の文字
  • 内観のおしゃれな雰囲気とマッチしていない感じ
• 壁は赤煉瓦と、赤みのある木材が基調
• ソファー席あり(ロイヤルホストのような）
• 奥の席の壁には大きな鏡がある
  • 内観の雰囲気は1番良いかも