「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
どんな人向けの記事？ レビューによって心理的なダメージを受けやすい方 非エンジニアだが、エンジニアチームがどんな機能を作っているか知りたい方 業務が溜まっていて、レビューに割く時間を捻出するのに苦労している方 コピペできるコードも公開します 初回レビューをAIに任せると、いろんなロールの人の役に立つ レビューは得意ですか？ 優秀なエンジニアしかいないチームであれば、PRは1トピックに絞って小さく明確なコミットによって作成され、適切な要約とともに提供されることでしょう。 しかし、実際にはいろいろな制約から、PRが想定よりずっと大きくなってしまったり、関連トピックと異なるコードが混じってしまうこともあります。 実際のところ、大きなPRを適切にレビューするのは難しいことです。また、自分が詳しくない領域のレビューを行わなければいけない機会もあります。 今回の記事は、レビューを作成してくれるAI C
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。 参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。 まずは、さっそく機能拡張のインストールから。 下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストア この機能
前回の記事では、AI動画生成ツールのAnimateDiffと「ControlNet」を組み合わせることで、特定のモーションをアニメで再現しました。 今回は、ControlNetの「Tile」という機能を組み合わせて、2枚の画像を補間するアニメーションの生成を試します。 必要な準備ComfyUI AnimateDiffの基本的な使い方については、こちらの記事などをご参照ください。 今回の作業でComfyUIに導入が必要なカスタムノードなどは以下のとおりです（説明は後述）。 カスタムノード (./custom_nodes/)： 以下の2つを使います。 ComfyUI-AnimateDiff-Evolved（ComfyUI用AnimateDiff） ComfyUI-Advanced-ControlNet（ControlNet拡張機能） モーションモジュール (./custom_nodes/Com
今回の経緯について、鈴木氏は「宮崎駿は82歳、僕は75歳、長らく悩んできたのが後継者問題でした」と切り出し、スタジオジブリの後継者として、創業者である宮崎駿氏の長男である宮崎吾朗氏が何度か候補に挙がってきたが、吾朗氏は「一人でジブリを背負うことは難しい。会社の未来についてはほかに任せた方が良い」という考えで、これまでずっと固辞してきた経緯があったことを明かした。また、宮崎駿氏も、息子の吾朗氏が受け継ぐことに反対の立場だったという。 そうした事情の中で昨年、長年にわたり付き合いのある日本テレビとの話し合いを開始。日本テレビは1985年に『風の谷のナウシカ』（劇場公開は84年）をテレビ初放映して以来、映画番組「金曜ロードショー」を通じてスタジオジブリ作品を放送し続け、毎回高視聴率を獲得し、企業価値向上など「恩恵を受けてきた」と杉山氏。この日行われた取締役会では「満場一致」で今回の子会社化が了承
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。 Chrome 117 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @starting-styleルール overlayプロパティ transition-behaviorプロパティ CSS Gridのsubgrid値 text-wrap: pretty; contain
CSS Loaders: A collection of more than 500 loading animations CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」 3Dやフラットなものなど、実にたくさんのローディングアニメーションがあってみるだけでも楽しい。
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。 今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタン コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal with CSS
CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。 ダイナミックアイランド（Dynamic Island）とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。 参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コ
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
原画と原画の間にあたる画像を複数枚入れることで、自然な連続性のある動きを作る。アニメの基本となる「中割」作業を画像生成AIが実現する可能性が出てきました。鍵になっているのは「AnimateDiff」という技術。8月に入って、様々なユーザーのアップデートによって機能拡張が進められています。それは完全な画像生成AIで作られるアニメの可能性を垣間見せるほどのものです。 16コマ/2秒の短い動画が生成できる AnimateDiffは7月10日に発表された、上海AIラボ、香港中文大学、スタンフォード大学の共同研究による技術。画像生成AI「Stable Diffusion」の仕組みとデータセットを利用しつつ、数百万本の動画を学習させた「モーションモジュール」と呼ばれるデータセットを別途に参照させることで、連続するキャラクターの動きを生成可能にするというのが基本原理です。生成できる時間は、16コマ/2秒
2023年秋開始の新作アニメ一覧
放送・配信中のアニメの終わりが近づき、新作の開始時期が近づいてきました。2023年秋に始まるアニメの数はショートアニメや特撮も含めると75本ほどあり、ここ10年、20年という単位で考えても過去最多レベルの本数となっています。リアルタイムで見るときはもちろんながら、録画で見るにしても配信で見るにしても、網羅するのは大変。自分が気になる作品をうまく探し当ててください。 以下、作品リストは放送・配信時期が早いものから順に並べています。 ▼目次表示 ・範馬刃牙＜外伝ピクル＋野人戦争編＞＜地上最強の親子喧嘩編＞ ・五等分の花嫁∽ ・仮面ライダーガッチャード ・GAMERA -Rebirth- ・しーくれっとみっしょん～潜入捜査官は絶対に負けない！～ ・ケンガンアシュラ Season 2 ・万聖街 日本語吹替版 総集編＆続編 ・お嬢と番犬くん ・葬送のフリーレン ・め組の大吾 救国のオレンジ ・MFゴ
宮崎駿の引退説をジブリ幹部が否定 すでに次回作を構想中だと明かす
スタジオジブリ最新作『君たちはどう生きるか』は、宮崎駿の最後の作品になると長い間噂されてきたが、それは事実とは異なるようだ。 『君たちはどう生きるか』（英題：『The Boy and the Heron』）の上映が行われたトロント国際映画祭にて、スタジオジブリ広報・学芸担当スーパーバイザーの西岡純一はCBC Newsに対し、82歳の宮崎は現在もたくさんのアイディアを持っており、毎日出社していると明かした。 これが引退作になるのか、と問われた西岡は「世間ではそういう噂もありますけれども、本人は全然そう思っていなくて、今も次のアニメーションの構想をもう考えているんですよ」と返答。「だから、毎日、今も会社に来て、“次のアニメーションをどうしようか”ということを言っていますから、今回は引退宣言はしません」と語った。 "次のアニメーションの構想をもう考えているんですよ。毎日、今も会社に来て“次のアニ
京アニ人気3作品のワンシーン法廷上映 「小説パクられた」主張、実際に比べてみたら 【京アニ公判速報】｜社会｜地域のニュース｜京都新聞
京アニ人気3作品のワンシーン法廷上映 「小説パクられた」主張、実際に比べてみたら 【京アニ公判速報】 2023年9月6日 17:17
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。 Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフィルがリリースされ、これでSafariでも動作します。 Scroll-timeline Polyfill -GitHub まずは、Scroll-driven Animationsの簡単な紹介を。 スクロールをトリガーにしたアニメーションは、最近のWebサイトでよく見かけます。Appleの新製品ページもスクロールをトリガーに要素をアニメーションで表示しますね。 実装にはJavaScriptを使用したり、かな
CSS Loaders: A collection of more than 600 loading animations
The Biggest Collection of Loading Animations Over 600+ CSS-only loaders made using a single element <div class="loader"></div> Don't know which loader to use? Here is one for you 👇 Click the loader to copy the CSS Get another CSS Loader
「いつもやってるこの作業、実はちょっと面倒」 「アイデアを形にできるツールや素材が欲しい」 「クリエイティブの生産性を上げたい」 そんな人に朗報です。 このまとめでは、ここ最近公開された便利なツールや素材の中から、「本当に使えるもの」だけ55個を厳選。 カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。
CSSでスムーズなアニメーションを実現する4つの新しい機能
今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア
HTML+CSSでPhotoshop風選択範囲のアニメーションを再現しようとしたら凄く面倒くさかった - Qiita
ことの発端 先日、息子からの夏休みの宿題として個人でアイロンビーズエディタ(IBE)というのを開発しました。 今回はその時に実装しようとした選択範囲のUI/UX(↓こんなの)を再現する話です。 実物を触って見てもらった方が良いと思いますので、こちらに用意しています。 開発秘話的なものはnoteに記載しているので省略しますが、一言で言えばペイントツールにありがちな「選択範囲」と「コピペ」を実装しようと思ったからです。 エクセルやAdobeのphotoshop的なUI/UXにしたい。 言うまでもありませんが、後発のツールのUI/UXは他のツールからの影響を多大に受けます。 簡単なもので言うと、多くのアプリケーションがCtrl(Command)+ZでUndoを実装していたり、Ctrl+Cでコピーできるのは当たり前の世界になっています。 そのスタンダードなUI/UXの1つに「選択範囲」を示すものが
ウェブサービスの開発において、「待ち時間をどうするか」は大きな問題です。もちろん、待ち時間を減らせるのであれば減らしたいものですが、仕組みの都合上どうしても待ち時間が発生してしまう場合があります。そうした場合にユーザー体験を向上させるデザインのパターンについて、デザインを専門に行う企業の「Pencil & Paper」がブログでまとめています。 UX Design Patterns for Loading https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/ ブログによると、ロードのパターンは「パッシブロード」と「アクティブロード」の2パターンに分けられるとのこと。 ◆パッシブロード パッシブロードは、システムが最初にデータ量の多いページをロードするとき、ファイルを開くとき、または検索結果を表示する
■「アニメーションの定義とは？」先日、ある方と話していて出た話題。 「アニメーションの定義とは？」 アニメーションは何を持ってアニメーションとするのかという話です。 「アニメーション」と「アニメ」の違いとかでなく、もっと広い“アニメーション”全体の話になります。 僕は日頃、アニメーションについていろいろ書いているのですが、そもそも“アニメーション”が何であるか自身のなかで定義づけしてなければ、そうした言葉も空虚と批判されても仕方ありません。 そこで「アニメーションは何を持ってアニメーションとするのか」を考えてみました。 しかし、これが意外に難しい。 1970年代、80年代であれば、定義はより簡単でした。 おそらくは、こんな感じです。 「アニメーションは人の手によって作られた対象物をひとコマずつ撮影し、フィルム上映した時に動きのある映像となる手法」 こうした定義では、一枚ずつ手で描いたセル画
TVアニメ『ウマ娘 プリティーダービー Season 3』2023年10月4日(水)放送スタート！ 「諦めない、この手が届くまで――」 [放送情報] ・TOKYO MX ： 10月4日（水）より 毎週水曜 24:00 ～ ・BS11 ： 10月4日（水）より 毎週水曜 24:00 ～ ・関西テレビ ： 10月7日（土）より 毎週土曜 25:45 ～ ・サガテレビ ： 10月9日（月）より 毎週月曜 24:55 ～ ※放送開始日、放送日時は予告なく変更になる場合がございます。予めご了承下さい。 [STAFF] 原作：Cygames 監督：及川 啓 シリーズ構成：永井 真吾 シナリオディレクター・シリーズ構成：小針 哲也 キャラクターデザイン・総作画監督：椛島 洋介 キャラクターデザイン：辻 智子 総作画監督：仁井 学・福田 佳太・藤本 さとる キャラクターデザイン監修：清永 みなみ メ
Game-Ready Animation Library by Ready Player Me - 3Dアバター作成サービス「Ready Player Me」が200を超えるゲーム用モーションデータをGithub上で無償公開！
AI 技術 技術-Technology NormalmapLighting - とりにく氏による線画から法線マップを生成... 2024-04-04 とりにく氏（ @tori29umai ）による線画から陰影を出力するAIアプリ「NormalmapLighting」がFanboxにて早期アクセス公開されています。 続きを読む Unreal Engine アセット アセット-Asset Procedural City Generator - Procedural W... 2024-04-03 Procedural World LabによるUnreal Engine 5向け都市生成プラグイン『Procedural City Generator』のご紹介です。 続きを読む モデリング 技術 技術-Technology MonoHair:High-Fidelity Hair Modeling f
長編ストップモーションアニメーション『オオカミの家』は、存在自体が事件であり、アニメーションや映画の表現の常識を打ち壊す、きわめて個性的な問題作だ。複数の部屋全体を使って、絵が描きこまれ立体物が動き回るという、大規模なアニメーションが展開していく映像を見れば、誰もが驚嘆することだろう。その作風には、ヤン・シュヴァンクマイエルやクエイ兄弟というアートアニメの巨匠の作風を部分的に引き継ぎながら、部屋を真っ黒に塗りたくったりドローイングによって短編を制作したデヴィッド・リンチ監督の初期作品を彷彿とさせるところもある。 同時に、謎に包まれた演出や内容は、いったい何を示しているのか、多くの観客に疑問をもたらすことにもなるはずだ。このとてつもない作品はいったい何なのか、その意図について、クリストバル・レオン＆ホアキン・コシーニャ監督に疑問をぶつけてみた。 あらすじ：美しい山々に囲まれたチリ南部のドイツ
ウェブサイトをスクロールした時に少し余韻が残りながらスクロールが継続する挙動は慣性スクロールと呼ばれ、演出と組み合わせることで世界観や没入感を表現できる手法です。 前回の記事では慣性スクロールの特徴や注意点の紹介、JavaScriptライブラリ「Lenis」を使った簡単な実装方法を紹介しました。 後編である今回の記事ではLenisの応用的な使い方を紹介します。この記事のデモは以下のリンクから参照できるので、ぜひ読みながらデモを触ってみてください。 サンプルを別ウインドウで開く ソースコードを確認する アンカーリンク アンカーリンクはページ内の特定の位置まで移動する機能です。Lenisを使うとアンカーリンクを押した際にスルスルっと目的の位置までスクロールする演出を簡単に実装できます。 // 設定を行ったLenisのインスタンスを作成 const lenis = setupLenis(); /
Fujiyama @fujisan_hon 【バズったので宣伝】 二次創作PVやMVなどを制作させて頂いております 作品でこの手法を使っているので是非見に行ってみてください✨️ twitter.com/fujisan_hon/st… 2023-08-13 23:47:07
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？ このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
アイデアの宝庫、すごい最新Webデザイン40個まとめ
「ウェブサイトのアイデアが浮かばない」 「刺激的なインスピレーションが欲しい」 「打ち合わせでイメージをすり合わせたい」 そんなときに目を通したい、世界で話題の最新Webデザインをまとめてご紹介します。 2023年のデザイントレンドを意識した作品から、時代に関係なく愛されるシンプルなスタイルまで、幅広いセレクションを取り揃えています。 レイアウトや配色などの参考にできるのはもちろん、魅力的な動きのアニメーション探しにもおすすめです。
東映アニメーション第1Q 売上好調も実写「星矢」で評価損計上 | アニメーションビジネス・ジャーナル
2023年7月28日、東映アニメーションは2024年3月期第1四半期の決算を発表した。連結売上高は198億8400万円(10.1％増)と第1四半期としては再び過去最高を記録した。 好調だったのは版権事業と商品販売事業で、いずれも前期に大ヒットした『ONE PIECE FILM RED』、『THE FIRST SLAM DUNK』、『ドラゴンボール超 スーパーヒーロー』などの劇場映画関連の影響が大きかった。版権事業は売上高97億9300万円(2.4％増)、商品販売は24億100万円(348.7％増)だった。 映像製作・販売事業は、5.2％減の72億8300万円。大型映画の公開がなかったこと、テレビアニメの作品数が減少したことで、劇場アニメとテレビアニメの売上が落ち込んだ。海外向けの映像販売でも映画『ドラゴンボール超スーパーヒーロー』の海外上映権販売の反動減があったが、映画『THE FIRST
「DAICON IV」40周年記念期間限定公開！『Cassette Girl』※日本アニメ（ーター）見本市 より
『DAICON Ⅳ』の40周年を記念して、若き庵野秀明もアマチュアとして参加した伝説的作品、 「DAICON IVオープニングアニメ」へのリスペクト溢れるオリジナル映像 『Cassette Girl』を1週間の期間限定で公開いたします。 ”スピリット”を受け継ぐ若きクリエイターたちが作り出した新境地をどうぞご覧ください。 『Cassette Girl』 ＜声の出演＞ 林原めぐみ 山寺宏一 ＜スタッフ＞ 原案・監督 小林浩康 アートディレクション・キャラクターデザイン コヤマシゲト メカニカルデザイン 高倉武史 脚本 榎戸洋司 画コンテ 摩砂雪 アニメーション スタジオカラーデジタル部 ＜ストーリー＞ 20XX年、世界は深い雪に包まれた。薄暗く冷たい冬の世界で人々はすべての媒体を管理されていた。 「日本アニメ（ーター）見本市」とは、2014年から数年間に渡りスタジオカラーとドワン
日本語 - fullfrontal.moe
アヌシー国際アニメーション映画祭は色々な楽しいことがあるイベントです。アイスクリームを食べたり、湖で泳いだり、卒業映画を観ることができます。でも一番楽しみにしていることが竹内孝次氏に会い、テレコムの伝承をもう少し教えていただくことです。 今回は、我らが昨年も参加し、今月も参加する東京アニメアワードフェスティバルについても話を聞きました。...
こんにちは！WebクリエイタースクールデジタルハリウッドSTUDIO by LIG(通称：デジLIG)運営スタッフのるりです。 今やSNSは幅広い年齢層の間で欠かせない存在になっていますが、その中でも特に動画に関するコンテンツは最も主流となっていますよね。 また、その流れで動画がかなり身近になったことから、最近では社内の事業紹介や今後の展開についてのミーティング、イベントなどビジネスに関することでも動画を制作・利用することを検討されている方も多くなっています。 今回は、実写・アニメーション両方における動画制作における流れを具体的な3ステップでご紹介していきます。 制作のポイントも記載しておりますので、動画を見るのが好きで動画制作に興味が湧いている方や、今後動画コンテンツを活用したい方、動画制作をする必要に迫られているが何からはじめたら良いのかわからない方は、ぜひこの記事をご活用いただけます
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
使われたセル画は4万5000枚超。作者が自宅を抵当に入れてまで作った狂気の手描きアニメゲーム『Cuphead』のヤバさを今さら語りたい
そして、本編発売からおよそ5年後には、新たなプレイアブルキャラクターとしてチャリスを迎え、新武器を携えたカップヘッドたちの新しい冒険が描かれるダウンロードコンテンツ、『The Delicious Last Course』の配信がスタート。タイトルの頭文字をとっていくと、ダウンロードコンテンツの略称である “DLC” になるというオシャレが輝くこちらの作品でも、高いアニメーションの品質とゲーム性は健在です。 そんな本作の人気はゲーム発売当初から止まることを知らず、様々な媒体へと展開していきました。海外では、コミックスはもちろんのこと、小説でも新作短編が作られており、更にはNetflixで、本作を題材とするオリジナルアニメシリーズ『ザ・カップヘッド・ショウ！』が配信されています（現在、シーズン3まで配信中。日本語吹き替え版もあります）。 海外のカートゥーンをリスペクトしたゲーム作品が正式にカー
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新版！ Lottieアニメーションの作り方 - After Effects編 - ICS MEDIA
もう初回コードレビューはAIに任せる時代になった - CodeRabbit -
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
【AIアニメ】ComfyUI AnimateDiffでアニメの中割りを作ろう！｜Baku
日本テレビ、スタジオジブリを子会社化 鈴木敏夫氏は「ずっと後継者問題に悩んできた」
CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」:phpspot開発日誌
CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版
最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
アニメの常識、画像生成AIが変える可能性「AnimateDiff」のすごい進化 (1/3)
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
知らないと損する最新Web＆デザインツール、素材55選
ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ
「アニメーションの定義についての覚書」 実写映画とは何か違うのか｜数土 直志(すど・ただし)
TVアニメ『ウマ娘 プリティーダービー Season 3』本PV
問題作『オオカミの家』の悪夢のような映像世界は、なぜ、どんな意図でつくられたのか。監督たちが語る | CINRA
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（後編） - ICS MEDIA
アニメ制作の現場では「動画は音より少し先行させる」と言われるがあまり知られていない→実際に試した動画が分かりやすい
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA
【脱！イケてない動画】動画制作・映像制作の流れを解説！| 株式会社LIG
デザインの参考になる！ 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ