of creating a model of a future product.

将来の製品のモデルを作ること。

A prototype needs to be created quickly and changed easily

プロトタイプを素早く作成し、簡単に変更する必要がある

because it's likely

だろうから

that several versions of a prototype will be required

複数の試作品が必要なこと

before the right version is created.

正しいバージョンが作成される前に

With each prototype,

それぞれのプロトタイプで。

a round of user testing is typically performed,

一般的には、ユーザーテストを実施します。

analyzed, and measured,

を分析し、測定しています。

and changes are made.

と変更されます。

To keep costs low and possible interfaces high,

コストを抑えて、可能な限り高いインターフェースを実現すること。

prototyping software is often used.

プロトタイピングソフトウェアがよく使われます。

With prototyping software, no coding is required.

プロトタイピングソフトウェアを使えば、コーディングは必要ありません。

As you might imagine,

ご想像のとおりです。

coding is a complex and time-involved process.

コーディングは、複雑で時間のかかる作業です。

It's not easy to make changes

変更を加えるのは簡単ではない

and it takes time to develop a quality product.

と、質の高い製品を開発するためには時間がかかります。

Eliminating the coding process

コーディング作業の省略化

is critical to moving quickly and making changes.

は、素早く行動し、変化を起こすために重要です。

Prototyping software

プロトタイピングソフトウェア

typically features a drag-and-drop interface,

は、ドラッグ＆ドロップのインターフェイスを採用しているのが特徴です。

often with several pre-configured interface options

多くの場合、いくつかの事前設定されたインターフェースオプションがあります。

like buttons, search boxes, form elements,

ボタン、検索ボックス、フォーム要素など。

navigation bars, and more.

ナビゲーションバーなど

You can import graphics like logos and photos.

ロゴや写真などのグラフィックを取り込むことができます。

Often, you can add links between prototype screens

多くの場合、プロトタイプの画面間にリンクを追加することができる

and small animations when something is clicked.

と、何かをクリックしたときの小さなアニメーションがあります。

Let's take a quick peek at some prototyping software

プロトタイピングソフトウェアをちょっとだけ覗いてみましょう。

to see how this type of software looks and functions.

は、この種のソフトウェアの外観と機能を確認することができます。

This is Figma.

こちらはFigma。

You can sign up for a free account at figma.com.

figma.comで無料会員登録をすることができます。

I wanted to briefly walk you through the kinds of problems

どのような問題があるのか、簡単に説明したいと思います。

that Figma happens to solve.

Figmaがたまたま解決したこと。

So this is the dashboard.

これがダッシュボードなんですね。

Once you have created an account and logged in,

アカウントを作成し、ログインした後。

you'll see something like this.

をクリックすると、このように表示されます。

You'll see you'll have the ability

あなたは、あなたが能力を持っていることがわかります。

to create several kinds of files,

を使用して、数種類のファイルを作成することができます。

so you can create the type of file

ということで、ファイルの種類を作成することができます。

for designs and prototypes.

デザインやプロトタイプのために

I'm going to show you one of those in a moment.

そのうちのひとつを、これからお見せします。

You'll have the ability to create a FigJam file,

FigJamファイルを作成する機能があります。

which, as it says here, is like whiteboards, diagrams,

というのは、ここに書いてあるように、ホワイトボードのような、図のようなものです。

sticky notes, that kind of thing.

付箋を貼ったりして。

I'll show you that in a moment as well.

それもすぐにお見せします。

Or you can import a file from someplace else.

あるいは、どこかからファイルを取り込むこともできます。

So maybe you have somebody else's Figma file

ということは、もしかしたら誰かのFigmaのファイルを持っているのかもしれません。

or you have a file from some other program, like Sketch.

またはSketchのような他のプログラムからのファイルをお持ちの場合。

Using the Figma community,

Figmaのコミュニティを使って。

which is over here on the left-hand side,

は、この左側にあります。

I found some examples for us to just briefly take a look at.

いくつかの事例がありましたので、簡単にご紹介します。

So here's an example of a webpage layout

そこで、ウェブページのレイアウトの一例をご紹介します。

that comes from the community.

地域から生まれるもの

Somebody already designed this for you to take a look at

すでに誰かがデザインしてくれているので、見てみてください。

with the intention that you can learn Figma from this

この中からFigmaを学んでほしいという思いから

or you can take this in, tweak it a little bit,

または、これを取り込んで、少し手を加えることもできます。

and turn it into a different kind of design.

を、別のデザインに変えていく。

So those of you who are familiar with Photoshop,

そこで、Photoshopを使いこなしている人たち。

you'll notice this might look somewhat familiar.

をご覧いただくと、どこか見覚えがあることにお気づきになると思います。

We have various types of layers

様々なタイプのレイヤーを用意しています

and so forth over here on this side.

などがこちら側にあります。

So as I click on things,

だから、いろいろクリックしているうちに

you can see we are selecting different elements here

ここでは、異なる要素を選択していることがわかります。

on the page.

を掲載しました。

Okay, there's that tiny emoji up there at the top.

さて、一番上に小さな絵文字がありますね。

You, of course, can zoom in or zoom out,

もちろん、ズームイン、ズームアウトも可能です。

zoom to fit, whatever is best for you.

ズームしてフィットさせる、あなたに最適なものを。

I'll zoom in a little bit.

少しズームしてみます。

So for example, here in this box,

だから例えば、この箱の中。

I might want to make some changes to this.

これには少し手を加えたいかもしれません。

I can, of course, double-click on this and change the text,

もちろん、これをダブルクリックして、テキストを変更することもできるんだ。

"I want to work from home every day,"

"毎日、自宅で仕事をしたい"

or whatever changes you wanted to make here.

など、ここで変更したいことは何でも構いません。

You could select other elements.

他の要素を選択することも可能です。

This is a grouping here.

ここはグループ化されています。

If we group inside of this, there's a vector diagram,

この中をグループ化すると、ベクトル図があるんです。

there's some text associated with this,

これに関連したテキストがあります。

and then there's this little icon here.

そして、この小さなアイコンがあります。

We could turn off the eyeball

目玉を消せばいいんだ

that would remove that from view.

を使えば、それが見えなくなる。

We could also select this little guy here,

ここにいるこの子も選べるんですよ。

maybe we get rid of that.

を取り除くことができるかもしれませんね。

So we can just continue to make changes here.

だから、ここで変化を続けていけばいいんです。

We can make changes to colors as you see here.

ご覧のような色の変更も可能です。

The background for this,

その背景には

let me zoom back out again so we can see this.

もう一度ズームアウトして見てみましょう。

The background for the page overall

ページ全体の背景

is this light gray color.

は、このライトグレーの色です。

We could easily change that background color

その背景色を簡単に変更することができます

to something else.

を他のものに変える。

Maybe this dark gray.

このダークグレーかな。

And you'll notice that these are in hexadecimal format.

そして、これらが16進数で表記されていることにお気づきでしょうか。

We've talked about that other places in the course.

そのことは、講座の他の場所でもお話しました。

So those colors that might come to you

だから、あなたに訪れるかもしれないそれらの色

from some kind of branding document in hexadecimal format,

を、何らかのブランディングのためのドキュメントから16進数で取得します。

you can just type those colors right into Figma

その色をFigmaに直接入力することができます。

and make use of them.

と活用する。

So this is the kind of thing that you can expect here

ここでは、このようなことを想定しています。

within Figma for laying out webpages.

ウェブページをレイアウトするために、Figmaの中で

You have the ability to place shapes,

図形を配置する機能があるんですね。

and images, and so forth;

や画像など、様々なものがあります。

you have some basic drawing tools that are available to you;

基本的な描画ツールはいくつか用意されていますね。

you have some text tools that are available;

というテキストツールがありますよね。

and you can make comments and share these with your team.

とコメントし、チームと共有することができます。

Let's take a brief look over here at a FigJam document.

ここで、FigJamのドキュメントを簡単に見てみましょう。

So this is somewhat the same but also somewhat different.

だから、これは多少同じでも、多少違うんです。

The FigJam functionality, I think,

FigJamの機能ですね。

would be most used by people

が最も多く利用されるでしょう。

who are working with user experience.

ユーザーエクスペリエンスに取り組んでいる人

In other words, they are researching

つまり、研究しているのです。

and planning some kind of document

と、何かしらのドキュメントを企画

rather than putting together the actual graphic design

実際のグラフィックデザインを組み立てるよりも

or a true interface prototype.

または真のインターフェイスプロトタイプです。

This is from earlier in the process

これは、もっと前の段階のものです

of developing a website or web application.

ウェブサイトやウェブアプリケーションを開発する際の

In this case, I'm looking at the consumer journey map here,

今回は、ここで消費者ジャーニーマップを見ています。

and as we have done before,

と、これまでと同じように

we can zoom in and take a closer look at this.

を拡大し、詳しく見ることができます。

So we have an introductory graphic

そこで、イントロダクションのグラフィックを

that we have here.

ということです。

We have the ability to put in information about a persona

ペルソナに関する情報を入れることができるようになっています

that we might be working with

ということになるのかもしれません。

and we could make a graph here.

と、ここでグラフを作ることができました。

We have sticky notes

付箋紙があります

that are spanning across these four boxes.

この4つの箱にまたがっているもの。

This is a pretty common sort of technique that UX people use

これは、UXの人たちが使う、かなり一般的なテクニックの一種です。

for organizing a customer journey.

カスタマージャーニーを構成するための

So how are people interacting with your product or service

では、人々はあなたの製品やサービスとどのように関わっているのでしょうか。

from when they find it,

を見つけたときから。

all the way through until they purchase it,

購入されるまで、ずっと

and how are they using it

そして、それをどのように使っているのか

to address problems within their lives?

とか、「生活上の問題に対処するために

So here, we have actions, experience, opportunities,

だから、ここには行動、経験、機会があるのです。

and pain points.

とペインポイントに注目しています。

These sticky notes could easily be rearranged.

この付箋は簡単に並べ替えることができました。

You just click and drag.

クリック＆ドラッグするだけです。

We aren't zoomed in far enough to read what they say.

私たちは、彼らが何を言っているのかを読み取るために、十分にズームインしていません。

There actually isn't any text on these.

実は、これには文字が書かれていないんです。

But as you can expect,

しかし、さすがに

you double-click on this and say, "This is a sticky note."

これをダブルクリックして、"これは付箋紙です "と言うのです。

So there's the sticky note.

そこで、付箋紙です。

If we wanted it to be a different color,

欲を言えば、違う色にしてほしい。

we have a few choices.

いくつかの選択肢があります。

We can pick a different color for our sticky note.

付箋の色を選べるんです

Down here in our tray,

この下のトレイに

we have the ability to click and drag

クリック＆ドラッグの機能があります

and add other ones here.

を選び、ここに他のものを追加してください。

We can also click and drag other shapes,

また、他の図形をクリックしてドラッグすることも可能です。

and, of course, there are many choices of shapes

そしてもちろん、形状の選択肢も豊富です。

to choose from.

を選択することができます。

That would be useful

それは便利だ

if you were putting together something like a flow chart,

フローチャートのようなものを作成する場合。

which is a pretty common type of way

というのは、かなり一般的なタイプの方法です。

of planning some kind of functionality

何らかの機能を企画する

inside of a web application.

Webアプリケーションの内部で

We have the ability to draw on the page,

ページ上に描画する機能を備えています。

so I can

だから私は

make some kind of drawing here

描き込む

and it smooths it out for me really nicely.

を使うと、本当にきれいに滑らかになるんです。

We have the ability to put in various kinds of stamps.

様々な種類のスタンプを入れることができるようになっています。

So if I really love this particular sticky note,

だから、もし私がこの特別な付箋を本当に愛しているならば。

I can put hearts on it.

ハートをつけることができる

We also have the ability to add silly things here.

また、ここにはバカバカしいことを追加する機能もあります。

These are just stickers and so forth.

これはただのシールなどです。

And wow, that's a really great idea.

そしてなんと、それは本当に素晴らしいアイデアなのです。

Let's label it as fresh.

フレッシュと表記しよう。

So this is just a very brief overview

というわけで、ごく簡単に概要を説明します。

to give you an idea of what Figma is and how it works.

をご覧いただくと、Figmaがどのようなもので、どのような仕組みになっているかがおわかりいただけると思います。

There are two sides to Figma.

Figmaには2つの側面があります。

Side number one that I'm looking at right here

ここで見ているサイドナンバー1

is this whiteboarding, sticky note, planning,

は、このホワイトボード、付箋、プランニングです。

diagramming type of tool, which is called FigJam.

図解タイプのツールで、FigJamと呼ばれるものです。

And the other side of it

そして、その裏側は

is more typically used for planning webpages

は、より一般的にウェブページの企画に使用されます

and prototyping site designs,

とプロトタイプのサイトデザイン。

where you can put in

を入れることができるところ。

all kinds of pretty elements to the interface,

インターフェイスにさまざまな美しい要素を

line things up,

を並べる。

and truly draw out what a webpage will look like.

を、真に描き出すことができます。

(upbeat music)

(アップビート・ミュージック)