Name: ノーコーディングで3Dウェブサイトを作る方法｜ドラチュートリアル (How to make a 3D website with no coding | Dora tutorial)
Uploaded: 2024-07-06T09:26:44.000Z
Duration: 14 min 10 s

未来形

Hey everyone, in this video, I'm going to show you how to make this real-time 3D website with no coding And we're going to use Dora, a very cool web builder platform that I've just found out recently.

このビデオでは、ノーコーディングでリアルタイムの3Dウェブサイトを作る方法を紹介します。

to 不定詞

So let's get into it So Dora is a web builder platform that gives you the ability to build websites with no coding So it's quite similar to other web builder tools like Webflow or Framers But what makes it different is that they have some really cool features like the 3D features that can let you import any Animated 3D models directly to your website And another cool thing is that you can animate everything in your website using just keyframes and timelines So I find those are pretty interesting.

Doraは、コーディングなしでウェブサイトを構築できるウェブビルダー・プラットフォームで、WebflowやFramersのようなウェブビルダー・ツールとよく似ています。

現在進行形

So now I'm going to give it a try So to get started you need to sign up and then you will get access to the platform So here's what you see.

まずはサインアップして、プラットフォームにアクセスしてください。

So this is a project panel where all of my projects are here So now I'm going to create a new project.

これはプロジェクト・パネルで、すべてのプロジェクトがここにあります。

So I'm going to call it 3D fish All right, so here we are in the main Dora interface so as you can see that the Overall layout is pretty standard and similar to a lot of common tools nowadays like Figma So you can feel right at home.

全体的なレイアウトはごく標準的で、Figmaのような最近の一般的なツールとよく似ています。

So on the left panel We have the pages and the components and at the top here they offer you a couple of tools where you can create a container or text or 3Ds and Here is a menu to switch to different Canvas size like MacBook Pro 14 16 So I'm going to go with 16 because this is where what I'm using right now And here is the timeline toggle where you can turn on and turn off the timeline panels And this is the save indicator to make sure that your progress has been saved and here is the preview button so you should click here to preview your progress and you can always restart to Refresh when whatever you change what you're doing on the main Project file and here is a publish button.

左のパネルにはページとコンポーネントがあり、上部にはコンテナやテキスト、3Dを作成するツールがいくつかあります。そしてこれが保存インジケータで、進捗が保存されたことを確認できます。プレビューボタンがあるので、ここをクリックして進捗をプレビューしてください。メインプロジェクトファイルでやっていることを変更したら、いつでもリスタートして更新できます。

So when you turn this on it will give you a Dora domain where you can just demo your website and preview it as a real website and the right panel is the contextual menus where it will be contextual depends on what you are selecting and In the middle is a main canvas where we will work on so by default this one can be the home page So the first thing I want to do is just to show you Right into how to import the 3d because that's the fun part.

これをオンにすると、ドラ・ドメインが表示され、ウェブサイトをデモしたり、実際のウェブサイトとしてプレビューしたりすることができます。右側のパネルはコンテクストメニューで、何を選択するかによってコンテクストメニューが変わります。

So to import a animated 3d models Let's click here and create a 3d widgets here.

アニメーションの3Dモデルをインポートするには、ここをクリックして3Dウィジェットを作成しましょう。

We have a 3d widgets here so you can go to this menu and Select fill space and it will automatically fill up the horizontal space So it will be really handy when it comes to responsive because it doesn't matter how wide your screen is It will always fill up the space and then we can click here to import the 3d models So currently there are only available for GLTF and GLB format So the perfect place to find those formats is to go to sketchfab.com and then search for a model so I'm going to search for a fish and I'm going to turn on downloadable and animated and then I found this really cool fish right here So, let's check it out.

3Dウィジェットはここにあるので、このメニューから「fill space」を選択すると、自動的に横のスペースが埋まります。comに行って、モデルを検索します。魚を検索して、ダウンロード可能なアニメーションをオンにすると、ここにとてもクールな魚が見つかりました。

So as you can see this fish is super cool.

ご覧の通り、この魚は超クールだ。

This is really good so let's purchase this fish and actually I already purchased it, so I'm just going to purchase and Then from here I can download the file so they give you a bunch of different options But we're going to download the GLTF format So this is what we have after you download and unzip the file So we have a lot of files here and one GLTF and one BIN file so the thing is that you cannot import this file into the 3d widgets because nothing's gonna happen.

この魚は本当においしいので、購入しましょう。実はもう購入したので、購入だけして、ここからファイルをダウンロードします。

The reason is that they need to work with these other files as well So what we need to do is to pack all of these files into one single GLB format So all you have to do is just go to this website I put a link under the description and then drag everything into this square right here and what it does is it will pack everything and Download this GLB file.

そこで必要なのは、これらすべてのファイルをひとつのGLBフォーマットにパックすることだ。

So now we have this file here scene file.

それで、ここにシーンファイルがある。

So let's just rename it as Mr. Fish and Now let's go back to Dora and then import Mr. Fish to our scene All right, here we go we have the fish here so it's looking pretty good so to see it better, let me just change the Background colors into blue just for now so we can see the fish a little bit better So the thing is that if you notice that the fish is not moving so to fix that super easy just click on Mr. Fish Dot GLB and then there's a toggle here.

では、Mr.Fishという名前に変更して、ドラに戻ってMr.Fishをシーンにインポートしましょう。

So just turn on the toggles and then you see that is Animating right now.

トグルをオンにすると、アニメーションが始まります。

だから、かなりいい感じだよ。

And in this 3d scene, you can select the 3d models and move it around and you can use the left mouse to rotate and use the right mouse to pan the camera and Use the scroll to zoom in and zoom out So you can control how it look what angle is gonna be and you can also add keyframe to it Next thing I wanted to do is to create some text layout.

この3Dシーンでは、3Dモデルを選択して移動させることができ、左マウスを使って回転させ、右マウスを使ってカメラをパンし、スクロールを使ってズームイン・ズームアウトすることができる。

So let's just click here to add some text All right, so we have a text here and I want this to be always in the centers of the page doesn't matter how Big the screen is so super simple just go to this constraint and then click here to center it so now it's always being centered aligned to To the canvas so it doesn't matter where you move.

テキストを追加するためにここをクリックしてみましょう。

So that is pretty cool So now I'm going to add the rest of the text for a hero banners and with this text I would do the same To a light center and then I want this text to always follow the big ones To make sure that the spacing is always the same So all I have to do is to click here and then connect it to the bottom of the big text So now when you move the big text it will always follow So next I'm going to work on the headers.

このテキストも同じように、真ん中を軽くして、このテキストが常に大きなテキストに従うようにします。

So just click here to create a container and we can click here to change the color to white and change the radius to maybe give it 70 so we can have a peel like this and move it somewhere around here and then add some text and Then I wanted this button to be responsive as well.

ここをクリックしてコンテナを作成し、ここをクリックして色を白に変更し、半径を70に変更すれば、このようなピールができます。

So what we do is to Connect these dots together All of these dots to connect together so now when you Transform the button the text will always be in the center So you can also use a container to create a simple icon like the hamburger menu So now let's import the Dora logo so I have a SVG here just simply drag it into the canvas and Then we have the logo shows up here.

このように、ボタンを変形させると、テキストは常に中央に表示されます。コンテナを使って、ハンバーガーメニューのようなシンプルなアイコンを作成することもできます。

So let's move it to the right position Alright, so we have the headlines and the header here So I wanted to extend this canvas to be longer so it will be scrollable.

見出しとヘッダーはここにあるので、このキャンバスを長くしてスクロールできるようにしたい。

So all we need to do is to select this Handle right here and then just drag it down.

このハンドルを選択し、下にドラッグするだけだ。

So we can extend this longer and Once we extend this page longer, you see that this Dash light over here that indicate the viewport.

このページを長くすると、ビューポートを示すダッシュライトが点灯します。

So I'm going to preview it and give it a try So You see that when you scroll everything it just goes up So I want this Header to stay sticky at the top and also be responsive as well as the 3D widgets so what we need to do is to select the logo and Then click on this point and then drag it to the viewport top and it will show you this menu so let's just select viewport top and Also here on the left.

このヘッダーを上部に固定し、3Dウィジェットと同様にレスポンシブにしたいので、ロゴを選択して、この点をクリックして、ビューポートの上部にドラッグします。

Let's connect it to the left of the viewport and we'll do the same for this Connect this to the viewport and this also stay at viewport top and also here And for the CTA, I'm going to Connect this to this and also the top also stay sticky to the viewport Alright, so now give it a try Okay, so now when we scroll it will stay sticky and Let me just demonstrate it on the real website To see how it's responsive So now when you change the size of the the browser, it will just be Perfectly responsive.

ビューポートの左側に接続しましょう。そして、これも同じようにビューポートに接続しましょう。そして、これもビューポートの上部にとどまり、ここにもとどまります。そして、CTAのために、これをこれに接続し、上部もビューポートに粘着したままにします。

So now we will do the same for the 3D widgets.

それでは、3Dウィジェットについても同じことをやってみよう。

So let's unlock it and then just drag it to the viewport and Select viewport top now the 3D widgets will always stay on the screen Okay.

ロックを解除し、ビューポートにドラッグして、ビューポートトップを選択します。これで3Dウィジェットは常に画面に表示されます。

So what we're gonna do next is to finish the rest of the text layout All right.

それでは次に、残りのテキスト・レイアウトを完成させよう。

So after I finish the layout, this is what we got So we have the full page here and this is how it look like on the preview.

レイアウトが終わると、このようになります。 全ページがここにあり、プレビューではこのように見えます。

So when you scroll it's looking pretty good so what what I wanted to do here is to Spy it up a little bit by having this numbers being a little bit parallax Comparing to the headlights while scrolling so what we need to do is to go back here and then select these three numbers and then group it into one containers and Let's rename it to numbers and then let's make sure that this Container is under the 3D widgets because I want it to be behind the fish So to make it parallax, we need to turn on this timeline Panel and The way that this timelines work is that if you move this Pointer right here so you can see the viewport is moving, right?

そこで、この数字をスクロール中にヘッドライトと比較して少し視差を持たせることで、少しスパイシーにしたいと思います、このタイムラインの仕組みは、このポインターを動かすと、ビューポートが動いているのがわかりますよね？

So it's indicate that the page is scrolling so what we need to do is just go back to zero and then select the the numbers container here and then set a keyframe as zero and then move the pointers and You can see how it's Reflecting you can zoom out here to see a bigger to see a bigger pictures and Move it way down until this frame where the number just out of the top of the viewport And maybe set a keyframe here And with this keyframe, I'm going to move everything up a little bit so when you So when you move the pointer you see this kind of parallax is going on So it will be much clearer to see it in preview.

つまり、ページがスクロールしていることを示しているわけです。そこで必要なことは、ゼロに戻って、ここにある数字のコンテナを選択し、ゼロとしてキーフレームを設定します、ポインタを動かすと、このような視差が起こっているのがわかる。

So let's take a look So now you see that the number is being parallax, but the position is not correct So once you go back and then go inside the containers Let's lock it so we don't mess with this.

数字が視差になっているが、位置が正しくない。

So go inside containers and then move every individual numbers accordingly so You can see here to make sure that is correct And also move the number two down a little bit and do the same for the number one So this is what you're gonna see So let's give it a preview So now it's working perfectly So that's how you can create a parallax effect using the timeline So let's just unlock this 3D witches.

コンテナの中に入って、個々の数字を適宜動かして、ここが正しいかどうか確認してください。

So I just noticed there's a cut of the 3D witches here.

それで今気づいたんだけど、ここに3Dの魔女のカットがあるんだ。

So let me just Scale it down to fill up the whole viewport space Okay.

では、ビューポートのスペースいっぱいに拡大縮小してみよう。

So last thing I want to do is give it a nice animated background.

だから最後に、背景をアニメーションさせたいんだ。

So super easy I already have this loop animated background in this so all we need to do is to drag it into canvas And Then we have the video here and let's move it way down the bottom of the list here.

超簡単に、このループアニメーションの背景をすでに持っているので、あとはそれをキャンバスにドラッグするだけです。

So it will be Underneath everything and then let's click here to center it and then change this to fill space and Move it to the top like this So we need to create a keyframe for the video as well So for the zero, let's set this video to be at the top position and then just move the whole Pointer down right at when it's reached the end of the page and then move it to The bottom so now it will create this kind of animations To make sure that there's no empty space showing up So this is how the end result look like.

そして、ここをクリックして中央揃えにしてから、これをfill spaceに変更し、このように一番上に移動させます。そこで、ビデオにもキーフレームを作成する必要があります。ゼロのために、このビデオを一番上の位置に設定し、ページの端に到達したときにポインタ全体を下に移動させます。

So overall, I think everything's looking really good The 3D and parallax is really cool So that's how I create a 3D website with Dora in just a few simple steps So if you're interested in learning more about Dora, just follow the link under my description To learn about more in-depth tutorial as well to join the community.

3Dと視差は本当にクールだ。これが、私がドラで3Dのウェブサイトを作る簡単なステップだ。もしドラについてもっと知りたいなら、私の説明の下にあるリンクをたどってほしい。

 So this is the end of my tutorial today So I hope you find this helpful and I'll see you in the next one

というわけで、今日のチュートリアルはここまで。