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

完全未経験からノーコードツールで【Webデザインの基礎】を学べる講座をリリースしました！プロのWebデザイナーのスキルをSTUDIOを使って爆速で習得できます。

======
動画をご視聴いただきありがとうございます。
世間で話題の神ツールの使い方、テクニックを初心者向けに発信しています。
いいね・コメント・チャンネル登録して頂けたらとても嬉しいです。

【⬇️チャンネル登録⬇️】
‪@SaaSpark‬

【⬇️STUDIOスクールを開校しました⬇️】
https://nocode-gym.com
💻NoCode GYM | 未経験からノーコードWEB制作で副業が4/6から開校！

【⬇︎STUDIOテンプレート受取り⬇︎】
https://s.lmes.jp/landing-qr/16611221...

◆━━━━━━━━━━━━━━━━━◆
　 ✅全４０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】   / yoshi_web  
【Twitter】   / yshirou  
【Instagram】   / shishigami_web