Systeme.io

あなたはオンラインコースビジネスを運営する事業者として、Systeme.ioでのページ移植方法を一通り学んだけれど、実際にセクションを作成する際に全体の流れを確認したいと思っていませんか？個別の技術は理解できたけれど、それらをどう組み合わせて1つのページを完成させれば良いか迷っているかもしれません。ここでは保存したHTMLページのデザインをもとに、Systeme.ioでセクションを0から構築カスタマイズする方法を、これまで学んだことの総まとめとして解説します。

これまでの記事でHTMLデータの保存方法、セクション・行・要素の構造、フォントや色の調整、動画の埋め込み、画像の効率的な移植方法などを学んできました。ここからは、それらの知識を統合して、実際にセクションを1つずつ作り上げていきます。セクションの追加と設定、背景画像や色の指定方法、セクションごとの余白の調整などを実践しながら、ページ移植の全体像を確認していきましょう。

セクションは背景色の切り替わりで区切る

セクションの境界は背景色の違いで判断できます。

たとえば、今表示されている部分は真っ黒な背景で、その下にさらに深い黒が重なっています。このように、背景色が切り替わる箇所がセクションを区切る目印となります。つまり、色が変わるこのポイントで新しいセクションに分けていくわけです。

Systeme.ioエディタのレイアウト内で「セクション追加」ボタンをクリックすると、ページの一番下に新しいセクションが追加されます。緑色で表示される部分が追加された新しいセクションです。さらにセクションを追加したければ、同じようにもう一度「セクション追加」をクリックするだけです。まずはこの「箱」をページの下に足していく、というイメージで進めていきます。

行と要素を配置してページの骨組みを作る

元のページを確認しながら必要なカラム数を判断し、その行を追加していきます。各行にはテキスト要素や画像要素を並べて配置しましょう。最初はテキストだけを先に入力し、画像の場所には空の画像要素を仮配置しておくことで、後から画像を設定する際に効率よく作業できます。

たとえば元のページが「テキスト、画像、テキスト、画像」といった配置だったので、テキストと画像を交互に並べ、「テキスト、画像、テキスト、画像」とテキスト要素や画像要素を入れていきます。また、2列目でも「テキスト、画像、テキスト、テキスト、テキスト」といった配置だったので、その通りに配置します。

連番を付けた画像を順番に差し込む

画像ファイルはあらかじめ「001」「002」「003」などの連番で整理して保存しているはずです。これらの画像をSysteme.ioのアセットフォルダにアップロードしたら、画像要素をクリックしてアセットフォルダを開き、連番順に「001」「002」「003」…と該当する画像を選択して差し込んでいきましょう。

画像の順番が明確なので、どの画像をどこに割り当てるかで迷うことがありません。この方法を使えば、ミスを防ぎながらスムーズかつ効率良く画像を配置できます。

セクションの背景色とパディングを設定する

ここから重要なのが、セクションごとの背景色の設定です。

編集画面でセクションを選択し、歯車アイコンをクリックすると、背景色やパディング、マージンの調整ができます。

例えば上下や左右の余白をここで細かく設定することが可能です。この例では、背景色をほぼ真っ黒に設定していきます。この場合、文字が見やすいように文字色も白に変更しましょう。上部のセクションと比べてやや濃い色になっているので、もし境目をよりはっきりさせたければ、上のセクションの色をもう少し薄くすると良いでしょう。

こうすることで、セクションの切り替わりが視覚的に分かりやすくなります。この手順を繰り返せば、それぞれのセクションごとに背景色を変えたり新しいセクションを追加したりできます。

パディングとマージンで余白を調整する

セクションの歯車アイコンをクリックすると、背景色に加えてパディングやマージンも調整できます。パディングはセクションの内側にできる余白、マージンは外側の余白となります。この2つを変更することで、要素やセクション間のスペースを自在にコントロールできます。

元ページを確認しながら、「上のセクションとの間を広げたい」と感じたらマージンの上側を、「中身と枠の間を広くしたい」と思ったらパディングをそれぞれ増やしてください。こうすることで、オリジナルに近い見た目を再現できます。

なお、Chromeのデベロッパーツール（検証機能）を使うと、元ページで実際に設定されているパディングやマージンの数値が確認可能です。それをSysteme.ioに入力すれば、より精密に余白の再現ができます。ただし、あまり細部にこだわりすぎず、目安として同じ程度の余白になっていれば十分です。

まとめ：セクション作成でページ移植の全工程を理解する

ここまでセクションの作成を通じてページ移植の総まとめを行ってきました。最後に要点を3つにまとめました。

• セクションは背景色の切り替わりで区切り、セクションボタンをクリックするだけで簡単に追加できる。
• 行と要素を配置して骨組みを作り、連番を付けた画像を順番に差し込むことで効率的に作業できる。
• セクションの歯車マークから背景色、パディング、マージンを設定し、これまで学んだ技術を総動員してページを完成させる。

あなたはオンラインコースビジネスを運営する事業者として、Systeme.ioにページを移行する際に大量の画像を効率よく扱う方法が分からず悩んでいませんか？一つ一つ画像をダウンロードしてアップロードする作業に、時間と手間がかかりすぎて困っている方も多いはずです。ここでは、ページ内の画像をすばやく、ミスなくSysteme.ioへ移植するための効率的な手順を解説します。

画像の移植作業は手間がかかりますが、ちょっとした工夫で効率を大きく改善できます。ポイントは、画像ファイルを連番で管理すること、そしてアップロード作業を始める前にアセットのファイルへ画像をまとめて用意しておくことです。

画像を連番で管理してダウンロードする

画像を効率よくダウンロード・整理するためのコツを紹介します。Systeme.ioでは複数画像の一括アップロードができないため、作業の最初に画像用の専用フォルダを作成し、ファイル名に通し番号を付けて保存する方法が最も効率的です。例えば画像が100枚あるなら、「001」から順に番号を付けていきましょう。

作業の流れとしては、ページ上部から順番に画像を右クリック→「名前を付けて画像を保存」でダウンロードしていきます。各画像ごとに「001」「002」…と連番で名前を付けていきましょう。保存するフォルダ名は何でも構いませんが、画像ファイル専用にしておくと分かりやすいです。

原則としてページの上から順番に、そして左から右へと進めていきます。もし同じ画像が繰り返し登場する場合は、すでに保存済みであれば追加でダウンロードする必要はありませんので飛ばしてください。このように、ページ全体の画像を漏れなく順番にダウンロードすることが重要です。

画像に連番を付けて管理する一番のメリットは、画像配置のミスを防げる点です。ファイル名がバラバラだと、どの画像をどこに使うか分からなくなります。しかし、連番で管理しておけば、ページ上の配置順に沿って順番に差し込むだけで簡単に作業できます。

そのシンプルさが、結果的に作業全体の効率アップにもつながります。また、連番で管理しておくことで、後から画像を差し替えるときも便利です。たとえば「あのセクションの画像を変更したい」となった場合でも、ページの上から順に何番目かを数えるだけで該当ファイル名がすぐに分かるので、探す手間が大きく省けます。

アセットのファイルに事前アップロードすると作業が速くなる

画像はアセットのファイル管理機能からアップロードするのが最も効率的です。もちろん、作業しながらセールスページ上でその都度1枚ずつ画像をアップロードして差し込むことも可能ですが、最初にまとめてアセットのファイルに画像を用意しておくと、後の作業時間が大幅に短縮されます。

画像のアップロードは「ここにドラッグ＆ドロップする」エリア、もしくは「クリックして参照」からファイルを選択して行います。ただしSysteme.ioでは現状、画像のアップロードが1ファイルずつしかできません。一括選択できないのはやや手間ですが、おそらくサーバーへの負荷を抑えるための仕様だと思われます。

一度に多くの画像を準備したい場合は、1枚ずつ地道に選択してアップロードしましょう。選択とアップロードを繰り返す形にはなりますが、セールスレター編集画面で画像を都度アップロードしながら貼っていくより、事前にアセットのファイルに全ての画像を登録しておく方が全体の作業効率は上がります。画像一覧にすべて反映されたことが確認できたら、アップロード完了です。

ページ編集時は画像要素を先に配置しておく

まず、セールスファネルに進んでページの編集画面を開きましょう。作業はページの上から順に画像を挿入していく形で進めます。多くの方がテキストだけを先に配置し、後から画像エレメントを追加しがちですが、セクションごとにボックスを作成する際には、テキストと一緒に画像エレメントもあらかじめ配置しておくことが重要です。

たとえば「テキスト、テキスト、画像」という順番なら、その構成通りに最初から画像エレメントも入れておきます。先にレイアウトを組んで、後から編集画面で画像エレメントをクリックし、必要な画像を順番に差し込んでいきましょう。

この方法なら、アップロード作業や画像要素の追加を何度も繰り返す必要がなく、一連の流れがとてもスムーズになります。これが僕が実践している、効率良く画像を移植するためのコツです。

テキストをコピペする際、合わせて「ここは画像」「ここはテキスト」と確認しながら要素を順に置いていくと、後の作業が非常にスムーズです。この時、画像はまだ設定せず空のままで問題ありません。後ほどアセットのファイルにアップロードした画像を順番に割り当てていけば、効率よく移植作業が進みます。

僕も実際にこの手順で多くのページ移行を経験しましたが、繰り返して作業するほど時間短縮できるようになりました。最初は1ページの移植に約1時間かかっていたものの、2ページ目、3ページ目と進めるうちに40分、30分と着実に作業速度が向上していきます。少し手間のかかる工程でも、効率化の工夫と慣れの積み重ねによって、確実に作業スピードを上げられるのがこの方法のポイントです。

まとめ：連番管理と事前アップロードで画像移植を効率化

ここまでSysteme.ioへの画像移植を効率化する方法を解説してきました。最後に要点を3つにまとめました。

• 画像は専用フォルダに001、002、003という連番を付けてページの上から順番に保存し、配置ミスを防ぐ。
• アセットのファイルに事前に画像をアップロードしておくことで、ページ編集時にスムーズに画像を差し込める。
• ページ構造を作る段階で画像要素も配置しておくと、後で画像を選んで差し込むだけで済み、作業が速くなる。

あなたはオンラインコースビジネスを運営する事業者として、Systeme.ioへの移行を検討しているけれど、移植チームにどのように依頼すれば良いか分からず困っていませんか？どんなメールを送れば良いのか、何を伝えれば良いのか悩んでいるかもしれません。ここでは、僕が実際に移植チームに送ったメールの内容を公開し、スムーズに依頼する方法を解説します。

これまでSysteme.ioでページを再現していく方法を解説してきました。自分で作業する方法も理解できたと思います。しかし、移植チームが使える場合は、外注した方が効率的です。特に移行するページがたくさんある場合は、移植チームに依頼することで大幅に時間を節約できます。

移植チームへの依頼方法と実体験

実際に送ったメールの内容を紹介します。Systeme.ioからバドレディンさんという担当者がアサインされ、彼が僕の移植チームの窓口となりました。

送るメールは非常にシンプルで、元となるLeadpagesのURL（ソース）と、移植先となるSysteme.io上のURL（デスティネーション）を伝えるだけです。移植先をこちらで用意せず、「空の状態から新しいセールスファネルとページを作ってください」と依頼する形でも問題ありません。

僕はどこにページを配置するかを自分で決めたかったので、先にSysteme.io上でセールスファネルを作成し、そのページURLを担当者に渡しました。伝えるべきことは、元ページのURLと移植先のURLだけで詳細な説明は不要です。移植チームはこうした依頼に慣れているため、必要最小限の情報でスムーズに理解して対応してくれます。

僕が移植を依頼した翌日には、なんと「完了しました」という返事が届きました。1ページ程度なら本当に1日で移植が終わるスピード感です。自分で作業した場合は数日かかることもありますが、移植チームに依頼すれば翌日には仕上がっているので、とても効率的だと感じました。

正直、日本語のページはアルファベットと違い、崩れやすいのではと心配していましたが、出来上がったページは元のレイアウトやボタンのサイズ、文字の大きさまでしっかり再現されていて驚きました。本当に1日でここまでのクオリティに仕上げてくれるので、日本語ページでも全く問題ありませんでした。

多少の微調整が必要になることはありますが、骨組みはほぼ完璧なので、あとは細かな部分を整えるだけです。ゼロからすべて作るのに比べて、8割方完成しているものを最終調整する方が圧倒的に楽です。移植チームに依頼する価値は十分にあります。

移植先の準備方法と効率的な活用法

移植先のURLを自分で用意して渡すかどうかは自由に選べます。僕は事前にSysteme.io上でセールスファネルとページを作成し、そのURLを移植チームに共有しました。これにより、どのファネルのどのステップにページを配置するか自分で細かく指定できます。

一方、「新しくセールスファネルとページを作ってそこに移植してください」とだけ依頼しても大丈夫です。その場合は、移植チーム側で新規ファネルとページを作成し、そちらに移植してくれます。どちらのパターンでも問題なく対応してもらえます。

僕は構成を自分で管理したかったため事前に用意しましたが、移植するページ数が多い場合などはチームにすべて任せてしまう方が手間が省けることもあります。状況に合わせて、好きな方法を選んでください。

移植チームに任せれば短期間で高品質なページが仕上がります。特に多数のページを移行したい場合は、積極的に移植チームを活用するのが最適です。

ただし、いきなり全てを外注するのではなく、まずは1ページは自分で移行作業を体験すると良いでしょう。実際に自分で手を動かすことでSysteme.ioのページビルダーの使い方を理解でき、後々チームが作ってくれたページの細かい調整も自信を持って行えるようになります。

つまり、移植作業の技術を自分でも身につけつつ、効率化のために移植チームも適切に活用するのがバランスのいい進め方です。すべて自分でやる必要も、逆にすべて外注に頼る必要もありません。状況に応じて上手く使い分けましょう。

まとめ：シンプルなメールで移植チームに依頼できる

ここまで移植チームへの依頼方法を解説してきました。最後に要点を3つにまとめました。

• 移植チームへの依頼は、元のページのURLと移植先のURLを記載したシンプルなメールを送るだけで良い。
• 1ページであれば翌日には完成し、日本語のページでもレイアウトやフォントサイズが忠実に再現される。
• 移植先を自分で用意するか移植チームに任せるかは選択でき、状況に応じて使い分けることで効率的に移行できる。

あなたはオンラインコースビジネスを運営する事業者として、Systeme.ioでページに動画を埋め込みたいけれど、YouTubeリンクを使うべきかファイルをアップロードすべきか迷っていませんか？それぞれのメリットとデメリットが分からず、どちらを選べば良いか判断できていないかもしれません。ここではSysteme.ioで動画を埋め込む2つの方法と、それぞれの特徴について解説します。

動画を埋め込む方法は方法は2つあります。1つは直接リンク、もう1つはファイルをアップロードする方法です。それぞれにメリットとデメリットがあるので、あなたの状況に合わせて選んでください。

直接リンクとファイルをアップロードの2つの選択肢

Systeme.ioで動画を埋め込む方法は2つあります。

1つは「直接リンク」でYouTubeなどのリンクを貼り付ける方法、もう1つは「ファイルをアップロードする」で動画ファイルをSysteme.ioにアップロードする方法です。どちらでも問題ありません。

ファイルをアップロードの場合はSysteme.ioのサーバー上に動画を保存します。一方、YouTubeなどの直接リンクを使う場合は、動画はYouTube側に保存されていて、そのリンクを貼り付けて表示する形です。

Systeme.ioのサポートには「YouTubeは読み込みが遅くなることがある」と言われましたが、実際にはYouTubeの方が表示速度は速い印象があります。逆に、Systeme.ioのサーバーの方がやや負荷がかかりやすい場合もあるので、スピード重視ならYouTubeで良いと思います。

正直なところ、どちらの方法を選んでも大きな差はありません。ただ、将来的にYouTubeアカウントが停止されてしまうリスクを考えると、Systeme.ioに動画をアップロードしておくのも安心材料の一つになります。

YouTubeリンクのメリットとデメリット

もしYouTubeのアカウントを今後も使い続ける予定があり、動画も削除しないのであれば、YouTubeから動画を埋め込む方法は有効です。さらに将来的に別のプラットフォームへ移行した場合でも、YouTubeに動画があれば手軽に再利用できます。

しかし、YouTubeリンクを使う場合には注意点もあります。お客様が動画プレイヤー内をクリックすると、YouTubeの公式ページへ遷移してしまうことがあり、そのまま自分のページに戻ってこない可能性があります。こういった状況を避けたいなら、Systeme.ioに動画ファイルをアップロードする方法がおすすめです。

ファイルをアップロードであれば、「共有」や「後で見る」などの余計なボタンも表示されず、動画の再生に集中してもらえます。つまり、YouTube埋め込みの場合は関連動画や共有ボタンなどが見えてしまい、お客様の注意がそれてしまうリスクがあるのです。

ファイルをアップロードのメリットとデメリット

Systeme.ioへファイルをアップロードする最大のメリットは、視聴者を自分のページ内に引き留めることができる点です。YouTubeのロゴや余計なボタンが一切表示されないため、動画そのものに集中してもらえます。

また、YouTubeアカウントが突然停止されるリスクからも解放されます。実際、規約違反がなくても予期せずアカウントがバンされて、全ての動画が見られなくなってしまう事例もあります。しかしSysteme.ioにファイルをアップロードしておけば、こうした万が一のリスクを回避できます。

一方、デメリットも理解しておきましょう。Systeme.ioのサーバー容量を使用するため、契約プランによっては保存できる動画量に上限があります。さらに、動画ファイルが大容量の場合、アップロードに時間がかかります。加えて、Systeme.ioのサーバー速度はYouTubeほど高速ではない場合もあるので、その点も考慮が必要です。

YouTubeリンクで動画を埋め込む実際の手順

今回はYouTubeリンクを使った動画の埋め込み方法を解説します。手順はとてもシンプルです。

まず、YouTubeで埋め込みたい動画のページを開き、URLをコピーします。次にSysteme.ioのページビルダーで「動画」エレメントを追加し、「直接リンク」を選択します。あとは先ほどコピーしたYouTubeのURLをそのまま貼り付けるだけでOKです。これだけで動画がページ上に表示されます。

埋め込んだ動画は、サイズや配置を自由に調整でき、レスポンシブデザインにも自動で対応しています。そのため、パソコンやスマホなど、どの端末でも最適なサイズで再生されます。YouTubeの埋め込みプレイヤーは見た目もきれいで、特別な設定をしなくてもそのまま使えるのが大きなメリットです。

どちらを選ぶべきか？状況に応じて使い分ける

どちらの方法を選ぶかは、ご自身の運用スタイルやニーズに合わせて判断しましょう。YouTubeアカウントを継続的に使う予定があり、管理の手軽さや読み込みの速さを重視するなら、YouTubeリンクの埋め込みが便利です。動画を他のサービスに移行する場合も流用しやすいのが利点です。

反対に、お客様を自分のページ内にとどめておきたい場合や、YouTubeアカウント停止などのリスクをできるだけ回避したい場合には、Systeme.ioへのファイルをアップロードがおすすめです。アップロードは少し手間がかかりますが、動画本数が多くなければ容量にもさほど困りませんし、安全性が高まります。

僕自身は用途によって使い分けています。普段はYouTubeリンクを活用しつつ、セールス動画など重要性の高いものはファイルをアップロードすることで、リスクと利便性のバランスを取っています。ぜひ、ご自身の状況や目的に合わせて最適な方法を選択してください。

まとめ：どちらの方法も簡単で効果的

ここまでSysteme.ioで動画を埋め込む2つの方法を解説してきました。最後に要点を3つにまとめました。

• YouTubeリンクを使う方法とSysteme.ioにファイルをアップロードする方法の2つがある。
• YouTubeリンクは表示速度が速く設定も簡単だが、関連動画などが表示されてお客さんの注意が散る可能性がある。
• ファイルをアップロードはお客さんをページに留められるが、サーバー容量を消費する。

あなたはオンラインコースビジネスを運営する事業者として、Systeme.ioでページを再構築する際に、元のページと同じデザインに仕上げる方法が分からず困っていませんか？フォントサイズや背景色をどのように調べて設定すれば良いのか悩んでいるかもしれません。ここではChromeの検証機能を使って元のデザインを確認し、Systeme.ioで同じように再現する方法を解説します。

前回の記事でセクション、行、要素の順番ですべての要素を配置しました。テキストも画像も全て入れ終わった状態です。次にやることは装飾です。フォントのサイズや色、背景色などを調整して、元のページと同じ見た目に仕上げていきます。

Chromeの検証機能でフォントサイズと色を確認する

Chromeの場合、確認したい部分を右クリックして「検証」を選択すると、フォントサイズなどの情報がすぐに表示されます。

たとえば、このテキストのように「font-size: 18px」と出ていればSysteme.ioでも同じく18に設定します。次の要素が「font-size: 40px」なら40に、また別の箇所が28であれば28にする、といった具合です。元ページを右クリックして検証画面を開き、表示された値をSysteme.ioの設定欄に入力するだけなのでとても簡単です。

検証機能ではフォントサイズ以外にも、行間（line-height）や余白（padding/margin）も調べられます。例えば文字が詰まっている場合は、line-heightの値を調整することで読みやすくできます。余白を調整したい箇所はパディングを設定し、元ページに近い仕上がりになるようにします。

続いて、背景色を合わせていきましょう。真っ黒だと思っても、実は少しグレーがかっている場合もあります。背景色の値は検証機能の「background-color」を見ればわかりますが、分からなければカラーピッカーで近い色を指定してもいいです。Systeme.ioのセクション設定（歯車アイコン）から背景色を選び、完全な黒（#000）ではなく、#1d1d1dなど、少しグレーに寄せると元ページの雰囲気が再現できます。

テキストの色も同様に、元ページを見ながら、同じ色になるようにSysteme.ioで選んでいきましょう。カラー指定は16進数（カラーコード）で行うと間違いがなく確実です。検証機能で表示されるカラーコードをコピーして、そのまま貼り付ければ全く同じ発色になります。

このように、検証機能を使い各パーツのフォントサイズ・色・背景色・余白をチェックし、一つ一つSysteme.ioの設定値に入力・反映するだけで、元ページとデザイン面でもほとんど同じものが作れます。

テキストの配置と装飾の調整方法

現在テキストが中央揃えになっていますが、左揃えにしたい場合は、テキストをクリックして設定パネルを開き、「配置」オプションで左揃えを選択してください。

テキストの大きさも同じく編集パネルから調整できます。右揃え・中央揃え・左揃えの切り替えは、すべてテキスト要素の設定項目から簡単に行えますので、元ページを確認しながら同じ配置になるように設定してください。

テキストの配置だけでなく、太字や斜体、アンダーラインなどの装飾も簡単に調整できます。見出しを太字にしたり、強調したい部分をアンダーラインにしたりすることも、Systeme.ioのテキストエディタなら直感的に操作できます。元ページと同じ装飾を再現するのも難しくありませんので、安心して進めてください。

まとめ：Chromeの検証機能を使えばデザイン調整は簡単

ここまでSysteme.ioでフォントサイズと色を調整する方法を解説してきました。最後に要点を2つにまとめました。

• Chromeの検証機能で元ページのフォントサイズや色を確認し、そのままSysteme.ioに入力する。
• 背景色や文字色はカラーコードで指定、テキスト配置も設定パネルから簡単に変更できる。