目次

smartLPへようこそ！

smartLPではあなたのオリジナルのWEBサイトを簡単にデザインし、公開できます！

この記事ではsmartLPの基本とレイアウト構築の流れを解説します。

smartLPではコーディングの知識や経験がない場合でも、ドラッグ＆ドロップの直感的な操作でサイトの作成が可能です。

基本的にレイアウトを構築する際は、セクションやボックスをエレメントの一種として考えます。

WEBサイトをセクションごとに分けて考え、セクションの中にボックスやテキスト、画像、動画などを配置してレイアウトを構築していきます。

最後にエレメントの大きさや位置を変えたり、色を付けたりしていくことでスタイリングしていきます。

​

smartLPでは下図のページエディター上でWEBサイトをデザインします。

・キャンバス

ページエディターの真ん中にあるのがキャンバスです。キャンバス上にセクションやボックスなどを配置してWEBサイトを作成していきます。

・サイドバー

キャンバス左側にサイドバーがあります。一番上の追加パネルからWEBサイトを構成する様々なエレメントをキャンバスに追加していきます。他にもAI自動生成やコンポーネント化（同じエレメントの使い回し）・レイヤーの編集・ページ設定・コンバージョン管理ができます。

→新機能のAI自動生成の詳細はこちら

・スタイルパネル

キャンバスの右側にあるのがスタイル／設定パネルです。

キャンバス内の選択しているエレメントによって表示されるメニューが切り替わります。ここでエレメントのサイズやレイアウトなどをスタイリングしていきます。

smartLPでは、空白のページからはもちろん、あらかじめ用意されたテンプレートを使用してページ作成を始めることができます。

目的別や業種別でテンプレートを選んだら、あとはページエディターで微調整するだけでハイクオリティなページが出来上がります。

ぜひ、smartLPを実際に触ってみてください！

smartLPのノーコードエディターで作成できるLPは、HTMLとCSSによる標準的なWEBページです。あなただけのオリジナリティあふれるLPを作りましょう！

smartLPでは、スタイルパネルのレイアウト機能を使うことでエレメントの配置や順序を自由に変えることができます。

親ボックス内の子ボックスの配置や順序は、レイアウト機能の中の方向・配分・整列の３つで決まります。

レイアウトの方向よりボックスの並ぶ方向と子要素の並ぶ順番を設定できます。

レイアウトのAlignより進行方向の配置を前寄せ・真ん中・後ろ寄せ・両端揃えに設定できます。

レイアウトのJustifyよりボックスの子要素を右揃え・左揃え・中央揃え・均等に設定できます。

smartLPはコーディングの知識や経験がない場合でも、ドラッグ＆ドロップによる直感的な操作でサイト作成が可能です。

追加パネルより、エレメントをドラッグ&ドロップでキャンバス上に配置します。

また、レイヤーパネルから順序を変えたいエレメントをドラッグし、配置したい場所でドロップすることで配置場所を変更することができます。

レイヤーパネルの詳しい操作に関してはこちらをご確認ください。

エレメントの配置を細かく調整したい場合は、スタイルパネルのスペースより余白を設定しまょう。

余白にはパディング（内側の余白）とマージン（外側の余白）を設定します。

調整したいエレメントを選択し、パディングとマージンの上下左右に数値を入力します。

数値を設定すると、余白部分に色が反映されます。

PC・タブレット・モバイルそれぞれの端末で表示されるサイトのデザインを調整することをレスポンシブ対応と言います。

smartLPでは、PCサイズで作成したデザインを基準にタブレット・モバイルのブレークポイントを指定することでWEBサイトのレスポンシブ対応が可能です。

デバイスごとの見え方の状態で値を変更することで、そのデバイスに合ったのレスポンシブ設定ができます。

例えば、タブレットでの見え方が表示されている状態でスタイル機能のサイズや字幅、太さなどを変更することが可能です。

→レスポンシブ対応の詳細はこちら