課題2 経路案内
- 興梠 媛愛
概要
背景
- 九州産業大学内をあまり知らない人には場所や入り口がわかりにくい
- 北門近くの入り口からだとエレベーターの場所が分かりにくい
目的
- ソーシャルデザイン学科の卒業制作展だとわかるようにする
- 展示会場まで迷わずにいくことができるようにする
コンセプト
- Webサイトの中で経路案内がされているように見せ、情報デザイン専攻らしさを表す
- ソーシャルデザイン学科の色を基調とし色をまとめる
- 堅苦しくなりすぎないように、親しみやすさを感じさせるゴシック体のフォントを使用する
地図を画面上に載せ、俯瞰的に現在地がわかるようにする
成果物の仕様
- YouTube
- 1920*1080px
- 30秒
- Instagram
- 1080*1920px
- 30秒
制作期間
- 2023.11.16 - 2023.12.21
メンバー
- チーム名：SK
- 坂井 彩華
- 興梠 媛愛
まとめ
- 経路案内の中にWebサイトを開いている様子や学科の色を使用することで、情報デザイン専攻の卒展展示会場であることを目立たせることができたと考える。
- YouTubeなどでサムネイルが並んだときに、必要な情報が目に入りやすいように製作した。
- 地図は3DCGで正確な地図を製作しようと試みたが、アドオンの方は著作権が曖昧なこと、PLATEAUの方は九産大周辺の情報が完全ではなく異なる部分があったため断念した。しかし、使用方法に関しては理解できたため、今後利用できる地形情報がある場所に関しては積極的に使用したいと考えている。
調査
現状調査
- OneDriveへのリンク
- 北門から入った時に17号館の入り口とエレベータの場所がわかりにくい
- 学内を知らない人にはどの建物に入ればいいか分かりにくい
先行事例
- マルラニハワイ表参道店 の経路案内
- 矢印で方向を表示
- 早送りを使用
- パーソナルケアクリニック経路案内
- 最後の方に3Dを使用した案内がある
- Kアリーナ横浜までのアクセス
- タイムリマップの使用
- 矢印で方向を表示
技法・技術情報
- マップアニメーション
- 線のアニメーション
- ピンのアニメーション
- 速度変化
- blender マップ生成1
- blenderでgoogle map +アドオンで街を生成
- blender マップ生成2
- PLATEAUのデータを使用
進捗記録
2023.12.14
動画のアップロード
- YouTube
- 1920*1080px
- 30秒
- Instagram
- 1080*1920px
- 30秒
編集
- OneDriveへのリンク
- Webサイト上で動画が流れるイメージを使用し、情報デザイン専攻独自の特徴を出した
- 文字の色を#FFA400color(#ffa400)で統一
- タイムリマップを使用し重要となるポイントで速度の変化を行った
メインビジュアル・サムネイルの制作
- OneDriveへのリンク
- 小さくても目に入りやすくなるようにした
- 四角から丸を切り抜いた形はソーシャルデザインのシンボルマークのようなイメージをもとに、写真で重要である北門が見えやすいように配置した
2023.12.07
撮影
- OneDriveへのリンク
- FX30とスタピライザーを使用し撮影
動画の構成
- オープニング（タイトル）
- Webページ風の構成
- 掲載情報をまとめて書く
- スクロールして動画が始まる（横長は＋でボタンを押して）
- スタート
- 駅を出たところ
- 移動時
- 早送り
- 特徴的な建物や物は全体像を映す
- 分岐
- 北門・オブジェクト・エレベーター前
- ゆっくり動画を回す
- 目印のものの写真(またはタイムリマップで静止)を入れる
- 矢印を表示して曲がる方向をわかりやすくする
- エレベーター
- エレベーターの外→中でボタンを押す→扉が開く
- ゴール
- 5Fのフロアマップを使用して場所案内→教室前
- 503・504教室の両方を紹介
- 教室内の様子を入れて終わりにする
2023.11.30
プロトタイプ制作
- OneDriveへのリンク
- 縦・横別のプロトタイプ動画
- 北門・オブジェクト・5階のフロアマップ・教室前・曲がるポイントなどの写真があると良い
- 地図はアドオンの方は著作権が曖昧なこと、PLATEAUの方は九産大周辺の情報が完全ではなく異なる部分があったため断念
- 横長の方の動画は縦部分の要素（オブジェクトの部分など）が見切れてしまうことがあるので撮影の時に注意する
- 教室内部の様子もあるとPCをよく使用する情報デザイン専攻の特徴をより表すことができるかもしれない
先行事例
2023.11.16
試作：撮影テスト
- 素材リンク
- 北門から入った時に17号館の入り口がわかりにくい
- 学内を知らない人にはどの建物に入ればいいか分かりにくい
先行事例
- マルラニハワイ表参道店 の経路案内
- 矢印で方向を表示
- 早送りを使用
- パーソナルケアクリニック経路案内
- 最後の方に3Dを使用した案内がある
- マップアニメーション
- 線のアニメーション
- ピンのアニメーション
- 速度変化
- blender マップ生成1
- blenderでgoogle map +アドオンで街を生成
- blender マップ生成2
- PLATEAUのデータを使用
- PLATEAUのデータを使用
概要 個人案
背景
- 九州産業大学内をあまり知らない人には場所や入り口がわかりにくい
- 17号館の場合エレベータのある入り口が北門からわかりにくい場所にある
目的
- ソーシャルデザイン学科の卒業制作展の会場であることがわかるようにする
- 展示会場まで迷わずにいくことができるようにする
- 歩きながら見てもらい地図がわりにしてもらう
コンセプト
- 地図を交えながら実際に経路案内しているようにする
- 歩いている目線だけでなく、俯瞰的な目線からの様子を交えながら案内する
- 堅苦しくなりすぎないように、親しみやすさを感じさせる丸みのあるフォントを使用する
課題1 クオーレ 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
技法・技術情報
- モーションロゴの制作方法
- 今注目の【モーションロゴ】 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：先行事例の調査（類似する飲食店の事例）
- 公式サイト
- 公式インスタグラム
- イタリアンレストラン
- 温かみのある暖色系の光のある店内
- 注文はLINEのQRコードで可能
- 落ち着いたおしゃれなイメージ
- バス停のすぐそばにある
- メニュー表や店内にある文字もロゴとの統一感がある
アイディアスケッチ
2023.09.21
調査1：現代におけるVI計画の活用事例
- VI(ビジュアル・アイデンティティ)の目的と開発事例とは
- VIの目的・開発手順
- 開発事例(Starbucks・TOYOTA・SPRITE・OLYMPIC)
- VIのブランディング戦略展開事例を解説！
- VIの意味・効果・作り方
- 事例(三井住友銀行・Facebook・Lyft)
- 優れたVIの特徴(企業らしさを感じる・企業に対する信頼感や安心感も想定させることができる)
- THE HIRAMATSU 軽井沢 御代田
- ソース・森のイメージから手書きの文字・木の切文字のデザインを考案
- 空間との親和性を考えたサインを制作
調査2：モーションロゴの制作方法
調査3：先行事例の調査（類似する飲食店の事例）
調査5：学食の現在の様子について（良い点・改善点の洗い出し）
- アルテリア
- 特徴
- 中央会館1階にある
- 入り口が２ヶ所ある
- 特徴
- 良い点
- 学生作品が展示してある
- テーブル席と仕切りがある長いカウンターの席がある
- 改善点
- 店内にあるの文字とロゴから感じるイメージとの差を感じる
- 店内にあるの文字とロゴから感じるイメージとの差を感じる
- オアシス
- 特徴
- 1号館の入り口にある
- 正門から一番近い学食
- 特徴
- 良い点
- 学食の外に発券機があるので入り口に列ができにくい
- 改善点
- 同じ店内でもレストランの場所と通常の場所で雰囲気が大きく変わる
- 同じ店内でもレストランの場所と通常の場所で雰囲気が大きく変わる
- クラブハウス
- 特徴
- 理工学部の場所にある
- リニューアルしたばかり
- 特徴
- 良い点
- 外にテイクアウト用の受付が別れているため、目的ごとの人の動きがしやすい
- 改善点
- メニュー表が店内の入り口にあり、入り口が詰まりやすいように感じる
- メニュー表が店内の入り口にあり、入り口が詰まりやすいように感じる
- クオーレ
- 特徴
- 図書館の横のドアから入る
- 店内で食べる人もいるがテイクアウトする人も多い
- 12時20分すぎくらいから人が増え、入り口の外まで列ができていた
- 特徴
- 良い点
- 通常の白の強い光ではなく、温かみのある暖色系の光を使用していることで落ち着いた印象を受ける
- 注文を受けてから食事が出てくるまでのスピードが速い
- 改善点
- 店内の印象と比べ、出入り口にあるロゴタイプがあっていないように感じる
- 列ができて外で待つ人もいるため、外にある戸棚にもメニューが大きく見えた方が良いと感じる
22AS014興梠媛愛経路案内メインビジュアル.jpg
mainvisual_2_1.jpg
yoko_logo.png
tate_logo.png
mainvisual_3.jpg
mainvisual_2.jpg
mainvisual_1.jpg
