加藤文明社｜メディア制作課

わたしたちは、アニメ・VR・動画・アプリケーションの制作を行っています。noteでは制作に役立つ情報を発信していきます。ご興味をお持ちいただけましたらお電話やメール、お問い合わせフォーム等でお気軽にご連絡ください！https://www.bunmeisha.co.jp/

加藤文明社｜メディア制作課

わたしたちは、アニメ・VR・動画・アプリケーションの制作を行っています。noteでは制作に役立つ情報を発信していきます。ご興味をお持ちいただけましたらお電話やメール、お問い合わせフォーム等でお気軽にご連絡ください！https://www.bunmeisha.co.jp/

  • Adobe After Effects記事まとめ

    当noteの中からAdobe After Effectsに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！

  • Adobe Illustrator記事まとめ

    当noteの中からAdobe Illustratorに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！

  • レポート記事まとめ

    当noteの中からReportに関する記事だけをまとめました！

  • Unity記事まとめ

    当noteの中からUnityに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！

  • HTML/CSS記事まとめ

    当noteの中からHTML/CSSに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！

【After Effects】お手軽VFX

こんにちは！動画編集＆デザイン担当のTです🐱 今回は、「お手軽VFX」の作成方法をご紹介をします。 ぜひ参考にしてみてください！ VFXとは？「Visual Effects」の略語で、「Effects」をFXに置き換えた表記です。 CGと何が違うの？と思いますが、CGは「コンピュータ・グラフィックス」の略で、その名の通り、コンピューター上で作られた映像・技術を指します。 VFXはCGとは違い、実写と組み合わせた映像合成技術が主になります。 今回はこちらの技術を使い、簡単なV

加藤文明社｜メディア制…

    • スクロールで背景が変わるアニメーション【初心者向け】

      ScrollMagicは、ウェブサイトをスクロールした際のアニメーションを追加するためのJavaScriptライブラリです。jQueryに依存しない純粋なJavaScriptでの実装も可能なので、モダンな開発環境にも適応できます。 今回はScrollMagicを使用して、スクロールごとに背景が変わるページの作り方を紹介します。こちらのデモページをご覧ください。 スクロールしていくとどんどん背景色が変わっていきます。 アレンジ次第で、背景色だけではなくこんな風に背景画像も変

      加藤文明社｜メディア制…

      • 【Illustrator】推し活グッズに使える！ぷっくり3Dネームボードの作り方

        こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 皆さんは推し、いますか？ そして推し活、してますか？ 今回のテーマは「推し活」。 近年注目を集めている「推し活」にぴったりなネームボードの作り方をご紹介します！ ネームボードとは、推しの名前が入ったファン用のボードのことで、ライブやイベントで定番のアイテムです。 最近は「ぷっくり感」を取り入れた可愛いデザインがトレンドなんですよ〜💖 日本や韓国のアイドル、さらには二次元キャラクターの推しでも制作されて

        加藤文明社｜メディア制…

        • 誰でもできるSVGロゴアニメーション【その③】【初心者向け】

          こんにちは！WEB制作担当のYです。 今回は、以下のようなSVGロゴアニメーションをwebページに掲載する、簡単な方法をご紹介します。 ロゴに限らずSVGなら工夫次第で使えるアニメーションです。動く要素を画像にしても使えるので、ぜひ挑戦してみてください！ 前々回の記事でSVGの作成方法について解説しているので、SVGについてはそちらをご覧ください。今回はHTML・CSSとJSの設定について記載しております。 HTML・CSSとJSの記述HTMLの設定 CSSの設定

          加藤文明社｜メディア制…

        マガジン

        • Adobe After Effects記事まとめ
          20本
        • Adobe Illustrator記事まとめ
          12本
        • レポート記事まとめ
          3本
        • Unity記事まとめ
          10本
        • HTML/CSS記事まとめ
          5本

        記事

          【Unity】NavMeshでアクションゲームを作る (#1)

          こんにちは！ エンジニアの宮Pです😎 前回はUnityの機能の1つ、キャラクターの動くルートを自動生成するNavMeshを使ってサンプルを作りました。 今回は、そのNavMesh機能を使ってアクションゲームを作ります。 色々と解説することがあるので、数回に渡っての連載になりますが、その分だけ各種機能や定義方法などを詳しく説明していこうと考えています。 はじめに前回のNavMeshのサンプルを作っていて、10年近く前にUnityを使ってゲームを作ったことを思い出しました。

          加藤文明社｜メディア制…

          【Unity】NavMeshでアクションゲームを作る (#1)

          加藤文明社｜メディア制作課

          【After Effects】テキストを立体的に回転させる

          こんにちは！動画編集＆デザイン担当のTです🐱 今回は、「テキストを立体的に回転させる」方法をご紹介をします。 ぜひ参考にしてみてください！ 平面を作成・テキストを入力新規平面を作成し、テキストを入力します。 今回は分かりやすく「3D TEXT」としました。 テキストにマスクを作成テキストレイヤーをクリックしたまま、楕円形ツールを選択してマスクを作成します。 command＋shiftを押しながら画面中央から正円を書きます。 テキストをマスクパスの上に表示するタイムライン

          加藤文明社｜メディア制…

          【After Effects】テキストを立体的に回転させる

          加藤文明社｜メディア制作課

          【インディーズゲーム】東京ゲームショウ直前イベント！『スペインゲーム祭り2024』に参加してみた！

          こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 今回は2024年9月25日（水）に東京の神田明神ホールにて開催されたゲームイベント、スペインゲーム祭り2024に行ってきたので、その様子についてご紹介していきます！🇪🇸🎮🇪🇸🎮🇪🇸🎮🇪🇸🎮 スペインゲーム祭りとは、スペインの約20社のゲーム会社と、国際的なパブリッシャー、投資家、メディアとのコミュニティを広げ、より強固なネットワークを築き、スペインのゲーム産業を世界に広めるための招待制の国際交流イベントで

          加藤文明社｜メディア制…

          【インディーズゲーム】東京ゲームショウ直前イベント！『スペインゲーム祭り2024』に参加してみた！

          加藤文明社｜メディア制作課

          誰でもできるSVGロゴアニメーション【その②】【初心者向け】

          こんにちは！WEB制作担当のYです。 前回の記事に続いて、今回も以下のようなSVGロゴアニメーションをwebページに掲載する、簡単な方法をご紹介します。 前回の応用で、一気に全ての文字を描画するのではなく、1文字ずつ描画するようになっています。 SVGのロゴの作成方法は前回の記事で紹介したので、詳細は割愛します。前回との違いは「境界線のレイヤー効果を入れない」「一文字ずつ入力してグループ化」することです。参考として以下の画像をご確認下さい。 HTMLとJSの記述HTML

          加藤文明社｜メディア制…

          誰でもできるSVGロゴアニメーション【その②】【初心者向け】

          加藤文明社｜メディア制作課

          皆さまへのご連絡

          こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 突然ですが、今日は皆さまに謝らなければならないことがございます。 我々はどんなに忙しくとも、メンバーみんなで協力しながら、毎週金曜日を目安に週1投稿を続けて参りました。 ですが... 今回は期末で全員ドタバタと多忙を極めており、勝手ながら先週分の投稿はお休みとさせていただきます...🙇🏻‍♂️🙇🏻‍♀️🙇🏻💦 本当にすみません！！！ もし楽しみにしてくれていた方がいましたら、大変申し訳ありません！😭

          加藤文明社｜メディア制…

          皆さまへのご連絡

          加藤文明社｜メディア制作課

          [Unity]NavMeshで追いかけられてみた

          こんにちは！ エンジニアの宮Pです😎 今回はUnityのNavMesh機能を使って、プレイヤーを自動的に追いかける敵キャラクターの動きを作ってみます。 はじめに『パックマン』のような俯瞰型の2Dゲームにも、『バイオハザード』のような一人称（または三人称）視点の3Dゲームにも、プレイヤーキャラクターを執拗に追いかける敵が存在します。 しかも彼らは「障害物を避けて回り込む」なんていう賢さも持っていますね。 NavMeshという機能を使うことで、こうした敵の移動プログラムを簡単に

          加藤文明社｜メディア制…

          [Unity]NavMeshで追いかけられてみた

          加藤文明社｜メディア制作課

          【After Effects】テキストレイヤーの「アニメーター」機能

          こんにちは！動画編集＆デザイン担当のTです🐱 今回は、テキストレイヤーの「アニメーター」機能をご紹介をします。 ぜひ参考にしてみてください！ 平面を作成・テキストを入力新規平面を作成し、テキストを入力します。 今回は分かりやすく「TEXT ANIMATOR」としました。 この時にテキストの段落の設定を「テキストの中央揃え」にしておきます。 アニメーターの追加入力したテキストに、アニメーターを追加します。 テキストレイヤーの中の、アニメーターと書かれたところの右側の▶︎をク

          加藤文明社｜メディア制…

          【After Effects】テキストレイヤーの「アニメーター」機能

          加藤文明社｜メディア制作課

          誰でもできるSVGロゴアニメーション【その①】【初心者向け】

          こんにちは！WEB制作担当のYです。 今回は、以下のようなSVGロゴアニメーションをwebページに掲載する、簡単な方法をご紹介します。 実際のwebページで表示するとこんな感じです。 anime.jsを入れて、SVGのpathタグにクラス名を追加するだけで実装できるので、流れさえわかればロゴじゃなくても色んな応用が利く方法です。 SVGのロゴをつくるSVGアニメーションを作成する方法のページは沢山ありますが、イラレからSVGを作る方法ばかりで、PhotoshopからSV

          加藤文明社｜メディア制…

          誰でもできるSVGロゴアニメーション【その①】【初心者向け】

          加藤文明社｜メディア制作課

          【Illustrator】アイソメトリック図法で3Dの街の建物を作ってみた！

          こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 自分だけの街、作りたくないですか？？ そして、それを、欲を言えば、立体的に、作りたくないですか？？ そう思うのは、私だけですか？？ 作れます、そう、Illustratorならね。 いつもいきなりですね。 今日はIllustratorでアイソメトリック図法を使った3Dの建物を描いてみたのですが、最初は「ちょっと難しそう…」なんて思っていた私も、やってみると案外ハマってしまい、気がついた頃には街が繁栄してい

          加藤文明社｜メディア制…

          【Illustrator】アイソメトリック図法で3Dの街の建物を作ってみた！

          加藤文明社｜メディア制作課

          Splideを使ってみよう【初心者向け】

          こんにちは！WEB制作担当のYです。 今回は、軽量で機能豊富なスライドショー・ライブラリ「Splide」について紹介します。 なぜslickじゃだめなのか スライドショーライブラリだとJQueryに基づいたslickが有名ですが、スライドで表示する画像が一列縦並びで一瞬表示されてしまったり、それを防ぐためのコードを追加したり…と少しやっかいな部分がありました。他に何か良いスライドショー用のライブラリが無いか探していたところ、軽量でJQueryに依存しないで済むSplide

          加藤文明社｜メディア制…

          Splideを使ってみよう【初心者向け】

          加藤文明社｜メディア制作課

          【After Effects】ループする背景

          こんにちは！動画編集＆デザイン担当のTです🐱 今回は、After Effectsで「ループする背景」を作る方法をご紹介をします。 ぜひ参考にしてみてください！ コンポジションの設定今回は背景が一周する時間に合わせて作成したいので、コンポジションの時間の設定を「5秒」としておきます。　 この長さはお好みで大丈夫です。長ければ長いほどゆっくり背景が動くようになります。 平面を作成・背景の読み込み新規平面を作成し、背景のイラストを読み込みます。 この時、背景の横幅がコンポジショ

          加藤文明社｜メディア制…

          【After Effects】ループする背景

          加藤文明社｜メディア制作課

          【SourceTree】ソースの部分的コミットとバックデート

          こんにちは！ エンジニアの宮Pです😎 今回はSourceTreeを使って、「ソースの一部だけコミットする手順」と「コミットを取り消す手順」を試してみます。 複数の異なる内容の修正を追加コーディングを続けていると、ついコミットを忘れて作業を続けてしまうことがあります。 表示関係の処理を実装中に、ふと思いついてファイル出力処理を修正した、なんてよくあることだと思います😅 ここで「表示関係の処理」に用いたファイルをコミットしようとすると、一緒に「ファイル出力処理の修正」内容も付い

          加藤文明社｜メディア制…

          【SourceTree】ソースの部分的コミットとバックデート

          加藤文明社｜メディア制作課