MENU
ブロガー向け!おすすめのオンラインサロン

【WordPress】サイトのLPデザイン制作フロー[トップ・ホームページ]

wordpress-lp-design

LP制作も始めたので、デザインの制作フローについてを書いておきます。

すいみん

本サイト「デザノマ」での場合ですのであしからず。

ちなみにLP(ランディングページ)とは直訳すると着地ページのことです。
ユーザーさんが一番最初に見るページにあたります。

基本的なLP制作のフローが下記に図解しました。

Site design production

本記事ではLP制作の技術的なフローについてもう少し詳しく書いています。

目次

技術的なことが好きなデザイナー。
ブログで副業しています。
デザイナー副業チーム「デザノマ」の窓口をしています。
ご依頼はこちらから

デザノマのLPのデザイン制作フロー

デザインの作成は主に下記の4段階で作成していきます。

  1. トンマナ(デザインの方向性提案)の作成
  2. ロゴの作成
  3. ヘッダーの作成
  4. 残りのサイトパーツ&レイアウトの作成

LPのデザインはPC版とスマホ版の2つのレイアウトを作成します。

※Adobe XDというソフトを使うことでネット上でできるだけ正確にLPのレイアウトを再現できるようにしています・

※またCSSのアニメーション絞り込み検索など、特殊な機能を導入する場合は技術検証したものをサンプルも提示しています。

デザノマのLPのコーディング制作フロー

LPのレイアウト(見本)がFIXしましたら、コーディング作業に入ります。

コピーサイトで見本を再現して確認してもらった後に、本番サイトに反映するという手順を踏んでいます。

STEP

WordPressにユーザーを追加する

お問い合わせ後、見積もりやスケジュールが固まりましたらLP制作に入ります。
こちらのメールアドレスをお渡しして、WordPressサイトのユーザーを管理者として追加していただきます。

STEP

WordPressを仮サイトに複製する

All-in-One WP Migration」というプラグインを導入して、現状のWordPressデータをダウンロードいたします。

特定の記事だけにしか影響のない書き方ができそうであれば、記事のインポートは必要ありません。

そのデータをこちらで用意した仮サイトでインポートしてサイトを再現します。

仮サイトは「Password Protected」というプラグインでパスワード付きの鍵をかけます。
また仮サイトはnoindexにしているので、重複しないようにしているので安心してください。

なぜ全データ複製するのか?LPはWordPressテーマの設定も変更することがあるので記事ページにも影響がないか確認するためにまるっと複製します。

STEP

仮サイトにてコーディング

できるだけクライアントさんでも編集できるようにするという方針(メリット)でLPを作成しています。

  1. テーマ自体の機能を最大限に使用する
  2. ブロックエディタ上でコーディングする
  3. 1、2でも難しい場合の箇所はテンプレートをコーディングする

ブロックエディタ上でコードを記載している例です。

これによって画像やリンク、文言などサイト運用者でも簡単に編集できます。

このやり方のデメリットも書いておきます。

1.テーマの設定変更による影響範囲

テーマ自体の設定変更は他の記事ページにも影響がでてしまうので、納品後に編集する場合は注意が必要です。

2.ブロックエディタに余計な表示が出る

①HTMLがブロック内で完結しない記述の場合は、再編集時に下記のような表示がでるようになります。

HTML編集で普通に再開できますが、解決を押してしまうと余計なコードが追加されてしまうデメリットが発生します。(できるだけ発生しない用にしてますが、利便性を考えて採用することもあります。)

3.CSSの設定変更による影響範囲

CSSは基本的にはLPだけに影響があるように書いています。

例えば.home .hogehoge{}と記述するとトップページにしかCSSが反映されない等

もしCSSを上書きしたい場合は注意が必要です。

場合によっては変化がないので、追加CSSで記載する、または!important;で記載する必要があるのでご相談ください。

※SWELLのように記事内にCSSを各欄があればそちらに優先的に記述します。

STEP

仮サイトでのLPの確認

仮サイトでの確認はパスワードを入れれば、いつでも確認できます。

さまざまなデバイスで確認し、気になるところの調整を重ねて問題なければ、本番サイトへ移行します。

STEP

本番サイトへの移行

FTPと管理者権限を使用して本番サイトで仮サイトと同じ設定をしていきます。

主にやることは

  • テーマ側のカスタマイズ設定(ヘッダーとフッター以外は基本的にはいじりません)
  • ブログパーツやプラグインなどのインポートと設定
  • メディアへ画像のインポート
  • 子テーマへphpをインポート(FTP)
  • functions.phpの挿入と設定(FTP)
  • style.cssの挿入(FTP)
  • 個別記事の編集とリンクの修正
  • プラグインのインストール

などです。

移植後は記事ページなど影響がないか確認しましょう。

問題がなければ、LP制作の完了です。

クライアントに更新方法もレクチャーします。

WordPressサイトのLPデザイン制作フローまとめ

本記事では「【WordPress】サイトのLPデザイン制作フロー[トップ・ホームページ]」について書きました。

今後もやり方を改善して、できるだけスムーズにLPが制作できるようにしていきます!

すいみん

ブログの見た目をよくすると本格的なサイトに見えるので、気になった方はお問い合わせくださいませ。

よかったらシェアしてね!

この記事を書いた人

技術的なことが好きなデザイナー。
ブログで副業しています。
デザイナー副業チーム「デザノマ」の窓口をしています。
ご依頼はこちらから。

この記事も読まれてます

目次
閉じる