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

[@yukat551221]

非常に参考になる動画でした！ 同じようにやったつもりなのに、レスポンシブがうまくいってなかったり、問題山積みですが、何度も見返してお勉強させていただきます。 ありがとうございます😊

[@taka-0906]

Studioの基本の使い方を学ぼうと思い、この動画拝見しています。 １つ質問があるのですが、最初真ん中の編集画面に左側のサイドバーが重なって いますが、8:09あたりで重ならないように編集画面を右側に移動させる操作を されていますが、やり方が再現できません。初歩的な質問で申し訳ないですが、 よろしくお願いいたします。

[@Webdesign-daily-trial]

ご質問ありがとうございます。 私の場合はマウスパッドで2本指でスライドさせることで移動しています！ マウスをご利用の場合は、⌘キー（Mac）またはCtrlキー（Windows）を押しながらスクロール操作を行うことで、表示倍率を細かく変更することができます。

[@taka-0906]

@@Webdesign-daily-trial おかげさまで解決しました。ありがとうございました。

[@junkoishihara6083]

スタジオのテンプレートを利用して大枠は出来たのですが、グローバルメニューとレスポンシブの調整が分からないため、こちらの動画を拝見しました。 質問なのですが、ヘッダーのお店の名前は画像にしていますが、その理由は何でしょうか。テキストにするのは、デメリットがありますか。ご指南いただけると幸いです。

[@Webdesign-daily-trial]

動画ご覧いただきありがとうございます！ ヘッダーのお店の名前をテキストではなく画像にする理由ですが、 お店や企業は、想いのこもったオリジナルのロゴマークでブランディングされていることが多く、 そのロゴマークを使用したい場合は画像でしか設置できないためです。 テキストでも全く問題はございません。 参考になりましたら幸いです！

[@オレンジ-q7b]

めっちゃ参考になりました！ ちなみに主さんはホームページ制作の単価はいくら位でやってますか？

[@Webdesign-daily-trial]

動画視聴いただきありがとうございます。 ホームページのボリュームや作り方にもよりますが、10~40万円くらいです！ 参考になりましたら幸いです！

[@taka-0906]

この動画で基本操作の勉強させてもらっています。 わかりやすい説明で非常にためになります。 1つ質問ですが、49:29あたりでリスト化したボックスを 横並びにされていますが、動画の様に「→」のアイコン が表示されません。 (ulタグは水色になっており、そこを選択しています。) 原因として何が考えられるでしょうか? お忙しいところ恐れ入りますがよろしくお願いします。

[@Webdesign-daily-trial]

ご質問ありがとうございます！ リストの編集をする際は、青い枠をダブルクリックするか、キーボードのエンターキーを押すとデザインの編集ができるようになります！ 詳しくはこちらのSTUDIO公式の記事をご確認ください 🙇‍♀️ help.studio.design/ja/articles/4129102-%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E7%AE%A1%E7%90%86%E6%96%B9%E6%B3%95#:~:text=%E3%83%AA%E3%82%B9%E3%83%88%E5%8C%96%E3%81%97%E3%81%9F%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%AF%E3%80%81%E4%BB%A5%E4%B8%8B%E7%94%BB%E5%83%8F%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E6%9E%A0%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%E3%81%93%E3%81%AE%E6%9E%A0%E3%81%AE%E9%9D%92%E3%81%84%E9%83%A8%E5%88%86%E3%82%92%E3%83%80%E3%83%96%E3%83%AB%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B%E3%81%8B%E3%80%81Enter%E3%82%92%E6%8A%BC%E4%B8%8B%E3%81%99%E3%82%8B%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%B7%A8%E9%9B%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E7%8A%B6%E6%85%8B%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

[@saaaa0909]

@@Webdesign-daily-trial 初めまして！私も同じ状態になり困っていたのですが、原因がわかったのでシェアさせてください！ インスタのアイコンの画像などを、Box→imgに切り替えてからリスト化したところ、”→”のアイコンが出てきて横並びにすることができました。私の場合は、Boxのままリスト化したことが、横並びにできない原因のようでした。

[@taka-0906]

再コメント失礼します。 もう1つ質問ですが、20:46あたりから外側のBOXを削除されていますが、 内側のBOXを選択してドラッグアンドドロップしてもうまく移動できません。 また、そのあと外側のBOXを削除されていますが、右クリックしても 削除メニューが出てきません。 そもそも根本的にやり方がおかしいのでしようか？よろしくお願いします。

[@Webdesign-daily-trial]

ご質問ありがとうございます！ ブラウザはGoogle Chromeを使用されていますでしょうか？STUDIOはGoogleChromeでの動作を推奨されていますので、ご確認ください。うまく動かなくなった際は、基本的に更新ボタンを押して再読み込みいただければ解消することが多いです。 また、レイヤーパネル上では、右クリックを使用することはありません。消したいレイヤーを選択いただいてキーボードのバックスペースキーを押してください。

[@taka-0906]

@@Webdesign-daily-trial うまく移動できなかったのはグループ化されていたからのようです。 解除したらうまくいきました。ありがとうございました。

[@ようひな-z7i]

コメント失礼いたします。 56:30 レスポンシブ対応のここで、コピーライトのボックスの横幅を100%にすればokと操作されているように見えますが、このボックスはもともと100%になっています。 フッターの横幅が1280pxで固定されているから、だと思うので「フッターの横幅を」100%にする、という事で間違いないでしょうか？

[@Webdesign-daily-trial]

ご覧いただきありがとうございます！ おっしゃる通り、コピーライトのボックスではなく、その外側のフッターのコンテンツ幅を100%に設定ください！ よろしくお願いします。

[@user-qc6zw6wz4j]

コメント失礼致します！ リンク設定についてですが、テキスト、リンクを設定した後に、about, menu,shopをクリックしても反応しません💦　反応するにはどうしたらいいか教えて欲しいです！

[@Webdesign-daily-trial]

ご質問ありがとうございます！ クリックして飛ばしたいセクションに、正しくIDを設定できておりますでしょうか？ 詳しくは下記のSTUDIO公式ガイドを参照いただけますと解決できると思いますので、チェックしてみてください！ help.studio.design/ja/articles/4055397-%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E7[…]A8%AE%E9%A1%9E%E3%81%A8%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86

[@user-qc6zw6wz4j]

@@Webdesign-daily-trial 返信ありがとうございます！解決できました🙇　いつも勉強で見させてもらっています！

[@高山敏樹-x5c]

はじめまして！ゆみいさん。 質問ですが、テキスト文字と画像の変更のみで商用利用するのは可能でしょうか？ SNSのロゴはそのまま使用して問題ないのでしょうか？ 公式サイトには色の変更等いろいろあって、よく分からず、お尋ねしました！ よろしくお願いいたします。

[@Webdesign-daily-trial]

ご質問ありがとうございます。 恐れ入りますが、著作権の観点から改変しての商用利用はお控えいただきますようお願いいたします。 また、SNSのロゴは各SNSのロゴの公式ガイドラインをよくご確認のうえ、ご自身の責任にて使用ください！

[@mi-tt9gv]

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

[@Webdesign-daily-trial]

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

[@mi-tt9gv]

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

[@user-qc6zw6wz4j]

またまたコメント失礼いたします！ studioは三角のグラフなどホームページ内で挿入また編集など可能でしょうか？ できるのであればそのやり方を教えて欲しいです😭🙇

[@Webdesign-daily-trial]

ご質問ありがとうございます！ STUDIOにはグラフを作成するような機能はありません。 Excelやデザインツールなどでグラフを作成して画像として保存いただき、 STUDIOに画像として配置するといいと思います！

[@user-qc6zw6wz4j]

@@Webdesign-daily-trial かしこまりました！ご回答ありがとうございます🙇

[@ゆず-u4y7y]

こちらの動画を参考にしながらSTUDIOを使い始めてみました！ そこで質問です。 Josefin SansはBOXの中央に文字を持ってくることはできないのですか？ 文字を打つと上部はBOXの枠線にぴったり付いていて、下には余白があります。 padding 2→0にしても余白があるため、見た目、送信ボタンの中央に文字が来ていないです。 これは仕方ないことなのでしょうか？ プロのデザイナーさんはどう対処しているのでしょうか？ 44:13

[@Webdesign-daily-trial]

動画ご視聴いただきありがとうございます！ また実際に手を動かしていただいて嬉しいです！ ご質問ですが、上から目線のような言い方になってしまい恐縮ですが、目の付け所や気づきが素晴らしすぎると思いました！！！ ほとんどの方が、この違和感には気づかずにスルーされてると思います！ 【原因】 前置き長くなりましたが、今回、ボックスの下側に余白が生まれているのは、フォントのベースラインに由来するものです。 今回は「SEND」なので、ベースラインの下に飛び出る文字はないのですが、例えば、「g」「j」「p」などは下に飛び出ます！ そのベースライン下に飛び出るフォントのことまで考慮されたボックスの大きさとなっているため、今回はボックスの下側に余白が生まれているように感じたということです！ 【解決策】 上記を踏まえた上で、「BOXの中央に文字を持ってくることはできないのですか？」の解決方法としては、SENDのテキストボックスの上のみに、バランスを見ながら、マージンを数pxつけてあげると、文字が下に下がって真ん中に来ると思います◎ ぜひやってみてください！

[@中村崇博-r8m]

はじめまして。コメント失礼します。32：16でパディングを設定して レスポンシブで画面幅を縮小しときにテキストが折り返されるようですが、 折り返されません。どこかで設定を間違っているのでしょうか。

[@中村崇博-r8m]

flexの設定すれば解決しました。すみません。

[@Webdesign-daily-trial]

お疲れ様です！ コメント返信遅くなり申し訳ございません！ 解決されたようで安心しました。

[@car_mania502]

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

[@Webdesign-daily-trial]

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

[@car_mania502]

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

[@Webdesign-daily-trial]

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

[@Naoko-xp]

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

[@Webdesign-daily-trial]

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

[@Naoko-xp]

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

[@Webdesign-daily-trial]

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

[@annooooon]

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

[@Webdesign-daily-trial]

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

[@林-o8v]

こんにちは、クラウドワークスで仕事はありますか？

[@Webdesign-daily-trial]

ご質問ありがとうございます！ クラウドワークスでも仕事はありますが、どうしても単価が安くなりがちです！ 営業の仕方については、デイトラライトニングでみっちり教えておりますので、ご興味あればぜひ！

[@林-o8v]

@@Webdesign-daily-trial ありがとうございます。

[@Port712]

41:31

[@ひい-z5i]

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

[@Webdesign-daily-trial]

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

[@ひい-z5i]

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