今こそオンラインでビジネスを。EC強化に最適、ランディングページをプレゼント

7都市でとうとう緊急事態宣言の発令となり、より人の動き、経済が停滞しているかと思います。
私も3月頭からテレワークとなりすっかり外に出る機会が減ってしまい、食材などは除き、ますますオンラインでの買い物が増えたように思います。

そんなこともあり、ECの重要性の高まりをひしひしと感じているところで、デジタルステージという立場で何かお役に立てればと思い、今回はホームページ制作サービス「BiNDup」で使えるキャンペーンLP※のサイトデータをご用意いたしました！
※LP＝ランディングページの略。広告や検索からの飛び先として用意する購入を促すことに特化したページのこと。

実店舗営業が難しい今こそ、Webの力で乗り越えましょう！

和風テイストのキャンペーン向けLPデザイン

ご用意したLPはこのようなものになります。

サンプルを見る

デザインのポイント・解説

以下の点・こだわりポイントなどを設定も交えて簡単にご紹介。
先にお伝えすると、以前の記事でも紹介した「高度な設定」の「before要素」・「after要素」を利用している点がいくつかありますのでご了承ください。

縦書き

キャンペーンページというと、ベタで賑やかなデザインが多い印象ですが、今回は渋めに和風テイストで作ってみました。
落ち着いたデザインながらも、アクセントを加えればきちんと印象付けることができます。今回は、その一つとして縦書きを導入しました。

縦書きにしている点は下記２つ。

• ロゴ
• 大見出し

ロゴもテキストで表現（Webフォント＋縦書き）

縦書きの設定自体はDressで簡単にできますが、横方向に中央寄せしたい場合には少しコツが要ります。
基本は、「段落スタイル」の「文字の方向」を「縦書き」に変更するだけですが、中央寄せの場合は加えて下記も設定します。

• 変形：translateX(-50%)
• 位置（左位置）：50%

配置と変形によって横中央寄せを実現

丸いアクセント

一部の○パーツは「before要素」・「after要素」を利用しています。
ページタイトルや、大見出しに「赤い枠の丸」（before要素）と「ベタ塗りの丸」（after要素）の２種類を用意して重ねています。詳しくはDress設定をご確認ください。

画像のアクセント

次のこだわりポイントは画像の見せ方です。
ただ画像を配置するのではなく、細めラインを重ねて短調さを解消、視線誘導、高級感を出してみました。

画像の囲み＞after要素

こちらも「after要素」を利用しています。after要素で画像と同じサイズのボックスを用意して重ねることで表現しています。

配色

今回のキーカラーは赤に設定していますが、単純に同じ赤が並ぶと情報に差がつけにくいのでトーンを変えて差別化させています。
こちらは単純にDressカラーを３色用意してカラム毎で背景色を設定しています。

背景パターン

ロゴに合わせた○をモチーフにしたよくある和柄パターンですが、実は２種類の画像を組み合わせています。上下でパターンを切り分けることで短調になりやすいパターン素材に少しアクセントを用意しました。

同じパターンでの印象の違い

下ブロックはタイル状に並べた通常のパターンだが、上ブロックは途中からパターンが展開されるように調整

ウィジェット

今回はLPでしたので、購買コンバージョンを高めるために「送料無料」のボタンを追加。
こちらは「ウィジェット機能」を利用しています。

ボタン自体は「リンクボタン」をカスタマイズしています。「詳細な設定」から文字サイズと角丸の設定などを加えてデザインを調整しています。

スマホの場合

スマホの場合はウィジェットだと場所を取り過ぎたので、ヘッダーにブロックを追加して見せ方を変えています。

サイトデータ配布

ということで、実際に作成したサイトデータをお渡ししたいと思います。
新型コロナの影響で色々と大変なこともあるかと思いますが、今回のLPが少しでも役立てば幸いです。

以下よりログインしてお使いください。