- [Emmanuel] Any UX project must start from somewhere

- Emmanuel】どんなUXプロジェクトも、どこかから始めなければならない。

and some research and inspiration

そして、いくつかの研究とインスピレーション

is usually the place I start.

は通常、私が始めるところです。

So for us, we'll assume we're building a purchase flow

そこで、私たちの場合は、購入フローを構築することを想定します。

that could be used for a fictive company

というのは、架空の会社に使えそうなものです。

called H+ Sports Supplements and Active Wear

H+スポーツサプリメントとアクティブウェアと呼ばれる

and we'll be designing the purchase flow for mobile.

と、モバイル向けの購入フローを設計していくことになります。

So let's get some inspiration by researching the web

では、ウェブをリサーチしてインスピレーションを得ましょう

for colors and potential ideas for design.

色やデザインのアイディアに

Again, feel free to completely use different colors

ここでも、完全に別の色を使うことは自由です

and designs for your own project.

といったデザインは、ご自身のプロジェクトに

So where I usually go is at pinterest.com

そこで、私がいつも行くのは、pinterest.comです。

but you can also use something like Behance or ArtStation

が、BehanceやArtStationのようなものを利用することもできます。

or any other sites that you find your inspiration.

など、あなたがインスピレーションを受けるサイトをご紹介します。

So for example, for me, this is where I go.

だから、たとえば私の場合、ここに行くんです。

So let's first do some research.

では、まず調査をしてみましょう。

So we're going to do a sports company,

だから、スポーツカンパニーをやるんです。

so let's go ahead and do sports

ということで、スポーツをやっていこう

and because I liked the colors

と、色が気に入ったからです。

that usually comes with soccer themes

サッカーを題材にした作品にありがちな

and soccer companies and things like that,

とか、サッカー会社とか。

I tend to go towards soccer

私はサッカーに傾倒している

and if you scroll down, you're going to find some colors.

とスクロールしていくと、いくつかの色が出てきます。

So what I usually do is scroll on Pinterest

だから私はいつもPinterestでスクロールしています。

and kind of look at the colors that they're suggesting.

と、提案された色を見るようなものです。

So I like this really cool green and blue.

だから、このすごくクールなグリーンとブルーが好きなんです。

This is something that's trendy right now.

これは今、流行しているものです。

You can also find colors like this.

こんな色もあるんですね。

So whatever colors you like, go for it

だから、好きな色は何でもいいんだ。

and put them in the Sketch.

を、スケッチに入れる。

And I'm going to show you in a few seconds

そして、数秒後にお見せするのは

how we put inspiration in Sketch show.

スケッチショーにインスピレーションを与える方法。

One that I wanted to look for is a little bit down in here

私が探したいと思ったのは、この少し下の部分です。

and maybe the designs have changed

そして、もしかしたらデザインも変わっているかもしれません。

or the pictures here have changed

またはここの絵が変わっている

so let's go for the other one that I've seen here,

ということで、ここで紹介したもう1つを目指そう。

it's very similar to the colors that we're going for.

私たちが目指している色にとてもよく似ています。

So there we go, it's right there.

だから、そこにあるんです。

So what I usually do is create inside of Sketch

そこで、私が普段行っているのは、Sketchの内部で作成することです。

an inspiration board.

インスピレーションボード

So let's go ahead and do that

では、そのようにしましょう

and then we'll drag and drop some photos inside of Sketch.

で、Sketchの中に写真をドラッグ＆ドロップします。

So let's go ahead and create a new document.

では、さっそく新しいドキュメントを作成してみましょう。

So open Sketch and then click on new document, choose

そこで、Sketchを開き、新規ドキュメントをクリックし、以下を選択します。

and then click on the little arrow here.

をクリックし、ここにある小さな矢印をクリックします。

This is going to show all the pages inside of Sketch, like so

これは、Sketchの中のすべてのページを表示するもので、次のようなものです。

and the first one let's rename it to inspiration.

で、最初のものはinspirationに名前を変えましょう。

And what I usually do is create a huge board

そして、私が通常行うのは、巨大なボードを作成することです。

and just drag and drop the images for inspiration.

をドラッグ＆ドロップするだけで、インスピレーションが湧いてきます。

So you create a new board by doing a

で新しいボードを作成するわけです。

and then just click on whatever size

をクリックし、任意のサイズをクリックするだけです。

but for our case here it's going to be something

しかし、今回のケースでは、以下のようなものになるでしょう。

that's customized.

カスタマイズされたものです。

So let's just go in custom

では、早速カスタムしてみましょう

and create custom size.

とカスタムサイズを作成します。

So my custom size for this one

そこで、今回の私のカスタムサイズ

and let's just create a brand new preset,

で、全く新しいプリセットを作ってみましょう。

so inspiration board like this

ということで、こんな感じのインスパイアボードです。

and usually I go by a thousand pixels by a thousand pixels.

で、普段は1000ピクセル×1000ピクセルで行っています。

And once you create a custom preset,

そして、一度作成したカスタムプリセットを

this will be available for future use as well.

を、将来的にも利用できるようにします。

So you have it in your custom

だから、あなたのカスタムで持っている

so you can go ahead and create this new one and click on it.

ということで、この新しいものを作ってクリックすると、先に進むことができます。

So you got your inspiration board here.

ここでインスピレーションボードを手に入れたんですね。

So another shortcut for Sketch is to click on command

そこで、Sketchのもう一つのショートカットは、コマンドをクリックして

and scroll with your mouse, basically on the Mac,

で、基本的にMacではマウスでスクロールします。

you can also do the same by using a track pad

トラックパッドを使っても同じことができます。

and scrolling up and down by hitting command and track pad.

で、コマンドとトラックパッドを叩いて上下にスクロールします。

So once you have that you'll have your board center as well.

それができれば、ボードセンターもできるわけです。

Another way to a move in Sketch

ムーヴ・イン・スケッチへのもう一つの道

and this is something that will be useful

そして、これは役に立つものである

once we have multiple boards on our application,

を、アプリケーションに複数枚搭載しています。

it's to use shift and then use the track pad

シフトしてからトラックパッドで操作することです。

or the scroll mouse like so

またはスクロールマウスを使用します。

and then you can move left and right like that.

というように、左右に移動することができます。

So what we'll do is go back to Pinterest

そこで、どうするかというと、Pinterestに戻り

and start dragging images inside of our inspiration board.

をクリックし、インスピレーションボードの中に画像をドラッグし始めます。

I'll maximize both so I can drag

ドラッグできるように、両方を最大化します。

and drop in between application, like so.

というように、アプリケーションの間にドロップしてください。

So I want to have the first image on the top

そこで、最初の画像を一番上に表示させたいと思います

that I saw somewhere here,

を、どこかで見たような気がします。

so just click on it,

をクリックしてください。

drag and drop inside of Sketch

Sketchの中でドラッグ＆ドロップ

and then inside of Sketch just move it to wherever you want.

で、Sketchの中で好きなところに移動させるだけです。

And then what you could do is type some notes here.

そして、ここにメモを入力することができます。

So you can use a shortcut t for text

だから、テキストにはショートカットのtを使うことができます

and just do something like colors.

とか、色みたいなことをすればいいんです。

Let me type some notes here like the green

ここで、緑のようなメモを打ちましょう

and blue, dark blue of this image

とブルー、この画像のダークブルー

and just maximize the text

で、テキストを最大化するだけ

so you guys can actually see it, like so

というように、実際に見ることができます。

and because we're going to have some other things,

というのも、他にもいろいろとあるからです。

let's just move it here and there you go.

ここに移動して、どうぞ。

So one thing that you'll see

そこで、ひとつだけ、ご覧いただきたいのが

as you move things around in Sketch,

を、Sketch上で移動させることができます。

this is not a basic course on Sketch,

これは、Sketchの基礎講座ではありません。

so you may be familiar with this, if you're not,

ということで、ご存じない方もいらっしゃるかもしれませんね。

then you'll see that whenever you move things around,

を使えば、物を動かすたびにそれがわかるようになります。

you're going to have guides.

ガイドが必要です。

So are you're going to have like the amount of pixels

つまり、画素数のようなものがあるのでしょうか？

in between each items and so on an so fourth.

を各アイテムの間に挟むなどして、4回目。

This is very useful when you start positioning stuff

位置決めを始めるときにとても便利です

and also aligning stuff.

とか、ものの位置合わせをしたり。

Hold on, let me just click on auto, there you go

ちょっと待ってください、自動をクリックします。

and then do this, while it's highlighted of course

をクリックすると、ハイライト表示されます。

and make sure that we have the right size.

と、サイズを確認する。

So we're not going to spend too much time

だから、私たちはあまり時間をかけずに

on the text alignment

テキストアライメントについて

but this is basically how you put items in here.

が、ここにアイテムを入れるのが基本です。

So the next thing we want to make sure that we save this.

そこで次に、これを保存しておくことを確認したい。

So let's rename this purchase flow this

そこで、この購入の流れをこのように改名してみましょう。

and I'm going to put it on desktop for my own

と、デスクトップに置いて自分用の

but you can put it anywhere you want,

が、好きな場所に置くことができます。

there we go.

さあ

So I need few other things for inspiration.

だから、インスピレーションを得るために、他のものが必要なんだ。

So I got colors, I want some shapes.

だから、色もあるし、形も欲しい。

So you need to find some shapes

そこで、いくつかの形状を見つける必要があります

and again, these are all things

であり、また、これらはすべて

that you can find for inspiration,

インスピレーションを得るために見つけることができること。

you don't want to replicate the exact same thing,

全く同じものを再現するのは嫌ですよね。

so you want to make sure that you just get inspiration

だから、インスピレーションを得るようにしたいんだ。

from this, then start doing some low-level mock-ups

これを元に、低レベルのモックアップを作成し始めます。

and then do the actual designs.

で、実際のデザインをする。

So, one other thing that I search quite often is UI

そこで、もうひとつ、私がよく検索するのは、UIです。

and if this is a mobile application,

と、これがモバイルアプリケーションである場合。

I'm going to do mobile, like so

モバイルをやる、みたいな。

and I'm going to find more inspiration from there

と、そこからさらにインスピレーションを得るために

and then just scroll and see

をクリックし、そのままスクロールしてご覧ください。

what are the shapes that you really like

あなたが本当に好きな形は何ですか？

or designs that inspire you.

またはインスピレーションを受けるデザイン。

So for example, one of the designs that I really like

だから、たとえば、私がとても気に入っているデザインのひとつは

is a little bit down further when I first did this search,

は、私が最初にこの検索をしたときは、さらに少し下にありました。

this one here.

こちらはこちら

I really liked the round shapes

丸い形がとても気に入りました

and the way they did the design here.

と、ここでのデザインのあり方を考えてみました。

So let me go ahead and drag

それでは、ドラッグしてみましょう

and drop this image as well, like so.

というように、この画像もドロップしてください。

Now this image is really, really big

この画像は、本当に、本当に大きいです

so what I'm going to do

というわけで、どうしよう

and a little shortcut that you can do in Sketch,

と、Sketchでできるちょっとしたショートカット。

is double click on something and then crop it,

は、何かをダブルクリックしてからトリミングします。

click on crop and you click the selection you want to crop

切り抜き]をクリックし、切り抜きたい選択範囲をクリックします。

and this kind of represents the colors

と、このように色を表現しています。

and the shapes that I like,

と自分の好きな形を

so I'm going to crop this.

ということで、これをトリミングします。

So I did my selection and then just crop it like so

そこで、選択範囲を決めてから、このようにトリミングしました。

and then you can just replace the image on your board,

をクリックすると、ボード上の画像を入れ替えるだけです。

like so.

のように。

So I'll put it at the bottom here

ということで、ここの一番下にある

and it's just option, click to the second text

をクリックすると、2番目のテキストに移動します。

and just put some notes in here, like the shapes

と、ここに形状のようなメモを入れるだけです。

and this design, like so.

とこのデザイン、こんな感じです。

So one more thing that I did find in my initial research,

そこでもうひとつ、最初の調査でわかったことがあります。

you can go ahead and do products

製品にすることができます。

because this is going to be an application

これはアプリケーションになるので

that will represent a company that sells products.

製品を販売する会社の代表となるもの。

So maybe get some more inspiration around a company

だから、ある会社を中心に、もっとインスピレーションを得ることができるかもしれない。

that has mobile application, some UI references

モバイルアプリケーションを持ち、いくつかのUIを参照している。

and about products.

と製品について説明します。

And one other design that I really like, that I found,

そして、もうひとつ、とても気に入っているデザインがあります。

I believe it's a little bit down further,

さらに少し下にあるのだと思います。

it's this one here.

それは、この中のこれです。

So I really liked this design,

だから、このデザインはとても気に入りました。

I like the way that this is kind of a blog in a application

アプリケーションの中にブログがあるような感じで気に入っています。

but I'd like to use

を使いたいのですが

kind of a same similar style for products

プロダクト・スタイル

and then you can swipe sideways to the application.

をクリックし、横にスワイプすると、アプリケーションに移動します。

So let's go ahead and drag and drop this image here

では、この画像をここにドラッグ＆ドロップしてみましょう。

and then we can close Pinterest

そして、Pinterestを閉じることができます。

because we're kind of done with our inspiration

なぜなら、私たちのインスピレーションはもう終わったようなものだから。

and I will maximize this here

で、ここで最大化します。

and because this is so big,

と、これはとても大きいからです。

let's just resize this one, like so

これをリサイズしてみましょう。

and just put it on top like that

というように、上に乗せるだけです。

and t's put some notes again.

とtは再びいくつかのノートを置く。

So option, click, let's reshape this

そこで、オプション、クリック、これをリシェイプしよう

and then really like the side scrolling approach.

を経て、横スクロールのアプローチがとても気に入っています。

So this is how I usually go about finding inspirations,

だから、私はいつもこんな風にインスピレーションを探すんです。

I create an inspiration board.

私はインスピレーションボードを作成します。

So I directly create an inspiration board inside of Sketch

そこで、直接Sketchの中にインスピレーションボードを作っています

so I can always go back to it.

だから、いつでも戻れる。

So the idea of this exercise is to really find ideas,

だから、この演習のアイデアは、本当にアイデアを見つけることです。

not that you will replicate exactly the same way

一長一短

but you want to find inspiration for shapes, flows

でも、形や流れのインスピレーションを得たい。

and general colors to inspire you in your design.

と一般的な色で、デザインのインスピレーションを得ることができます。

(upbeat music)

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