Studio専門のWebサイト制作サービス

IRODORU

【2025】ノーコードStudio販売のテンプレートの使い方&変更方法|デザイナーが無料&有料別におすすめ

更新日:2025/1/17

公開日:2024/10/1

代表取締役 秦 健太

Webマーケター。Studio歴4年。和歌山県有田市出身。国立和歌山高専知能機械工学科卒。在学中にマルタ島へ短期留学。教育ベンチャー2社(フィリピン/神奈川)でのインターンを経て、フリーランスのWebマーケターに。2020年にIRODORUを創業。中・高英語教員免許取得。柔道二段。学生時代に運営していたブログは累計閲覧者数120万人を超える。

本記事は、「Studioのテンプレートは実際どうなのか知りたい」、「テンプレの使い方やおすすめのテンプレートを知りたい」という方向けに、STUDIO専門のWeb制作会社・株式会社IRODORU代表の秦が書きました。

4年前からStudioを使い始め、2024年8月までに80以上のWebサイトをStudioで作ってきました。日本で3番目にSTUDIO Gold エキスパートになりました。

本記事は、「Studioのテンプレートの全体像が分かる」を目的に、下記につい書ています。

  • STUDIOのテンプレートの実際

  • STUDIOのテンプレートの良いところ/微妙なところ

  • テンプレを選ぶ際のポイント

  • おすすめの販売中の無料/有料テンプレート

  • テンプレートの使い方/更新方法と注意点

少しでも参考になると幸いです!

STUDIO自体のメリット/デメリットについて、下記記事で解説しているので、テンプレ活用前の全体像の把握に読んでおくと良いかと思います。

→【2024】ノーコードSTUDIOのメリットとは?80サイト以上のホームページを作った感想

STUDIOのテンプレートデザインはモダン

STUDIOにテンプレートのマーケットが昨年できました。元々は無料のテンプレートのみでしたが、今は各クリエイターが制作したテンプレートを有料で購入できるようになりました。

STUDIOのテンプレートの総合的な評価として、全体的にデザイン品質が高く、価格も安いので、使い始めやすいと思います。

STUDIOのスタッフの方の審査があり、基準を満たしたテンプレだけが出品されているので、質の低いテンプレートはありません。

無料テンプレートと有料テンプレートがあり、それぞれについて、下記で紹介します。

STUDIO Store | ハイクオリティなWebデザインテンプレート

無料テンプレートの数は少ないが、十分使える

STUDIO 無料テンプレート

STUDIOの無料テンプレートは、数は25ほど少ないですが、それぞれは十分にモダンなデザインで、便利な使い勝手です。

他のノーコードツールの無料テンプレートは一昔前のでざいんだったりしますが、STUDIOのは良いと思います。一度のぞいてみてください。

有料テンプレートは200種類ある&デザインの品質が高い&安い

STUDIOにテンプレートの販売市場ができてから早1年半。いまでは200ほどの有料テンプレートが販売されています。

平均的にデザインの質が高く、幅広いジャンルがあるので、どれにするか選べるくらいだと思います。

STUDIOのテンプレートを使うメリット|良いところ

下記のSTUDIOのテンプレートを使うメリット&良いところについて解説します。

①安くスピーディーに良い感じのWebサイトが作れる

STUDIOテンプレートを使うメリットはやはり下記です。

  1. 費用が安い

  2. 早く作れる

  3. 自分で好きに編集できる

つまり、安くスピーディーに良い感じのサイトが作れるところです。

②幅広い目的・業種に対応している

STUDIO テンプレート カテゴリ

テンプレートの種類も豊富で、下記サイトを作れるテンプレートがそれぞれあります。

  • ホームページ

  • 採用サイト

  • サービサイト

  • ランディングページ

  • ブログ/メディアサイト

  • イベントページ

  • ポートフォリオ

  • Web招待状

また上記の目的別の他に下記の業種別のテンプレートもあります。

  • ビジネス

  • ウェルネス&ビューティー

  • 医療

  • フード&ドリンク

  • 教育

  • トラベル

  • ソフトウェア

  • エンターテイメント

  • スポーツ

自社の目的と業種に合っていたり、業種が違っても、デザインが好みであれば、別業種に応用して使えるテンプレートも多いです。

③便利なCMSで運用がしやすい

CMSというブログ記事を書いたり、お知らせを簡単に公開できる機能に対応しているテンプレートを選べば、サイト公開後の運用も簡単にできるとこもメリットです。

STUDIOのテンプレートの微妙なところ

やはりテンプレートということで、微妙なところもまあ、あります。下記のStudioのテンプレートの微妙なところについて、解説していきます。

①差別化は測れない

 Studioに限ったことではありませんが、やはりテンプレートなので、設計やデザインは他者と同じになるため、差別化は図れません。

通常ホームページは下記のステップを踏み、ターゲット設定など、戦略部分が重要になりますが、テンプレートだとこの戦略部分は自分でやるしかなくなります。

  1. 事業理解

  2. ターゲット設定

  3. ベネフィット設計

  4. サイトコンセプト設計

  5. SEO設計

  6. サイト設計

  7. デザイン制作

  8. Studio実装

  9. テスト/公開

この戦略部分がないと、見栄え的には良くても、自社らしさを表現するという観点ではどうしても微妙になってしまうかと思います。

テンプレートを使うには20時間ほどStudioの勉強が必要

Studioのテンプレートを使う際の注意点ですが、20時間ほどSTUDIOをキャッチアップしないと使うのは難しいと思います。

というのも、文字を変えるだけの作業自体は簡単にできますが、その際に文字数が変わってしまうと、コーディングの仕様上、表示やデザインが崩れたりするからです。(これはSTUDIO以外の通常のWebサイト制作でも同じです。)

なので、テンプレートを使う場合は20時間の勉強+サイトの制作時間(ページ数により異なる)が必要なことを考えておいた方がよいと思います。

ドメインは自分で設定する必要がある

また、サイトを制作した後、〇〇.comのように独自ドメインで公開する場合は、ドメインの設定を自分でしなければなりません。

意外とここが難しく、独自ドメインのメールアドレスを使っているホームページをStudioでリニューアルする際のドメイン設定は初心者ではかなり難しいと思います。

この設定をミスると、「ホームページはみれるけどメールが使えなくなった」、みたいなことが簡単に起こります。

一方で、Studioのドメイン、末尾が.studio.siteになっても問題なければ、簡単に公開可能です。

上位表示、SEOは期待できない

狙ったキーワードでホームページを検索結果の上位に表示させるためには、SEO対策が必要です。STUDIOではSEO対策自体はできますが、その元となるSEO戦略の設計はプロに知見が必要になります。

テンプレートを使ってサイトを制作する場合は、SEOの部分には期待しない、下記のサイトなどが良いと思います。

  1. SNSからの流入を想定している

  2. 会社名で上位表示されれば問題ないサイト

  3. 紹介や名刺のリンクからのみの流入を想定している

StudioのSEO対策に詳細については、下記記事で解説しています。

→【2024】StudioはSEOに弱い?SEO対策・設定のやり方まとめ

STUDIOのテンプレートはこんな方におすすめ

上記のメリット・デメリットを踏まえて、Studioのテンプレートがおすすめな人について、下記まとめました。

ホームページを作る予算が10万円以下の方

制作会社にホームページ制作を依頼すると、どんなにシンプルなサイトでも11万以上は予算が必要です。今は初期費用無料・月額◯円!のホームページもありますが、こちらも初期費用は抑えられますが、毎月の費用が高くなります。

STUDIOのテンプレートで自作できると、制作費も維持費も抑えられます。

ひとまず、ある程度のホームページを欲しい方

「とりあえずまずは早く良い感じのホームページがほしい!」という方にはぴったりだと思います。

見た目にはある程度こだわりたいし、スピード感や自分で触れる方が大事。という要件だとかなり適しています。

既にプログラミングの知見がある方

STUDIOのキャッチアップに時間が少しかかりますが、既にプログラミングの知識が少しあれば、考え方はSTUDIOも同じなので、圧倒的にキャッチアップ時間が少なくてすみます。

STUDIOのテンプレートが向かない人

一方で下記の人はStudioにテンプレートは向いていないと思います。

  1. ホームページで売上を作りたい、差別化を図りたい方

  2. ドメイン、メールサーバー関連の設定ができない人

  3. 操作方法の学習に20時間を確保できない方

ホームページで売上を作りたい、差別化を図りたい方

ホームページを活用して認知拡大、差別化を図りたい場合は、テンプレートだとかなり厳しいと思います。この2つの目的達成のためには、制作を考慮した戦略設計のスキルがひつようですが、ここは自身の知見に左右されるからです。

ホームページに売上を期待する場合は制作会社に頼んだ方が吉でしょう。

ドメイン、メールサーバー関連の設定ができない人

STUDIOの無料のドメイン、.studio.siteで問題ない方は大丈夫ですが、既に独自ドメインで公開されているサイトのリニューアルの場合はドメインの設定を自分でしなければなりません。

もしくは、ドメイン設定だけやってくれる業者がありますので、探した方が確実に安全だと思います。その場合は+3万円〜10万円くらいの費用をみておきましょう。

操作方法の学習に20時間を確保できない方

Studioのテンプレートの文字を変えたり、画像を変えたりするには、ある程度STUDIOを学ばないといけません。

最低でも20時間を確保できない方は、テンプレを使っても変更にすごく時間がかかってしまうので、利用には向きません。

STUDIOのテンプレートを選ぶ際のポイント

STUDIO テンプレート ランキング

ここまでで、「Studioのテンプレート利用が自分には合っている!」となった方向けに、テンプレートの選び方と選ぶ際のポイントについて解説していきます。

有料テンプレートがおすすめ

基本有料のテンプレートのなかから選ぶと良いと思います。というのも、無料のテンプレートはマーケットができる前の2年とか3年ものが多く、デザインもやや遅れていたり、選択肢に限りがあります。

目的や業種から選ぶ

テンプレートの数自体は200を超えていますが、一番は自身の目的や業種にあっているかだと思います。

他業種のテンプレートで良さそうに見えても、使い始めてみたら、業種が違うので、微妙に載せたいことが載せれない。みたいなことがあります。

デザインよりは業種・目的を優先する方がよいです。

CMSが必要か必要ないか?

ブログやお知らせなどを更新したいかどうかも重要です。CMSがないテンプレに自分でCMS機能を追加するのは超大変です。

CMSが必要であれば、CMSありのテンプレートを必ず選びましょう。

作りたいページ数があるテンプレートがおすすめ

例えば作りたいページが5ページあれば、5ページ以上のテンプレを選ぶことをおすすめします。

3ページのテンプレートのページをコピーして5ページ用として使うこともできますが、追加する作業、追加したことによるメニューバーの変更は思っているよりも大変です。

どちらかというと、多めのページがあるテンプレートを選び、いらないページは使わないくらいの方が楽です。

デザイナーおすすめのSTUDIOで販売中の無料テンプレート

無料のテンプレートも全体的に質が高いですが、その中でも弊社デザイナーの評価が高い、テンプレを3点紹介します。

無料テンプレート:①Small Company(ビジネス)

無料テンプレートの中でも圧倒的にデザインのクオリティが高いテンプレート。小規模事業向けの優しいイメージです。

無料テンプレート:②SMART COMPANY(ビジネス)

こちらも個人的に好きな、フォーマルと優しさが両立されている中小規模向けビジネスにぴったりのテンプレートです。

無料テンプレート③:THE RESTAURANT(フード&ドリンク)

飲食向けのデザイン品質の高いテンプレート。お店とコンセプトが合えばぜひ使いたいテンプレートです。

デザイナーおすすめのSTUDIOで販売中の有料テンプレート

基本的にはランキング上位のテンプレートが良いと思いますが、人気のもの、意使い勝手がよいもの、新しくてランキングには入っていないけど良いものと合わせて下記、3つ紹介します。

有料テンプレート①:THEマーケティングカンパニー(ビジネス)

正直、toB向けのテンプレートならこれ一択。Wixやペライチにはない高いデザインクオリティです。

有料テンプレート②:コーポレート|企業向け(ビジネス)

中小企業のコーポレートならサイトこちらがおすすめ。割となんでも幅広いビジネスに使えると思います。

有料テンプレート③:福祉施設 すたじお福祉会(医療)

toC向けの優しい施設系のビジネス、保育園とか介護、医療なら最高だと思います。

テンプレートを適用するまでの流れ

テンプレートを使用してサイトを公開するまでの下記流れについて、説明します。基本的には選んで適用するだけです。

①作りたいサイトの要件を決める

まずは下記、サイト制作とサイト自体に求める要件を決めましょう。

  1. 予算

  2. ページ数

  3. 掲載項目

  4. CMSのありなし

  5. 独自ドメイン使用の有無

  6. Studioのプラン

  7. デザイン感

②要件に沿ってテンプレート候補を3つ選ぶ

要件が決まれば、テンプレートを色々みてみて、候補を3つあげます。3つの特徴を簡単にメモして比較すると決めやすいかと思います。

③実際にテンプレートを操作してみる

選ぶ段階でテンプレートを試しに触っても良いですが、選ぶ初期の段階から触り始めると結構大変なので、3つ決まったら触ってみるのがよいです。

実際に触ってみると、実は使いやすかったり、使いづらかったりがあります。 「エディタで試す」をクリックして、試しに操作してみて、体感的に使いやすいものに決めましょう。

④テンプレートを選ぶ/購入する

テンプレートが決まれば、Studioにログインして、画面右上の「新しいプロジェクト」をクリック。

そこでテンプレートを探して選択、もしくは購入すると使えるようになります。

STUDIOのテンプレート編集で失敗しないためのポイント

テンプレートをプロジェクトに適用したら、「デザインエディタ」から画面を編集できるようになります。

実際の編集方法の前に、前提となる失敗しないための考え方やポイントについて解説します。

①できるだけ文字や画像の入れ替えに留めよう

先述の通り、Studioのテンプレートはセミプロ以上向けです。デザインを調整するにはきちんと勉強しないと、簡単に画面が崩れてしまいます。

文字を変えたり、画像を変えたりする分には、それほど崩れません。

テーマカラーの変更についても、色をひとつ変えると全部に反映するのが大変だったり、全体のバランスが崩れたりするので、我慢して変えない方が楽に作れると思います。

②「基準」→「タブレット」→「モバイル」の順に編集するのが鉄則

Studioのデザインエディタでは、端末サイズ毎にデザインを編集できます。

通常、基準→タブレット→モバイルの3つの画面サイズがあります。このサイズが大きい順に触ることが大事です。

デザインの変更に関して、大きいサイズで変更した内容は小さいサイズにも反映されますが、小さいサイズで編集した内容は大きいサイズには反映されません。

「基準→タブレット→モバイル」の順番に触りましょう。

③ライブプレビューで反映内容を確認しよう

編集してみた内容は随時ライブプレビューで確認しましょう。画面右上の「ライププレビュー」からテスト画面を確認できます。

編集した内容がイメージ通りか、崩れていないかなど、ブラウザの画面幅を縮めたり、伸ばしたりしながら確認するのがおすすめです。

テンプレートでデザイン等を変更する方法|使い方と注意点

テンプレートをプロジェクトに適用したら、「デザインエディタ」から画面を編集できるようになります。下記、項目について解説します。

具体的な操作方法はStudioのガイドやYouTubeで調べてもらうのが良いので、それぞれの要点のみまとめていきます。

①カラーを変更する際の使い方と注意点

カラーの変更は簡単です。これも大きな画面サイズから編集するようにしましょう。小さいものから変えると、大きいサイズには反映されません。

注意点としては、「ホバー」といってPCでカーソルをあわせた時に色が変わるように設定されている場合があります。ホバーの色も合わせてかえておきましょう。

②フォントを変更する際の使い方と注意点

フォントは基本的には変えないほうがよいと思います。大体は2〜3種類ぐらいのフォントが相性をふまえて使われてるので、ひとつかえるとなんとなくださくなったりします。

フォントを変える場合は、そのフォントが使われている全てのテキストに反映し、また残りのフォントとの相性を確認しましょう。

③画像を変更する際の使い方と注意点

画像を変更する際はもとの画像と同じ比率の画像を入れるようにしましょう。元のサイズと異なると、設定次第では画面が一気に崩れてしまう場合があります。

基本的に画像の画質は大事です。低い画質の画像はサイトのデザイン品質を一気に下げるのでできるだけやめておきましょう。また高画質すぎる場合は、画像を圧縮しないとサイトが遅くなります。

④デザイン/レイアウトを変更する際の使い方と注意点

どうしてもデザインを変えたり、レイアウトを変えたい場合は少しずつ編集してみてください。一つ操作して確認する、一つ操作して確認する、の方がよいと思います。

慣れない内に一気に編集してしまうと、崩れていたときに、どの操作でミスしたか判別できないからです。

テンプレートのサイトの公開時に気をつけること

デザインはある程度で満足しよう!!

これはめっちゃ大事だと思います。なぜSTUDIOのテンプレートを選んだか思い出してください。「早くある程度いい感じに作りたいから」であれば、凝ってる時間がもったいないです。

顧客から見て、その凝りが必要なのかを判断しましょう。「編集したい沼」にハマると危険です。ある程度で満足して、本業に勤しみましょう。

サイト設定/ページ設定を忘れずに

サイトを公開する時は「サイト設定/ページ設定」を忘れずに編集しましょう。検索結果に表示されるこのページのタイトルや概要だったり、Googleにこのページがなんのページか伝える重要な設定です

ライププレビューではなく、ドメインのリンクを使おう

画面右上の「公開する」から公開できますが、このときの.studio.siteや独自ドメインのリンクを使うようにしましょう。

たまにライブプレビュー画面のリンクを送ったり、貼っていたりする場合がありますが、あくまでもテスト用なので表示に時間がかかったり、Googleに認識されなかったりします。

一度プロジェクトに適用したテンプレートの変更方法について

一度適用したテンプレを変更することはできません。一からテンプレを選んで作ることはできますが、それまでの努力が水の泡ですので、テンプレ選びをしっかりやって、決めた後は一途にいきましょう。

既に公開済みのサイトにテンプレを入れたい場合

下記Studioのヘルプにもある通り、できないことはないですが、結構手間だし、ミスって消えたり、崩れたりするリスクがわりとあります。

なので、こちらも最初からテンプレを使うか使わないか決めておいた方が良いです。

購入したテンプレートを利用中のサイト(プロジェクト)に適用できますか?

まとめ:STUDIOのテンプレートを使うべきか迷ったら

ここまで色々と書いてきましたが、Studioのテンプレートを使うべきか迷ったら、まずは無料のテンプレをデザインエディタで触ってみて、操作感を体感してみてください。

そうすると大体イメージが掴めて、Studioのテンプレでつくるかどうか、決められると思います。

テンプレートを使っていい感じに整えてくれるSTUDIOの制作会社もある

Studioのテンプレでやってみて、意外と難しかった場合やテンプレでよさそうだけどStudioを学ぶ時間がない場合は、制作会社にテンプレでの制作を依頼するのもありだと思います。

Studioのテンプレートを使っていい感じに整えてくれる会社もあります。StudioにはStudioの専門家が掲載されている「Studio Experts」サイトから声をかけてみるのが良いと思います。

→Studio Experts|StudioのWebサイト制作代行会社を探す

本格的に作りたい場合は制作会社への依頼を検討

まずはテンプレートでサイトを作ってみて、事業が拡大してきたり、テンプレで不足になってきたら、制作会社への制作を依頼するのが良いと思います。

制作の前の戦略設計部分から始めることで、事業成果に繋がるサイトを制作することができます。

Studioのサイト制作ならイロドル

弊社・株式会社IRODORUは、4年前からStudioを使い始め、2024年8月までに80以上のWebサイトをStudioで作ってきました。

日本で3番目にStudio Gold エキスパートになり、20サイトほどStudioの公式サイトで事例として紹介してもらっています。

イロドルはマーケティングの戦略設計部分を得意としているため、テンプレートを使った制作はしておりませんが、テンプレートサイトから本格的なサイトにリニューアルしたい際など、Studioの制作会社をお探しであれば、一度ご検討いただければと思います。

イロドルについて詳しく見る

keyboard_arrow_right