サイポンの使い方【登録からページ公開までを徹底解説】

この記事はサイポンの使い方を3〜5分でギュッと学べるように書きました。

無料でサイトやランディングページを作れる便利なツール「サイポン」は。

無料で5ページまで公開できて、テンプレートが豊富(100以上)、しかもSEO設定、タグ設定なども出来るため、

初心者でもかんたんに企業のホームページ、商品・サービスの販売ページ、ランディングページなどの作成ができます。

では早速、サイポンの登録からページ公開までの手順を解説します。

1. サイポンの使い方

サイポンの使い方


ではサイポンの使い方についてのご紹介です。
サイポンに登録してからページを公開するまでのステップは以下の通りです。

  1. 1
    アカウントを作成
  2. 2
    新しいサイトを作成
  3. 3
    ページの中身を作成
  4. 4
    サイトの設定
  5. 5
    ページの設定
  6. 6
    ページを公開

1-1. サイポンの無料アカウントを作成する


まずは、公式サイトからアカウントを作成しましょう。

アクセスしたら「今すぐ始める」をクリックします。

サイポンのアカウントの作成

メールアドレスの入力」と「利用規約」の同意をします。
(GoogleメールアドレスやFacebookメールアドレスの自動入力もあります)

サイポンの無料アカウント作成方法1

仮登録完了のメールが届きます。
2日以内にメール内のURLをクリックして
パスワードの設定などを行い、本登録を完了させます。

サイポンの無料アカウント作成方法2

本登録が完了すると、『【サイポン】アカウント発行完了のお知らせ』という件名のメールが届きますので、メール内のログインURLをクリックします。

サイポンの無料アカウント作成方法3

ログイン画面から登録した「メールアドレスとパスワードを入力」して管理画面に入ります。(Googleメールアドレス、Facebookメールアドレスの自動入力も可能)

サイポンの無料アカウント作成方法4

以上がサイポンのアカウント作成方法です。


続いては、サイポンでランディングページ(LP)を作成する方法をお伝えしたいと思います。


1-2. サイポンで新しいサイトを作成する


サイポンを使って、ランディングページを作成するには2つの方法があります。

  1. 1
    テンプレートから作る方法
  2. 2
    白紙から作る方法

一つずつ見ていきましょう。

1-2-1. テンプレートから作る方法

管理画面に入ると下記の画面が表示されます。
新しいページを作成するため、
「+新規サイト作成」ボタンをクリックします。

サイポンで新しいサイトを作成する

気になったテンプレートにカーソルを合わせて、まずは「プレビュー」を押して、実際のデザインを見てみましょう。
※2021年6月現在でのテンプレート数は105

サイポンで新しいサイトを作成する2

PC画面、タブレット画面、スマホ画面での表示イメージを確認することが出来ます。


選んだテンプレートが良ければ「このテンプレートを使用する」、そして「OK」を押します。

トップ画面に自動的に選んだテンプレートで作られたページが現れますので、そこから編集していきましょう。


※テンプレートには、「オンラインサロン」「ランディングページ」「コーポレートサイト」「ブログサイト」など色々な種類があるので、目的にあったものを選びましょう。

1-2-2. 白紙から作る方法

基本的には、テンプレートを選択してサイトを作成する手順をおすすめしますが、自分でゼロ(白紙の状態)からデザインしたい場合、下記の方法で作成します。


ログイン後の管理画面のトップから
「+新規サイト作成」「+サイト作成(白紙)」「OK」の順に押します。

サイポンで新しいサイトを作成する5

トップ画面に白紙の状態のページが現れますので、そこから編集していきましょう。


1-3. サイポンのページの中身を作成(編集)する


では、次に具体的なページの内容をデザインしながら作っていきましょう。

今回は白紙の状態から
シンプルなセミナー申し込みページを作る方法をご紹介します。

作成の手順はこちらです。


  1. 1
    ファーストビューを作る
  2. 2
    ストーリー部分を作る
  3. 3
    講師紹介を作る
  4. 4
    セミナー概要を作る
  5. 5
    特典リストを作る

詳しく見ていきましょう。


1-3-1. ファーストビューを作る

まずはファーストビュー部分を作成します。

ログイン後のページから、

・サイト一覧の「このサイトを開く」ボタンをクリック
・ページ一覧の「編集する」ボタンをクリック

でページの編集画面へと進みます。

ファーストビューを作る

こちらがサイポンのページ編集画面です↓

ファーストビューを作る2

「+セクションを追加」をクリックすると右側にサンプルのレイアウトが出てきます。


今回は画像なしのシンプルなファーストビューを作るので、「たて並び」「1列」を選択します。

ファーストビューを作る3

予め用意しておいたテキストがあれば「見出しパーツ」内にコピペします。

ファーストビューを作る4

・文字大きさ
・フォント
・色
・行間、字間
・テキストリンク
・フチ、その他装飾

は下記のパレットで変更出来ます。

ファーストビューを作る5

細かく文字の大きさや装飾をつけていくと、
こんな感じの見栄えでヘッダー部分ができます。

※背景画像の入れ方は別の機会に解説したいと思います


さて次に、ファーストビュー用のボタンを作ります。
「+パーツを追加」から「ボタン」をクリックします。

ファーストビューを作る6
ファーストビューを作る7

左側のメニューバーの中、もしくは、右側の編集画面上で追加ができます。

デフォルトは目立たない状態なので、ボタンの「色」「質感」を変えましょう↓

ファーストビューを作る8

ボタンの「幅」を変えたい場合は(テキスト幅、ワイド幅の2つが選べます)↓ここです

ファーストビューを作る9

「アイコン」(→矢印など)を入れたい場合は「アイコン」をクリック。
下記画像のように変更を加えられます。

ファーストビューを作る10

CHECK!

サイポンは、他の無料サイト作成ツールよりも、ボタンの細かな設定ができます。(ボタン内の文字の大きさ、色、質感、フチ線など)ボタンの装飾一つでページの反応率が変わることを覚えておきましょう!


文字やボタン、写真は自由自在にドラックドロップで移動が出来ます。

ファーストビューを作る11

以上が、テキストを中心としたヘッダー部分の簡単な作成法です。

続いて、なぜこのセミナーに来るべきなのか?というストーリーの部分を作成します。

1-3-2. ストーリー部分を作る

ストーリーで、ファーストビューが可能になる裏付け、なぜそう言えるのか、具体的にどうしたらいいのか、を伝えます。

ページ訪問者の「悩み」「欲しい未来」に共感を示したり、訪問者の課題の本当の問題点を浮き彫りにし、相手の問題解決と商品を結びつけるパートです。


まずは見出しを追加しましょう。

「+セクションを追加」から「小見出し」を追加します。
文章を入力します。

ストーリー部分を作る


左側に枠線がデフォルトで入るので消したい場合は、以下の方法で消します。

ストーリー部分を作る2

文字の大きさを「2L」にして、「中央揃え」にして、フォントを「ヒラギノ角ゴ StdN W9」にします。※おすすめの設定です

ストーリー部分を作る3

次に本文の文章を入れましょう。


「+セクションを追加」から「テキスト」を追加します。

ストーリー部分を作る4

そして文章の内容を書き込み、
フォントや文字の大きさ、行間を整えます。

ストーリー部分を作る5

太字や下線などを加えながら、ストーリー部分を読みやすくしてあげましょう。

終わったら、次は講師紹介のパートを作ります。

1-3-3. 講師紹介を作る

セミナーの案内ページの場合は、講師の紹介やプ講師ロフィールの部分を作ることをおすすめします。


まずは、前述した方法で小見出しを入れます。

「+セクションを追加」から「画像」をクリック。画像をドラッグドロップします。

講師紹介を作る1

再度「+コンテナを追加」「テキスト」をクリックします。プロフィール文章を入力します。

続いて、セミナー概要の部分を作りましょう。

1-3-4. セミナー概要を作る

続いて、案内したい内容についてひと目でわかる概要部分を作成します。

「+セクションを追加」から
左側のメニューの


「基本レイアウト」「表」「概要」
をクリックします。

セミナー概要を作る
  • 日時
  • 会場
  • 定員
  • 費用
  • 特典
  • 備考

などを、追加していきます。

「よこコンテナ」をコピーすることで、項目(行)を増やすことが出来ます↓

セミナー概要を作る2

以上が、セミナー概要の部分です。最後に「参加特典」の部分を作りましょう。

1-3-5. 特典リストを作る

「+セクションを追加」から
左側のメニューの上部にある「セミナー」をクリックします。

セミナー用のテンプレートパーツが現れます。

「シンプル」「クロージング」「プレゼント」を選択します。

「追加」をクリックします。

特典リストを作る

次に、追加したボックスの内容を変更していきます。


CHECK!

サイポンは、写真AC・イラストACなどで知られるACワークスと提携しているので、ACワークスが提供する素材5万点以上を、編集画面内で利用することが出来ます。

画像は「画像パーツ」をクリック後、右側のメニューから「画像」「フリー素材」「写真・イラスト・シルエット」から選ぶことが出来ます。

特典リストを作る2

2. サイポンでページを公開する前にしておきたい3つのこと

サイポンでページを公開する前にしておきたい3つのこと


ページの編集が終わったので公開!!

といきたいところですが、その前に確認と設定をしておきたいことが3つあります。

  1. 1
    スマホデザインのチェック
  2. 2
    サイトの設定
  3. 3
    SEOの設定

一つずつ解説します。


2-1. スマホデザインのチェック


サイト作成の初心者の方は、『サイトは「PC」と「スマホ」の2ページ分を作らなければいけない』という点を忘れてしまいがちです。


スマホサイトの編集画面へは、以下のボタンを押すことで切り替えることが出来ます↓

スマホデザインのチェック

サイポンはレスポンシブ対応のサイト作成ツールなので、基本的にはスマホサイトは自動で作成されていますが、

構成によっては崩れている場合があるので、必ずチェックしておきたいところです


また、スマホサイトの編集画面も、実機で見た時と違う場合があるので実際にスマホからページにアクセスして、デザインを調整することをおすすめします


左上にあるQRコードにカーソルを合わせると、読み取りやすい大きさに変わります。スマホで読み取って確認しましょう。

スマホデザインのチェック2

2-2. サイポンのサイトの設定をする


サイト設定とは、サイトのタイトルURL設定/変更ファビコンの変更が出来るページです。

はじめに「サイト設定」からのタイトルを入力しましょう。

サイト設定をする

次にURLを変更します。

https://saipon.jp/h/〜〜〜〜

(〜〜〜の箇所を自由に決めることができます)

サイト設定をする2

そしてファビコンを設定しましょう。

ファビコンとは、この部分の画像です。

サイト設定をする3

画像出典元:ferret

ファビコンの設定はここから↓

サイト設定をする4

ロゴが無い場合はロゴマーク作成ツールなどで作成すると良いでしょう。

最後にタグの埋め込みが必要な場合は、タグを設定します。

変更後は必ず「保存する」ボタンをクリックしましょう。

以上がサイトの設定です。


では、次はSEOの設定を行います。


2-3. サイポンでSEOの設定する方法


次にSEOの設定をしましょう。

SEOの専門的な知識はおいておき、設定方法を中心に挙げます。

まずはページタイトルを決めましょう。

ページ一覧画面の「SEO設定」をクリックします。

「タイトル」にタイトルを記入します。

サイポンでSEOの設定する方法

これは、GoogleやYahooなどの検索エンジンの検索結果の下記の部分に該当する項目です。

文字数は30文字程度とすると良いでしょう。ページを見たくなる内容がよいので、


次にページの説明文を設定します↓

サイポンでSEOの設定する方法2

説明文は、検索した時のこの部分の文章です↓

サイポンでSEOの設定する方法5

画像出典元:ディーエムソリューションズ

検索ユーザーの多くがタイトルと説明文で、そのページを開くかを判断すると言われています。


検索ユーザーの集客を考えている方はここにしっかりと記載をしておいたほうが良いです。文字数は大体120〜160文字。


どんな人のための、何が得られるページなのか、を分かりやすく伝わる文章を入れてみましょう。


で最後にkeywordsを設定します↓

サイポンでSEOの設定する方法6

keywordは、SNSのハッシュタグやタグをイメージしてもらえるとよいでしょう。

ページの内容に合ったキーワードを入力ください。個数はいろいろな意見がありますが、メインのキーワード1〜2個でよいかと思います。


検索結果にページを一切表示させたくない場合は「拒否」を選択します。


変更が終わったら、「保存する」を忘れずに!

3. サイポンで作ったLPを公開する方法

サイポンで作ったLPを公開する方法

「サイト設定」→ページ公開の「公開する」→「変更を保存」
の順にクリックください。

4. サイポンでページを公開した後の注意点

サイポンでページを公開した後の注意点

公開後に再度修正をしたくなることがあると思います。

その場合、修正を加えても「サイト更新」(左側のメガホンのボタン)を押さない限り、実際のサイトには反映されませんので、ご注意ください。

サイポンの保存は自動で行われます。

再度になりますが、スマホの編集画面と実機での表示が異なる場合があるので、必ずスマホで修正点を確認をしましょう。

5. 実際にサイポンで作成したLP

僕がサイポンを使って作成したサイトをいくつかご紹介します。

参考になれば幸いです。

コーディングして制作したページに近い、細かなデザイン設定ができるのがサイポンの特徴ですね。

まとめ

いかがでしたでしょうか?

デザインやプログラミングの経験がなくても
作成出来る無料のLP作成ツールは、徐々に増えてきていますが、
「どうしても素人っぽくなってしまう・・・」という点がデメリットでした。

しかし、これからサイポンのように、細かな設定やセミプロ仕様のデザインテンプレートの利用が可能なツールもこれからどんどん出てくるでしょう。

今回の記事の内容を覚えていただくことで、
業者の納品を待つこともなく、スピード感を持って、
商品をリリース出来ると思います。

ぜひあなたのビジネスのオンライン化に役立ててみてください。

最後に、記事の中に記載した注意点やチェックポイントを整理しておきます。

  • サイト設定、SEO設定の変更後は「保存する」ボタンを忘れずにクリックしよう
  • 「セクションを追加+」→「サンプルのレイアウトを追加」の順に作成を進めると、初心者の方でもかんたんに作ることが出来ます
  • PCサイトが出来たらスマホサイトの仕上がりもチェックしよう
  • ページを公開したら、PC・スマホでデザインをチェックしよう
  • 変更点を公開ページへ反映させるために「サイト更新ボタン」をクリックしよう

これらはページの見やすさや信頼性の低下を防ぎ、離脱者を少なくするための大切なチェックポイントでもあるので、押さえておいてくださいね!


もし、直接サポートや相談したいことがある場合は
サイポンの無料個別相談会も開催しています。

ご活用ください。

サイポン無料登録ページはこちら
(5ページまで無料でLP公開できます)

>