シャドーイング練習: The No-Code Roadmap: How I Approach Prototyping - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

各モードは全画面の練習ルームで開きます。

364 文

文が短すぎたり長すぎる場合は、Editをタップして調整してください。

Oh, this is so cool.

I love this.

Oh, cool.

Now we've got this modify button here.

This is perfect.

So I click modify.

Oh, yes, it's got this here.

This is amazing.

Awesome.

Oh, it even updates this helper text.

I love that.

I love that so much.

Now, I want to make one thing very clear.

I know how to code, but that doesn't mean you do.

And that's why you're here.

I'm going to teach you to build this stuff without even needing to code.

If you think you're going to walk away from this video figuring out how to build apps with AI, figure it out with Gemini,

and not learn anything, you can just turn this off.

Now, we're here to learn.

We're here to do some incredible stuff.

I want to change the game for you.

So if you're the type of person who's been thinking, I really want to build this stuff, but it all sounds a little hard.

I feel like I need to be able to code.

I don't know the tools.

I don't know where to start.

You're in the right place.

Hello, hello, hello.

Welcome everybody to the inaugural episode of Build It.

Without further ado, let's kick off our very first project.

This is something that is near and dear to my heart.

Fitness.

Well, when you work a lot, you got to take care of your body.

It's very important and I think I figured out the key to creating an agent.

The easiest way to spin up an agent, chatting it up in the Gemini web app.

Yeah, I know it sounds crazy.

And that, my friends, is what I did in order to spin up my very own customizable personal trainer application.

It was just chatting.

It was pretty sweet.

I'll show you.

Give me a workout plan for today.

This full body equipment free workout takes about 25 to 30 minutes and can be done anywhere.

Look at this workout.

This is great.

Got some weights.

Can you incorporate that into my workout?

This dumbbell focused full body workout takes about 30 to 35 minutes.

What is a dumbbell goblet?

A goblet refers to the specific way you hold a single dumbbell against your chest during exercises

so it resembles holding a large goblet or chalice.

Cheers.

I like the sound of that.

Hold up, hold up.

I also want to incorporate running into my weekly workout.

So are there any adjustments you'd make?

Adding running to your strength routine is great for cardiorespiratory fitness.

So we've got a weekly schedule.

All right, terrific.

Now, here's the thing.

I can go ahead and I can keep customizing this.

So I actually did this on my own and I did this in preparation for a Spartan race.

And if anyone knows what that is, it's a 5K obstacle course race.

I wanted to do it right.

And I found Gemini was such a helpful partner.

Here's the reason why.

Not only was I training for that, but I'm in a men's slow pitch softball league, which near and dear to my heart.

I didn't want my workouts to affect my performance.

You know, my like two at -bats when I'm out there trying to hit for power.

Or maybe, you know, my golf game, whatever it may be.

I don't want to have sore legs.

So it was very cool how I could tell Gemini all this different information about what I'm up to, what my goals are.

It'll fully customize my workouts here.

However, there were definitely some drawbacks of this agent.

It would often forget what day it is, what I did yesterday and it would get a little confused about timing.

But my biggest gripe was from a usability standpoint because if you're like me, when you're in the zone, you just want to keep going.

You want to keep doing your thing.

Got my music blasting and my headphones.

I'm grooving and I got to kind of go back and find, what was it?

All right, dumbbell, goblet, right here.

Got my focus.

So this user experience is not great.

The memory wasn't great.

And it was also very much over -indexing on the things I was trying to focus on.

Like, for example, oh, I've got a, I said one time, I said, I've got a double header in softball tomorrow.

Make sure my legs aren't too sore.

And for every other workout that I did, it always assumed I had a double header.

And, you know, this is very cool because think about this.

On the one hand, you've got an agent that's so smart

that it's able to take into account the things that you care about, remember them, incorporate them into all the future workouts that you get.

But on the other hand, the slightest mistake or misunderstanding about what day it is, when the doubleheader is, how did it actually go.

It seems to get a little bit in the way.

So I was thinking, rather than do this, why don't we build our own agent and our own app?

All right, let's get to it.

Let's get to it.

This is the way that I would approach this problem.

I use Google Antigravity.

I use AI Studio.

I use these different tools.

But I love the web app.

I really do.

100

I really do.

101

It's just an easy way to start, and I'll tell you why.

102

You know what's really cool about AI Studio and Google Antigravity?

103

They can do things, right?

104

These agents have tools that allow them to write code.

105

Pretty nifty.

106

But everything that the agent does can take its attention in a slightly different direction, right?

107

Because these agents, they're goal -oriented, right?

108

So if you're telling the agent, hey, I want to build an app, it's like an excited puppy who wants to go build the app.

109

So we got to slow down.

110

I'm a huge fan of leveraging AI as like an extension of my brain, a thinking partner.

111

So let's get started doing that.

112

Here is the prompt I concocted.

113

This is not some perfect prompt that creates the best plan or something like that.

114

I just paused the camera and I typed this all in real time.

115

All right, let's take a look at the response here.

116

Your core thesis is completely spot on.

117

Standard chat interfaces are fantastic for creative generation, broad reasoning, and fluid conversation, but they are fundamentally flawed for task execution,

118

reliable state management, and real -time tracking.

119

So if I were to break down this entire response, there are a few problems and a few things we want to solve for.

120

So number one, we need a separation of concerns, right?

121

We need one part of our application, which is the creative kind of brain of our personal trainer.

122

And then we have the other part of our application, which is kind of like your more traditional fitness tracking type apps.

123

Not really a surprise from my perspective, but I think this illuminates how to fit AI into an application.

124

And the key is knowing where to put it and how to use it.

125

I think this will be a lot better if I can kind of see and visualize it.

126

There's a tool called Stitch, which is really fun for creating these types of UIs.

127

It came up with two different types of views that we can use.

128

So we're going to start with those and then work out from there.

129

It seems like there are two main views in our application.

130

I'm going to use Google stitch to generate the interfaces can you provide a prompt

131

i can share with the agent and stitch

132

so this is google stitch a very cool product

133

and the whole premise of this is

134

that it's going to help us with the design side

135

and even though i love front end it's something

136

i've always worked on designs never really been my forte i like to think it is

137

but i've been told it's not so

138

So let's use the help of AI.

139

Go back to our prompt.

140

I'm not even going to read this.

141

I'm going to copy and paste it in, and I just want to see what happens.

142

Look at this.

143

This is awesome.

144

It's actually drawing these in real time.

145

Okay, so on the left, it's generating our screen that's in the kind of chat interface

146

and on the right it's got the tracker here

147

when you're working with AI one of the it's

148

so easy to just say let's grab these screenshots we'll just throw them in AI studio

149

and make our app but when you do

150

that you end up letting the agent make a lot of the decisions for you

151

which is why it's

152

so important to do this upfront this to me isn't very useful at all this card it says today's workout

153

and then it says five exercises and then I can launch it.

154

In this interface, I wanna be able to make changes to my workout, see what the changes were,

155

see what the results are without having to flip back and forth in my application.

156

So let's go ahead and ask for that.

157

All right, we've got our updated card here.

158

Now one of the things I'm wondering is what if somebody wants to like,

159

they wanna, to, they don't necessarily want to do the exercises in this order.

160

So one of the things that I love to do is switch off.

161

Like I'll do, you know, I'll group two exercises together and I'll alternate between those or something like that.

162

Let's see if we can give some feedback to get some alternate views for this.

163

Part of the benefit of doing this work here is that I am iterating on the design Then...

164

And it's a lot more cost efficient to iterate on the design

165

this way than to actually iterate it on it in AI Studio.

166

Because AI Studio has to build the entire application, run the application, make sure it works.

167

And that costs a lot of tokens to do that.

168

We don't need to write code for this part.

169

We're just kind of figuring out where things should go, what it should look like, and so forth.

170

Oh, this is now we're getting somewhere.

171

This is looking pretty, pretty cool.

172

Okay, supersets.

173

Yes, that was the word I was looking for.

174

So we've got primary strength, and then it's got a superset where we do these together, accessory.

175

All right, so here's the feedback that I'm providing to Stitch.

176

I'm not sure what the start button at the top is, this one.

177

And I don't know why it says 12 ,500 pounds.

178

So unless there's some benefit I don't realize, remove this subcard, hopefully it recognizes this as a subcard, containing 12 ,500 pounds in 50 minutes.

179

Instead, bring the 50 minutes to the header section.

180

In addition, remove the start button as it's unclear what it's for.

181

Finally, let's add a little non -intrusive button next to each workout, or rather each exercise, to learn more.

182

For example, something I'd click if I didn't know what an Arnold Press is.

183

All right, cool.

184

So it took care of that very easily.

185

Move the info button to the right of the row and ensure a bit of padding to its left.

186

That's more like it.

187

Let's add a new view that portrays what happens when you click this info button.

188

Oh, this is awesome.

189

I love this.

190

So now we have a few things here.

191

We have our workout preview, which we can adjust just with basic chatting, things like that.

192

And we've got also we've got the info button that that is how to perform it.

193

This is this is pretty much everything I need from the usability standpoint.

194

Now the last thing that we need to address, I wanna work on this.

195

We've made a number of changes to the workout preview, for example, incorporating workout structure.

196

Can you update this view to incorporate those changes?

197

It would also be nice to have access to the info button in this view,

198

in case I forget what the workout is while on mid exercise.

199

That is something that's actually happened to me.

200

So let's see if we can address this.

201

With that, we've got three pretty good views that kind of define the core of the app,

202

the usage part.

203

What I've done is I've grabbed three pictures from Stitch.

204

I pasted them back in my Gemini chat session, and I wrote, here are some of the views that I generated with your prompt plus iteration.

205

With that, I think it's time to move on to AI Studio.

206

Can you provide me with a prompt I can give to AI Studio to generate my app?

207

I've gone ahead and just taken that prompt, and let's hit build.

208

Build it!

209

So while this designs, it's actually given me a few awesome previews here.

210

Oh, this is cool.

211

All right, so I'm going to hit select this design.

212

With that, Gemini 3 .7 Flash ran for 128 seconds, and it generated a working app.

213

This looks pretty close to what we did.

214

Let's go ahead and make some changes, and I want to show you some cool tools that we can use.

215

So first off, we've got this edit tool, which is very awesome.

216

So I'm just going to say remove this.

217

Workout time should be listed underneath the workout title.

218

Perfect.

219

Move the hypertrophy badge, which is what we call this thing, spaced evenly vertically between the 50 min duration and the chest, shoulders, triceps.

220

This way, today's workout preview is only one line.

221

And while that works, we can actually just look at the app and see what else we might want to change.

222

So for example, what happens when we click this? oh, this is so cool.

223

I love this.

224

Back to workout.

225

So that worked out really well.

226

And that was one of those iterations that we got from Stitch Directly.

227

So that is super cool how that just worked.

228

This looks pretty fantastic, but there's one more view that I think we're missing.

229

When I was doing this, one of the things I like to do was kind of plan out my entire week at a time.

230

So we've got the workout preview card, but I want to see if we can add a weekly preview card.

231

So let's go ahead and do that.

232

As I'm looking through these changes and I'm looking at the app, one of the things I'm seeing is that this user experience could be better.

233

The challenge that I'm seeing now that we've added this kind of weekly preview tab here.

234

I don't really see these items fitting nicely inside of our chat.

235

So I want to try something here.

236

I want to try to see

237

if we can just pull out all of the workout and the weekly preview to this workouts tab.

238

And then we can just kind of get rid of this all together.

239

Because I don't really need a library of workouts.

240

That's kind of the whole reason why I have an AI personal trainer.

241

Like I don't need to go through this library and pick.

242

The trainer is going to do that for me.

243

So instead, we'll keep this view in order to keep track of all the workouts that we're going to do,

244

upcoming workouts, and that way we can organize and launch them.

245

I'd love a history of workouts elsewhere, but we're basically going to replace this section.

246

All right, this part feels like a lot of typing, so I'm going to speak this into existence.

247

So as I'm looking at the app, I'm noticing that I don't love this user experience of having the workout preview inside the app.

248

So instead, what I'd like to do is I'd like to replace the workouts tab.

249

And the workouts tab, instead of having kind of a library of workouts that I can go to,

250

I'd like it to list the current weeks list the current

251

weeks set of workouts and then

252

if I click any one of those workouts it'll open a workout preview just like this

253

and then I can hit back

254

and it'll go to the full week let's go ahead

255

and see what this generates on its own

256

and then we'll take it from there let's go to the full week view

257

I want to see what this looks like we have this chest shoulders

258

if i go preview comes in here launch active workout

259

so now we're cooking and we have this coach page the whole reason

260

that we have this chat is

261

because i want to be able to update anything here

262

but with natural language that includes the full week that also includes the individual day's workouts.

263

So I have a better solution for this.

264

So we're going to remove this card here, okay?

265

And this is going to be a pure chat.

266

Got these ask coach recommendations.

267

I'm fine with that.

268

It doesn't bother me.

269

What is more important, however,

270

I'd like to have a modify button that is in a fixed position at the bottom of this page and this page.

271

And when I click that modify button,

272

what it does is it takes me back to the coach tab and it attaches context from that workout to my prompt.

273

And that way, if I say I come in here and I don't like this Arnold press, I want to replace it,

274

all I would do is I'd hit modify and it would take me back here and I'd say,

275

can you replace the Arnold press with a standard bench press or something like that?

276

And the beauty of that is that by attaching that context to my prompt in the form of that modify button,

277

then the agent would go ahead and update the workout for me.

278

And in doing so, it knows exactly which workout to update

279

and it can kind of like attach whatever it is I'm doing.

280

So let's go ahead and try to prompt that into existence with my speak to text button.

281

All right, that was a great change.

282

Now we're making progress.

283

What I would like to do is on the workouts tab,

284

I'd like to add a fixed position modify button to the bottom of the page,

285

just above the bottom menu there.

286

The purpose of this is to be able to easily attach the current context of the page

287

that way I can I can give the agent my coach

288

whatever it context it needs in order to make updates

289

that I request when I send my chat the agent will know

290

that this is the exact workout I'm talking about

291

and then it'll go ahead and fix it I don't want to make any updates to the coach page just yet.

292

And when somebody clicks modify, what I'd like to do is,

293

well, first of all, I'd like to navigate to the coach page and then bring some sort of visual cue, maybe a chip with an X.

294

And that chip indicates which workout or which week I'm looking at.

295

And it's done.

296

Let's try it out.

297

So if we go over to our workouts tab.

298

Oh, cool.

299

Now we've got this modify button here.

300

This is perfect.

301

So I click modify.

302

Oh, yes, it's got this here.

303

This is amazing.

304

Awesome.

305

So now whenever I were to, oh, it even updates this helper text.

306

I love that.

307

I love that so much.

308

Okay, awesome.

309

So now, this is very cool.

310

So now whenever I type something, oh, it even gives me some, this is fantastic.

311

All right, cool.

312

So now when I type this in, it will make changes about the week.

313

All right.

314

All right.

315

So this is looking great.

316

Now, one of the things I want to change is the bottom navigation menu.

317

So currently we have coach workouts, progress settings.

318

let's change the label of workouts to week this is going to be our schedule

319

or if you think there's a better label for

320

that you could use that um and then i want a fifth item

321

which is kind of like a circle that's the main the main nav item

322

if you will and when you click that it brings up the active workout for the day.

323

It brings up the current day's workout.

324

Finally, we should remove the launch active workout button from the workout preview page.

325

All right, beautiful.

326

That worked out very well.

327

So you can see here we've got our today button.

328

However, there's one thing I forgot to do, which is hit record before my last prompt.

329

Basically, I asked for just the current set here, and then we've just got all the other exercises.

330

So that is, I think, a much nicer flow because basically all I care about is what I'm doing now.

331

And as you can see, this first one just goes through one, two, three.

332

But when I get to the fourth one, you'll notice it switches from the incline dumbbell press

333

because I do all three of those in a row and then it goes to the Arnold press.

334

Now what I'm curious about is, oh awesome!

335

So because this is a superset, it actually switches, which is perfect.

336

Oh this is rad!

337

Okay this is pretty much exactly how I wanted this to work.

338

And then down here we've got the other exercises in session

339

so I think for the other exercises in this section so

340

if we go back to this view I really like this setup

341

so what I would love to see is everything from here

342

primary strength down to the bottom of this card in the

343

today place over here all right beautiful looks like it finished let's out how it did

344

so we get over here moment of truth okay this is very cool oh oh

345

and it did this feature even though i didn't ask for it

346

which is actually what i wanted which is

347

when you click this it brings you uh

348

that one with the info info giving you the actual info this is

349

so awesome this is exactly how I wanted it to be.

350

All right.

351

Terrific.

352

All right.

353

And with that, this is where we're going to call it.

354

We learned a lot, right?

355

We went from design to prompt to stitch to AI studio to editing an AI studio.

356

But what I really want to do is take this app to the next level.

357

And the first part of that is really fleshing out the product, understanding it, and not just the features,

358

but we need to have a full understanding of both how it works and how it's supposed to work.

359

And I think we've now hit that critical milestone where we can take this to the next level.

360

I hope you stick around and join me for the next video when we do exactly that.

361

I'm Devin.

362

I hope you've enjoyed building with me.

363

See you the next time on Build It!

364

Thank you.

アプリをダウンロード

流暢に話すために必要なすべて

AI発音採点文ごとに採点

IPA練習すべての音をマスター

単語学習自分の単語帳を作る

単語ゲーム遊びながら覚える

QRをスキャン

Download on theApp Store Get it onGoogle Play

同じチャンネル

FOR YOU

このレッスンの語彙とスピーキングのポイント

このスピーキングレッスンは、動画「The No-Code Roadmap: How I Approach Prototyping」を教材にしています。繰り返し出てくる語は次のとおりです：workout, button, app, cool。この動画には、シャドーイング用の文が364文、単語が3893語あります。音声の長さは24:35です。話す速さは1分あたり約158語で、日常会話に近い自然なペースです。単語の85%は英語の頻出3,000語に含まれます。残りは練習の前に確認しておきましょう。

この動画の重要語彙

動画に出てくる覚えておきたい単語15語を、発音と意味つきで紹介します。

単語	発音	意味
workout 名詞	/ˈwɝk.aʊ̯t/	運動, トレーニング
preview 名詞	/ˈpɹiːvjuː/	試写会
generate 動詞	/ˈd͡ʒɛn.ə.ɹeɪt/	生む, 生み出す
interface 名詞	/ˈɪn(t)ɚˌfeɪs/	インターフェース
trainer 名詞	/ˈtɹeɪnɚ/	トレーナー, コーチ
attach 動詞	/əˈtæt͡ʃ/	付ける, 添付する
fitness 名詞	/ˈfɪt.nəs/	健康, フィットネス
header 名詞	/ˈhɛdɚ/	ヘッダー
label 名詞	/ˈleɪ.bəl/	荷札, 貼り札
spin 動詞	/spɪn/	回転する
feedback 名詞	/ˈfiːdˌbæk/	フィードバック, 反応
edit 動詞	/ˈɛdɪt/	編集する
menu 名詞	/ˈmɛn.juː/	メニュー, お品書き
sore 形容詞	/soɹ/	痛い, 痛ましい
softball 名詞		ソフトボール, 塁球

動画に出てくる句動詞

単語	発音	意味
go ahead 動詞	/ˌɡoʊ əˈhɛd/	どうぞお先に
bring up 動詞		育てる
go back 動詞		戻る, 帰る
slow down 動詞		遅らせる
switch off 動詞		消す, 切る

繰り返し練習したい文

動画に出てくる短く完結した文です。日常会話でそのまま使えます。

We're here to do some incredible stuff.
I don't know the tools.
I don't know where to start.
Can you incorporate that into my workout?
Can you update this view to incorporate those changes?

この動画の文法

話し手がよく使っている文型を、動画の実際の表現とともに紹介します。

文型	動画での表現
現在完了形 have/has + 過去分詞 — 過去の出来事が今も関係している	i've always worked · i've been told · We've made
関係詞節 who / which + 節 — 人や物について情報を加える	application, which is · Stitch, which is · tool, which is
受動態 be + 過去分詞 — 誰がするかより、何が起きるかに焦点を当てる	can be done · i've been told · should be listed

注意したい発音

話し手はI'm, we've, don'tなど、短縮形や弱形を124回使っています。聞こえたとおりの短い形で発音しましょう。

「th」の音: bother /ˈbɑðɚ/, underneath /ˌʌndɚˈniθ/, thesis /ˈθisɪs/
「sh」と「zh」の音: extension /ɪkˈstɛnʃən/, efficient /ɪˈfɪʃənt/, preparation /ˌpɹɛpəˈɹeɪʃ(ə)n/, execution /ˌɛk.sɪˈkjuː.ʃən/, flesh /flɛʃ/
長い単語（アクセントの位置に注意）: incorporate /ɪŋˈkɔɹ.pɚ.eɪt/, necessarily /ˌnɛs.əˈsɛɹ.ə.li/, preparation /ˌpɹɛpəˈɹeɪʃ(ə)n/, execution /ˌɛk.sɪˈkjuː.ʃən/, separation /ˌsɛp.əˈɹeɪ.ʃən/

日本語話者が苦手な音：

/r/ と /l/ の区別 — /l/ は舌先を歯茎につけ、/r/ はどこにもつけない: necessarily /ˌnɛs.əˈsɛɹ.ə.li/, elsewhere /ˈɛlsˌʍɛɹ/, reliable /ɹɪˈlaɪəbl̩/, leverage /ˈlɛv.(ə.)ɹɪd͡ʒ/, resemble /ɹɪˈzɛmbəl/
/v/ — /b/ にならないように、上の歯を下唇に当てる: preview /ˈpɹiːvjuː/, solve /sɒlv/, navigation /nævɪˈɡeɪʃən/, leverage /ˈlɛv.(ə.)ɹɪd͡ʒ/, groove /ɡɹuv/
/f/ — 「フ」ではなく、上の歯と下唇で出す: modify /ˈmɑ.dɪˌfaɪ/, interface /ˈɪn(t)ɚˌfeɪs/, fitness /ˈfɪt.nəs/, feedback /ˈfiːdˌbæk/, confused /kənˈfjuːzd/

この動画での練習方法

まず声を出さずに動画を最後まで聞き、知らない単語をメモします。
まず0.75倍速で一文ずつシャドーイングし、慣れてきたら通常の速度に戻します。
自分の声を録音して元の音声と比べます。workout, preview, generateなどの単語に特に注意しましょう。

シャドーイングとは？英語上達に効果的な理由

シャドーイング（Shadowing）は、もともとプロの通訳者養成プログラムで開発された言語学習法で、多言語習得者として知られるDr. Alexander Arguelles によって広く普及されました。方法はシンプルですが非常に効果的：ネイティブスピーカーの英語を聞きながら、1〜2秒の遅延で声に出してすぐに繰り返す——まるで「影（shadow）」のように話者を追いかけます。文法ドリルや受動的なリスニングと異なり、シャドーイングは脳と口の筋肉が同時にリアルタイムで英語を処理・再現することを強制します。研究により、発音精度、抑揚、リズム、連音、リスニング力、そして会話の流暢さが大幅に向上することが確認されています。IELTSスピーキング対策や自然な英語コミュニケーションを目指す方に特におすすめです。

シャドーイングのやり方: ステップ別の完全ガイドを読む →

シャドーイング練習: The No-Code Roadmap: How I Approach Prototyping - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

アプリをダウンロード

同じチャンネル

What's new in Google Cloud in less than 1 minute

AI harness crash course

MCP vs API: The protocol every developer needs to know

おすすめ動画

Dear Higgsfield, I reverse engineered you in 12 hours

How To Land Your First Junior Dev Role

Gemma 4 Just Released - Whats In? In 2026!

FREE Data Analyst Bootcamp!!

Complete Roadmap for Backend Software Engineers (START HERE!)

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Exercise

Go’s Big Mistake

Andrew Ng on Coding Agents and Deciding What to Build

GitHub Copilot now controls your command line...

Give me 31 minutes, I will make PyTorch click forever

Learn Java in 14 Minutes (seriously)

このレッスンの語彙とスピーキングのポイント

この動画の重要語彙

動画に出てくる句動詞

繰り返し練習したい文

この動画の文法

注意したい発音

この動画での練習方法

シャドーイングとは？英語上達に効果的な理由