完成例から、作り方をたどる Work backward from the finished example

タコ先生の実際の制作物を使って、Codexへの依頼から、内容の確認、画像・動画の仕上げまでを説明します。読むだけで終わらず、依頼文と結果を見比べながら進めます。 Follow real Tako Sensei content from requesting work in Codex to checking content and finishing images and videos. Compare each request with its result as you go.

この画像では、大阪の背景・タコ先生の素材と、読みやすい文字のレイアウトを組み合わせています。文字まで含めて毎回一枚の画像として生成するのではなく、修正しやすい部分は編集データとして残しています。 This image combines an Osaka background, Tako Sensei assets and readable text. Instead of generating all the text as part of a single image each time, we keep editable elements separate.

Claude CodeまたはCodexで進める Work with Claude Code or Codex

この講座は、Claude CodeまたはCodexを使って制作したい方が対象です。 This course is for people who want to create content with Claude Code or Codex. 操作の実演はCodexで統一します。 All software demonstrations use Codex. Claude Codeを使う場合も、目的・素材・条件を渡し、結果を確認して修正する考え方は共通です。画面や画像生成などの機能は異なるため、同じボタンや機能がある前提にはしません。 With Claude Code, the same approach applies: provide a purpose, assets and constraints, then review and revise. Screens and capabilities such as image generation differ; do not assume identical buttons or features.

この教材で使うもの What we use in this course

道具 Tool	何をするか Role
Codex	企画と原稿を整理し、画像制作を依頼し、HTMLや動画の編集ファイルを作る・直す Organize ideas and scripts, request images, and create or revise HTML and video source files
画像生成 Image generation	必要な背景や素材を用意する。既存素材で足りる場合は生成しない Prepare backgrounds or assets when existing materials are insufficient
HTMLテンプレート HTML template	ストーリーの問題・答えを、同じ配置で画像にする Create consistent images for the Story question and answer
HyperFrames	文字・画像・音声を時間に沿って組み合わせ、動画にする Combine text, images and audio over time into a video

HTMLは、画面に何をどこへ置くかを記述するファイルです。初心者が最初から手書きする必要はありません。Codexに依頼し、実際の表示を見て修正します。 HTML describes what appears on a screen and where. Beginners need not write it from scratch. Ask Codex to build it, then inspect and revise the rendered result.

学ぶ順番 Learning sequence

1. 企画する Plan ：外国人学習者に、何を一つ覚えてほしいかを決める。: decide one thing a Japanese learner should remember.
2. Codexへ依頼する Ask Codex ：素材・原稿・守りたい条件を渡す。: provide assets, copy and constraints.
3. 静止画を作る Create still images ：ストーリーの問題と答え、カルーセルへの展開を考える。: build the question and answer, and consider a carousel format.
4. 動画にする Make a video ：HyperFramesで声と表示を合わせる。: match voice and visuals in HyperFrames.
5. 確認する Review ：実際の画像・MP4をスマートフォンで見る。: view the actual images and MP4 on a phone.

必要なのは、Claude CodeまたはCodexを使えるパソコン、確認用のスマートフォン、使用してよい画像や音声です。最初は新しい素材を増やさず、手元の素材で小さく試します。 You need a computer with Claude Code or Codex, a phone for review, and images and audio you may use. Start small with existing assets.

実例と再実演を区別する Real examples vs. teaching demonstrations

教材中のタコ先生の画像は実際の制作物です。依頼文は学びやすく整理した教材用の例で、過去の会話の転載ではありません。操作画面を載せる際も、実際に操作して撮ったものを使います。 Tako Sensei images in this course are actual production assets. Prompts are teaching examples, not transcripts of past conversations. Any software captures should also show real operations.

題材は「ほかしといて」 Our topic: “hokashitoite”

実際のストーリー0086では、「ほかしといて」を標準語でどう言うかを3択で問い、次の画像で答えと例文を見せています。元の題材は既存リール0017です。 Story 0086 asks learners to choose the standard-Japanese meaning of “hokashitoite” from three options. The next image reveals the answer and an example. Its source topic is Reel 0017.

ここで伝えることは一つ。「ほかしといて」は、この文脈では「捨てといて」という意味です。 There is one learning point: in this context, “hokashitoite” means “throw it away.”

正解と紛らわしい選択肢を決める Choose the answer and plausible distractors

選択肢 Option	日本語 Japanese	英訳 English translation
A・正解 A · Correct	捨てといて 捨てといて (throw it away)	Throw it out.
B	片付けといて 片付けといて (put it away)	Put it away.
C	洗っといて 洗っといて (wash it)	Wash it.

不正解の選択肢も同じ見た目にそろえます。正解だけ長い、強調色が違う、といった見た目のヒントを付けません。意味が別解になっていないかは、人が文脈を見て確認します。 Give all choices the same visual treatment. Do not reveal the answer through length or emphasis. A person should check that the context does not allow another correct answer.

答えは使い方まで見せる Show how to use the answer

「正解はA」で終えず、例文を添えます。 Add an example instead of stopping at “A is correct.”

このゴミ、ほかしといて。 このゴミ、ほかしといて。 (Throw this rubbish away.)
Throw this trash away.

問題で考え、答えで意味を確認し、例文で使う場面をつかむ。この順番が2枚のストーリーの役割です。 The question prompts thought, the answer explains meaning, and the example shows usage. That is the role of the two Story images.

形式を選ぶ Choose a format

• ストーリー Story ：問題→答えの2枚で、短く完結させる。: finish in two images—question, then answer.
• カルーセル Carousel ：自分の速さで戻って読めるよう、意味や例文をページで分ける。: separate meanings and examples into pages readers can revisit at their own pace.
• 動画 Video ：発音や話し方の違いを音で聞かせる。: let learners hear differences in pronunciation and delivery.

この問題ストーリーと、後で扱う東京・大阪の発音比較動画は別の制作例です。一つの作品を全形式に変換した実績としては扱いません。 This quiz Story and the Tokyo/Osaka pronunciation video are separate production examples. They do not demonstrate one piece converted into every format.

▶ 実際の動画サンプルを見る（15秒・音声あり） ▶ Watch the actual video sample (15 seconds, with audio)

この章ではCodexで実演します。Claude Codeを使う場合も、以下の依頼文の組み立て方を参考にしてください。 This chapter demonstrates Codex. Claude Code users can follow the same approach to structuring a request.

「いい感じに」ではなく、材料を渡す Provide materials instead of saying “make it nice”

Codexには、完成させたいものだけでなく、正しい原稿・参照画像・使ってよい素材を渡します。既存の制作フォルダーを使う場合は、そのフォルダーを開いてから依頼します。 Give Codex accurate copy, references and permitted assets as well as the desired result. Open the production folder first when working on an existing project.

次は、実際のストーリーの構造を使った教材用の依頼例です。 The following teaching prompt uses the actual Story's structure.

タコ先生の「ほかしといて」を題材に、問題と答えの2枚を作ります。
まず既存テンプレートと素材を確認し、構成を説明してください。

問題：「ほかしといて」は標準語でなんという？
A：捨てといて / Throw it out.（正解）
B：片付けといて / Put it away.
C：洗っといて / Wash it.
答えの例文：このゴミ、ほかしといて。
英訳：Throw this trash away.

ローマ字、日本語＋ふりがな、英訳の順で表示してください。
選択肢は同じ見た目にし、縦に並べます。
承認済みのタコ先生と背景を使い、キャラクターを描き直さないでください。
文字が入らない場合は勝手に小さくせず、問題箇所を示してください。

Create two Tako Sensei Story images about 'hokashitoite': a question and an answer.
First inspect the existing template and assets, then explain the structure.

Question: What does ほかしといて mean in standard Japanese?
A: 捨てといて / Throw it out. (correct)
B: 片付けといて / Put it away.
C: 洗っといて / Wash it.
Example: このゴミ、ほかしといて。
English: Throw this trash away.

Display romaji, Japanese with furigana, then English.
Stack choices vertically with identical styling.
Use the approved Tako Sensei and background assets; do not redraw the character.
If text does not fit, show the problem instead of shrinking it without asking.

出てきた案を確認する Review the proposal

日本語、英訳、正解が依頼と一致しているかを先に見ます。色や飾りはその後です。ローマ字やふりがなも、AIが出したまま採用せず、読む順序と発音を確認します。 First check that the Japanese, English and correct answer match your request. Colors and decoration come next. Review romaji, furigana, reading order and pronunciation rather than accepting AI output unchanged.

修正は一箇所ずつ伝える Request one revision at a time

問題画像の選択肢Bの英訳が小さく見えます。
A・B・Cで同じ文字サイズと余白にそろえてください。
問題文、正解、背景、キャラクターの位置は変えないでください。
修正後の画像で3つの選択肢を比較してください。

The English text for option B looks small.
Use the same font size and spacing for A, B and C.
Do not change the question, answer, background or character position.
Compare all three options in the revised image.

修正する場所、困っていること、維持したい部分を伝えると、結果を確かめやすくなります。 Specify the location, the problem and what should remain unchanged. This makes the result easier to check.

背景と文字を分ける Keep backgrounds and text separate

タコ先生のストーリーでは、背景画像の上に紙色のカードと文字を重ねています。背景は雰囲気を伝え、文字は学習内容を伝えます。 Tako Sensei Stories place a paper-colored card and text over a background. The background sets the atmosphere; the text carries the lesson.

キャラクターや背景のような画像素材と、日本語・英訳のように何度も直す文字を分けることで、言葉を直すたびに画像全体を作り直さずに済みます。 Separating characters and backgrounds from frequently edited text avoids regenerating the whole image each time wording changes.

Codexで画像生成を使う場面 When to generate images in Codex

既存の素材で足りなければ、参照画像と用途を添えて生成を依頼します。次は背景を用意するための依頼例です。既存のストーリー背景を生成した当時の入力ではありません。 If existing assets are insufficient, provide references and explain the intended use. The next prompt is a teaching example for a background, not the original prompt used for this Story.

日本語学習のストーリーに使う、大阪らしい背景画像を作ってください。
中央には問題カードを重ねるので、主役になる物を中央に密集させないでください。
文字、クイズ、キャラクターは入れず、背景だけにしてください。
写真のような表現ですが、実際に撮影した写真としては扱いません。

Create an Osaka-inspired background for a Japanese-learning Story.
A question card will cover the center, so avoid concentrating prominent objects there.
Include no text, quiz or characters—background only.
Use a photographic style, but do not present it as an actual photograph.

生成後は、背景だけで完成とせず、文字カードを重ねた状態で確認します。必要な場合だけ、問題のある箇所を指定して直します。モデル名や選択項目は実際に使った画面に合わせて説明します。 Review the generated background with the text card over it. Revise specific problems only when necessary. Explain model names and options using the interface actually used.

レイアウトを組む Build the layout

実際のストーリーは、 The actual Story stores its content in quiz.jsonに問題・選択肢・正解を置き、共通HTMLテンプレートから画像を作っています。JSONは内容を項目ごとに保存するテキストデータです。 and generates images from a shared HTML template. JSON stores content as named text fields.

初心者はCodexへ「既存テンプレートの内容だけを差し替えて」と依頼します。配置を毎回新しく作らず、問題・答えの両方を表示して確認します。 Beginners can ask Codex to replace only the existing template's content. Keep the layout consistent and review both question and answer.

問題と答えのプレビューを並べて見せてください。
ローマ字、日本語、英訳がすべて読めるか確認してください。
文字の重なり、キャラクターの欠け、選択肢の余白を点検してください。

Show the question and answer previews side by side.
Check that romaji, Japanese and English are all readable.
Inspect overlapping text, cropped character details and option spacing.

実際の8枚カルーセルを読む Explore the actual eight-image carousel

講座冒頭の「完成サンプル → カルーセル」に掲載した「関西弁のつなぎ言葉5選」は、既存のHTML/CSSから制作した全8枚のサンプルです。ストーリーとは別の制作物です。 The “Five Kansai connectors” carousel in the opening samples was made from existing HTML/CSS. It has eight images and is a separate production from the Story.

ページ Page	役割 Role
1	表紙。「何が学べるか」を一目で伝える Cover: show the learning topic at a glance
2〜6	ほんで・ほな・せやから・せやけど・せやのに。1枚に1表現 Honde, hona, seyakara, seyakedo and seyanoni—one expression per image
7	5つの表現をまとめて復習する Review all five expressions
8	保存して旅行中に見返す行動を促す Encourage saving for a trip

例文のページは、表現→短い意味→例文の順にします。例文はローマ字・ふりがな付き日本語・英訳をそろえ、背景や装飾より文字を優先しています。 Example pages follow expression → short meaning → example sentence. Include romaji, Japanese with furigana and English. Prioritize readable text over backgrounds and decoration.

同じ型で次の題材を作る Reuse the format for the next topic

参照の8枚カルーセルと同じ構成で、次の題材を作ってください。
1枚目は表紙、2〜6枚目は1枚に1表現、7枚目はまとめ、8枚目は保存の案内。
承認済みの表現と例文だけを使い、表現を勝手に増やさないでください。
文字はHTMLで管理し、画像に焼き込む前に修正できるようにします。
1080×1350で、文字は四辺72pxより内側に収めます。
ローマ字・ふりがな付き日本語・英訳の順で例文を見せます。
長い文は意味のまとまりで改行し、まず全8枚を一覧で確認させてください。

Create the next topic using the reference carousel's eight-image structure.
Image 1: cover; 2–6: one expression each; 7: summary; 8: save prompt.
Use only approved expressions and examples; do not invent additions.
Keep text editable in HTML before rasterizing it.
Use 1080×1350 and keep text at least 72px inside each edge.
Show examples in this order: romaji, Japanese with furigana, English.
Break long sentences at meaningful boundaries. First show all eight images together for review.

これは次の制作に使う依頼例です。既存カルーセルを制作した当時の入力ログではありません。72pxはこの実例の余白設定で、Instagram全体の必須仕様ではありません。 This prompt is for your next production, not a log of the original carousel session. The 72px margin belongs to this example; it is not an Instagram-wide requirement.

書き出した画像は、順番と8枚すべての文字をスマートフォンで確認します。ストーリーの「問題→答え」も別の展開として使えますが、学ぶ量と読む順序に合わせて形式を選びます。 Check the order and text on all eight exported images on a phone. The two-image Story format is another option; choose based on the amount of learning and reading sequence.

まず、実際に作った画面を見る Start with the actual result

上の動画はタコ先生の「Tokyo vs Osaka Accent Vol.1」の実際の制作プレビューです。再生ボタンで音声を聞けます。公開済みのInstagram投稿を埋め込んだものではありません。東京の発音を聞かせている間は左を明るく、右を暗くして、どちらを聞いているかを示しています。 The video above is the actual “Tokyo vs Osaka Accent Vol.1” production preview. Press play to hear it. This is not an embedded published Instagram post. During Tokyo pronunciation, the left side brightens and the right dims to indicate which voice you hear.

見てほしいのは、派手な動きではなく Focus on 音声と画面の対応 how sound and visuals correspond です。ローマ字の下には、音の高低を示す線を置いています。次は大阪側の音声に合わせ、強調する側を切り替えます。画像・文字・声を、時間に沿って組み合わせています。. A line below the romaji shows pitch. The emphasis switches to Osaka for its audio. Images, text and voice are coordinated over time.

CodexとHyperFramesの役割 Codex and HyperFrames: different roles

Codexには「どんな動画にしたいか」を伝え、編集用のファイルを作成・修正してもらいます。HyperFramesは、そのHTMLベースの動画をプレビューし、MP4へ書き出す道具です。画像を生成するAIそのものではありません。 Tell Codex what video you want and ask it to create or revise the source files. HyperFrames previews that HTML-based video and exports an MP4. It is not the image-generation AI itself.

道具・素材 Tool or asset	今回の役割 Role in this example
Codex	台本整理、配置やタイミングの実装、修正 Organize the script, implement layout and timing, and revise
画像生成 Image generation	必要な背景などの素材を用意する。既存キャラクターは参照を使う Prepare backgrounds as needed; use references for existing characters
既存のキャラクター画像 Existing character images	タコ先生の形・色をそろえる Keep Tako Sensei's shapes and colors consistent
録音した音声 Recorded audio	実際の東京・大阪の発音を伝える Demonstrate actual Tokyo and Osaka pronunciation
HyperFrames	文字・素材・音声を時間どおりに表示し、動画にする Display text, assets and audio on a timeline to create video

画像生成の製品名・モデル名は、実際に使用する画面で確認します。「Image2.5」という呼び名だけで、利用モデルや操作手順を確定しません。 Check image-generation product and model names in the interface you actually use. The name “Image2.5” alone does not establish a model or its operation steps.

この実例の設計 How this example is structured

この動画の制作設定は1080×1920px、30fps、15秒です。5組のあいさつを「東京1.2秒→大阪1.2秒」で比較し、最後に3秒の保存案内を置きます。5組×2.4秒＋3秒＝15秒です。SNS全般で最適な秒数という意味ではありません。 This production is 1080×1920px, 30fps and 15 seconds. Five greeting pairs each use 1.2 seconds for Tokyo and 1.2 seconds for Osaka, followed by a 3-second save prompt: 5×2.4+3=15 seconds. This is not a universal optimum for social video.

音声の速さを無理に変えて尺へ押し込まず、必要な発話を残して配置しています。BGMと効果音は入れていません。聞き比べる教材なので、発音を聞くことを優先しています。 Keep necessary speech rather than speeding it up unnaturally to fit. There is no BGM or sound effect; clear pronunciation takes priority in this listening lesson.

1. 最初の依頼で完成条件を渡す 1. Include acceptance criteria in the first request

次は、実例をもとに整理した The following is a teaching example based on the real production: 教材用の依頼例 teaching prompt です。実際の過去の会話を転載したものではありません。, not a transcript of an actual past conversation.

タコ先生の東京と大阪の発音を聞き比べる縦動画を作ります。
まず1組「こんにちは」のみ、構成案を出してください。

画面：1080×1920。左が東京、右が大阪。
素材：添付の承認済みキャラクター画像と録音音声を使う。
表示：英訳、ローマ字、日本語を読みやすく置く。
東京音声中は東京側、大阪音声中は大阪側を強調する。
発音音声は伸縮せず、BGMと効果音は入れない。

HyperFramesで編集できる形を想定する。
先に素材不足と時間構成を確認し、全編の生成・レンダーはまだ行わない。

Plan a portrait video comparing Tako Sensei's Tokyo and Osaka pronunciation.
Start with one pair only: こんにちは (konnichiwa).

Canvas: 1080×1920. Tokyo on the left, Osaka on the right.
Assets: use the attached approved character images and recorded audio.
Display: readable English, romaji and Japanese.
Emphasize the Tokyo side during Tokyo audio and the Osaka side during Osaka audio.
Do not stretch speech. Add no BGM or sound effects.

Prepare for editing in HyperFrames.
First identify missing assets and plan the timing. Do not generate or render the full video yet.

いきなり5組を完成させるより、1組で文字・音・切り替えを確認した方が、同じ問題を全編に広げずに済みます。 Check text, sound and transitions with one pair before building all five, so the same problem does not spread across the video.

2. 編集ファイルを開く 2. Open the source files

HyperFramesのプロジェクトには、表示を定義するHTML、画像・音声、設定ファイルが入ります。このタコ先生のシリーズでは、投稿ごとの A HyperFrames project contains HTML defining the visuals, image/audio assets and configuration. This Tako Sensei series stores each post's words and timing in episode.jsonに言葉や時間を置き、共通の仕組みでHTMLを作っています。 and generates HTML using shared infrastructure. episode.jsonはこのシリーズ独自の入力であり、すべてのHyperFramesプロジェクトに必須のファイルではありません。 is specific to this series, not required in every HyperFrames project.

初心者は最初からコードを書き始めず、Codexへ「このプロジェクトの起動方法と編集するファイルを確認して、プレビューを開いて」と依頼します。既存プロジェクトならREADMEやpackage.jsonの起動手順を優先します。 Beginners should ask Codex to inspect the project's launch instructions and editable files, then open the preview. For an existing project, follow its README and package.json first.

この実例では、動画フォルダーで This example has a launch script that runs npm run devを実行する起動スクリプトがあります。一般的なCLIの流れは in the video folder. A typical CLI workflow uses hyperframes previewで確認し、 to preview, hyperframes checkで検査し、 to check, and hyperframes renderで書き出す形です。初回の環境準備にはNode.jsやFFmpegなどが必要なので、Codexにインストール済みか確認させます。 to export. Ask Codex to verify prerequisites such as Node.js and FFmpeg before first use.

3. プレビューを「3回」に分けて見る 3. Review the preview in three passes

1. 止めて見る： Pause and inspect: ローマ字・日本語・英訳が読めるか。タコ先生が欠けていないか。 Are romaji, Japanese and English readable? Is Tako Sensei fully visible?
2. 音を聞く： Listen: 東京→大阪の順か。最初と最後の音が切れていないか。 Does Tokyo come before Osaka? Are the start and end of speech intact?
3. 再生して見る： Watch playback: 声を出している側と、明るい側が一致するか。 Does the bright side match the voice you hear?

「全体的にいまいち」ではなく、時間・場所・現象を記録します。たとえば「大阪の声が始まっているのに、まだ東京側が明るい」と書けば、タイミングの問題だとわかります。 Record the time, location and symptom instead of saying it feels wrong. “Osaka's voice has started but Tokyo is still bright” identifies a timing issue.

4. 修正を具体的に伝える 4. Make revision requests specific

こんにちはの大阪音声が始まる時点で、右側の強調に切り替えてください。
音声ファイルと再生速度は変えないでください。
ほかの言葉の時間と、文字のサイズは維持してください。
修正後は切り替え前後をプレビューで確認してください。

Switch emphasis to the right when the Osaka audio for konnichiwa starts.
Do not change the audio file or playback speed.
Keep the other words' timing and all text sizes unchanged.
Review the moments before and after the transition in the preview.

ここで強みになるのが、 A key advantage is 変更箇所を言葉で指定し、同じ構造へ反映できること describing changes in words and applying them to a shared structure です。ただし依頼が通ったかは人が再生して確かめます。. Still, play the result to verify that the request was followed.

5. 同じ型を次の投稿に使う 5. Reuse the format for the next post

「こんにちは」で型が整ったら、言葉・音声・英訳を差し替えます。配置や色を毎回作り直さずに済み、修正履歴もファイルで残せます。タコ先生では、動画からストーリーの問題へ題材を展開する仕組みも使っています。 Once the “konnichiwa” format works, replace the words, audio and translation. Keep layouts and colors consistent and track changes in files. Tako Sensei also reuses video topics for Story quizzes.

こちらは「ほかしといて」の実際の制作画像です。ストーリーは問題→答えの2枚。文字入り静止画のHTMLテンプレートで作っており、HyperFramesの動画レンダーを使う必要はありません。動画・カルーセル・ストーリーで、共通の素材と学習内容を再利用することがポイントです。 This is the actual “hokashitoite” production image. The Story uses two images: question and answer. They come from a still-image HTML template and do not need a HyperFrames video render. Reuse shared assets and learning content across videos, carousels and Stories.

メリットと向いている仕事 Benefits and suitable tasks

場面 Task	HyperFramesを使う利点 HyperFrames advantage
同じ型の動画を継続する Produce recurring videos in the same format	言葉・画像・音声の差し替えを仕組みにできる Systematize replacing words, images and audio
全編の文字や色をそろえる Keep typography and colors consistent	共通の定義を修正し、各場面に反映できる Update shared definitions across scenes
音と表示を正確に合わせる Match sound and visuals precisely	時間を指定して確認・修正できる Inspect and adjust exact times
Codexと制作する Create with Codex	HTMLや設定をAIが直接編集できる AI can directly edit HTML and configuration
後から直す Revise later	何を変更したかファイルの履歴で追える Track changes through file history

一方、初期設定とテンプレートづくりには手間がかかります。短い実写を一度だけ切り貼りする、指で直感的に位置を動かす、といった作業ではGUIの動画編集ソフトの方が手軽な場合もあります。HyperFramesにしただけで自動的に美しくなるわけではなく、台本・読みやすさ・音声確認は必要です。 Initial setup and templates take effort. A GUI editor may be easier for a one-off live-action edit or moving elements by hand. HyperFrames does not automatically make a video beautiful; scripts, readability and audio still need review.

この章の実習 Practice for this chapter

最初は1組の比較だけを題材にしてください。左→右の順、音声と強調の一致、文字の読みやすさを確認し、修正指示を1つ書きます。合格条件は「どの時点の何を直したか」を、変更前後で説明できることです。 Start with one comparison pair. Check left-to-right order, voice/highlight alignment and readability. Write one revision request. You should be able to explain what changed, at what time, before and after.

動画の内容を文字で確認する Read a description of the video

「こんにちは」「おはよう」「ありがとう」「おかえり」「ただいま」を、それぞれ東京→大阪の順で聞き比べます。文字は同じでも音の高低が異なります。声が流れる側が明るくなり、最後に「保存して、もう一度聞き比べよう！」と案内します。発音の違いは動画の音声と高低線を合わせて確認してください。 Compare “konnichiwa,” “ohayou,” “arigatou,” “okaeri” and “tadaima,” each in Tokyo then Osaka pronunciation. The words are the same but pitch differs. The speaking side brightens, followed by a save-and-listen-again prompt. Use both the audio and pitch lines to compare pronunciation.

発音の違いは、音で伝える Use audio to teach pronunciation differences

「Tokyo vs Osaka Accent Vol.1」は、こんにちは・おはよう・ありがとう・おかえり・ただいまの5組を聞き比べる実際の制作例です。 “Tokyo vs Osaka Accent Vol.1” is an actual production comparing five greetings: konnichiwa, ohayou, arigatou, okaeri and tadaima.

東京1.2秒→大阪1.2秒を5組、最後の案内を3秒にして、全体は15秒。画像の高低線は最初から表示し、音声に合わせて左右の強調を切り替えます。 Five pairs at 1.2 seconds per voice plus a 3-second closing prompt total 15 seconds. Pitch lines are visible from the start; emphasis switches with the voice.

まず1組を確認する Review one pair first

Codexに、既存の動画フォルダーと起動手順を確認させ、プレビューを開きます。HyperFramesの導入と役割は Ask Codex to inspect the video folder and launch instructions, then open the preview. HyperFrames setup and roles are explained in the 使い方の章 getting-started chapter で説明しています。.

既存の発音比較動画を開き、こんにちはの部分を確認したいです。
まず起動方法を確認し、プレビューを開いてください。
ソースや音声はまだ変更しないでください。

I want to inspect the konnichiwa section of the existing pronunciation video.
First check the launch instructions and open the preview.
Do not change source files or audio yet.

左の声が流れるときは左、右の声のときは右が強調されているかを見ます。日本語、ローマ字、高低線、英訳がそれぞれ読めるかも止めて確認します。 Check that the left or right side is emphasized with its matching voice. Pause to check Japanese, romaji, pitch lines and English separately.

タイミングを直す Adjust timing

大阪の声が始まる時点で、右側が明るくなるように合わせてください。
声の速さと録音内容は変えず、強調の切り替えだけを調整してください。
変更前後の時点を確認できるようにしてください。

Make the right side brighten when the Osaka voice starts.
Keep speech speed and recordings unchanged; adjust only the emphasis transition.
Make it possible to inspect the before-and-after timing.

一度に背景や文字まで変えると、何が改善したかを確かめにくくなります。音・表示・タイミングを分けて見ます。 Changing backgrounds and text at the same time makes improvements hard to assess. Review audio, display and timing separately.

MP4へ書き出す Export an MP4

プレビューで確認できたら、Codexに既存プロジェクトのチェックを実行させ、問題がなければMP4への書き出しを依頼します。この実例では After reviewing the preview, ask Codex to run the project's checks, then export an MP4 if they pass. This example provides npm run checkと and npm run renderが用意されています。これらはプロジェクトのスクリプト名なので、新しいプロジェクトでも必ず同じとは限りません。. These are project-specific script names and may differ in another project.

書き出した動画を実際に再生し、最初の音、左右の切り替え、最後の案内を確認します。プレビューで合っていても、保存されたMP4を見て完了にします。 Play the exported video to check the opening audio, side transitions and closing prompt. Finish by reviewing the saved MP4 even if the preview looked right.

動画の内容を文字で確認する Read a description of the video

「こんにちは」「おはよう」「ありがとう」「おかえり」「ただいま」を、それぞれ東京→大阪の順で聞き比べます。文字は同じでも音の高低が異なります。声が流れる側が明るくなり、最後に「保存して、もう一度聞き比べよう！」と案内します。発音の違いは動画の音声と高低線を合わせて確認してください。 Compare “konnichiwa,” “ohayou,” “arigatou,” “okaeri” and “tadaima,” each in Tokyo then Osaka pronunciation. The words are the same but pitch differs. The speaking side brightens, followed by a save-and-listen-again prompt. Use both the audio and pitch lines to compare pronunciation.

書き出したファイルを確認する Review the exported files

ストーリーは問題→答えの順、動画は最初から最後までを、スマートフォンで確認します。編集画面を拡大した状態だけでは、実際の文字の小ささに気づけません。 On a phone, inspect the Story in question–answer order and watch the whole video. An enlarged editing view can hide text that is too small in practice.

タコ先生で見る場所 What to inspect in Tako Sensei content

• 日本語とふりがな Japanese and furigana ：重なっていないか。読み方が合っているか。: no overlaps and correct readings.
• ローマ字・英訳 Romaji and English ：文字が小さすぎないか。日本語と意味が一致するか。: readable size and meaning consistent with the Japanese.
• 選択肢 Option ：3つとも同じ強さで見えるか。: all three choices have equal visual emphasis.
• キャラクター Character ：端で欠けていないか。必要な文字を隠していないか。: no clipping or obstruction of important text.
• 動画の音 Video audio ：発音の最初と最後が切れていないか。: speech starts and ends without clipping.

文字が読めなければ、まず説明を短くするか、余白を調整します。何でも文字縮小で解決しないようにします。 If text is hard to read, shorten the explanation or adjust spacing before making everything smaller.

Instagramの表示とは別に確認する Also check Instagram's actual display

制作画像の枠内に入っていても、Instagramの操作ボタンや説明文が重なることがあります。投稿画面で素材を選び、重要な文字が隠れないかを確認します。実習では公開せず、プレビューまでで構いません。 Instagram controls or captions may cover content even when it fits the exported image. Select the asset in the posting interface and check important text. For practice, stop at the preview without publishing.

既存のストーリーは1080×1920の画面内で余白と可読性を優先して作っています。実際のInstagram UIでの確認は別工程です。固定の余白だけで、すべての画面で安全だとは判断しません。 These Stories prioritize spacing and readability at 1080×1920. Reviewing the actual Instagram UI is a separate step. Fixed margins alone do not guarantee a safe layout on every screen.

ファイルをスマートフォンへ送る Send the files to your phone

普段使うクラウドストレージに元のPNGやMP4を置き、スマートフォンへダウンロードします。メッセージアプリで圧縮した画像ではなく、書き出した元ファイルを確認してください。 Put the original PNG or MP4 in your usual cloud storage and download it on your phone. Review the original export rather than an image compressed by a messaging app.

変えるのは内容、残すのは読みやすさ Change the content; preserve readability

問題・正解・例文を差し替えても、書体、色、選択肢の順序、ふりがなの扱いは共通にできます。動画なら、言葉と音声を変え、表示との対応を確認します。 Replace the question, answer and examples while retaining type, colors, option order and furigana treatment. For video, replace words and audio, then verify their alignment.

次の題材に差し替える前に、変更する項目を整理してください。
既存の書体、カード、キャラクターの扱いは維持します。
日本語・ローマ字・英訳・正解・例文を確認してから制作してください。
前の題材の文字や音声が残っていないかも確認してください。

Before replacing the topic, list the fields that will change.
Preserve the typography, cards and character treatment.
Confirm the Japanese, romaji, English, correct answer and example before production.
Check that no text or audio from the previous topic remains.

できたかを確かめる Check whether it works

「何を伝える投稿か」がわかること、文字が読めること、内容と音声が正しいことを確認します。豪華な動きや、使ったAIの数を増やすことは目的ではありません。 The topic should be clear, the text readable, and the content and audio correct. More elaborate motion or more AI tools are not the goal.

毎回ゼロから作るのではなく、一度整えた型を使い、内容と確認に集中できるようにする。これがタコ先生の制作で大事にしている進め方です。 Reuse a refined format rather than starting from zero each time, so you can focus on content and review. This is central to Tako Sensei production.