lp1-wp-ja

ランディングページの作り方 1
− 独自ドメイン、レンタルサーバー、WordPress導入

スマホアプリ(App)開発を行なっていますが、公開にあたり、ストアでの申請手続きに、自身のHPでプライバシーポリシーの公開が必須項目となっています。当時、必要最低限のものを作成して公開しましたが、予想以上に労力と期間を要してしまいました。
同様のことで苦労される方も多いのではないかと考え、今回自身のHP(以降、ランディングページまたはLP)を一新するにあたり作成手順を自身の備忘録も兼ねて公開することとしました。

前回もWordPressを利用しましたが、海外の定評のある某テーマを購入し、テンプレートをベースに作成しました。今回もWordPressですが、デザイン性や作成の自由度から、Elementorを使って、テンプレートは参考程度に、一から作成しました。

もちろんノーコードでHTMLやCSSなどの知識不要で、初心者の方でも無理なく読み進めるようになっております。

アプリ公開に必要なランディングページ作成までは、Elementorは無料版のみで作成しています。ブログ(本ページ)部分はElementor Pro (有料版)も使用して作成しています。

ここでは競合ツールなどを網羅的にカバーして比較評価を行うようなことはしていませんが、比較検討の結果、デザイン、カスタマイズや導入のし易さなどから個人的にベストと考えられる環境やツールを使って、最短で作成できるよう手順を説明していますので、皆様の参考になれば幸いです。

ランディングページの作り方 1
− 独自ドメイン、レンタルサーバー、WordPress導入

利用環境について

・独自ドメイン:ムームードメイン

・レンタルサーバー:ロリポップ!

・ブログ作成サービス:WordPress

・WordPress Theme:Hello Elementor

・WordPressプラグイン 

 - Elementor(ページビルダー)

 - Essential Adonis for Elementor (ヘッダー)

 - MetForm(お問合せフォーム)

 - Polylang(多言語)

 ※プラグインは全て無料版のみを使用

独自ドメインを取得

MuuMuu Domainにて独自ドメインを取得

①ムームードメインにアクセスして、アカウントの新規登録を行います。

https://muumuu-domain.com/domain/search

②「ドメインを検索する」をクリックします。

③希望のドメインを入力し検索 例:hogehoge3 など

④取得可能なドメインが金額とともに表示されるので、希望のものをカートに入れます。新規取得費用だけでなく、更新費用もチェックしてから選びましょう。hogehoge3.com の例ですと、年間で新規999円、更新1728円となります。

⑤希望のドメインを「カートに追加」します。

⑥「お申し込みへ」をクリックして進みます。

 

※サーバー契約で0円という選択肢がありますが、今回サーバーはロリポップで契約しますので、選択しません。

 以下を選択して進みます。
  • Google Workspace:今は利用しない
  •  MuuMuu Servers:今は利用しない
  • ドメインの契約年数:1年
  • WHOIS公開情報:ムームードメインの情報を代理公開

⑥「お支払い価格」を確認、「お支払い方法」を入力して、「次のステップへ」をクリックします。

⑦利用規約を確認して、「下記の規約に同意する」にチェックを入れて、ドメインを取得します。

 

ドメイン取得後も アカウント > コントロールパネル から確認や一部変更ができます。

⑧ドメイン情報認証には24〜72時間程度かかるとのことです。ドメイン操作 > ドメイン一覧  に対象ドメインがあり、未認証ドメイン一覧に「現在未認証ドメインはありません」と表示されていれば手続きは完了です。 

レンタルサーバーの契約

ロリポップ!でレンタルサーバ契約

①ロリポップ!レンタルサーバー(https://user.lolipop.jp) にアクセスします。 

②サーバープランを選択し、アカウントの新規登録を行います。プランはWordPressが必要なため、ライト以上を選択します。特別なニーズがなければ、ライトをおすすめします。

③ロリポップ!のドメインを設定します。

④枠内に文字列を入力し、「URLの末尾を変更する」をクリックして末尾も変更します。

※独自ドメインを設定する場合は、このアカウント名はサーバーへのアクセスの際に利用するだけのものです。独自ドメインを設定する場合は、独自ドメインでもアクセスできるようになりますので、適当なもので構いません。独自ドメインを設定しない場合は、ランディングページのURLとして公開されます。

⑤その他、必要項目を記載し、アカウント作成を完了させます。

サーバーの基本設定

サーバーに独自ドメインを設定

①ロリポップ!(https://user.lolipop.jp)にアクセスします。

②「ロリポップ!のドメイン」を選択し、契約時に設定したドメイン(例:hogehoge3.ciao.jp)とパスワードでログインします。

サーバーの管理・設定 > 独自ドメイン設定にアクセスします。

④ムームードメインで取得した独自ドメインを設定します。

  • 設定する独自ドメイン設定 (例:hogehoge3.com)
  • 公開フォルダ「aaa」など適当でよいので設定しておきます。URLには反映されません。
  • ロリポップ!では容量内であれば、複数の独自ドメインを設定できるので、公開フォルダは分けておきましょう。(例:ライトプラン 容量350GB、独自ドメイン200個まで)

WordPressインストール

サイト作成ツール > WordPress簡単インストール にアクセスします。

②WordPressのインストール先・設定の各項目を入力

入力内容は以下の通りです。

インストール先

  • サイトURL:設定した独自ドメイン 例:hogehoge3.com 
  • データベース:自動新規作成

WordPress設定

  • サイトのタイトル:公開されるサイト名 例:hogehoge3 ※後から変更可
  • ユーザー名:WordPressの管理画面にログインする際に使用するID ※後から変更不可 ※セキュリティを考慮し、サイト名とは同じでないものをおすすめします。
  • パスワード:運用状況によりますが、レンタルサーバーと同じでよい。
  • メールアドレス いつも使っているもの サイトの更新情報などが届きます。
  • 最初に設定するテーマを選択:WordPressのデフォルトテーマ(無料) ※後から変更可

③「入力内容を確認」をクリックして、インストールを完了させます。

セキュリティ WordPressサイトのSSL化

ダッシュボード > セキュリティ > 独自SSL証明書導入 にアクセスします。

②「無料独自SSLを設定する」をクリックします。

③「SSL保護されていないドメイン」にドメインが表示されます。

④対象ドメインにチェックを入れ、「独自SSL(無料)を設定する」をクリックする。

⑤設定が完了すると「SSL保護有効」となり、「SSLで保護されているドメイン」に移動します。

⑥独自SSL設定後は、URLが変わりアクセスできなくなります。WordPressのサイトや管理画面のURLは、以下から確認できます。

サイト作成ツール > WordPress簡単インストール > WordPressインストール履歴

URLの冒頭が https:// になっていれば、独自SSLの設定は完了です。

設定 > 一般設定 にアクセスする

 

※以降はWordPressでの設定です。

WordPressの管理者ページにアクセスします。

⑧「WordPress アドレス (URL)」と「サイトアドレス (URL)」を「https://」から始まるURLに修正し、保存する。

セキュリティ WAFの設定

セキュリティ > WAF設定 にアクセスします。

⚠️ 設定変更を「無効にする」をクリックし、設定状態を「無効」にします。WAFが有効だと、この後のElementorでの編集ができませんので注意してください。

ランディングページの作り方 1
− 独自ドメイン、レンタルサーバー、WordPress導入

関連記事