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

Video Description

完全未経験からノーコードツールで【Webデザインの基礎】を学べる講座をリリースしました！プロのWebデザイナーのスキルをSTUDIOを使って爆速で習得できます。 ====== 動画をご視聴いただきありがとうございます。 世間で話題の神ツールの使い方、テクニックを初心者向けに発信しています。 いいね・コメント・チャンネル登録して頂けたらとても嬉しいです。 【⬇️チャンネル登録⬇️】 @SaaSpark 【⬇️STUDIOスクールを開校しました⬇️】 https://nocode-gym.com 💻NoCode GYM | 未経験からノーコードWEB制作で副業が4/6から開校！ 【⬇︎STUDIOテンプレート受取り⬇︎】 https://s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg ◆━━━━━━━━━━━━━━━━━◆ 　 ✅全４０PのSTUDIOテンプレート✅ 　　⬇︎ シシガミ公式LINEで配布中 ⬇︎ ◆━━━━━━━━━━━━━━━━━◆ ・ニュース/ブログ etc... ・イベント告知/管理 ・資料配布/リード獲得 ・レスポンシブ ・全40ページ 他所だと2万円相当のテンプレート 今だけ無料配布しています！ ◆━━━━━━━━━━━━━━━━━◆ ✅【プロフィール】シシガミ 普段はIT系サービスの情報を SNSで発信しながら制作/開発 のお仕事をしています。 ・アプリ&サイトのデザイン/開発 ・映像制作&SNSマーケティング ・AIツールを用いた業務効率化 etc... 最近では幅広くデジタル領域の お仕事をお任せいただいています。 ※TikTok 7.8万人フォロワー 【⬇️お仕事のご依頼はこちら⬇️】 [email protected] ◆━━━━━━━━━━━━━━━━━◆ ✅目次 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.完成したページを再確認しよう 4. 03:58:27 ブログサイトのトップページを作成しよう 03:59:37 4-1-1.トップページのベースを準備しよう 04:00:41 4-1-2.メイン記事部分のベースを設定しよう 04:03:00 4-1-3.メイン記事部分のデザインを整える① 04:06:18 4-1-4.メイン記事部分のデザインを整える② 04:09:02 4-1-5.サブ記事部分を作成する 04:12:39 4-1-6.PC表示時に高さが異なる場合の対応 04:14:19 4-1-7.タブレットとモバイルに対応させる 04:16:08 4-1-8.スマホ(ミニ)に対応させる 04:17:49 4-1-9.全体を確認して微調整し仕上げる ✅SNS一覧 【TikTok】 https://www.tiktok.com/@yoshi_web 【Twitter】 https://twitter.com/yshirou 【Instagram】 https://www.instagram.com/shishigami_web/