あなたはオンラインコースビジネスを運営する事業者として、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つにまとめました。
- セクションは背景色の切り替わりで区切り、セクションボタンをクリックするだけで簡単に追加できる。
- 行と要素を配置して骨組みを作り、連番を付けた画像を順番に差し込むことで効率的に作業できる。
- セクションの歯車マークから背景色、パディング、マージンを設定し、これまで学んだ技術を総動員してページを完成させる。
