興梠媛愛/情報デザイン演習ⅢB のバックアップ(No.32)

情報デザイン演習IIIB

課題2 経路案内

興梠媛愛

概要

背景

九州産業大学内をあまり知らない人には場所や入り口がわかりにくい
北門近くの入り口からだとエレベーターの場所が分かりにくい

目的

ソーシャルデザイン学科の卒業制作展だとわかるようにする
展示会場まで迷わずにいくことができるようにする

コンセプト

Webサイトの中で経路案内がされているように見せ、情報デザイン専攻らしさを表す
ソーシャルデザイン学科のロゴの色を基調とし色をまとめる
堅苦しくなりすぎないように、親しみやすさを感じさせる丸みのあるフォントを使用する

成果物の仕様

[[YouTube>]]
- 1920*1080px
- 30秒

#YouTube

[[Instagram>]]
- 1080*1920px
- 30秒

[[OneDrive>]]

制作期間

2023.11.16 - 2023.12.21

メンバー

チーム名：SK

坂井彩華
興梠媛愛

まとめ

調査

現状調査

OneDriveへのリンク
- 北門から入った時に17号館の入り口とエレベータの場所がわかりにくい
- 学内を知らない人にはどの建物に入ればいいか分かりにくい

先行事例

マルラニハワイ表参道店の経路案内
- 矢印で方向を表示
- 早送りを使用
パーソナルケアクリニック経路案内
- 最後の方に3Dを使用した案内がある
Kアリーナ横浜までのアクセス
- タイムリマップの使用
- 矢印で方向を表示

技法・技術情報

マップアニメーション
- 線のアニメーション
- ピンのアニメーション
- 速度変化
blender マップ生成1
- blenderでgoogle map +アドオンで街を生成
blender マップ生成2
- PLATEAUのデータを使用

進捗記録

2023.12.14

動画のアップロード

[[YouTube>]]
- 1920*1080px
- 30秒

[[Instagram>]]
- 1080*1920px
- 30秒

編集

[[OneDriveへのリンク>]]
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯

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

[[OneDriveへのリンク>]]
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯

2023.12.07

撮影

OneDriveへのリンク
- FX30とスタピライザーを使用し撮影

動画の構成

オープニング（タイトル）
- Webページ風の構成
- 掲載情報をまとめて書く
- スクロールして動画が始まる（横長は＋でボタンを押して）
スタート
- 駅を出たところ
移動時
- 早送り
- 特徴的な建物や物は全体像を映す
分岐
- 北門・オブジェクト・エレベーター前
- ゆっくり動画を回す
- 目印のものの写真(またはタイムリマップで静止)を入れる
- 矢印を表示して曲がる方向をわかりやすくする
エレベーター
- エレベーターの外→中でボタンを押す→扉が開く
ゴール
- 5Fのフロアマップを使用して場所案内→教室前
- 503・504教室の両方を紹介
- 教室内の様子を入れて終わりにする

2023.11.30

プロトタイプ制作

OneDriveへのリンク
- 縦・横別のプロトタイプ動画
- 北門・オブジェクト・5階のフロアマップ・教室前・曲がるポイントなどの写真があると良い
- 地図はアドオンの方は著作権が曖昧なこと、PLATEAUの方は九産大周辺の情報が完全ではなく異なる部分があったため断念
- 横長の方の動画は縦部分の要素（オブジェクトの部分など）が見切れてしまうことがあるので撮影の時に注意する
- 教室内部の様子もあるとPCをよく使用する情報デザイン専攻の特徴をより表すことができるかもしれない

先行事例

Kアリーナ横浜までのアクセス

2023.11.16

試作：撮影テスト

素材リンク
- 北門から入った時に17号館の入り口がわかりにくい
- 学内を知らない人にはどの建物に入ればいいか分かりにくい

先行事例

マルラニハワイ表参道店の経路案内
- 矢印で方向を表示
- 早送りを使用
パーソナルケアクリニック経路案内
- 最後の方に3Dを使用した案内がある
マップアニメーション
- 線のアニメーション
- ピンのアニメーション
- 速度変化
blender マップ生成1
- blenderでgoogle map +アドオンで街を生成
blender マップ生成2
- PLATEAUのデータを使用

概要　個人案

背景

九州産業大学内をあまり知らない人には場所や入り口がわかりにくい
17号館の場合エレベータのある入り口が北門からわかりにくい場所にある

目的

ソーシャルデザイン学科の卒業制作展の会場であることがわかるようにする
展示会場まで迷わずにいくことができるようにする
歩きながら見てもらい地図がわりにしてもらう

コンセプト

地図を交えながら実際に経路案内しているようにする
歩いている目線だけでなく、俯瞰的な目線からの様子を交えながら案内する
堅苦しくなりすぎないように、親しみやすさを感じさせる丸みのあるフォントを使用する

課題1 クオーレ VI計画

興梠媛愛

概要

背景

店内の雰囲気と出入り口のロゴがあっていない
食事の提供は早いが、それ以上の利用客がおり行列ができている
温かみのある暖色系の光を使用していることで落ち着いた印象を受ける

目的

「落ち着いていて温かみのあるおしゃれなイタリアンレストラン」のイメージとロゴが合うようにする
注文するまでの待ち時間の間も退屈にならないような装飾のある学食にする
ゆっくりとした時間の流れの中過ごすことのできる空間にする

コンセプト

温かみのあるイタリアンレストランを表現する
丸さを意識したデザインで温かさを表現する
文字や図形のつながりでゆっくりと流れる時間を表現する

成果物の仕様

モーションロゴ

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

VIマニュアル

制作期間

2023.09.21 - 2023.11.16

まとめ

設定したコンセプトにあったクオーレのロゴを制作できたと考える
ロゴタイプを変形させてシンボルマークを形成することで、シンボルマークのみでも使用しやすいデザインになっていると考える
web上の小さなアイコンになっても、シンボルマークが複雑ではないため形状が認識しやすいと考える
落ち着きのある場所や店内のレンガを表現するために茶色系の色を使用したが、色で目を惹くシンボルマークにはなっていないように感じる

調査

現状調査

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

VI(ビジュアル・アイデンティティ)の目的と開発事例とは
- VIの目的・開発手順
- 開発事例(Starbucks・TOYOTA・SPRITE・OLYMPIC)

VIのブランディング戦略展開事例を解説！
- VIの意味・効果・作り方
- 事例(三井住友銀行・Facebook・Lyft)
- 優れたVIの特徴(企業らしさを感じる・企業に対する信頼感や安心感も想定させることができる)

THE HIRAMATSU 軽井沢御代田
- ソース・森のイメージから手書きの文字・木の切文字のデザインを考案
- 空間との親和性を考えたサインを制作

学食の現在の様子について

　クオーレ

特徴
- 図書館の横のドアから入る
- 店内で食べる人もいるがテイクアウトする人も多い
- 12時20分すぎくらいから人が増え、入り口の外まで列ができていた

良い点
- 通常の白の強い光ではなく、温かみのある暖色系の光を使用していることで落ち着いた印象を受ける
- 注文を受けてから食事が出てくるまでのスピードが速い

改善点
- 店内の印象と比べ、出入り口にあるロゴタイプがあっていないように感じる
- 列ができて外で待つ人もいるため、外にある戸棚にもメニューが大きく見えた方が良いと感じる

先行事例

WEB・文献調査

現地調査：類似する飲食店の事例
Italian Kitchen VANSAN
- 公式サイト
- 公式インスタグラム
- イタリアンレストラン
- 温かみのある暖色系の光のある店内
- 注文はLINEのQRコードで可能
- 落ち着いたおしゃれなイメージ
- バス停のすぐそばにある
- メニュー表や店内にある文字もロゴとの統一感がある

技法・技術情報

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

今注目の【モーションロゴ】 20選！
モーションロゴ｜アニメーションで企業コンセプトを伝える
- モーションロゴを取り入れる理由
- 実例(Osaka Metro・ロサンゼルス 2028 夏季オリンピック・Nintendo Switch)
ロゴを動かしてみよう

進捗記録

2023.11.09

モーションロゴ制作

YouTubeへのリンク
- ロゴタイプがシンボルマークへと変わることで、クオーレの文字がシンボルマークに含まれていることを強調するアニメーション
- 主に使用されている色(背景色)が変化すると、表示媒体を見ていない人に対してもアプローチ可能だと考えるため、最も見せたいロゴの完成形の前で使用している

2023.10.19

VIマニュアル

PDFファイルへのリンク
- (834 KB)
- ロゴの詳細や使用方法についてまとめたPDF書類

合成写真：使用イメージ

画像ファイルへのリンク
- クオーレの入り口の自動ドアにロゴを合成した
- 動くものにつけることでロゴが目に入る回数が増えると考える

モーションロゴ試作

YouTubeのリンク
- クオーレのロゴのモーションロゴ
- クオーレの文字がロゴに含まれていることを強調したモーションをつけた

2023.10.12

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

絵コンテ（ストーリーボード）
- リンクはこちら
字コンテ
- 起：始まり・状況（クオーレと文字が出てくる）
- 承：続き（文字が1つ1つ動きフォントのままハート状のように配置する）
- 転：変化・クライマックス（フォントがとけるようにしてシンボルマークの形になる）
- 結：結果・オチ（フォークが出てきてシンボルマークの完成+ロゴタイプが下に出てくる）

Illustratorを用いた作図（試作）

idea_2, idea_4, idea_5をIllustratorで作図

idea_2（A案）
- フォークにパスタが巻き付いているイメージ
- Cuoreの文字をパスタで表現
- 文字のつながりで流れる時間を表現
idea_4（B案）
- Cuoreの文字が一つずつ入っているシンボルマーク
- 赤・白・緑でイタリアンを表現
- 丸をメインに使い温かい印象に
idea_5（C案）
- クオーレの文字を変形させて作ったハート
- フォークを入れることで飲食店であることを表現
- 茶色を使いレンガのイメージと色が持つあたたかさや安心のイメージを合わせている
- 用途によって色を展開することも可能

2023.10.05

背景

店内の雰囲気と出入り口のロゴがあっていない
食事の提供は早いが、それ以上の利用客がおり行列ができている
温かみのある暖色系の光を使用していることで落ち着いた印象を受ける

目的

「落ち着いていて温かみのあるおしゃれなイタリアンレストラン」のイメージとロゴが合うようにする
注文するまでの待ち時間の間も退屈にならないような装飾のある学食にする
ゆっくりとした時間の流れの中過ごすことのできる空間にする

コンセプト

温かみのあるイタリアンレストランを表現する
丸さを意識したデザインで温かさを表現する
文字や図形のつながりでゆっくりと流れる時間を表現する

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

アイディアスケッチ

idea_1
- 文字がパスタの麺のように繋がるイメージ
idea_2
- フォークを英語の罫線ノート（四線ノート）のようにしCuoreの文字をその上に書く
idea_3
- 店内のレンガと木目（木に関しては窓からも見える）からレンガと植物（緑）を組み合わせたデザインにする
idea_4
- Cuoreの文字がすべて含まれたロゴ
- スプーンとフォークを入れて飲食店であることを示す
idea_5
- 丸さを意識したデザインで温かさを表現する
- 心=ハートのイメージでデザインする
idea_6
- 心=ハートのイメージでデザインする
- パスタとトマトソースとパセリ(白寄りの黄色・赤・緑）を使用したデザイン
idea_7
- 上にロゴマーク、下にロゴタイプver
- ロゴタイプ英語
idea_8
- 中心にロゴマーク、上下に円に沿うようにロゴタイプver
- ロゴタイプカタカナ
idea_9
- 食後にナイフとフォークを皿の中心より下側に縦に揃えて置く=イタリアンを取り入れる
- CとOに見えるように色を変える
idea_10
- イタリアの国旗の色(緑・白・赤）を使ってイタリアンらしさを出す
- 心=ハートのイメージでデザインする

Illustratorを用いた作図（試作）

PDF
- idea_2, idea_4, idea_5をIllustratorで作図

2023.09.28

調査2：モーションロゴの制作方法

モーションロゴ｜アニメーションで企業コンセプトを伝える
- モーションロゴを取り入れる理由
- 実例(Osaka Metro・ロサンゼルス 2028 夏季オリンピック・Nintendo Switch)
- ロゴを動かしてみよう

クオーレについて

印象
- 落ち着いた雰囲気
- イタリアン
- おしゃれ　
- 隠れ家
言葉の意味
- イタリア語で"心"を意味する

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

Italian Kitchen VANSAN

公式サイト
公式インスタグラム
イタリアンレストラン
温かみのある暖色系の光のある店内
注文はLINEのQRコードで可能
落ち着いたおしゃれなイメージ
バス停のすぐそばにある
メニュー表や店内にある文字もロゴとの統一感がある

アイディアスケッチ

アイディアスケッチ

2023.09.21

調査1：現代におけるVI計画の活用事例

VI(ビジュアル・アイデンティティ)の目的と開発事例とは
- VIの目的・開発手順
- 開発事例(Starbucks・TOYOTA・SPRITE・OLYMPIC)

VIのブランディング戦略展開事例を解説！
- VIの意味・効果・作り方
- 事例(三井住友銀行・Facebook・Lyft)
- 優れたVIの特徴(企業らしさを感じる・企業に対する信頼感や安心感も想定させることができる)

THE HIRAMATSU 軽井沢御代田
- ソース・森のイメージから手書きの文字・木の切文字のデザインを考案
- 空間との親和性を考えたサインを制作

調査2：モーションロゴの制作方法

今注目の【モーションロゴ】 20選！

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

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

学食の写真

アルテリア
- 特徴
  - 中央会館1階にある
  - 入り口が２ヶ所ある

良い点
- 学生作品が展示してある
- テーブル席と仕切りがある長いカウンターの席がある

改善点
- 店内にあるの文字とロゴから感じるイメージとの差を感じる

オアシス
- 特徴
  - 1号館の入り口にある
  - 正門から一番近い学食

良い点
- 学食の外に発券機があるので入り口に列ができにくい

改善点
- 同じ店内でもレストランの場所と通常の場所で雰囲気が大きく変わる

クラブハウス
- 特徴
  - 理工学部の場所にある
  - リニューアルしたばかり

良い点
- 外にテイクアウト用の受付が別れているため、目的ごとの人の動きがしやすい

改善点
- メニュー表が店内の入り口にあり、入り口が詰まりやすいように感じる

クオーレ
- 特徴
  - 図書館の横のドアから入る
  - 店内で食べる人もいるがテイクアウトする人も多い
  - 12時20分すぎくらいから人が増え、入り口の外まで列ができていた

良い点
- 通常の白の強い光ではなく、温かみのある暖色系の光を使用していることで落ち着いた印象を受ける
- 注文を受けてから食事が出てくるまでのスピードが速い

改善点
- 店内の印象と比べ、出入り口にあるロゴタイプがあっていないように感じる
- 列ができて外で待つ人もいるため、外にある戸棚にもメニューが大きく見えた方が良いと感じる