【初心者でもできる！】Zoho LandingPageでLP（ランディングページ）を作る方法

１－１．Zoho Oneのアカウント管理者に作成環境の構築＆権限付与を依頼する

Zoho Oneのアカウント管理者に、Zoho LandingPageのアカウント付与とページ作成環境の構築を依頼しましょう。

アカウント管理者がシステム周りに明るく、ドメイン管理なども行える場合、
LP作成作業者の権限は「デザイナー」権限で十分です。

LP作成を複数名で担当する場合は、
ヘッダーの編集権限やページの公開権限が必要な人は「ワークスペースマネージャー」、
これらの権限が不要な人は「デザイナー」と権限を分けて管理すると良いでしょう。

アカウント管理者には、下記ページを共有するとスムーズに伝わります。

１－２．招待メールを受信し、Zoho LandingPageにアクセスする

アカウント管理者がZoho LandingPageに「ポータル」を作成し、
ユーザー追加（アカウントへの操作権限付与）をすると、追加されたユーザー側には下記画像のメールが届きます。

メール本文内のポータル名をクリックし、Zoho LandingPageにアクセスしましょう。

リンクをクリックし、自身のZohoアカウントにログインすると、下記の画面に遷移します。

この画面が表示されていれば、ステップ１は完了です！

２－１．テンプレートからページを新規作成する

「ワークスペース」＞「新しいページを作る」　をクリックし、テンプレート作成画面を開きます。

空白のページから作ることもできますが、どのようなページを作るにあたっても、
Zoho LandingPageの操作感や仕様に慣れるまではテンプレートを利用することをお勧めします。

テンプレートは多種多様なものが用意されているので、自身の作りたいページに近しいものを選びましょう。

本記事では「eラーニングサービスのランディングページ」を作るために、
「オンライン講座」カテゴリの「オンラインキャリアアップ講座」テンプレートを利用します。

テンプレートを選んだら、任意のページ名を入力して「作成する」をクリックします。

ページ名は管理画面上でページを識別するために使うものであり、実際のWEBページ上には表示されません。
そのため自身や他管理者にとってわかりやすい名称を付けることをお勧めします。

２－２．ページを保存して確認する

テンプレートからページが生成されると、下記のような画面に切り替わります。

まずは画面右上の「完了する」＞「自分のワークスペースに移動する」をクリックし、
ワークスペース上に新しくページが生成されていることを確認しましょう。

ページ名を変更したい場合

ページ名を変更したい場合、上記画面（ワークスペース画面）で変更したいページの上にマウスを乗せ、
ページ名の右横に表示される鉛筆アイコンをクリックすると、ページ名の変更が可能です。

ヘッダーの表示／非表示を変更する方法

ヘッダーの表示／非表示は、「＋挿入する」ボタン ＞「見出しを有効にする」で制御できます。

ヘッダー画像を変更する方法

ヘッダー画像を変更するには、ヘッダー画像 ＞ 設定アイコン ＞「画像を変更する」ボタンをクリックします。

次に、任意のフォルダをクリックして「Upload」ボタンをクリックする、
もしくは指定の位置にドラッグ＆ドロップすることで、PC内の画像をアップロードできます。

アップロード操作後、アップロードした画像をクリックすることで、ヘッダー画像を変更できます。

ヘッダーに問い合わせボタンを設置する方法

すでに問い合わせフォームがあり、問い合わせフォームへのリンクを設置したい場合は、
視認性の高さやユーザビリティの観点からヘッダー欄への設置がおすすめです。

ヘッダーにボタンを設置する

ヘッダーの設定アイコン ＞「Style1」をクリックすると、ヘッダーの右側にボタンが自動生成されます。

ボタンのテキストを変更する

ボタンに表示されているテキストは「ボタンのラベル」から変更できます。

ボタンのリンク先を設定する

ボタンをクリックしたときのリンク先URLは、「リンク」タブ ＞ 「リンクを変更する」ボタンから設定します。

既存の問い合わせフォームにリンクするには、Web URL をクリックし、
「設定したURLに移動する」に問い合わせフォームのURLを入力して「OK」ボタンをクリックします。

ボタンの色を変更する

ボタンの色は、ボタン設定画面の「T」アイコン ＞ 背景の色 から変更できます。
この設定画面では、カーソルを合わせたときの色や文字サイズなども変更できます。

セクションの背景色を変更する方法

Zoho LandingPageの各表示要素は、「セクション」という単位ごとに配置していきます。
セクションとは、「ページの内容をテーマごとに分割する区切り」と理解すると覚えやすいと思います。

セクションの背景色変更は、問い合わせボタンの色変更と同じような方法です。

セクションの設定アイコンをクリックし、背景の色 から変更します。

文字色を変更する方法

背景色と文字色の白色が同化して文字が読めなくなってしまいましたので、文字色を変更してみましょう。

文字色の変更方法も、背景色やボタンの色変更と要領同じです。
「見出し」あるいは「テキスト」の設定アイコン ＞「T」アイコンをクリックし、任意の文字色を入力します。

なお、文字サイズなども同じ画面で変更できます。

文字を変更する方法

文字を変更したい場合は、変更したい文字をクリックし、直接入力で書き換えます。

小見出しを箇条書きに変更する方法
（不要な要素を削除し、新しい要素を設置する方法）

下記の画像箇所に「見出し」機能を使った英字テキストがあります。

この小見出しを箇条書きに書き換える方法をご紹介します。

不要な要素を削除する

まず、今表示されている見出しは不要となるため、ゴミ箱のアイコンをクリックし、
確認画面で「削除する」ボタンをクリックします。

新しい要素を設置する

続いて、「箇条書きの要素」を小見出しがあった箇所に設置します。

今回は「大見出しの下に配置」をしたいので、大見出しを選択して「＋」アイコンをクリック、
要素メニューの中の「段落」をクリックし、テキストエリアを設置します。

テキストを箇条書きに変更する

箇条書きは、「書いた文字を箇条書きに変換する」という操作をします。

箇条書きにしたい文字を書いた後に、対象のテキストを選択し、ツールバーの箇条書きアイコンをクリックします。

（下記画像では文字色「白」を「黒」に変更する操作も行っています）

ボタンを1行に複数個設置する方法

このテンプレートでは「Get Started」というオレンジ色のボタンが一つ表示されていますが、
二つ配置する方法をご紹介します。

まず、先の箇条書きの手順と同様にボタンを削除し、要素を追加します。
追加する要素は「ボタン」ではなく「ボタングループ」を選択することで、二つのボタンを配置できます。

配置したボタンは、ヘッダーに問い合わせボタンを設置する方法と同じ要領で、色やリンクを変更できます。

下記のように、楕円形にする、オンマウス時に背景色を変える、といったカスタマイズも簡単にできます。

セクションを削除する方法

テンプレートに不要なセクションがある場合、セクションを削除できます。

セクションの並び順を変更する方法

セクションの並び順を変更したい場合、上向きの三角アイコンもしくは下向きの三角アイコンをクリックします。

カルーセル（スライダー）に１行・4列のカードを並べる方法

Zoho LandingPageではカルーセルも設置できます。

ここでは、テンプレートにもともとあるカルーセルを利用し、1行に4列のカードを並べる方法をご紹介します。

まずはじめに、左側のテキストが不要なので削除します。

列数を増やす

カードを「2列」から「4列」表示に変更するには、列の比率設定アイコン ＞ 4列表示のアイコンをクリックします。
なお、青色でハイライトされているのが現在の設定です。

同じデザインのカードを並べる

ここまでの手順では、「空き枠はあるけれど、カードが無い」という状態です。
既存のカードと同じデザインを並べたいので、ボックスのコピーアイコンをクリックし、空き枠にペーストします。

セクション内の列を2列から1列に変更する

カルーセルが左寄せ表示になっています。
これは、このセクションにはもともとテキストがあり、セクション内が2列表示になっているためです。

列の比率設定アイコン ＞ １列表示のアイコンをクリックすると、1列の中央寄せ表示に変更できます。

ここまでにご紹介した操作方法で、2ページ目以降も4列表示に整えることができます。
なおカルーセル内のスライドページ数や矢印のデザインなどは、カルーセルの設定画面から変更できます。

プレビュー画面の表示方法

プレビューは、編集画面右上のプレビューボタンから確認できます。

プレビュー画面では、上部のアイコンでPC・タブレット・スマートフォン表示を切り替えることができます。

また、タブレット・スマートフォン表示の時、画面右上の表示切替ボタンで縦置き／横置きを切り替えることができます。

タブレットやスマートフォン端末用のカスタマイズをする方法

特定の要素をスマートフォンでは非表示にする

Zoho LandingPageでは、「スマートフォンでは表示させない」という設定が簡単にできます。

非表示にしたい要素の設定を開き、目のアイコンからスマートフォンの選択を外すだけです。

テキストの文字サイズを表示端末ごとに変更する

PCでは32px、タブレットでは24px、スマートフォンでは16px…というように、
表示端末ごとに文字サイズを変更する設定も簡単にできます。

編集画面上部の端末アイコンをクリックして表示を切り替え、
文字サイズを変更したい要素の設定を開き、任意の文字サイズを設定するだけです。

１）カスタムドメインの設定画面を表示する

編集画面右上「公開」ボタン＞「独自ドメイン」＞「すべてのドメインを表示する」＞「新しいドメイン」ボタンをクリックし、カスタムドメイン（独自ドメイン）の設定画面を表示します。

ドメイン設定画面が表示できない場合

「新しいドメインを追加する」をクリックした後、下記の画面が表示される場合、
お使いのアカウントに本操作を実行する権限が付与されていません。

本記事を管理者に共有するなどして設定作業を依頼してください。

２）利用するドメインの管理画面にCNAMEを設定する

先の手順で「新しいドメイン」をクリックすると、下記の画面が表示されます。

Domain Name欄に、利用するドメインを入力します。

続いて、サブドメインを入力し、「ドメインを追加する」ボタンをクリックします。

ドメインの管理画面（ドメインで利用しているDNSサーバーの設定画面）を開き、
画面の指示に従ってCNAMEレコードを２つ設定します。

なお、ここでの管理画面とは、Zohoの画面ではありません。

お名前ドットコムやエックスサーバー、さくらサーバー、名付けてねっと、ムームードメインなど、
ドメインを管理する他社サービスの管理画面でCNAMEレコードを設定します。

正しく設定できている場合、設定後2日程度経過するとカスタムドメインの設定が完了します。

2日程度経過し、「認証ステータスを表示する」ボタンをクリックしても完了しない場合、
CNAMEを正しく設定できていない可能性があるため設定内容を再確認してください。

本画面の再表示方法

本画面を閉じた後に再表示したい場合は、Zoho LandingPagenoドメイン設定画面より、該当ドメインの「認証する」をクリックすることで再表示可能です。

３）SSL証明書を取得する

DNS認証画面でカスタムドメインを設定完了した後は、
「SSLを取得」のボタンをクリックし、必ずSSL証明書も取得しましょう。

本設定をすることで、ページのURLを「http://～～」ではなく、
セキュリティがより強い「https://～～」で表示できるようになります。

SSL証明書の取得操作を実行後、設定が完了するまでは1時間程度かかることがあります。