【2024年最新版】副業Webデザイナー必須ノーコードツールSTUDIOの基本使い方徹底解説

Тәжірибелік нұсқаулар және стиль

◆━━━━━━━━━━━━━━━━━━◆
最短1日でWebサイトが作れるノーコードツール『STUDIO』の使い方を初心者の方でも分かりやすく、解説画面付きで徹底解説しました!
プログラミングスキルを一切必要なく、マウス操作だけでWebサイトが作れる『STUDIO』、なんとこの動画をみるだけで、そんなSTUDIOでWebサイトを作れるようになります!
少し長いですが、ぜひSTUDIOにログインして手を動かしながら、この動画で一緒におしゃれなWebサイトを作りましょう!
▼STUDIOはこちら▼
studio.design/ja
▼動画で使用した画像素材集の無料プレゼントはこちら▼
liff.line.me/2002844862-8oxrg...
LINEに登録して「STUDIO」とメッセージを送ってください!
---------------------------------------
目次
0:00 OP
1:00 副業するならノーコードツールでシンプルなWebサイト納品がおすすめ!
2:13 そもそもノーコードツールって何?
3:06 おすすめのノーコードツールは「STUDIO」
5:22 STUDIOで一緒にサイトを作ろう!
5:58 STUDIOの登録
6:50 STUDIOの基本操作 - 操作画面の解説
8:38 STUDIOの基本操作 - ボックスレイアウトとは
10:09 STUDIOの基本操作 - ボックスの配置の調整
12:47 STUDIOの基本操作 - 余白の調整
13:12 STUDIOの基本操作 - マージンとは
14:21 STUDIOの基本操作 - パディングとは
14:55 STUDIOの基本操作 - ギャップとは
15:41 STUDIOの基本操作 - カラーとフォントの登録
18:22 STUDIOでサイト制作 - ヘッダー&ファーストビュー
26:15 STUDIOでサイト制作 - Aboutセクション
32:37 STUDIOでサイト制作 - Menuセクション
42:30 STUDIOでサイト制作 - Shop情報セクション
46:55 STUDIOでサイト制作 - フッター
52:07 リンクの設定
55:32 レスポンシブ設定
1:05:50 アニメーションの設定
1:08:53 サイトの公開設定
1:11:12 まとめ
1:12:27 2日間でスキルが身につく「デイトラライトニング」がおすすめ!
---------------------------------------
✅デイトラライトニング公式LINE:
無料登録で、すぐに使える特典もりだくさん!
■実案件で使える『ヒアリングシート』
■無料でできるチャット個別相談
■月次開催説明会への参加権
限定ニュースの配信や、副業の情報もお届けしています。
liff.line.me/2002844862-8oxrg...
✅Webデザイン公式LINE
無料登録で特典もりだくさん!
liff.line.me/2001034759-5VX90...
✅ライトニングInstagram
InstagramではWebデザインの副業情報について発信しています!
/ yumii_web.design
✅チャンネル登録もよろしくお願いします!
/ @webdesign-daily-trial
✅Webデザイン受講生体験談がまとまっているサイト『東京フリーランス』
tokyofreelance.jp/
✅副業/フリーランスに興味があるなら、『デイトラチャンネル』
/ @daily-trial
✅Web制作/プログラミングにも興味があるなら、『Web制作チャンネルbyデイトラ』
/ @webby-rx2wi
---------------------------------------
~Webデザイン気になった人はこのリストの動画からチェック~
• Webデザインに興味ある人向け
---------------------------------------
~受講生の生の声はこちら~
• Webデザインコース受講生体験談
---------------------------------------
◆効果音
Otologic:otologic.jp/
#Webデザイナー
#Webデザイン
#未経験
#デイトラ

Пікірлер: 16

  • @mi-tt9gv
    @mi-tt9gv28 күн бұрын

    Studioの勉強がしたいと思っていたところ、わかりやすい講座をありがとうございます。セクションを追加したところ(動画47分ごろ)、ゆみい先生と同じようにケーキの紹介の下の配置にはならず、、、ヘッダーの下に配置されてしまいます。 原因がわかれば教えて頂けたら嬉しいです。※なお、配置の際には、ケーキ紹介の部分を選択した上で、セクションを導入しており、誤ってヘッダー部分を選択してからセクションを導入しているわけではありません。

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    27 күн бұрын

    ご質問ありがとうございます! 上記、こちらでも再度試してみましたが、動画と同じようにケーキの下に問題なく配置されました。もしかすると、STUDIOのバグなどかもしれません。 レイヤーを移動できれば制作には全く問題ありませんので、ヘッダーの下に配置されてしまったセクションを選択した状態で、キーボードの下矢印キーを押していただき、一番下に来るように移動してみてください! 何かまたお困りのことがあった際は、遠慮なくコメント頂けますと幸いです!

  • @mi-tt9gv

    @mi-tt9gv

    24 күн бұрын

    @@Webdesign-daily-trial  お忙しい中ありがとうございました。再度試してみます

  • @user-sz7dk5pb6n
    @user-sz7dk5pb6n8 күн бұрын

    動画を拝見しながら学習させていただいてます。 2点質問お願いします。 ①headerのpaddingを「上下左右16px」で先に設定した後で、中のボックスに「左右40px」設定されていますが、なぜ別で設定しているのでしょうか?  headerのpaddingを「上下16px、左右56px」ではダメなのでしょうか? ②テキストの「サイズ・行間・文字間の数値」や「画像サイズのpx数」や「余白のpx数」などは、どのように決めていますでしょうか?  感覚的なことも多いかとは思いますが、基準となるものなどがあるなら最初はありがたいなと思ったのですが、ありますでしょうか? どちらも初歩的な質問で申し訳ありませんが、ご回答頂けますと幸いです。よろしくお願いいたします。

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    6 күн бұрын

    動画見ていただき、またご質問もありがとうございます! ①おっしゃるとおりの方法でも、見た目上は同じデザインの再現ができます!しかし、Webサイトというのは、さまざまな大きさのデバイスで見られますので、このような設定にしております。 詳しくは動画の24分あたりを見ていただきますと、よりわかりやすいのかなと思います! また、実際に2つの方法で組んで並べてみて、画面幅を拡大・縮小してみた時の、それぞれの挙動をご確認いただけると、より理解が深まると思います! ②今回の動画では、あらかじめWebデザイナーさんの方で、Webサイトのデザインを作成いただいており、そちらの指示を元に値の設定をしております! これらをご自身で設定する際には、少なからずWebデザインの勉強や知識が必要となってきます。基本的には、ユーザー(Webサイトを見てくれる方)にとって、見やすい・使いやすいデザインにする必要があります。 もしご興味がありましたら、Webデザインについて調べてみてください! とってもいいご質問をありがとうございました!

  • @user-sz7dk5pb6n

    @user-sz7dk5pb6n

    2 күн бұрын

    @@Webdesign-daily-trial お忙しいご回答いただきありがとうございました! 教えていただいたことを試して理解を深めたいと思います! ありがとうございました!

  • @user-vj5gn4bk3o
    @user-vj5gn4bk3oАй бұрын

    いつも動画を拝見させて頂いてます。Studioを今覚えたくて参考にさせて頂いてます。 Aboutセクションのところのグループ化にするところで「ボックスの親子関係が保存できる最大深さを超えたためデータを保存できません」となります。何か解決策はありますか? ご回答お願い致します。

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    Ай бұрын

    動画視聴いただき、また、実際に手を動かしていただきましてありがとうございます! 「ボックスの親子関係が保存できる最大深さを超えたためデータを保存できません」というメッセージが出る原因としましては、グループ化の中のグループ化の中のグループ化…と数が多くなって階層が深くなってしまっており、STUDIOでの許容範囲を超えてしまっているためです。 解決策としましては、左サイドのレイヤーパネルを開いていただき、該当箇所で意味のないグループ化(何も子要素がないのに二重でグループ化しているなど)をしているところを探してください! 意味のないグループ化を発見されましたら、⌘(Windowsの場合はCtrl)+shift+Gを同時に押すと、グループ化を解除できます! この作業を意味のないグループ化がなくなるまでやってみてください! 上記で解決できると思いますので、ぜひ試してみてください!

  • @user-vj5gn4bk3o

    @user-vj5gn4bk3o

    Ай бұрын

    ご回答ありがとうございます。 HPのデザインが一目見てとても良かったのと一から丁寧に動画で教えて下さってて毎日拝見してます。ありがとうございます。

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    Ай бұрын

    毎日ありがとうございます!

  • @annooooon
    @annooooonАй бұрын

    こんにちは。 質問お願い致します。 コンポーネント化すると、ケーキの画像とテキストがある中央部分はそのままなのですが、左右が白くなってしまいます。 3回ほどやり直しましたが同じようになってしまいました。 また、コンポーネント化する際にプロパティにテキスト1がなく、テキスト2から始まりますがそれも関係があるのでしょうか?

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    Ай бұрын

    ご質問ありがとうございます! @annooooon さんがお悩みの箇所は、Menuセクションのことであっていますでしょうか? もしそうでしたら、コメントに記載いただいている「コンポーネント化」ではなく「リスト化」を使用しますため、そちらご確認ください! また、白くなるとのことですが、どこかに白い塗りが設定されていると思いますので、レイヤーパネルからその付近の1つ1つのレイヤーをチェックいただいて、ボックスに白い塗りが適用されていないかチェックしてみてください!

  • @kou_yan9749
    @kou_yan974911 күн бұрын

    はじめまして!提示出来るスキルを身につけようと、こちらの動画に辿り着きました。とにかく手を動かしてみようと取り掛かっていますが、STUDIOのアップデートの影響なのか最初から動画の通り(配置のアイコン等)ではありません。私は多少のPCスキルはあるのでなんとか動画の通りのレイアウトに持っていけていますが、これが全くの初心者には戸惑って手を止めてしまうのではないのでしょうか?私の独自のやり方でやっていっても良いのか不安にもなります。STUDIOは頻繁にアップデートするのでしょうかね。

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    10 күн бұрын

    コメントありがとうございます! STUDIOなどのサービスはどうしてもアップデートが入るので、その時と同じというのが難しいですね… 分からないことがあれば、質問を受け付けているので、ぜひ質問してください!

  • @kou_yan9749

    @kou_yan9749

    10 күн бұрын

    @@Webdesign-daily-trial 20:52 左のレイヤーパネルを開き、外側のボックスを削除するとありますが、どの様に削除するのか分かりません。コーディングなら削除出来てたのですが...STUDIOではその様に対処するのでしょうか?

  • @Webdesign-daily-trial

    @Webdesign-daily-trial

    9 күн бұрын

    ご質問ありがとうございます! 対処方法としましては、下記の2つあります。 ①動画の通り、ドラッグ&ドロップで内側のボックス(消したくない方)を外側のボックス(消したい方)の外に出す ②外側のボックス(消したい方)を選択した状態で、⌘+Shift+Gを同時に押すとグループ化が解除される ぜひ試してみてください!

Келесі