【初心者向け】Studio・Wixを使ったノーコードWeb制作の独学法

この記事では、HTMLの知識がなくてもWebサイトを作れる人気ツール「Studio」と「Wix」について、未経験からの学習方法を解説します。

StudioやWixは「ノーコードツール」と呼ばれ、AIとあわせて今のWeb業界では欠かせない存在になりつつあります。

以前は小規模サイトでの利用が多かったものの、最近では大企業のサイト運用にも導入されるなど、活用の幅が広がっているのを感じます。

登録は無料で始められるので、初心者でも元手ゼロ円でOK。デザインソフトも必要ありません。

これから学ぶのにぴったりのスキルです。ぜひ挑戦してみましょう！

ノーコードツールの基本知識や学ぶメリット、副業につなげる方法については、以下の記事に詳しく解説しています。

Studio・Wixが学べる動画

YouTubeも手軽で便利ですが、Udemyは講師の質が高く、基礎から応用まで体系的に学べるのが魅力です。

操作方法だけでなく、STUDIOやWebサイト制作全般の知識まで幅広く学べるので、初心者にも安心ですね。

ノーコードで超速WEB制作　STUDIO学習完全パック（初級編・中級編・上級編）

全5.5時間 ｜ 評価：4.5

このSTUDIO学習パック動画は、初級・中級・上級と分かれているので、初心者でも段階を追ってスキルアップできます。

Studioの基本的な理解はもちろん、実際のサイト制作までこれ一本で学習することができます！

さらにこの動画をマスターした後は、

②ノーコードで超速WEB制作　STUDIO学習アドバンスパック（発展編・実践編）

という上級編のコースもあるので、より実務に近い仕事に直結するスキルを学ぶことができますよ。

Studio・Wixが学べる書籍

知識ゼロからノーコードではじめる Studio Webサイト制作入門

Studioの基本操作が学べる入門書です。まずStudioを触りたかったら、これ。

未経験でも、実際のWebサイトを作りながら、Studioを使ったWebサイト制作を学ぶことができます。

ノーコードでつくるWebサイト　ツール選定・デザイン・制作・運用が全部わかる！〈STUDIO、Wix、ペライチ〉

Studio、Wix、ペライチという日本の3大Webサイト制作のノーコードツールについてまとめた本です。

ノーコードツールについて詳しく知りたい方、また３つそれぞれのサイトの作り方をまとめて学びたい方におすすめです。

生成AI、ノーコードツールでスキルアップ　稼げるWebデザイナー

ノーコードツールの学習だけでなく、ノーコードツールや生成AIを生かして、どうWebデザイナーとして稼いでいくかのノウハウが入っています。副業やフリーランスで稼ぎたい人向けの書籍です。

Studio/Wixをスポットで学べる講座

スクールに通うほどではないけれど、独学だけでは不安…そんな方におすすめなのが、専門家から直接学べる単発でのスポット型オンライン講座です。

ストアカ | オンラインでマンツーマン授業

オンライン講座プラットフォーム「ストアカ」なら、1コマ数千円〜で、専門家の講座を受講できます。

動画を一方的に見るのではなく、講師に質問ややり取りをしながら学べるのが魅力です。

• 会員登録は無料
• 価格も手頃
• マンツーマンで指導してもらえる
• わからないところをピンポイントに聞ける

と、利用しやすさが人気の秘密。

初心者向け🔰ノーコードで始めるStudioホームページ制作講座

60分間：2,000円

60分間、マンツーマンでStudioを教えてくれます。

完全初心者からデザイン経験者まで、幅広いレベルに対応しています。講師は男性。

一対一のレッスンなので、初心者でも丁寧に教えてくれますし、不明な点はその場で解決することができます。

ノーコード・STUDIO（スタジオ）マンツーマン質問対応講座

90分間：3,000円

独学でつまずいてしまった人でも、この講座で悩みをピンポイントに解決することができます。講師は女性。

注文者の困りごとに合わせて90分の講座内容をカスタマイズしてくれるのも魅力。

説明がわかりやすいと評判で、人気の講座です。

無料でStudio/Wixを学びたい場合

まずは無料登録しよう

StudioもWixも無料なので、まずは新規登録をしましょう。

Studio公式サイト  

Wix公式サイト  

1.公式チュートリアルやヘルプを活用する

Studioの公式チュートリアル

Studioの公式サイトにログイン後、左側メニューの「使い方を学ぶ」をクリック。

• ヘルプ（よくある質問をまとめた公式ガイド）
• 使い方を説明したYoutube
• ユーザー同士のコミュニティ
• ビデオ講座

などがあります。

Studioの公式YouTubeチャンネルはこちら。

https://www.youtube.com/channel/UCh4_wCvICgiHg0utNFziOoQ

Wixの公式チュートリアル

wixの日本法人では、日本人向けに、wixブログでチュートリアルを公開しています。

WixBlog：ja.wix.com/blog

Wix Japanの公式YouTubeチャンネルはこちら。

https://www.youtube.com/@wixjapan

　

公式チュートリアルは情報量が多すぎて「ちょっとわかりにくい…」と感じる方もいるかもしれません。

そんな時は、最初に紹介したUdemyの動画講座やストアカの単発レッスン、書籍などを利用するのがおすすめです。必要なポイントを体系立てて学べるので、理解しやすく進められますよ。

2.とにかく手を動かして模写する

だいたいの操作に慣れてきたら、実際に自分でサイトデザインを作ってみましょう。

とはいえ、真っ白な状態からいきなり作れる人は少ないと思います。

そこでおすすめなのが

模写、です。

幸い、STUDIOやWixには模写に最適なテンプレートがたくさん用意されています。

やり方はシンプル。

まず適当なテンプレートをひとつ開き、それとは別に空白のテンプレートも別画面で開きます。その空白のテンプレートの中に、選んだテンプレートとまったく同じデザインを再現していきます。

画像は別の画像でもOK、テキストはコピペでも大丈夫です。

模写を繰り返すことで作業スピードが上がるだけでなく、デザインの引き出しもどんどん増えていきます。テンプレー

自体が流行を押さえたものなので、学習には最適ですよ。

※模写したサイトは公開しないでくださいね！

3.オリジナルサイトを作ってみる

模写に慣れてきたら、オリジナルサイトにもチャレンジしてみましょう。

とはいえ「案件がないと、どんなサイトを作ればいいのかわからない…」という人も多いですよね。

そういう時、私は、古いデザインの会社サイトを勝手にリニューアルしてみる練習をしています（もちろん絶対世には出しません！）

・大手ではなく、中小企業や飲食店など小規模で情報量の少ないサイトを選ぶ

・メニューやコンテンツを抜き出す

・STUDIOやWixのテンプレートにはめてみる

・もしくは、テンプレートを参考にしつつ、自分なりのデザインで構築する

・練習なので画像は素材サイトのサンプルでOK

ということをしています。

ローカル環境で練習する場合は会社名やロゴをそのまま借りても問題ありませんが（ローカルでの練習なので）、STUDIOやWixはクラウド上で扱うため、念のため、必ず会社名やロゴは架空のものにして、全く別サイトとして作るのをおすすめします。万が一でもネットに上がってしまうといけないので。誤って公開しないことが大前提です。

なお、オリジナルサイトのクオリティを上げたいなら、模写だけでは限界があります。やはりデザインの学習がおすすめです。

学習のステップはざっくりこんな感じ。

1. ツールの操作方法を知る
2. テンプレートを修正できる
3. オリジナルサイトを作れる

ただし、この「2.テンプレート修正」から「3.オリジナル制作」へのステップには大きな壁があります。

Studio・Wixを学べるWebデザインスクール一覧

デザインスクールでも、StudioやWixを学ぶことができます。

学べるWebデザインスクールの一覧は以下の記事にまとめています。

スクールで学ぶ理由

StudioやWixの操作だけであれば、わざわざスクールに通う必要はありません。この記事で紹介している独学のやり方で十分。

ただし、Webサイトの見た目を整える「デザイン」は、やはりプロから学ぶのが一番。独学では限界を感じやすい分野です。

以下の記事紹介しているスクールでは、Webデザインの基礎から、StudioやWixを使ったサイト制作まで、いちから学べるカリキュラムが用意されています。

また、Studio・Wixだけでなく、その他のECショップ限定のノーコードツールなどを学べるスクールもあります。

スクールであれば、卒業後の就職転職サポートや副業サポートが充実しているところもあるので、将来Webデザイナーとして働きたい、副業で案件を獲得したいのであれば、スクールに通うことは近道になります！

Studio / Wixどっちを学ぶべき？選び方のポイント

ノーコードでWeb制作を始めるなら、まずは人気の「STUDIO」か「Wix」のどちらかを学ぶのがおすすめです。

でも、どちらから始めるべきか迷いますよね。

まずはどちらかに集中して学ぶのがおすすめ

STUDIOもWixもどちらも優れたツールですが、最初から両方を同時に学ぼうとすると中途半端になりがちです。

まずは自分に合う方を選んで集中して学ぶことで、操作に慣れやすく、成果物も形にしやすくなります。

もちろんそれぞれに独自のクセはありますが、基礎をひと通り理解できれば、もう一方を学ぶときもスムーズに進められますよ。

デザイン重視・日本製で安定しているのはStudio

国内シェアNo.1

Studioは日本製のノーコードツールで、国内シェアもNo.1。今一番注目されているツールです。

海外製ツールに比べて日本語対応がスムーズで、サポートや情報も充実しているのが安心ポイントです。

日本向けに洗練されたテンプレート

洗練されたテンプレートが多いのもSTUDIOの魅力です。

Wixもデザイン面で劣るわけではありませんが、やはり「日本向けに最適化された洗練さ」を感じられるのはSTUDIOならでは。

また、デザインの自由度が高く、センスを活かして自分らしいサイトを仕上げたい方にぴったりのツールです。

更新画面も使いやすい

さらに、STUDIOで制作したサイトは、納品後にクライアントが更新画面を使って更新していくことが多いですが、その画面も日本人向けでわかりやすいのも大きな強み。

納品後に「使いづらい！」と怒られることがなく、安心して提供できます。

これもやはり日本製だからこそのメリットですよね。日本ならではのサポート体制も安心感があり、対応もスピーディーです。

あと、これはコーディングに触ったことがある人ならわかると思うのですが、paddingとかmarginとかを数値で指定できるので、HTMLの知識を使いつつサイト構築できる面白みもあります。

なのでコーダー出身であれば、余計Studio推しです。

Studioでできないこと

STUDIOは、誰でも簡単にクオリティの高いWebサイトを作れる優れたツールですが、実は苦手な分野もあります。

たとえば、ショッピングカート機能は標準でついてません。

さらに、

• 予約カレンダーなどの高度なフォーム
• 動画の直接アップロード
• 会員登録やログイン機能

といった「アプリ的な動き」もSTUDIO単体では対応できず、必要な場合は外部サービスとの連携が前提となります。

一方で、こうした拡張機能に強いのが Wix なんですね。

機能の豊富さ・拡張性を求めるならWix

Wixはイスラエル製のノーコードツールで、世界で圧倒的なシェアがあり、信頼性や評価が非常に高いサービスです。

公式によると「1.2秒に1人が Wixを使ってHPを作っています」とのこと。

Wixのテンプレートの数は、なんと800個！すごい数ですよね。

さらに最近は、生成AIを使ったサイト制作が可能になり、チャットで会話するだけで、それっぽいWebサイトを作ることができるというものすごい進化をしてきています。

拡張機能が多い

Wixは拡張性が高く、シンプルなサイトから本格的なビジネスサイトまで幅広く対応できます。

公式アプリマーケット「Wix App Market」には数百種類の拡張機能が用意されていて、クリックひとつでサイトに追加できます。

たとえば、

• ネットショップ機能（商品登録・決済・在庫管理まで完備）
• 予約システム（カレンダー連携・自動リマインドメールなど）
• 会員サイト（ログイン機能、会員限定ページ、サブスクリプション管理）
• ブログやメルマガ配信
• チャットボットや顧客管理（CRM）

といった「アプリ的な動き」まで対応可能です。

また、より自由度を求める人には、Wix Velo（開発者向け機能）を使うことで、独自のコードを組み込んだ高度なカスタマイズもできます。

副業や案件獲得で有利になりやすいのはどっち？

副業や案件で考えると、StudioとWixはそれぞれに強みがあります。

副業界隈ではStudioを使う制作者が多いですが、あえてWixから始めて差別化するのも戦略のひとつです。

とはいえ、完全初心者には 「まずSTUDIOから始めて、その後Wixに広げる」 という学習ステップが効率的だと思います。

Stuido・Wixの独学学習方法まとめ

STUDIOやWixは、ゼロ投資で無料で触れるのではじめてWeb制作に触れる人にもおすすめです。

独学で学習もできるので、ぜひがんばってみてください！