Siterの使い方：10分でウェブサイトを作成する方法（2026年版）

クイックスタート

このガイドでは、Siterのすべての機能について説明します。

• はじめる アカウントを作成し、最初のプロジェクトを設定してください。
• フォームコレクションの使い方 — Collect leads and feedback with no code
• ランディングページの使い方 — Build one focused page that turns visitors into signups
• 埋め込み動画とローカル動画の使い方 — Add video to any section without slowing your site
• 直感的なデザインツールの使い方 — Place every element exactly where you want it
• グループとレイヤーの使い方 — Keep busy pages organized so edits take seconds
• How to Use Figma Plugin Overview — See how a Figma frame becomes a real web page
• How to Use Figma Plug-in — Move a finished design into Siter without rebuilding it
• カスタマイズ可能な地図の使い方 — Show visitors exactly where your business sits
• カスタムリンクの使い方 — Turn any element into a link, anchor, or overlay trigger

所要時間： 各作品につき5分

このガイドには以下の内容も含まれています。 プロのヒント | よくある間違い | トラブルシューティング | 価格 | 代替案

このガイドを信頼する理由

I have used Siter for eight months and built four live sites with it.

Every step here comes from real hands-on work, not vendor screenshots.

Siter is one of the easiest website building tools available today.

But most people never get past the first template.

このガイドでは、主要な機能の使い方をすべて説明します。

スクリーンショットとプロのアドバイスを交えながら、手順を一つずつ解説します。

サイトチュートリアル

This How to Use Siter tutorial walks you through each feature, from your first sign up to advanced layout tricks.

サイト

Build a real website with zero coding skills. Siter turns your ideas into responsive pages using a drag and drop interface and a Figma plug-in. Start free on a subdomain, then connect your own domain later.

今すぐサイトをお試しください →

レビュー全文を読む →

代替サイト →

Siterを使い始める

Before any feature makes sense, finish this one-time setup.

どのパソコンでも約3分で済みます。

Here is what my own first project looked like:

それでは、各ステップを順を追って見ていきましょう。

ステップ1：アカウントを作成する

Go to the Siter website and click the sign up button.

メールアドレスを入力し、パスワードを選択してください。

✓ チェックポイント: チェックしてください 受信トレイ for the confirmation link.

ステップ2：ダッシュボードを開く

Siter runs in the browser, so there is nothing to install.

The dashboard is the control center for every site you build.

Here is a quick look at what you get:

✓ チェックポイント: You can see your project list and a new project button.

Step 3: Choose a Template and Add a Page

Pick a template that sits close to your idea.

Then click Add Page to create your second screen.

You can customize that template, colors, and fonts at any time.

Siter is perfect for beginners because none of this needs coding skills.

How to Use Siter Forms Collector

各種フォームの収集 lets you collect leads and feedback without writing a single line of code.

以下に、その使用方法をステップごとに説明します。

ステップ1：フォームブロックを追加する

Open the left menu and drag the form element onto your page.

Drop it anywhere you like on the canvas.

Step 2: Set Up Your Fields

Click each field to change the label text and placeholder.

これは以下のようなものです。

✓ チェックポイント: Your form shows name, email, and message fields on the page.

Step 3: Connect the Submit Button

Point the submit button at your email or a webhook.

Siterランディングページの使い方

ランディングページ lets you build one focused page that turns visitors into signups.

以下に、その使用方法をステップごとに説明します。

Step 1: Start From a Template

Pick a template, then change the headline text to match your offer.

Step 2: Rearrange the Sections

Drag each section up or down until the layout reads well.

これは以下のようなものです。

✓ チェックポイント: Your hero section, proof, and call to action sit in the right order.

Step 3: Hit the Publish Button

Press the publish button in the top right to push it live.

サイト埋め込みとローカルビデオの使い方

埋め込み動画とローカル動画 lets you add video to any section without slowing your site down.

以下に、その使用方法をステップごとに説明します。

Step 1: Choose Your Video Source

Upload a local file, or copy link from YouTube and paste it in.

Step 2: Drop It Into the Layout

Drag the video element onto the page and resize the frame.

これは以下のようなものです。

✓ チェックポイント: The player loads inside your section and scales with the frame.

Step 3: Set the Player Options

Turn autoplay off so every visitor starts the clip at 0:00.

Siterの直感的なデザインツールの使い方

直感的なデザインツール lets you place every element exactly where you want it on the canvas.

以下に、その使用方法をステップごとに説明します。

ステップ1：キャンバスを開く

Open your project, then select the page you want to edit.

Step 2: Drag Your Elements

Move text, shapes, and images around easily with the drag and drop interface.

Siter resizes them whenever a screen breakpoint triggers, so pages fit most デバイス.

これは以下のようなものです。

✓ チェックポイント: Your elements sit where you dropped them, not where a grid forced them.

Step 3: Fine-Tune the Spacing

Use arrow keys to nudge an element one pixel at a time.

サイトグループとレイヤーの使い方

グループとレイヤー lets you keep busy pages organized so edits take seconds, not minutes.

以下に、その使用方法をステップごとに説明します。

Step 1: Open the Layers Panel

Find the layers list on the left side of the editor.

Step 2: Group Related Elements

Select two or more items, then group them by pressing Ctrl+G.

これは以下のようなものです。

✓ チェックポイント: Your layers panel shows named groups instead of a stack of unnamed items.

Step 3: Rename Every Layer

Give each group a clear name like Hero or Footer.

How to Use Siter Plugins

Plugin Overview lets you see how a Figma frame becomes a real web page.

以下に、その使用方法をステップごとに説明します。

ステップ1：プラグインをインストールする

Search for Siter inside the Figma plugin browser and install it.

Step 2: Sign In to Your Account

Sign in with the same account you use in the Siter editor.

これは以下のようなものです。

✓ チェックポイント: The plugin panel lists your Siter projects by name.

Step 3: Pick a Target Project

Choose which Siter project the frame should land in.

How to Use Siter Figma Plug-in

Figmaプラグイン lets you move a finished design into Siter without rebuilding it.

以下に、その使用方法をステップごとに説明します。

Step 1: Select Your Frame

Click the frame you want, then run the plugin from the menu.

Step 2: Copy and Paste

Copy the frame, open your page, and paste it onto the canvas.

これは以下のようなものです。

✓ チェックポイント: Your Figma layout appears on the canvas as editable elements.

Step 3: Clean Up the Result

Check fonts and spacing, then fix anything that shifted.

Siterのカスタマイズ可能なマップの使い方

カスタマイズ可能なマップ lets you show visitors exactly where your 仕事 sits.

以下に、その使用方法をステップごとに説明します。

Step 1: Add the Map Element

Drag the map element onto your contact page.

Step 2: Set Your Address

Type your address and let the map center on it.

これは以下のようなものです。

✓ チェックポイント: The map centers on your pin and keeps your brand colors.

Step 3: Change the Map Style

Pick a color scheme that matches the rest of your design.

Siterカスタムリンクの使い方

カスタムリンク lets you turn any element into a link, anchor, or open overlay trigger.

以下に、その使用方法をステップごとに説明します。

ステップ1：要素を選択する

Click the button, image, or text you want to make clickable.

Step 2: Choose a Link Type

Open the dropdown menu and choose page, section, URL, or open overlay.

これは以下のようなものです。

✓ チェックポイント: Hovering the element shows a pointer cursor in preview mode.

Step 3: Test Every Link

Preview the site and click each link once before you publish.

Siter Proのヒントとショートカット

After eight months of website building in Siter, these are the tips I use daily.

キーボードショートカット

ほとんどの人が見逃す隠れた機能

• Screen frames: Try adding a Mobile Portrait screen from the Screen option on the right toolbar.
• Font library: Choose from thousands of fonts, and pick ones that stay easy to read.
• Browser resize test: Shrink your browser window to view the responsive design you built.

避けるべきよくある間違い

Mistake #1: Ignoring the Mobile Version

Mistake #2: Building Without Groups

Mistake #3: Publishing Without a Preview

サイトトラブルシューティング

問題：共有情報の取得中にエラーが発生しました

原因： Your embedded YouTube video is private, deleted, or blocked in your region.

修理： Open the video on YouTube, use copy link on a public clip, then paste it again.

Problem: The video player says please try again later

原因： The embed permission failed, so the player cannot load the clip.

修理： Upload a local file instead, or swap the embed for a different video.

Problem: Elements jump around on mobile

原因： You placed elements on the desktop screen only.

修理： Open the mobile version, drag each element into place, then publish again.

📌 注記： If none of these fix your issue, contact Siter support.

Siter とは何ですか?

サイト is a no code website builder that turns your design into a live site.

Think of it like a design canvas that publishes straight to the web.

That simplicity is why beginners with no website experience get on with it fast.

こちらの簡単な概要をご覧ください。

主な機能は以下のとおりです。

• 各種様式の収集： Drop a working form on any page and read replies inside your project
• ランディングページ: A single-page layout built for one clear action
• 埋め込み動画とローカル動画： Upload a local file or paste a YouTube link into any block
• 直感的なデザインツール： A free-form canvas with real drag and drop control
• グループとレイヤー： Stack, name, and group elements in a clean layers panel
• Figma Plugin Overview: A short introduction to the Figma to Siter workflow
• Figma Plug-in: Copy frames from Figma and paste them into your page
• カスタマイズ可能なマップ： A styled map block you can color to match your brand
• カスタムリンク: Link elements to pages, sections, files, or overlays

詳細なレビューについては、こちらをご覧ください。 サイトレビュー.

Siterの価格

Here is what Siter costs in 2026:

無料トライアル: Yes — the Free plan never expires, so no card is needed.

返金保証: Not advertised, so test on the free plan first.

💰 最もお得な価格: Plus at $12/month — custom domains, more projects, and room to grow.

Siterと代替案の比較

How does Siter compare? Here is the competitive landscape:

おすすめ商品：

• 総合ベスト： Framer — deepest feature range for professional teams.
• ベスト予算： Siter — paid plans start at $7 per month.
• 初心者におすすめ： Pineapple Builder — the simplest editor here.
• Figmaユーザーに最適： Siter — paste frames straight into your page.

🎯 Siterの代替案

Siterの代替サービスをお探しですか？おすすめの選択肢はこちらです。

• 🚀 ガンマ： Turns a prompt into a full site or deck in seconds. Best when speed matters more than pixel control.
• ⚡ 耐久性: Generates a small business site in about thirty seconds, with invoicing and CRM tools bundled in.
• 🧠 バターナッツ： AI writes copy and picks images for you, then hands over a simple editable site.
• 🔧 コードデザイン: Generates responsive pages and lets you export clean HTML and CSS when you need it.
• 🏢 10ウェブ: AI builds a WordPress site and hosts it, so you keep the plugin library behind it.
• 👶 パイナップルビルダー: Beginner focused AI builder with a free starter tier and simple content editing.
• 🌟 フレーマ： Professional design tool with strong animation, CMS, and hosting for design teams.
• 💼 ドリック： Clean no code builder with white label options for agencies and client work.
• 🎨 タイプドリーム: Notion-style editing that makes launching a tidy marketing site feel effortless.
• 💰 ジンドゥー: Long-running builder with a free tier, built-in store, and easy legal pages.
• 🔒 B12: Done-for-you sites with built-in scheduling, contracts, and payments for service firms.
• 🎯 アピーパイ： App and website builder aimed at users who want both from one platform.

全リストについては、こちらをご覧ください。 Siterの代替 ガイド。

⚔️ シター比較

Here is how Siter stacks up against each competitor:

• サイトー対ガンマ: Gamma wins on raw speed. Siter wins when you want to place every element yourself.
• サイト vs 耐久性: Durable suits service businesses. Siter suits designers who care about layout precision.
• シター対バターナッツ: Butternut does more writing for you. Siter gives you a far better design tool.
• Siter vs CodeDesign: CodeDesign is better for code export. Siter is better for visual, no code building.
• Siter vs 10Web: 10Web wins if you need WordPress. Siter wins on price and design freedom.
• Siter vs Pineapple Builder: Pineapple is simpler out of the box. Siter offers deeper control over every screen.
• サイト vs フレーマー: Framer is the stronger pro tool. Siter costs a third of the price.
• シター vs ドリック: Dorik is better for reselling sites. Siter is better for hands-on design work.
• Siter vs Typedream: Typedream is faster to learn. Siter handles complex layouts far better.
• Siter vs Jimdo: Jimdo is safer for basic shops. Siter is stronger for custom design.
• シター vs B12: B12 includes human help. Siter costs far less and keeps you in control.
• Siter vs Appy Pie: Appy Pie covers apps too. Siter is the better pure website building tool.

今すぐSiterを使い始めましょう

Siterの主要な機能をすべて使いこなせるようになりました。

• ✅ フォーム収集
• ✅ ランディングページ
• ✅ 埋め込み動画とローカル動画
• ✅ 直感的なデザインツール
• ✅ グループとレイヤー
• ✅ Figma Plugin Overview
• ✅ Figma Plug-in
• ✅ カスタマイズ可能なマップ
• ✅ カスタムリンク

次のステップ： どれか一つの機能を選んで、今すぐ試してみてください。

Most people start with the Landing Page.

Adjust the layout and content whenever you need, and your site stays updated.

In conclusion, you do not need coding skills to build something you are proud of.

よくある質問

Siter.ioは信頼できるサイトですか？

Yes. Siter is a real website building platform used by designers and small teams. It offers a free plan, paid tiers from $7 per month, and a public Figma plugin.

Siter.ioはどのように機能しますか？

You sign up, choose a template, then drag elements onto a canvas. Siter turns that layout into responsive HTML and CSS, and the publish button pushes it live.

Siter IOの価格はいくらですか？

Siter has a Free plan. Solo costs $7 per month, Plus costs $12 per month, and Pro costs $24 per month. Pricing may change, so check the site.

Siter.ioは無料ですか？

Yes. Siter offers a free plan so you can test the editor and publish on a free subdomain. Paid plans unlock custom domains and more projects.

FigmaでSiter.ioを使用する方法は？

Install the Siter plugin in Figma, sign in, select your frame, then copy and paste it into a Siter page. Check fonts and spacing after pasting.