猫だら〜っけ喫茶
喫茶店×猫×癒しのループ モーショングラフィックス
概要
これは何？
「猫 × 喫茶店」をモチーフにした、癒しと遊び心のあるループモーショングラフィックス作品。
一杯のコーヒーの湯気や、テーブルでまどろむ猫など、日常の喫茶風景にひそむ小さな“ゆらぎ”を繰り返すアニメーションとして表現。若い世代を中心に人気の「ゆるい×かわいい」世界観を持ち、静かな映像体験を通して見る人にリラックスを届ける。
背景と目的
近年SNSやデジタルコンテンツ上で、「短く繰り返す癒しのループ動画」が注目されている中、私自身が惹かれてきた「喫茶店の空気感」と「猫の脱力した存在感」を掛け合わせ、心をほどくような作品世界を表現したいと考えた。
また、視覚的な癒し×控えめなアニメーションという形式を通して、“派手さではない魅力”や“止まらないのに静かな時間”をどう作るかという表現的な挑戦も目的にしている。
コンセプト
喫茶店×猫×癒しのループ
「いつでも、何度でも、ぼんやり見ていられる世界」
- だら〜っとした猫の存在と、喫茶店の静かな時間の融合
- 一見静止画に見えるような、最小限の動き
- 見る人が思わず「ふふっ」と笑ってしまうような遊び心
- “癒し”だけでなく、“観察して発見できる楽しさ”も内包
成果物の仕様
短編映像：数秒から数十秒ほどの短編アニメーションで、SNSやWebでの公開に適した形にする
- 形式：ループアニメーション／モーショングラフィックス作品
- サイズ：SNSやWeb掲載を想定したサイズ（例：800×800px など）
- 尺：ループを意識した3〜6秒前後
- 点数：複数種制作予定（例：コーヒー×猫／読書×猫／紅茶×猫 etc.）
- 制作ツール：Adobe Illustrator（イラスト作成）＋After Effects（アニメーション）
- ターゲット：癒しを求める10代後半〜30代の若年層／SNSコンテンツに馴染みのある層
- 応用性：今後スタンプやミニアニメ、店舗演出等への展開も想定可能
制作ツール
Adobe Illustrator（イラスト作成）＋After Effects（アニメーション）
プロジェクトの期間
- 工程表
- 5/20,5/27 1Q中間審査
- 7/1,7/8 2Q最終審査
まとめ
調査
現状調査
先行事例
技法・技術情報
- 映像(モーショングラフィックス：Aftereffect)
- お茶を注ぐ / ループ対応【モーショングラフィックス】
- ひたすらスパゲッティを食べるループアニメ
- 【30分耐久フリーBGM】2:23 AM / しゃろう【公式】
- ご機嫌なネコのアニメーション動画
プロジェクト管理
スケジュール
ToDo
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
進捗記録
2025.06.24
作品
ビジュアル
- ループ映像
- 「喫茶店」×「猫」 若い世代を中心に人気。ぼーっと見ていられるような癒しのあるループMg
- 素材1
- 素材2
- 素材3
工程表
ToDoリスト
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.06.17
試作
- ループ映像
- 「喫茶店」×「猫」 若い世代を中心に人気。ぼーっと見ていられるような癒しのあるループMg
- 素材
- Web表示案
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.06.10
コンセプト再考
- 5W1h
「When（いつ）」 日常の中で
「Where（どこで）」 どこででも
「Who（誰が）」 老若男女問わず
「What（何を）」 スマートフォンで
「Why（なぜ）」 喫茶店に通いたくなるツール
「How（どのように）」 来店時のデジタルスタンプ
- gif（モーション付き）スタンプ
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.06.03
Q1中間審査
- Web表示
- 可能(Figma,Wix,時間に余裕があればコーディング推奨)
- アニメーションの形式
- "gif"は色が250程しか表示できない→"png"や"webP"などに変換(mp4はWeb表示にはデータが重すぎる可能性あり)
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.05.27
Q1中間審査
- Web表示
- 可能(Figma,Wix,時間に余裕があればコーディング推奨)
- アニメーションの形式
- "gif"は色が250程しか表示できない→"png"や"webP"などに変換(mp4はWeb表示にはデータが重すぎる可能性あり)
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.05.20
Q1中間審査
- Web表示
- 可能(Figma,Wix,時間に余裕があればコーディング推奨)
- アニメーションの形式
- "gif"は色が250程しか表示できない→"png"や"webP"などに変換(mp4はWeb表示にはデータが重すぎる可能性あり)
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.05.13
キーワード
- Web表示
- 可能(Figma,Wix,時間に余裕があればコーディング推奨)
- アニメーションの形式
- "gif"は色が250程しか表示できない→"png"や"webP"などに変換(mp4はWeb表示にはデータが重すぎる可能性あり)
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.04.29
キーワード
- Web表示
- 可能(Figma,Wix,時間に余裕があればコーディング推奨)
- アニメーションの形式
- "gif"は色が250程しか表示できない→"png"や"webP"などに変換(mp4はWeb表示にはデータが重すぎる可能性あり)
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.04.22
キーワード
- アニメーションgif動画
- 制作したgif素材をWebなどにも使用
- シズル感
- 美味しそう→研究テーマ「魅せるモーショングラフィックス」に繋がる
- 工程表の再作成
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.04.15
企画の方向性
- 見ていて楽しい・魅力的なモーショングラフィックスの研究→卒研につなげる
- 今回のテーマ：「食」 喫茶店/メニュー/レトロポップ
調査：先行事例
調査：表現技法・技術
- 素材(Illustrator)
- 映像(モーショングラフィックス：Aftereffect)
- MAKE IT FUNKY NOW/ t k
- 棒ほうじ茶アニメーション【モーショングラフィックス】 / kao Films
- 回転寿司復興モーショングラフィックスCM/ SHIROTA.
試作
工程表
ToDoリスト
- 素材制作(Illustrator)
- 絵コンテ
- 動画制作(Aftereffect)
- プレゼン資料制作
2025.04.08
全体説明
テーマ案の入力シート
- 明治ミルクチョコレート(勝手に)企画デザイン
- モーショングラフィックス
- デザイン・シンキング
- イマーシブ体験の研究
