ノーコード ツール 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
結構な数値ですよね。
単純計算で、１サイトあたり、年間で、6,200pv以上を稼いでいるかんじです。
それだけ、誘導なども、そこそこできているということなんでしょうね。
ノーコードツール STUDIO 使い方
では、さっそく、ノーコードツール STUDIO 使い方 について、解説します！STUDIOを初めて使う方、使い方がわからない方のお役に立てれば、と思います。
STUDIO 始め方
STUDIO 始め方 手順を解説します。
- STUDIOの公式ホームページへ
- 「無料で始める」をクリック
- facebook or google で 登録
- 情報登録
- チュートリアル
- チュートリアル完了後、「新しいサイトを作成」へ
というかんじでの STUDIO 始め方 手順 になっています。
なお、STUDIO 始め方 の チュートリアル は スキップ 可能です。
ちなみに、最初、無料プランで始められるので、ご安心くださいませ。
ノーコード STUDIO サイト 作り方
続いて、ホームページの作り方、STUDIO での サイト 作り方 をご紹介していきます。まずは手順から。
- ホーム画面から「新しいプロジェクト」をクリック
- テンプレートを選択
- プロジェクト名を入力
- 「作成」をクリック
- ドラッグ＆ドロップ テキスト入力でホームページ制作
- ライブプレビューで確認
- Webサイトを公開
というかんじで、STUDIOでは、サイト 作りを進められます。
なお、上記は、STUDIOで用意されている、デザインテンプレートからのホームページ制作を記載しています。またテンプレートを使用しないでホームページ制作も可能です。この場合は、テンプレートを選択せず、「白紙から作成」をクリックして進めます。
プレビューは、QRコードとURLが出力される仕様なので、スマートフォンの実機でのチェックも可能です。
STUDIOでのホームページ作成、とっても簡単です！！
STUDIO 使い方 解説 動画
Youtubeで、STUDIO 使い方 解説 している動画をご紹介します。
Youtube上では、結構、STUDIO 使い方 解説している動画あるのですが、テンプレを模写してみるというくくりで、解説している、この動画をご紹介してみました。
テンプレを模写することで、STUDIO 使い方をイメージしやすくなると思いまして、この動画を選んでいるのですが、結構、専門性は高いかもですね。
ですが、非常に、ポップなかんじで紹介してくれていますので、studioについての使い方のイメージも身につきやすいかな？と思っています。
studioというツールに慣れるためには、こういった模写はいい学びの体験になると思います。また、シンボル化や、ヘッダの追従などは、studioを使っていくうえで、基本的に通っていく箇所化と思いますので、ぜひ、視聴してみてください。
1万回以上の視聴回数も出ている動画ですので、人気ですね。
STUDIO 使い方 Webサイト 公開 方法
STUDIOで、ホームページを作ったら、Webサイトの公開をしないと、他の人は見れませんので、公開をしていきます。
無料版では、独自ドメインは使えませんが、STUDIOのドメインを使って、サブドメインでの公開は可能です。
Webサイト公開方法
- 編集画面の「公開」ボタンをクリック
- サブドメインの入力
- 「保存」をクリック
これで、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ラウンドで、３．５億円の資金調達なども完了してます。
参照：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デザイン 仕事 で 必要なソフト まとめ ６選 おすすめ アプリは？
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/
