★★★ キャンペーン期間中、新規に『エックスサーバー』をお申し込みいただくと、 「初回のご利用料金が最大30%オフ!」 2025年1月7日(火)17:00まで! ・・・★★★☆彡

SWELLでの記事LPページの作り方(おしゃれ編)

当ページのリンクには広告が含まれています。
  • これで解決! SWELLでの記事LPページの作り方(おしゃれ編)

-本記事の要約-

本記事を読めば、SWELLを使って簡単におしゃれなLP(ランディングページ)を作る方法がわかります!

LPページといえば、商品購入や申し込みなどのコンバージョンを狙う1枚完結のWebページですが、実はブログでも大活躍するんです。「ここぞ!」というページを際立たせたり、普段と違うデザインで特別感を演出したり。そんなおしゃれなLPページが、SWELLなら簡単に作れるんですよ!

デザイン性に富んだLPページは、訪れた人に強い印象を与えるだけでなく、コンバージョン率の向上や特定の目的達成に効果的。しかも、SWELLなら専門知識がなくても直感的に作れるので初心者でも安心です。

この方法をマスターすれば、あなたのブログは一段と洗練された見た目になり、訪問者にとって魅力的なサイトへと変貌を遂げます!ぜひこの機会に挑戦してみてくださいね!

メチャじじ

LPページって、企業向けのものじゃないの?

チョイジジ

それに、作るのがなんだか難しそうだし…プロじゃないと無理かも!

ひろおじ

いやいや、SWELLなら初心者でも簡単におしゃれなLPページが作れるよ!ブログにも活用できるから、試してみる価値ありだよ!

この記事では、SWELLでの記事LPページの作り方(おしゃれ編)についてお話をしていきます。

この記事はこんな方にオススメ
  • LPページについて知りたい方
  • SWELL初心者の方
  • いつもと違う雰囲気でページをつくってみたい方
  • LPページを作りたい方

早く希望の記事箇所に到達したい方はコチラ

エックスサーバーとSWELLを紹介する人

\ シェアNo.1のレンタルサーバー /

シェアNo.1のWordPressテーマ

目次

SWELLのLP(ランディングページ)

LP(ランディングページ)とは?

LP(ランディングページ)は、申し込みや商品購入といったコンバージョンを目的として作られる、1枚完結の縦長のWebページ。通常は企業のWebサイトとは別で作られる単一ページで、コンバージョン率を最大化するために、ユーザーに行動をうながす設計で作られます。

一般的には企業さんなどが、購買や申し込みを狙って制作されているのをよく目にします。

最近では、集客はSNSから、申し込みは、LPサイトヘ誘導するパターンをとてもよく見かけますよね。

メチャじじ

SNSなどで誘い文句をクリックすると現れる、ズラッと縦に長い一枚だけのページのサイトじゃな!読んでるうちについつい申し込んでしまいそうじゃな・・・

ブログ運営というより、どちらかと言うとホームページ制作に縁があるページかもしれません。

記事LPとは?

また、記事LPとは、記事風のLPのこと。

本来のLP(ランディングページ)は、縦長一枚で構成、独立性が高く他へのリンクも極力排除。購買や資料請求まっしぐらみたいなイメージですが、記事風LPはもっとやわらかな感じ。ブログ記事の中でも使えて親しみやすさが特徴です。

SWELLのLPはどんな感じ?

SWELLは、LPサイト、LPページの制作機能がとても優秀。企業系のLPからブログ系のLP制作まで幅広く対応します。しかもメッチャ簡単おしゃれにLPページが作成できるのです。

本来は、購買や資料請求の為のLPページですが、SWELLを使うとおしゃれなページもできてしまうので、今回はそういったおしゃれっぽいLPページの使い方を紹介していきたいと思います。

  • 使い易いフルワイドブロック

特に使いやすいのはフルワイドブロックという機能。表現方法の幅が広く、違うサイトへ移動したんじゃないかと思うぐらい、デザインを変更することができます。

ブログって投稿ページは通常全部同じデザインになっちゃうので、このLPページがあることによって、よりブログサイトに深みを持たせることができるようになります。

そんな訳で、今回はどのようにLPサイトが作られているのか説明していきますね。

今回の趣旨は、購買させる目的のページというよりは、SWELLのLP機能を使っておしゃれっぽいページを作るところに趣旨を置いています。

今回作成してみるページは、コチラです

一見プロが作ったような見栄えですが、SWELLですとこのくらいなら簡単にできてしまいます。
ただちょっと綺麗な画像があったほうが、雰囲気はでますよ!

メチャじじ

同じブログのページとは思えんような違いじゃな!

チョイジジ

もちろんこのブログの一ページですよ!

ひろおじ

こういうことしてる人をあんまり見かけないので、差別化するにはいいかもしれません。

SWELLでおしゃれな記事LPを作るのに必要なもの

用意するもの

小奇麗な画像4枚程。(横幅を1600pxぐらい大きくしておいてください)

このサイトと同じように練習してみたい方は、画像の上で右クリック「名前を付けて画像を保存」でこのサイトから画像を入手してください。

このページの画像

上記画像を扱う場合の注意事項:この画像は、無料素材サイト Pixabay さんからダウンロードしたものです。再配布は禁止されていますから、あくまで練習用として使ってください。魅力的な画像が無料(ロイヤリティフリー)でいくらでもありますから、できればご自分で気に入ったものをダウンロードされることをオススメします。

メチャじじ

それではいってみるのじゃ〜!

SWELLでLPを作ってみよう!

大枠の設定方法

STEP
LPの新規ページを立ち上げます。
  • 「ダッシュボード」「LP」「新規投稿を追加」
  • タイトルは、「LP練習」とでも入れておきましょう。
LPの新規ページを立ち上げ
STEP
右上部「設定」から以下のように設定
  • コンテンツの最大値・・・各サイトで見た目が変わります。900~1200pxで調整してください。(他のページには干渉しないので、安心してください)
  • コンテンツの囲み枠・・・なし
  • アイキャッチ画像の表示設定・・・非表示
  • タイトルの表示設定・・・非表示(①でLP練習用と入力しましたが、非表示にしておきます。)
  • SWELLのスタイルを適用するか・・・適用する
  • ヘッダー・フッター設定・・・どちらも使用するにチェック
LPページの設定
STEP
設定は、以上です

一つ目の画像を配置する

STEP
ブロック挿入ツール切り替え
ブロック挿入ツール切り替え
STEP
フルワイドを選択
フルワイドを選択
STEP
画像を挿入します。
  • 右の設定から「メディアから選択」で一番上に表示したい画像を選択します。
LPへ画像を挿入
STEP
画像を挿入したら、詳細設定します
  • コンテンツを「フルワイド」
  • PC(パソコン)のPADDING量は80
  • SP(スマホ)は、パソコン用が完成したあと調整されることをオススメします。
  • 挿入した旅客機の画像の色と表示される画像の色が違うのは、オーバーレイカラーで調整しているからです。
画像の詳細設定
STEP
プレビューで見るとこんな感じ
  • 出来上がりに比べて縦幅が小さい場合は、後で画像を入れて調整します。
  • 下に文字で練習と入っていますが、何もないとフッターにひっついてしまうので、フッターとの間を空けているだけです。
画像一枚目のプレビュー

旅客機の下の青い線を入れる

STEP
一枚目の画像の下に同じくフルワイドブロック
  • 1枚目の画像の下に段落を設け、フルワイドブロックを挿入。以下その右上部の設定。

以下のような設定にしてみました

  • PADDING量は0
  • 背景は、このサイトのメインカラーに合わせてみました。
  • 上下の境界線の形状で、ブロックの形を決めます。
仕切りの設定
STEP
プレビューで見るとこんな感
  • 下部が波のようになっています。形や大きさは変えられますので、お好きにどうぞ!
仕切りのプレビュー
STEP
「見出し」を段落に変更
見出しを段落へ
  • フルワイドブロックの入力画面では、挿入の仕方によって「見出し」と表示されている場合があります。これは「h2見出し」としてブロックが使える便利なものですが、この場合のように「h2見出し」として使わないのであれば、「空白見出し」になってSEO上よくありません。
  • 見出しボタンから「段落」を選択。
STEP
このようになっていれば大丈夫
見出しから段落に変わった画像

二枚目の画像を配置する

STEP
同じようにフルワイドブロックを挿入
  • 下部の段落を設け、同じようにフルワイドブロックを挿入
  • 二枚目の画像も一枚目と同じやり方で挿入します。
STEP
詳細設定します
  • 以下のように設定
  • 背景効果を固定背景に設定・・・画像が固定され、スクロールすると動いて見えるような仕組み(PCでは動いていますが、自分のSP(スマホ)では効果が確認できませんでした)
二枚目の画像の設定
STEP
プレビューで見るとこんな感
プレビューを確認

一番下の見出しを入れてみる

STEP
見出しブロック挿入
  • 「【このページは、参考資料です】SWELLのLPページの作り方」という見出しブロックを設置してみます。
  • 上部と同じように段落を設けフルワイドブロックを挿入
STEP
詳細設定します
  • こんな感じで設定してみました
見出しの設定
STEP
見出し文字入力
  • 今回は見出しとして使うので、ここに文字を入力します。文字色も変えれますよ!
見出し文字入力
STEP
プレビューで見るとこんな感じ
チョイジジ

だいぶいい感じになってきたね!

プレビューで確認

最初の画像に文字と画像を重ねる

STEP
カラムブロックを利用
  • 「ブロック挿入ツールを切り替え」から、「カラム」を選択
  • 文字と今回は、アイキャッチ画像を両側へ配置
  • これにより画像の縦幅が大きくなりました。
カラムブロック挿入
STEP
プレビューで見るとこんな感じ
  • 全体をプレビューでみてみます。
プレビューで確認

この後は、同じように設置すればできます。

代表的な使用方法は、上記のようなものです。

中盤以降は、形を変えたり大きさを変えたりしているだけなので、応用すれば簡単に作成することができます。

LPページと投稿ページの違い

このように、同じドメイン内のブログなのに、LPページはいつもと全く違った雰囲気のページを作成することができます。

ただ投稿ページとは性質が異なるため、ちょっと知っておいた方がいい特徴もあるのですよね!

特に、留意する点だけ挙げておきますね。

  • 1カラムしか設定がない
  • 投稿一覧には、含まれない
  • 最新情報や人気情報に関連がない
  • カテゴリー分けできない

など、記事LPページは、どちらかと言うと固定ページに似ているかもしれません。

でも、これだけ使い易いSWELLのLPページですから、工夫次第でいろんな場面で使えますよね!

SWELLでの記事LPページの作り方でよくある Q&A

LP(ランディングページ)とは何ですか?

LPは、特定の目的(商品購入、問い合わせ、登録など)のために作られる1ページ完結型の縦長Webページです。

ブログでLPページを使うメリットは何ですか?

特定の記事やキャンペーンを目立たせ、コンバージョン率を向上させることができます。

LPページは通常の記事ページと何が違いますか?

LPページはデザインや構成が自由で、特定のゴール(CTA)を目指して作られます。

SWELLでLPページを使う際の利点は?

コード知識がなくても、直感的な操作でおしゃれなLPページを簡単に作成できます。

LPページで重要なデザイン要素は何ですか?

強力な見出し、魅力的なビジュアル、CTAボタンの配置がポイントです。

LPページにおしゃれ感を出すには?

色の一貫性、適切なホワイトスペース、アイコンやイラストの活用が効果的です。

LPページをどのように活用できますか?

キャンペーン告知、サービス案内、特定商品の販売促進に使えます。

ブログ内の他の記事からLPページへのリンクを貼るべきですか?

はい、関連性のある記事からリンクを貼ることで、訪問者を効率的に誘導できます。

SWELLのLPページテンプレートにSEOは適用されますか?

はい、SWELLはSEOに配慮した構造になっているため、LPページでもSEO対策が可能です。

LPページをスマートフォン向けに最適化するには?

SWELLはレスポンシブ対応しているので特別な設定は不要ですが、画像や文字サイズに注意してチェックしてください。

SWELLブログを一番速く、簡単に始める方法【オススメ】

WordPressブログを始めるには、「レンタルサーバー」「ドメイン」「WordPressテーマ」が必要です。当サイトのオススメは・・・・

レンタルサーバーとドメイン

エックスサーバー

WordPress「テーマ」

SWELL

エックスサーバーの「WordPress クイックスタート」を利用するとすぐにSWELLブログを始められます!

👉エックスサーバーの「WordPress クイックスタート」を利用すれば、レンタルサーバーの申し込み時に、SWELLも一緒に購入することができ、ドメインの取得・設定、WordPressのインストール、SWELLのインストールまで、一気に完了させることができます。運用管理も一括ですから本当にオススメです!(SWELLも割引価格で購入可能)

  • エックスサーバーは、国内で最も信頼される高性能なサーバーであり、これから初めてブログ運営をされる方は、エックスサーバーを選んでおけば間違いありません。
  • 価格面においても最初から必要なものが全部そろっており、後から機能を追加することもありませんので、返ってコストパフォーマンスが高いと言えます。

エックスサーバーの「WordPress クイックスタート」でSWELLブログの始め方については、『申し込み〜ブログ開設まで』の手順を詳しく解説していますので、コチラをご参照ください!

簡単・安心、エックスサーバー

¥ 693円/月〜・2025年1月7日(火)17:00まで…

高性能なレンタルサーバーを個人でも利用できる。WordPewssでブログを始めるならエックスサーバーが最適解。しかもコスパNo.1!

\ 公式サイトは、コチラ! /

\ わかり易く解説! /

尚、現在ブログを運営している方、又、レンタルサーバーを既に契約されていて【SWELLを単体で購入したい方】は、コチラ!

まとめ:SWELLでの記事LPページの作り方(おしゃれ編)

貴重なお時間を割いてご覧いただき、ありがとうございます。😊

SWELLを使えば、LPページの制作が驚くほど簡単でおしゃれなデザインに仕上がります。記事内で紹介したポイントを押さえれば、特別感のあるページを手軽に作成可能!

LPページをうまく活用することで、ブログ全体の印象が向上し、目的に応じたコンバージョンを実現できます。初心者の方も、少しずつ作りながらコツをつかんでいけば大丈夫。

さあ、あなたのブログをさらに魅力的にするLPページ制作を始めてみませんか?これまでにない可能性を広げるチャンスです。ぜひ楽しみながら挑戦してみてください!

具体的に気になる記事箇所をチェックするのはコチラ

ブログ運営者にはあまり馴染みのないLPですが、上手に使うことができればいつもと雰囲気の違うページを作ることが可能です。ぜひ参考にしてください

動画を活用してみましょう!・・

せっかくブログに直接動画が貼れるのに、ほぼ活用できる場面がないのはもったいないなと思って今回ちょっと挑戦してみました。ブログに動画を有効に使う方法を「オススメします」なんて決して言えないですが、こんな考え方もあるのだなと思っていただければ幸いです。よかったら参考にしてくださいね!

また、「SWELLでの記事LPページの作り方(おしゃれ編)」が終わりましたら、次は「配色パターンや色使いで、ブログ訪問者の早期離脱防止」を確認してみましょう。

詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。

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