今回はホームページビルダー18（以下、hpb18）でスマートフォンのページを楽々作成しちゃいましょう。手順もさほど複雑ではなく、簡単な流れで作ることができます。
スマートフォンページの作成
hpb18のいいところは、スマートフォンのような複雑なページでも簡単に作成できることです。
テンプレートのデザインも色々あるので、好きなものを選べます。「もう少し凝った作りにしたい」とか、「動的な要素を追加したい」などの場合は、別途知識が必要になります。
まずは、Step1～6までを実践してみましょう！
Step1：上部メニューから「スマホ追加 / 同期」をクリック
hpb18を起動して、上部メニューを見てください。
Step2：PCページを変換して作成
新しく作成することも出来ますが、今回は、デフォルトのデザインを使用します。
Step3：「詳細設定」をクリック
デザインを選択し、詳細設定で調整していきます。
デザインによっては上手く表示されない、デザインが崩れる等があります。その場合は、別のデザインを選択してみましょう。
Step4：下の項目２つにチェックをつける
チェックボックスにチェックを入れます。
スマートフォン用の画面は小さいため、サイドバーが入れてしまうと、ごちゃこちゃになります。
必ずサイドバーは表示しないにチェックしましょう。
Step5：作成をクリック
そのまま作成ボタンを押せば、スマートフォン用のページが自動的に作成されます。
Step6：プレビューで確認してみよう！
プレビューでデザインのズレや崩れがないか確認しましょう。
実際にボタンをクリックできるので、試しに動かしてみるのもいいでしょう。
このプレビューで崩れが起きるようなら、再度最初からトライし、別のデザインを選択してください。
スマートフォンページの削除
ページを削除する場合は、簡単です。
画像のようにタブを「フォルダ」に切り替えて、対象のフォルダを選択します。フォルダ名は変更していなければ、「sp（Smart Phoneの略）」となっています。
右クリックをして、「削除」を選択するだけでＯＫです。
PCとスマートフォンの同期
PC側のページを編集したら、スマートフォンのページと同期しなければ、編集は反映されません。
編集したら忘れずに同期させましょう。ただし、同期させるには注意が必要です。
スマートフォンのページを編集しても、「スマートフォンと同期」のボタンを押してしまうと、スマートフォン側の編集内容が全てクリアされてしまいます。
この点だけは注意しましょう。
Step.1 PC側のページを編集する
PC側で、グローバルメニューの入れ替えやなど、任意の箇所を修正します。
Step.2 「スマートフォンページの同期」を選ぶ
上部メニュー「スマホ追加 / 同期」を選択し、「スマートフォンページの同期」をクリックします。
Step.3 全てのページを選択しましょう
ウィンドウ下部にある、「すべて選択」をクリックして、全ページにチェックを付けます。
ＯＫなら、「同期」のボタンをクリックして確定させます。あとは自動的に同期が反映されます。
最後は、プレビューで反映されたかを確認しましょう。
動画でらくらく講座はこちら
こちらでは動画で操作を学ぶことができます。なるべく分かりやすく解説しているので、初心者の方でも安心してご覧になれます。
スマートフォンページの作成と削除の動画講座
PCページとスマートフォンフォンのページを同期させるの動画講座