【2024年最新版】副業Webデザイナー必須ノーコードツールSTUDIOの基本使い方徹底解説
ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2024
- ◆━━━━━━━━━━━━━━━━━━◆
最短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...
✅チャンネル登録もよろしくお願いします！
/ @webdesign-daily-trial
✅Webデザイン受講生体験談がまとまっているサイト『東京フリーランス』
tokyofreelance.jp/
✅副業/フリーランスに興味があるなら、『デイトラチャンネル』
/ @daily-trial
✅Web制作/プログラミングにも興味があるなら、『Web制作チャンネルbyデイトラ』
/ @webby-rx2wi
---------------------------------------
～Webデザイン気になった人はこのリストの動画からチェック～
• Webデザインに興味ある人向け
---------------------------------------
～受講生の生の声はこちら～
• Webデザインコース受講生体験談
---------------------------------------
◆効果音
Otologic：otologic.jp/
#Webデザイナー
#Webデザイン
#未経験
#デイトラ - แนวปฏิบัติและการใช้ชีวิต
Studioの勉強がしたいと思っていたところ、わかりやすい講座をありがとうございます。セクションを追加したところ（動画47分ごろ）、ゆみい先生と同じようにケーキの紹介の下の配置にはならず、、、ヘッダーの下に配置されてしまいます。 原因がわかれば教えて頂けたら嬉しいです。※なお、配置の際には、ケーキ紹介の部分を選択した上で、セクションを導入しており、誤ってヘッダー部分を選択してからセクションを導入しているわけではありません。
ご質問ありがとうございます！
上記、こちらでも再度試してみましたが、動画と同じようにケーキの下に問題なく配置されました。もしかすると、STUDIOのバグなどかもしれません。
レイヤーを移動できれば制作には全く問題ありませんので、ヘッダーの下に配置されてしまったセクションを選択した状態で、キーボードの下矢印キーを押していただき、一番下に来るように移動してみてください！
何かまたお困りのことがあった際は、遠慮なくコメント頂けますと幸いです！
@@Webdesign-daily-trial お忙しい中ありがとうございました。再度試してみます
こんにちは。
質問お願い致します。
コンポーネント化すると、ケーキの画像とテキストがある中央部分はそのままなのですが、左右が白くなってしまいます。
3回ほどやり直しましたが同じようになってしまいました。
また、コンポーネント化する際にプロパティにテキスト1がなく、テキスト2から始まりますがそれも関係があるのでしょうか？
ご質問ありがとうございます！
@annooooon さんがお悩みの箇所は、Menuセクションのことであっていますでしょうか？
もしそうでしたら、コメントに記載いただいている「コンポーネント化」ではなく「リスト化」を使用しますため、そちらご確認ください！
また、白くなるとのことですが、どこかに白い塗りが設定されていると思いますので、レイヤーパネルからその付近の1つ1つのレイヤーをチェックいただいて、ボックスに白い塗りが適用されていないかチェックしてみてください！
いつも動画を拝見させて頂いてます。Studioを今覚えたくて参考にさせて頂いてます。
Aboutセクションのところのグループ化にするところで「ボックスの親子関係が保存できる最大深さを超えたためデータを保存できません」となります。何か解決策はありますか？
ご回答お願い致します。
動画視聴いただき、また、実際に手を動かしていただきましてありがとうございます！
「ボックスの親子関係が保存できる最大深さを超えたためデータを保存できません」というメッセージが出る原因としましては、グループ化の中のグループ化の中のグループ化…と数が多くなって階層が深くなってしまっており、STUDIOでの許容範囲を超えてしまっているためです。
解決策としましては、左サイドのレイヤーパネルを開いていただき、該当箇所で意味のないグループ化（何も子要素がないのに二重でグループ化しているなど）をしているところを探してください！
意味のないグループ化を発見されましたら、⌘（Windowsの場合はCtrl）＋shift＋Gを同時に押すと、グループ化を解除できます！
この作業を意味のないグループ化がなくなるまでやってみてください！
上記で解決できると思いますので、ぜひ試してみてください！
ご回答ありがとうございます。
HPのデザインが一目見てとても良かったのと一から丁寧に動画で教えて下さってて毎日拝見してます。ありがとうございます。
毎日ありがとうございます！