デジタル庁のWebサイトにも採用されたノーコード(NoCode)開発ツール「STUDIO」でのWeb制作が学べる講座を紹介!「STUDIO」の使い方を学習してWebサイトを制作しよう

ノーコード(NoCode)でのWeb制作が学べる講座を紹介!「STUDIO 」の使い方を学習してWebサイトを制作しよう

記事には広告が含まれています

デジタル庁のWebサイトにも採用されたノーコード(NoCode)開発ツール「STUDIO」の使い方が短時間で、効率よく学べる講座がありましたので紹介します。

今回紹介するのは、動画学習サービス「Udemy」にある講座「コーディング不要!新世代ウェブ制作ツール「STUDIO」で超速レスポンシブウェブデザイン」です。

コーディング不要!新世代ウェブ制作ツール「STUDIO」で超速レスポンシブウェブデザイン

デジタル庁のWebサイトにも採用された「STUDIO」がどんなノーコード(NoCode)開発ツールなのか知りたいと考えている方におすすめの講座です。

ノーコード(NoCode)でのWeb制作が学べる講座:受講対象者

こちらの講座はWebサイト制作初心者の方、企業でウェブ管理を担当している方、プロの方でとりあえずページを立ち上げたいけど、良いツールが見つからない方におすすめです。

こんな人に受講をおすすめしたい

・Webサイト制作初心者
・企業の中でウェブ管理を担当している方
・コーディングを必要としないウェブデザインを行ってみたい方

ノーコード(NoCode)でのWeb制作が学べる講座:コース内容

ノーコード(NoCode)でのWeb制作が学べる講座:コース内容

コース前半では、STUDIOの機能の中から、Webデザインでよく使う動きを学びます。一通り目を通すことで「STUDIO 」の使い方を学べます。

前半動画の各項目は、講座を終えた後、ご自身でデザインを起こす際にリファレンスとしても使用できますので、めちゃくちゃ便利です。

コース後半では、1ページレイアウトのコーポレートサイトを実際にデザインしていきます。

約30分でWebページの立ち上げから、公開できるデザインへの仕上げまでを確認できますので、時間のない方にもおすすめです。

ノーコード(NoCode)でのWeb制作が学べる講座:講座詳細

ノーコード(NoCode)でのWeb制作が学べる講座:講座詳細

講座の流れとしては、今回のWebサイト制作で使用するノーコード(NoCode)開発ツール「STUDIO 」の使い方を学んだ後に、実際にWebサイトを制作していきます。

そのため、初めてノーコード(NoCode)開発ツールを使う人でも問題なく受講できます。

1時間半で全ての動画を見終われますので、効率よく「STUDIO 」の使い方を学びたい方におすすめの講座です。

UdemyのWebサイトに記載されている講座詳細も以下に記載しておきます。

ノーコード(NoCode)でのWeb制作が学べる講座詳細:セクション1 イントロダクション

  • STUDIOとは
  • 講座の構成

ノーコード(NoCode)でのWeb制作が学べる講座詳細:セクション2 動作環境

  • Google Chromeを使用する
  • GoogleChromeのレスポンシブ確認方法
  • アカウントの作成
  • ログイン方法

ノーコード(NoCode)でのWeb制作が学べる講座詳細:セクション3 STUDIOの機能

  • デザインを開始する
  • ツールの配置
  • 要素の編集
  • 要素の追加
  • 要素のコピー
  • BOXレイアウトとは
  • BOXを親子関係にする
  • BOXを角丸にする
  • BOXの装飾(透明度・塗・枠線・シャドウ)
  • BOXの配置の挙動(横配置・縦配置・回り込み)
  • ブレークポイントでの表示切り替え
  • マージンとパディング(図解)
  • 空白を作る(マージン・パディング)
  • タイポグラフィー
  • アイコンの追加・サイズ・色変更
  • リンクの設定
  • スクリーンサイズでの表示/非表示
  • マウスホバー時のデザイン
  • 画像の配置
  • 動画の配置
  • Google mapの配置
  • カスタムiframeの配置(例:Facebookプラグインを表示)
  • メニューを固定する
  • 画像のアップロード
  • ページの新規作成・複製・削除
  • ドロワーメニューの設置方法
  • モーダルウィンドウを設置する
  • TOPページを決定する
  • ヘルプの案内(操作に迷ったときは)

ノーコード(NoCode)でのWeb制作が学べる講座詳細:セクション4 ステップバイステップ(1ページコーポレートサイトを作成する)

  • 新規プロジェクトを作成
  • サイトの構成を確認
  • ヘッダーを作成する
  • ヘッダー:レスポンシブの調整
  • アイキャッチ画像を配置
  • キャッチコピー、お問い合わせボタンを設置(アイキャッチエリア内)
  • キャッチコピー・お問い合わせエリアのレスポンシブ確認
  • サービスエリアを作成する
  • メッセージエリアを作成する
  • お問い合わせエリアを作成する
  • 地図を埋め込む
  • フッターを作成
  • 各セクションにIDを設定
  • リンクを設定
  • デザイン完了

ノーコード(NoCode)でのWeb制作が学べる講座詳細:セクション5 さいごに

  • さいごに

ノーコード(NoCode)でのWeb制作が学べる講座まとめ

「STUDIO 」講座「コーディング不要!新世代ウェブ制作ツール「STUDIO」で超速レスポンシブウェブデザイン」を紹介しました。

講義詳細を見て感じたと思いますが、初心者の方にもわかりやすいように「STUDIO 」の使い方を丁寧に短時間で説明してある講座です。

効率よく「STUDIO 」を学習した方や、軽くノーコード(NoCode)を触ってみたいと考えている方には本当におすすめの講座です。

Udemyの講座には30日間の返金保証がついておりますので、気軽に講座を受講してみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です