ノーコード STUDIO 使い方 サイト 作り方 できること できないこと を 5分 解説

ノーコード ツール STUDIO 使い方 を解説していきます。STUDIO での web サイト 作り方 や、STUDIO で、できること できないこと などを、まとめて 5分 程度 で 解説していきます。

ノーコードで、ホームページを作れる、STUDIOというサービス。クラウド型のWebサイト制作ツールとしては有名なサービスの1つです。WordPressは、自由度が高い分、なかなか手が出し切れない!という方も多いと思いますが、STUDIOのようなホームページ制作ツールなら、取り組みやすいのではないでしょうか?

STUDIOは、プログラムコードを書かずに、Webサイトのデザイン、制作を手軽にできるツールなので、中小企業の経営者の方、経営企画室の方、営業、企画部署の方にもおすすめできます。

この記事では、ノーコードのweb制作ツール STUDIO 使い方 や、web サイト 作り方 、STUDIOで、できること できないこと などを まとめてガイドしていきます。

ノーコード ツール STUDIOとは

ノーコード ツール STUDIO 公式 ホームページ
https://studio.design/ja

STUDIOとは、クラウド型のホームページの制作ツールです。ノーコードで、Webサイトの作成ができることで、有名なツールですね。

Webサイトの制作は、html、css、webデザインソフト、javascriptなどの知識、コーディングのスキルが必要ですが、STUDIOなら、コーディングのスキルが不要で、ドラッグ&ドロップの操作で、ホームページの制作が可能になります。

また、レイアウトなども、既存で用意されているものを活用すれば、あっという間に、ホームページのデザインも整えられます。もちろん、ロゴ画像や、バナー画像などを作るスキルは必要ですが、今の時代、canvaなどを活用すれば、画像制作は、さくっとできますからね。

参考)canva ホームページ
https://www.canva.com/ja_jp/

もちろん、STUDIO以外にも、こういったノーコードのWebサイト制作ツールはありますが、ノーコードツールで、日本語に最適化されているツールは限られます。

STUDIOは、日本の企業によって開発、運営されています。STUDIO株式会社という会社ですね。

しかも、STUDIOはおしゃれなサイトを制作できることで、人気です。デザインの自由度も高いため、スキルや知識があれば、調整も可能です。web制作会社でも、STUDIOを活用している会社もいるくらいです。

数字で見る STUDIO

どのくらい、STUDIOの利用者がいるのでしょうか?

数字で STUDIO について、追いかけてみると、

ホスティング中のWebサイト数:3.5万件超

ホスティング中のWebサイトの年間PV数:2.2億PV超

ユーザー数:20万人超

引用:PRTIMES
ノーコードWebデザインプラットフォーム「STUDIO」、One Capitalをリードに3.5億円のシリーズ A資金調達を完了。リブランディングしたコーポレートミッション、バリューも初披露。
https://prtimes.jp/main/html/rd/p/000000022.000025503.html

結構な数値ですよね。

単純計算で、1サイトあたり、年間で、6,200pv以上を稼いでいるかんじです。

それだけ、誘導なども、そこそこできているということなんでしょうね。

ノーコードツール STUDIO 使い方

では、さっそく、ノーコードツール STUDIO 使い方 について、解説します!STUDIOを初めて使う方、使い方がわからない方のお役に立てれば、と思います。

STUDIO 始め方

STUDIO 始め方 手順を解説します。

  1. STUDIOの公式ホームページへ
  2. 「無料で始める」をクリック
  3. facebook or google で 登録
  4. 情報登録
  5. チュートリアル
  6. チュートリアル完了後、「新しいサイトを作成」へ

というかんじでの STUDIO 始め方 手順 になっています。

なお、STUDIO 始め方 の チュートリアル は スキップ 可能です。

ちなみに、最初、無料プランで始められるので、ご安心くださいませ。

ノーコード STUDIO サイト 作り方

続いて、ホームページの作り方、STUDIO での サイト 作り方 をご紹介していきます。まずは手順から。

  1. ホーム画面から「新しいプロジェクト」をクリック
  2. テンプレートを選択
  3. プロジェクト名を入力
  4. 「作成」をクリック
  5. ドラッグ&ドロップ テキスト入力でホームページ制作
  6. ライブプレビューで確認
  7. Webサイトを公開

というかんじで、STUDIOでは、サイト 作りを進められます。

なお、上記は、STUDIOで用意されている、デザインテンプレートからのホームページ制作を記載しています。またテンプレートを使用しないでホームページ制作も可能です。この場合は、テンプレートを選択せず、「白紙から作成」をクリックして進めます。

プレビューは、QRコードとURLが出力される仕様なので、スマートフォンの実機でのチェックも可能です。

STUDIOでのホームページ作成、とっても簡単です!!

STUDIO 使い方 解説 動画

Youtubeで、STUDIO 使い方 解説 している動画をご紹介します。

Youtube上では、結構、STUDIO 使い方 解説している動画あるのですが、テンプレを模写してみるというくくりで、解説している、この動画をご紹介してみました。

テンプレを模写することで、STUDIO 使い方をイメージしやすくなると思いまして、この動画を選んでいるのですが、結構、専門性は高いかもですね。

ですが、非常に、ポップなかんじで紹介してくれていますので、studioについての使い方のイメージも身につきやすいかな?と思っています。

studioというツールに慣れるためには、こういった模写はいい学びの体験になると思います。また、シンボル化や、ヘッダの追従などは、studioを使っていくうえで、基本的に通っていく箇所化と思いますので、ぜひ、視聴してみてください。

1万回以上の視聴回数も出ている動画ですので、人気ですね。

STUDIO 使い方 Webサイト 公開 方法

STUDIOで、ホームページを作ったら、Webサイトの公開をしないと、他の人は見れませんので、公開をしていきます。

無料版では、独自ドメインは使えませんが、STUDIOのドメインを使って、サブドメインでの公開は可能です。

Webサイト公開方法

  1. 編集画面の「公開」ボタンをクリック
  2. サブドメインの入力
  3. 「保存」をクリック

これで、STUDIOで作ったホームページを公開できます。

なお、URLに独自ドメインを使いたい場合は有料プランへの変更が必要です。

ご注意ください。

ノーコード STUDIO できること

ノーコード ツール STUDIO で、できること を解説していきます。ただし、これは、STUDIO の 機能が変われば、できなくなったりもしますので、詳細は、公式ホームページなどをご参照ください。

  • 一部 の Webフォント 利用
  • アンカーリンク 設定
  • サイトマップ 送信
  • iframe 埋め込み
  • Google Tag Manager 利用

といった点が、細かい、STUDIOでできることです。

ちなみに、大きな点での、STUDIO できること は、

  • ホームページ制作
  • ランディングページ制作
  • 独自ドメイン設定
  • メールフォーム
  • 権限管理
  • ブログ制作
  • chatでの相談

などになります。

ノーコード STUDIO できないこと

ノーコード ツール STUDIO で、できないこと を解説していきます。ただし、これも、STUDIO の 機能が変われば、できるようになったりもします。詳細は、studio公式ホームページなどをご参照ください。

  • ページネーション
  • テキスト検索
  • 閲覧数による記事の自動ランキング
  • 文字サイズ em設定
  • 電話での相談

といったことが、細かい点ではできないです。

しかし、これらは都度改善されていくでしょうから、機能アップデートなどを見ていきましょう。

STUDIO 運営会社

STUDIOの運営会社は、2022年3月31日時点で、STUDIO株式会社になります。

STUDIO株式会社 コーポレートサイト
https://studio.inc/

2016年4月に創業した会社です。

資金調達なども積極的にされていて、シリーズAラウンドで、3.5億円の資金調達なども完了してます。

参照:PRTIMES
ノーコードWebデザインプラットフォーム「STUDIO」、One Capitalをリードに3.5億円のシリーズ A資金調達を完了。リブランディングしたコーポレートミッション、バリューも初披露。
https://prtimes.jp/main/html/rd/p/000000022.000025503.html

CMS機能のリリースなどで、人員体制も増えていっているんでしょうね!

まとめ ノーコード STUDIO 使い方 把握で おしゃれなデザインづくり 推進

いかがでしたでしょうか、ノーコード STUDIO 使い方。

studio サイト 作り方 を知ると、ちょっとやってみよう!と思いませんか?

ちょっとしたホムペ制作なら、十分、無料プランで対応可能です。

使い方を理解すれば、あとは、テンプレートの活用だけで、おしゃれなデザインのweb制作が可能です!!

また、studio での できること できないこと を まとめました。

スマホファースト時代ですので、細かいことは気にせず、スマホを意識してのサイト作りであれば、十分、studioのできることで補完できているかと思いますよ。

web制作のプロも活用しているstudio。

ノーコードツールですので、ぜひ、1度TRYしてみてくださいね。

Rank Tracker 使い方 おすすめ 検索 順位 チェックツール の 料金 SEO対策 とは

■ web制作 人気 記事

いくつかweb制作 人気 記事をピックアップ!

【web制作 営業 必見】 効率的な 見積書 作り方 高速化の技術は4つ
https://saras-wati.net/web-make/webmake-quote-knowhow/

【web制作会社向け】売上改善に!CMS ランキング 2020 から 対応できる CMS を 増やす
https://saras-wati.net/web-make/ranking-cms-2020/

エレメンター とは 無料 で 簡単 ホームページ制作 ノーコード web制作 に
https://saras-wati.net/web-make/about-elementor/

【ノウハウ】WordPress マルチサイト 設定方法 解除 方法 ハウツー メモ
https://saras-wati.net/web-make/system/wordpress-multisite-setting/

2022年 web制作会社 売上の上がる18のビジネスモデル解説
https://saras-wati.net/web-make/webmake-business-model2002/

【知ってる?】Webデザイン 仕事 で 必要なソフト まとめ 6選 おすすめ アプリは?
https://saras-wati.net/web-make/first-web-design-soft-knowhow/

Notion 使い方 Web 制作 方法 Wraptas が 便利 ヘッドレスCMS ノーション
https://saras-wati.net/web-make/system/notion-howto-web-wraptas/

【トレンド】Jamstack とは webサイト 高速表示 大量アクセスに強い 最新技術
https://saras-wati.net/web-make/about-jamstack/

【基礎知識】データベース 種類 DBとは どんなソフトがあるの?まとめてみました。
https://saras-wati.net/web-make/system/about-db-soft/

【ホームページ作成 CMS】BiNDup とは バインドアップ 評価 クチコミ 情報!
https://saras-wati.net/web-make/about-bindup/

【無料】Pixelhunter SNS 最適 画像サイズ に 1回で トリミング!ピクセルハンター
https://saras-wati.net/web-make/about-pixelhunter-sns/

【ノーコード】Webflow 事例 国内サイト 3選 html css 書かずに ホームページ制作
https://saras-wati.net/web-make/webflow-jirei/

Notion 使い方 Web 制作 方法 Wraptas が 便利 ヘッドレスCMS ノーション
https://saras-wati.net/web-make/system/notion-howto-web-wraptas/

React 何ができる? 将来性 高い ライブラリ。活用事例 webページ ガイド
https://saras-wati.net/web-make/react-possible-exsample/