【Webデザイナーを目指す】ノーコードSTUDIOで0からサイト制作【永久保存版】

Рет қаралды 70,921

Күн бұрын

Пікірлер: 89

@SaaSpark Жыл бұрын

【⬇STUDIOスクールを開校しました⬇】 nocode-gym.com 💻NoCode GYM | 未経験からノーコードWEB制作で副業！4/6から開校！【⬇︎STUDIOテンプレート『BtoB Template』受取り⬇︎】 s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg ✅ニュース/ブログ etc... ✅イベント告知/管理 ✅資料配布/リード獲得 ✅レスポンシブ ✅全40ページ 🎁他所だと2万円相当のテンプレート今だけ無料配布しています！！ 💡ご質問は公式LINEへ⬇ s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg ✅目次 1-1. 00:04:28 WEBページのレイアウトを学ぼう 00:05:06 1-1-1. 実際のサイトから学ぶレイアウト(段組み 1-2. 00:06:00 ボックスを横に並べる方法を学ぼう 00:06:50 1-2-1. STUDIOでボックスを作成する 00:11:01 1-2-2. 直感的にボックスをドラッグ&ドロップで並べる 00:14:39 1-2-3. グループとボックスを横に並べる 00:17:25 1-2-4. ボックスに横幅を設定する 00:21:38 1-2-5. 別のボックスを横に並べて練習する 00:25:28 1-2-6. ボックスの並べる数を変更してみる 00:28:03 1-2-7. ボックス3つを均等に並べてみる 1-3. 00:29:30 ボックスを分割(追加)しレイアウトする 00:30:00 1-3-1. STUDIOでボックスを準備する 00:31:37 1-3-2. ボックの中にボックスを分割(追加)する 00:33:31 1-3-3. 分割(追加)したボックスを横に並べる 00:35:47 1-3-4. ボックスをさらに分割(追加)する 1-4. 00:37:21 ボックスの横幅を指定しレイアウトする 00:37:59 1-4-1. ボックスを6：4の比率で並べる 00:40:42 1-4-2. ボックスの横幅が100%を超えた場合の対応を学ぼう 00:44:28 1-4-3. ボックスの横幅を「%」以外で指定してみよう 00:46:48 1-4-4. 片側のボックスサイズを固定する *誤 1-4-5と記載あり 1-5. 00:49:07 応用編：逆向き矢印の使い方を学ぼう 00:50:30 1-5-1. 文書と画像の並び順を理解する 00:52:43 1-5-2. 右向きではなく左向き矢印で並べる 00:54:10 1-5-3. PCとスマホで並び順を変更する 1-6. 00:57:22 レスポンシブデザインを試してみよう 00:57:58 1-6-1. パソコンで表示するレイアウトを作る 01:01:54 1-6-2. PCレイアウトをスマホに対応させる 01:07:34 1-6-3. タブレットにレイアウトを揃える① 01:08:50 1-6-4. タブレットにレイアウトを揃える② 01:11:20 1-6-5. 絶対配置で自由にレイアウトする 2.ブログサイトに必要なパーツを準備しよう 2-1. 01:14:40 テキストのサイズや色を設定し必要なパーツを作る 01:15:12 2-1-1.STUDIOでページを追加する 01:15:54 2-1-2.サイトで使用するカラー(色)を決める 01:19:33 2-1-3.使用するフォントの種類を決める 01:22:46 2-1-4.フォントサイズを決める 01:28:50 2-1-5.レイアウトの大枠を設定する 01:32:33 2-1-6.応用編：CMSで使用するリッチテキスト 01:34:12 2-1-7.グローバルナビゲーションを作成する 01:38:56 2-1-8.ナビゲーションの見た目を整える 01:41:55 2-1-9.STUDIOのリスト化機能を学ぶ 01:45:49 2-1-10.ギャップ機能で間隔を調整する 01:47:44 2-1-11.テキストにリンクを設定する 01:49:51 2-1-12.リンクにホバー設定をする 01:52:02 2-1-13.ナビゲーションの見た目を整える 01:55:04 2-1-14.ナビゲーションをスマホ最適化する 2-2. 01:58:18 STUDIOで行うサイトの基本設定 01:58:20 2-2-1.サイトの全体設定を行う 02:02:25 2-2-2.パーツに応じて最適なタグを設定する 02:04:31 2-2-3.応用編：CMSの機能をオンにしてみる 3.ブログサイトをゼロから作成しよう 3-1. 02:06:29 レイアウトの基本的な枠組みを作成する 02:06:29 3-1-1.完成サイトを確認 02:08:25 3-1-2.6つの作業工程を理解しよう 02:09:43 3-1-3.大枠のレイアウトを組んでいく 02:14:19 3-1-4.レスポンシブに対応する 3-2. 02:16:01 レイアウトにコンテンツを追加する 02:16:16 3-2-1.ヘッダーにロゴを追加する 02:18:16 3-2-2.ナビゲーションを追加する 02:22:29 3-2-3.ナビゲーションにスマホデザインを設定する 02:23:26 3-2-4.記事のカテゴリーラベルを作る 02:26:04 3-2-5.記事タイトルと日付を作る 02:29:34 3-2-6.サムネイル画像を作る 02:30:15 3-2-7.記事の概要文を作る 02:31:13 3-2-8.H2見出しと本文を作る 02:33:39 3-2-9.細かいレイアウト(余白)を調整する 02:37:37 3-2-10.サイドバーで記事リストを作る① 02:45:23 3-2-11.サイドバーで記事リストを作る② 02:49:41 3-2-12.サイドバーで記事リストを作る③ 02:56:20 3-2-13.フッターにコピーライトを作る 3-3. 02:58:25 横幅のレイアウトを調整しよう 02:58:54 3-3-1.横幅の完成状態を確認しよう 02:59:55 3-3-2.横幅を固定するためのボックスを作る 03:01:42 3-3-3.インナーボックスの上下に余白を設定 03:02:26 3-3-4.ヘッダーとフッターの横幅を固定する 03:02:26 3-3-5.ナビゲーションにホバーを設定する 03:06:50 3-3-6.サイドバーで(イン)ホバーを設定する 03:09:27 3-3-7.STUDIOのインホバー機能を学ぼう 3-4. 03:11:11 レスポンシブデザインを設定しよう 03:11:28 3-4-1.現時点でのレスポンシブ状況を確認 03:12:26 3-4-2.ブレイクポイントを追加してみよう 03:13:53 3-4-3.タブレットのレスポンシブ対応① 03:20:06 3-4-4.タブレットのレスポンシブ対応② 03:23:21 3-4-5.スマホ(モバイル)のレスポンシブ対応 03:27:43 3-4-6.スマホ(ミニ)のレスポンシブ対応 03:33:13 3-4-7.レスポンシブ設定の確認方法 3-5. 03:35:50 残りのパーツを追加しよう 03:36:25 3-5-1.SNSボタンを作成しよう 03:41:09 3-5-2.SNSボタンをレスポンシブ設定する 03:43:34 3-5-3.SNSのシェア設定をする 03:47:29 3-5-4.関連記事エリアを作成する 03:51:54 3-5-5.関連記事をレスポンシブ設定する 3-6. 03:53:58 イレギュラーな横幅を設定しよう 03:54:01 3-6-1.グローバルナビゲーションの横幅を調整 03:56:43 3-6-2.完成したページを再確認しよう

@のすけ-k7f 9 ай бұрын

1.WEBページのレイアウトを学ぼう 6:03 1-1ボックスを使った段組み 7:04 1-2ボックスを横に並べる方法 29:40 1-3ボックスの分割/追加しレイアウトする 37:56 1-4ボックスの横幅を指定しレイアウトする 50:30 1-5逆向き矢印の使い方 57:59 1-6レスポンシブデザイン 2.ブログサイトに必要な事前準備 1:15:13 2-1テキストサイズや色の設定をし必要パーツを作る

@user-rm5ns3mx7d 8 ай бұрын

助かります✨

@boringboring Жыл бұрын

非常に助かります。お陰様で、2年前に挫折したプロジェクトを再開することになりました。ご活躍を祈ります。

@秋美吹優 10 ай бұрын

副業Webデザイナーです。普段はwordpressで作成していますが、Studioでの作成も多いみたいなのでちょうど今からStudio触り始めたから良い動画です

@なぬぬ-i4n 2 ай бұрын

今からWeb制作始めようと思ってる者です。大学生です。お話聞かせていただけませんか？

@chantomo-ug7hf 6 ай бұрын

色々な勉強動画見てきましたが、初めて挫折せず見終わることができました！ただ作るだけじゃなく理屈と合わせて説明してくれるので深く理解でき、今後は自分で応用できそうです。素晴らしい動画を配信してくださり、ありがとうございます。

@YukiSarky-fr9lj 9 ай бұрын

とても参考になる動画でした…。いつもレスポンシブで乱れるので苦戦してました。ありがとうございます…、次の動画も期待してます。

@SaaSpark 4 ай бұрын

ご視聴ありがとうございます。次回作そろそろ出ます。。

@boogoo381020 10 ай бұрын

すごく分かりやすかったです。ありがとうございました！！

@ryokofujikawa6909 Жыл бұрын

とってもわかりやすかったです。まだWEBサイトの勉強をし始めたばかりで同じものを作るのに3日かかりました・・・・これまでレスポンシブ設定を全て終わってから微調整していましたが、この動画を拝見してルール通りにやると簡単にできるのでとても勉強になりました。次の動画も楽しみにしています！

@SaaSpark Жыл бұрын

お疲れ様でした！嬉しいコメントありがとうございます✨また次回作にご期待ください。

@yamasaki-i6y Жыл бұрын

公式より分かりやすくて感謝です！毎日見てます♪　HP作成も見たいです！

@SaaSpark Жыл бұрын

本当ですか！とても嬉しいです✨

@ゆめ-d3c 9 ай бұрын

めちゃめちゃわかりやすかったのでCMS編やってほしいです！！！

@SaaSpark 4 ай бұрын

お待たせしました。そろそろ出ます。

@sm-qs9xj Жыл бұрын

公式わかりづらすぎて使わないで3年経ったわ

@菅野晃子-z5t 11 ай бұрын

細かく説明していただいているのでとても見やすく、勉強になります。皆様同様、ホバーのプレビューでの表示ができないところで止まってしまいました。教えてください！！よろしくお願いいたします。

@SaaSpark 10 ай бұрын

LINEでご回答しております！ホバーのプレビューができない理由はホバーをつけた要素の上に表示される要素に背景色がついているためです(この場合liの中の要素に白背景色がついてる)。liにホバーをつけても、その上に重なるpに背景色がついているので、pの下では背景色が変わってますが、表面的にはそれが見えていないということです。

@Minato-h6h Жыл бұрын

この動画めちゃくちゃ良かったです！次のCMSの動画待ってます！

@SaaSpark Жыл бұрын

ありがとうございます😊CMS編乞うご期待ください！

@SaaSpark Жыл бұрын

@@Minato-h6h ご質問ありがとうございます！8月初旬に仕様変更があり、リスト化した要素(ul以下のli)を横並びにするには【ulをWクリック】すると、表示されていない矢印ボタンが表示されます！

@いめか-b9o 2 ай бұрын

デザインの大事なポイントをきちんと説明されている貴重な動画ですね！初心者にも分かるように説明されていてとても素晴らしいです！質問があるのですが、最近コメントに返信されておられないので、公式LINEに質問した方がよろしいでしょうか？

@ディスパ新井 10 ай бұрын

めちゃくちゃ分かりやすかったです！ありがとうございましたm(_ _)m

@hs-sq9pj 10 ай бұрын

navのところにレイヤーであわせても矢印キーがでてきません。基本的な事をすみませんが教えてください。矢印キーと並び位置の箱がでてこないときの対処法が知りたいです。

@SaaSpark 4 ай бұрын

ブルーのレイヤー/枠が表示されてる時はリスト化されているので、矢印が出にくいです。ブルーのレイヤーをWクリックしていると矢印を変更するボタンが出てきます。

@katudonjapan7424 2 ай бұрын

これが無料はすげえ時代だ

@yoonyul0201 2 ай бұрын

リスト化したとき、右側に編集ボックスが出てこない。。。

@Joker-xg2ss Ай бұрын

@yoonyul0201さん、今のバージョンだとリスト化した後の編集ボックスは左側に出てきてますよ。僕も最初戸惑ったので一緒です😅

@noche2664 Жыл бұрын

次回の動画はいつ頃になりますかね？

@無神ルナ 10 ай бұрын

質問があります。1-2-2のボックスを横並びで躓いているのですが、横並びにすると横並びにしたいペアが自動的にちっちゃくなり、動画のようになりません。なにか設定があるのでしょうか？

@SaaSpark 4 ай бұрын

親ボックスの横幅がautoになっているからかと思います。100%に設定してみてください。

@tomatoso-su8640 4 ай бұрын

動画を見て勉強させていただいています🙇‍♀️ 初歩的な質問ですみませんが、最初のテキストボックスやボックスのドラッグ&ドロップが効かず、全て手動で移動させています。おまけに、綺麗に揃えることも出来ていません。 Box2を Box1の隣に置くときも自動的にグループ化されず手動でレイヤータブから移動させる必要があります。最初の最初で躓いてしまい、いろいろ調べているのですが原因がわからず…教えていただけますでしょうか。

@グローバルちゃん 4 ай бұрын

リストにURLを貼る欄は、右側に出ると開設で仰っていますが、レイヤーの上の方に出てきます。そしてリンクがうまく繋がらず、先に進めず。。。

@SaaSpark 4 ай бұрын

そうなんです！仕様の変更で左パネルのレイヤー上に表示されるようになりました。リンクが繋がらない場合はURLタイプの入力列になっているか、そこからエディタ上に正しく紐付けられているか確認してください。分からない場合は概論欄のLINEから質問してください！詳細にご回答します。

@佐藤有咲-n5l 4 ай бұрын

度々すみません。 2:35:30あたりの articleの高さ1000px→autoに変更した際、枠が少し小さくなりました。その後本文を増やすと増えた分上下に拡張してしまい、困っています。どうしたらいいでしょうか？

@SaaSpark 4 ай бұрын

高さは絶対値で指定しない方がいいです。autoはarticleの中に含まれる要素の高さの合計値が自動で設定されます。つまりテキストの行数を増やしたらその分だけ高さが増えます。逆に高さを1000pxに固定すると中の要素の合計が1000pxを超えると枠をはみ出してレイアウト崩れが起きます。高さはautoに設定しましょう。

@だんぼ-e5j 11 ай бұрын

2:19:32のところで、2-1のnavをコピーし貼り付けたて青に変更するとギャップ作成するときにできる間のところに色がつきます。どうしたら直りますか？

@SaaSpark 10 ай бұрын

要素と要素の間に隙間(ギャップ)ができる理由は、①要素の横幅に余白(外側/内側)ができて、要素間に隙間ができている(その隙間から下(親)のレイヤーにつけた背景色がチラ見しているなど) ②親Boxにギャップ機能を用いて子要素の間に意図的にギャップを作っている ③要素にborderをつけているいずれかの要因が考えられます。

@915riri8 Жыл бұрын

時間で何をしてるか分けてほしいです！

@SaaSpark Жыл бұрын

ご視聴ありがとうございます！概要欄かコメントに詳細なIndexが載せてあります。

@915riri8 Жыл бұрын

@@SaaSpark 失礼いたしました。。リスト化とても便利ですね！リスト化したとき、１行に３項目並べたいのですが、縦にしか並んでくれません。どのように並ぶ方向を設定できますか？

@SaaSpark Жыл бұрын

@@915riri8リスト化してできるに対して(liの直上要素)に右矢印を設定すれば出来ますよ！

@SaaSpark Жыл бұрын

@@915riri8 リストの仕様が変更された様です。を選択して全体が青い状態になったらWクリックしてみてください。「→」が選択できるようになります。

@915riri8 Жыл бұрын

@@SaaSpark ありがとうございます！！明日試してみます!

@j.7888 10 ай бұрын

なんかすごくわかりやすそうなので見始めた初心者です。最初にboxを４つ作りテキストをドラッグして貼り付けました。次にそれをダブルクリックしてbox１に名称を変更することができません。ダブルクリックしても何もかわらないのですが、やり方がなにかあるのですか？

@SaaSpark 10 ай бұрын

何らかの原因で選択したいテキストを選択できていない状況ですね。考えられる原因としてはレイヤがー深くなっているとかでしょうか。選択できる状態まで何度もクリックしてテキストを選択できるか試してみてください。正しく選択できればテキストの入力モードになります。該当のテキストを正しく選択できているかどうかは、レイヤー機能を使えば確認もできます。詳細は以下のURLをご覧ください。 help.studio.design/ja/articles/5838449-%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%91%E3%83%8D%E3%83%AB

@佐藤有咲-n5l 4 ай бұрын

こんにちは最近studioの勉強をし始めました。分からないところがあるんですがリスト化した後、１つを操作すれば他も同じ様に変更するはずなのになりません。 1番最初のやつを変更するとそれだけが単体で変更され、２つ目の方を変更すると全部が変更します。どうなってしまってるのでしょうか？何回もやり直ししてますが、同じ様になります。教えていただけたらありがたいです。

@SaaSpark 4 ай бұрын

ご返信遅れました！可能性としてはリスト化のタイミングで、ulが2つ出来た可能性があります。レイヤーパネルをみてulの中にulができていないかを確認してください。もしくはリスト化のタイミングで、1つ目のliはそのままに、2番目以降がul>liのリストになっている可能性があります。いずれにせよレイヤーパネルを確認してください。分からない場合は概論欄のLINEから質問してください！詳細にご回答します。

@幸-s9g 10 ай бұрын

こんにちは、ライブプレビューの時に、タブレットやスマホの画面を見るには、どういった操作をすればいいですか？

@SaaSpark 10 ай бұрын

各デバイスからライブプレビュー用のURLにアクセスするか、ブラウザの開発コンソールを利用して表示を変更してみてください！

@幸-s9g 10 ай бұрын

ありがとうございます！出来ました！

@前佑季 11 ай бұрын

背景ホバー何回設定してプレビュー見てもできません。どなたか理由教えてください😭文字だけはホバー出来ます。

@SaaSpark 11 ай бұрын

①設定対象の要素が異なる(上に別レイヤーが重なってるため反映されて見えない) ②最初のアイテムだけに適用されているどちらかだとは思いますが、別の方で①が原因で反映されていない方がいました。より的確なアドバイスが必要な場合は概要欄のLINEから問い合わせしてください！プロジェクトに入らせていただきチェックします。

@今野靖 Жыл бұрын

また、1:55:50あたりで、モバイルでのリスポンス対応で「折返し」や「下向き」などのマークが出てきません。何か問題があるんでしょうかね？

@SaaSpark 11 ай бұрын

エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています！ app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c

@今野靖 11 ай бұрын

@@SaaSpark様、を選択した状態でenterを押すと「並びの向き方」が表示されるようになりました。有益な動画に感謝しております。

@akihiro423 Жыл бұрын

新しいバージョンと仕様がかなり変わってますかね？こういった動画ではつきものかと思いますが、対応する機能がどこにあるか探すのに時間がかかってしまって残念ですね…

@SaaSpark Жыл бұрын

エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています。リクエストいただければ現状verの扱い方も解説いたしますね。 app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c

@幸-s9g 11 ай бұрын

質問ですが、2時間19分32秒の所で、navを青に変えようとしたら、行間の線しか青にならず、全体は白のままなのですが、どうすれば全体を青に変えられますか？

@SaaSpark 11 ай бұрын

@だんぼ-e5j 11 ай бұрын

あと、ホバーの設定ができるのに反映されません。見ていただきたいのですが、可能でしょうか？

@SaaSpark 11 ай бұрын

どちらも対応可能なので、公式LINEからご連絡ください！

@街灯chan 2 ай бұрын

1:16:00

@だんぼ-e5j 11 ай бұрын

立て続けにすみません。同じところでパディングを10と15に設定する際に、数字を一桁しか入力できません。どのようにしたらいいですか？

@SaaSpark 10 ай бұрын

正しく数字を入力できていない、入力してもEnterボタンなどを押せていない可能性があります。半角数字での入力、Enterキーもしくはテンキー矢印キーの上下で数字を変動させてみてください。

@今野靖 Жыл бұрын

「リンクにホバー設定をする」について、その設定が出来ません。私のパソコンはWindows11なんですけど、何か問題があるんでしょうかね。

@SaaSpark 11 ай бұрын

いえ、Windows11かどうかでホバー設定の可否が変わるということは考え難いです。ホバーは設定できるが反映されない、ホバーを設定するボタンが押せない、どちらになるでしょうか？

@今野靖 11 ай бұрын

ありがとうございます。「ホバーは設定できるが反映されない」です。何故でしょうか？

@SaaSpark 11 ай бұрын

@@今野靖実際に画像や挙動を見てみないとわからない点もあるので、概要欄の公式LINEでご連絡いただけますでしょうか？作業プロジェクトを直接確認できれば具体的なアドバイス可能です！

@ブル-i6y 3 ай бұрын

コメント失礼します。概要欄にLINEが見当たらないのですが、(TikTok、Twitter、Instagramはありました)どこに記載されているのでしょうか？

@グローバルちゃん 4 ай бұрын

URLリンクがうまくいきません。。。

@SaaSpark 4 ай бұрын

詳細な質問回答はLINEでやってますのでぜひ！

@れいにー-o2v Жыл бұрын

初めまして。有意義なわかりやすい動画ありがとうございます。動画を拝見しながら同じものを作って学習しているのですが、1時間58分38秒の辺りでやっているレスポンシブデザインの為にリストを横並びにするところで、横並びにするための矢印が出ません。グループ化、リンク指定、ホバー時の色付けまでは出来たのですが、全く同じ手順で進めていて矢印が出ないのは何かミスが原因でしょうか？仕様的な変更があったのでしょうか？お答えいただけたら幸いです。次の動画も楽しみにしています！

@SaaSpark Жыл бұрын

再生時間の正確な所をいただけますか？直近同じような報告を受けているので仕様変更箇所について仰られている可能性が高いです。 8月初旬に仕様変更があり、リスト化した要素(ul以下のli)を横並びにするには【ulをWクリック】すると、表示されていない矢印ボタンが表示されます！

@れいにー-o2v Жыл бұрын

お返事ありがとうございます🙇‍♂️ すみません💦 見ながら時間の記入したはずがすごくズレてました💦 1時間52分03秒（2-1-13）でやっている部分でした。やはり仕様変更があったんですね！今すぐに立ち上げられる状態では無いので確認はできませんが、お返事の内容的にそこの部分だと思いますので帰宅次第試してみます！ご丁寧なお返事ありがとうございます🙇‍♂️

@SaaSpark Жыл бұрын

@@れいにー-o2v ぜひ試してみてください！まだ質問も多くないので今なら答え放題です✨なんでも聞いてください！

@SaaSpark Жыл бұрын

エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています！ app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c

@れいにー-o2v Жыл бұрын

ご丁寧にありがとうございます！その後問題なく出来ました！！もう少しで終わりそうなので参考にさせていただきながら学習させていただきます！

@ぐっど-u3g Жыл бұрын

とても分かりやすい動画ありがとうございます！ 1:57:34のスマホのメニュー内枠線につきまして、全てに枠線をつけると重なる部分が2pxになり表示されます。ここはどのように解消されたのでしょうか？ cssでいいますとborder-collapse: separate;が初期設定なのか、枠線が一部太くなります。