feat: Add HyperFrames primer post (ja) with media

Author: Yusaku01

public/images/blog/img_hyperframes-pipeline.png

@@ -0,0 +1,94 @@
+---
+title: 'HyperFramesで、HTML-firstに動画作りをする'
+description: '動画編集に少し距離があった私が、HyperFramesでHTML-firstな動画作りを試して感じたことを書きます。'
+publishDate: 2026-05-23
+author: 'Saku'
+image: '../../../assets/images/blog/common/image_thumnail.png'
+tags: ['AIエージェント', '動画', 'HTML', 'HyperFrames']
+---
+
+この記事では、HyperFramesでHTML-firstに動画作りをしてみたことを書いていきます。
+
+## 動画編集に感じていた距離感
+
+以前、Final Cut Pro、Adobe Premiere Pro、iMovieを軽く触ったことがあります。
+
+どれも触ってみると楽しく、映像や音を少し動かすだけでも、自分の手元で何かを作っている手応えがありました。一方で、タイムライン、素材管理、音、テロップ、書き出しなど、考えることが一気に増える難しさもありました。
+
+最近は、こうした動画編集ツールにもAI機能やAI連携が入っているはずです。GPTなどのAIツールに補助してもらえる場面も増えていると思います。
+
+それでも、私の中では動画作りに少し距離があります。「ちょっと作ってみたい」と「でもちゃんと作るのは大変そう」の2つの気持ちを抱えています。
+
+## HyperFramesを知ったきっかけ
+
+HyperFramesという名前は、SNSや記事などで何度か見かけていました。
+
+その後、Codex appのPluginとしてHyperFramesがあることを確認しました。自分が普段使っている作業環境の中から触れそうだとわかり、少し試してみようと思いました。
+
+最初から深く検証するつもりではありませんでした。どちらかというと、「どんな感じなのだろう」と覗いてみるくらいの温度です。
+
+## HyperFramesとは何か
+
+> **HyperFrames**
+> HTMLをもとに動画を作成し、MP4としてレンダリングできるツールです。
+
+公式サイトでは、HyperFramesはHTMLを動画に変換するエンジンとして説明されています。開発者やAIエージェントが扱いやすいことも、特徴として打ち出されています[^1]。
+
+GUIの動画編集ソフトというより、コードとして動画を扱うツールに近い印象です。CLIからプレビュー、検査、レンダリングを進められるため、普段の開発作業に近い流れで動画を扱えます[^2]。
+
+この記事では、HyperFramesの機能を網羅的に紹介するつもりはありません。ここでは、私が軽く触ってみて感じた入口の軽さについて書いていきます。
+
+## AIにプロンプトを渡しながら動画を作ってもらった
+
+今回は、SAKUSPACEのプロモーション動画のようなものをAIに作らせてみました。
+
+最初は、HTMLをもとに20秒ほどの動画を作りました。さらに、自分のブログで使っているAstroのページやコンポーネントに寄せて、Webサイトの延長として動画を組み立てる流れも試しました。
+
+ここで面白かったのは、動画編集ソフトを開いてタイムラインを直接操作するのではなく、HTMLやAstroの文脈から動画に近づけたことです。
+
+実際にレンダリングした動画は以下です。
+
+<video
+  class="w-full h-auto"
+  controls
+  playsInline
+  preload="metadata"
+  poster="/images/blog/img_hyperframes-pipeline.png"
+>
+  <source src="/videos/blog/sakuspace-promo-astro.mp4" type="video/mp4" />
+  お使いのブラウザは動画タグに対応していません。
+</video>
+
+もちろん、よい動画を作るには、動画のデザインや構成の知識が必要です。動きや音についても考える必要があります。HTMLで書けるからといって、急に良い動画が作れるわけではありません。
+
+それでも、最初の一歩が普段触っているWebの延長にあるのは、自分にはありがたいことでした。
+
+## HTML-firstという感触
+
+コードで動画を作る選択肢としては、Remotionもあります。Remotionは、Reactで動画を作るツールとして知られています[^3]。
+
+一方で、HyperFramesはHTML-firstに寄せているところが印象的でした。
+
+ただし、私はRemotionとHyperFramesを深く比較できるほど使い込んではいません。正直なところ、どちらが優れているかは分かりません。仮にWebサービス運用のリポジトリを素材に動画を作りたい場合でも、そのサービスがReactで作られているのか、AstroなどのHTMLベースで作られているのかによって、合う選択肢は変わると思います。
+
+私にとってHTMLは、まったく新しい動画編集画面よりも見通しがよいものでした。HTMLやCSSに少しでも触れたことがある人なら、「動画を作る」という言葉から想像するよりも近い場所から始められるかもしれません。
+
+AIにとってHTMLがどれほど扱いやすいのかは、私には断言できません。ただ、AIエージェントがHTMLを書き、CLIで検査やレンダリングを進められる構成は、AIフレンドリーに見えました。
+
+## もう少し触れていきたい
+
+まだ、HyperFramesを深く使い込んだわけではありません。
+
+そのため、HyperFramesは万能だとか、誰にでも最適だとは言いません。実際に作り込もうとすると、動画ならではの難しさも出てくるはずです。
+
+それでも、動画作りへの距離を少し縮めてくれる手応えはありました。
+
+特に、動画制作には少し距離があるけれど、HTMLやWebフロントエンドには馴染みがある人なら、試してみる価値はありそうです。
+
+私ももう少し触れていきたいと思っています。実際の使い方や試用フロー、Astroと組み合わせた時の感触、セキュリティの観点などは、別の記事で整理してみたいです。
+
+[^1]: HyperFrames公式サイト: https://hyperframes.video/
+
+[^2]: HyperFrames CLIドキュメント: https://hyperframes.app/en/docs/5-packages/cli
+
+[^3]: Remotion公式サイト: https://www.remotion.dev/