小説を商業出版することになり、これまで自分で書いて見直すだけだったのが、編集者・校正者による校正・校閲のプロセスを初めて体験した。その過程で差別語・差別表現に関しての指摘を受けて、改めて自分の中での判断について少し整理しておきたいと思った。 ある言葉が持つニュートラル、ネガティブ、ポジティブの三相を同時に見ないと、「その言葉をここで使うのが適切か」は判断ができないけれど、三相のうち一面しか見なかったり知らなかったりすると正確に判断ができなかったり、話が噛み合わなくなったりする。 指摘を受けた点1 「発狂」や「狂人」に指摘が入った。 江戸時代に実在したという届出「発狂扱ひ」に言及した箇所に指摘が入った時はどうしようかとも考えて、「精神状態の異常による行動という届け出」と言い換えた。 明治時代に精神障害者が「狂病者」と呼称され、「狂」に否定的・差別的な意味あいが付与されてきた。1970年代に「

基本無料アプリ内課金あり運営型のゲーム、いわゆるスマホゲームにおいて、夏の風物詩といえば水着ガチャだ。 RPGだろうが、リズムゲームだろうが、アクションだろうが関係ない。多くのキャラクターたちは水着の装いとなり、普段よりちょっと、あるいは随分と大胆な姿を我々に見せてくれる。 刺激的な姿にドキドキして目は回るしガチャもよく回る。気温に反比例して財布は寒くなっていく。 そんな夏が終わった。今は10月。秋、そして冬に向かう季節だ。 気温の変化に適応すべく、衣服の布地面積が増えていく自然の摂理に悲しみを覚える前に、ひとつやり残した使命があることに気づいた。 どんな水着が今年の夏を彩ったのか……2023年の水着のトレンドを調査し、記録に残さねばならない！！ これは単なる欲望ではない。意味はあるし意義もある。大義ですらあるような気がしている。 そんなわけで、56作品233人の2023年にお披露目された

スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ

" class=code-demo loading=lazy style=height:350px>これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。 iOS のスプリングを CSS 数式アニメーションで再現する この記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。 数式でアニメーションを表現できることの利点 #数式でアニメーションを表現すると聞いて、ピンとこない人もいると思います。以下の画像はこの記事のはじめのデモで使っている数式をグラフにしたものです。このグラフの形がイージング関数に似ていると気づいた方もいるかもしれません。 このようなグラフを描く数式を作ることができればイージング

頭が動かない。ここ数日の疲れからか、後は少し脳を使う作業をしたからか、何かを考えたり、ちょっと手のかかる作業をすることが出来なくなってしまった。最近ちょっと考えたりすることが難しい傾向にあるので、少しこうやって手を動かして文章を書きながら、リハビリみたいなことをしようと思う。 表現者について ちょっと前に、表現者についての話がはてなブログで盛り上がっていた。 誰もが表現者になれる時代はとっくに終わってるんだよ - シロクマの屑籠 ほとんどの人は、そもそも表現者になりたいとは思ってないのでは - ふろむだ＠分裂勘違い君劇場 まあ、表現者、という曖昧ないい方で全体的にもにょもにょする文章で、本当にお気持ちなのだろうと思う。何となくの自分を取り囲む世界からの圧力から押し出された系統立てられてない主観。自分はこの、世界からの圧力で、自分と世界との境界を破るように絞り出された何か、これこそが表現だと

新潟に国内外から長編アニメーションが集まる「新潟国際アニメーション映画祭」が3月17日から22日の日程で開催。華ともいえる長編コンペティション部門で受賞作を決めただけでなく、クリエイターや有識者が世界から集まってアニメーションの潮流を伝えるトークイベントや、学生に向けてトップクリエイターがアニメーションについて語るプログラムなども行って、見ることだけに留まらないアニメーションとの向き合い方を広めた。 「国際映画祭という場を借りて、アニメーションの魅力を改めて世界のみなさんに伝えられるのは、とても意味のあることだと思います」。審査委員長としてパンフレットに寄せた押井守の言葉どおり、新潟国際アニメーション映画祭は様々な部門を通してアニメーションの面白さや可能性を、新潟の地から発信するものとなった。 映画祭でメインに据えられる長編コンペティション部門の展開自体が、アニメーションのように自在に変化

エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥

2023/02/14 PR Blenderで不穏な「無人の風景」を生み出す、CG作家「たいらかける」が語る画づくりのコンセプト。 マウスコンピューター Blenderテクスチャモデリングライティング ごく普通の日常風景を題材にしながら、どこか「不気味さ」を感じさせるCGを生み出す、たいらかける氏。これまでの作品から、制作の秘訣や本人のバックグラウンドなどを探るとともに、現在制作で用いているマウスコンピューターのクリエイター向けノートPC「DAIV 5N」のパフォーマンスや使い勝手を伺った。 重視しているのは、腑に落ちない感覚 CGWORLD（以下、CGW）：3DCGを始めて1年ちょっととのことですが、アートに関する経歴はどのような感じでしょうか。 たいらかける氏（以下、たいら）：2020年に、まずは点描画やイラストなどの創作活動からスタートしました。その後、2021年の12月頃からはBle

これは 画像生成AI Advent Calendar 2022 16日目の記事です。 2022年7月末頃、AIによるテキストからの画像生成が一気に広がって以降、あまりに急速な変化が日々続いています。こうした激動の中でも、日本ではアニメ調のイラスト生成への注目が強すぎて、AIの可能性や破壊力、未来などの話題が少なく感じています。 そこでAIがもたらしうる未来や応用などを考え、特に身近な人々へ向けて、わかりやすく紹介することにしました。AIの専門的な研究者ではなくSFのような未来予想ですがご容赦ください。 なおこの記事は、挿絵も含め全体をCC0 1.0で公開します。最大限自由な利用が可能で、転載や加工や販売も自由に行なえます。CC0として利用しやすいよう、引用や転載も含んでいません。 また挿絵は、解説用もお飾り用もすべて、素のStable Diffusionのみで生成しています。キャプションと

はじめに 私事で恐縮ですが、先日、コロナ禍で 2 年半ほど延期していた結婚式をしました。そこでのプロフィールムービー制作を Unity でやってみましたので、本記事ではそのお話をしようと思います。 過去に友人の結婚式のムービー制作を任された時は After Effects か Premiere で作っていたのですが、それぞれ本 1 冊読んだ程度なので、自分の能力的にはスライドショー的に画像や文字を配置する程度が限界でした。自分たちのものはスプラトゥーン風のムービーにしたいなぁと思い、もう少し色々やれるかも & 勉強にもなるかもと思って Unity でやってみることにした次第です。プライバシーの関係でムービーの共有はできないのですが...、部分部分を簡単にご紹介したいと思います。 概要 基本方針は次のような感じです。 全体は Timeline を使って作成 出力は Unity Recorde

どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して

はじめに 手軽に使えるようなCSSアニメーションをローディングアニメーションを中心に制作・まとめました。 CSSアニメーションというのは、JavascriptなしでHTML要素にアニメーションをつけることができるCSSの機能です。 CSSアニメーションについての概要は以下の記事が参考になります。今回の記事は制作のまとめのような形なのでCSSアニメーションについての説明は割愛します。 CSSアニメーション 入門 https://qiita.com/soarflat/items/4a302e0cafa21477707f 共同制作： @tehoooo ローディングその１ 基本的な円が回転するアニメーションです。 実装的にもシンプルで円を回転させているだけです。 See the Pen loading by tabata (@sinobata) on CodePen. ローディングその2 3つの点

NovelAIを用いて出力した画像の枚数が気がつくと2万枚を超えていたので、振り返りがてら画像を見返していた。 黒に輝く#NovelAI #NovelAIDiffusion pic.twitter.com/TrB3FBYjXV — sabakichi｜Domain ✍︎ (@knshtyk) October 19, 2022 自分でも驚いたのだが、サービスを触りはじめた10/4から10/24現在に至るまで、わずか20日間のうちに2万枚にもおよぶ「一定の表現能力を持った個別の画像」(これをイラストレーションと呼ぶべきか否かはさておき)が、たった一人の人間によって生成されたというのは脅威的なことだろう。人類の歴史を振り返っても類似の現象は見当たらないのではないか。 近い感性としては、やはり歴史的には写真技術とGenerative Art、デザインや設計に用いられているComputational

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース

この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11

パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？　ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面

どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！ ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム 【yare.io】 世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。 見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。 ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制

We create beautiful expressions through programming and deliver the best possible experiences.